diff --git a/package-lock.json b/package-lock.json index 53e4efb1..2358f288 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4191,6 +4191,11 @@ "heimdalljs": "0.2.5" } }, + "highlight.js": { + "version": "9.12.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", + "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=" + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", diff --git a/package.json b/package.json index 2b1ca5cb..765ba6c4 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "core-js": "^2.4.1", "firebase": "^4.2.0", "hammerjs": "^2.0.8", + "highlight.js": "^9.12.0", "moment": "^2.18.1", "ngx-color-picker": "^4.2.0", "ngx-perfect-scrollbar": "^4.5.2", diff --git a/src/app/core/components/hljs/hljs.component.scss b/src/app/core/components/hljs/hljs.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/core/components/hljs/hljs.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/core/components/hljs/hljs.component.ts b/src/app/core/components/hljs/hljs.component.ts new file mode 100644 index 00000000..fa49254c --- /dev/null +++ b/src/app/core/components/hljs/hljs.component.ts @@ -0,0 +1,33 @@ +import { Component, ElementRef, Input, OnInit } from '@angular/core'; +import * as hljs from 'highlight.js'; + +@Component({ + selector : 'fuse-hljs', + template : ' ', + styleUrls: ['./hljs.component.scss'] +}) +export class FuseHljsComponent implements OnInit +{ + hljs: any; + + @Input('source') source: any; + @Input('lang') lang: string; + + constructor( + private elementRef: ElementRef + ) + { + this.hljs = hljs; + } + + ngOnInit() + { + if ( !this.source && this.lang ) + { + return; + } + + this.elementRef.nativeElement.innerHTML = + `
` + this.hljs.highlight(this.lang, this.source).value + `
`; + } +} diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index a16e4cb5..3d12e15f 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -18,13 +18,15 @@ import { FuseLayoutService } from '../services/layout.service'; import { FuseMatchMedia } from '../services/match-media.service'; import { FuseNavbarService } from '../../main/navbar/navbar.service'; import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service'; +import { FuseHljsComponent } from '../components/hljs/hljs.component'; @NgModule({ declarations : [ FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective, FuseConfirmDialogComponent, - FuseCountdownComponent + FuseCountdownComponent, + FuseHljsComponent ], imports : [ FlexLayoutModule, @@ -51,6 +53,7 @@ import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-s ColorPickerModule, NgxDnDModule, FuseCountdownComponent, + FuseHljsComponent, NgxDatatableModule ], entryComponents: [ diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss index a7be38a2..ebabfadf 100644 --- a/src/app/core/scss/partials/_page-layouts.scss +++ b/src/app/core/scss/partials/_page-layouts.scss @@ -311,10 +311,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too .sidenav { - &.md-is-locked-open { - height: auto; - } - .sidenav-content { height: 100%; } @@ -366,6 +362,10 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too transition: none; } } + + .sidenav-content { + height: 100%; + } } .mat-sidenav-content { diff --git a/src/app/core/scss/partials/plugins/_highlight.scss b/src/app/core/scss/partials/plugins/_highlight.scss new file mode 100644 index 00000000..a721a67c --- /dev/null +++ b/src/app/core/scss/partials/plugins/_highlight.scss @@ -0,0 +1,124 @@ +/* + +github.com style (c) Vasily Polovnyov + +*/ + +hljs , +[hljs] { + display: block; + overflow-x: auto; +// padding: 0.5em; + color: #333; + background: #f8f8f8; + -webkit-text-size-adjust: none; +} + +.hljs-comment, +.diff .hljs-header { + color: #998; + font-style: italic; +} + +.hljs-keyword, +.css .rule .hljs-keyword, +.hljs-winutils, +.nginx .hljs-title, +.hljs-subst, +.hljs-request, +.hljs-status { + color: #333; + font-weight: bold; +} + +.hljs-number, +.hljs-hexcolor, +.ruby .hljs-constant { + color: #008080; +} + +.hljs-string, +.hljs-tag .hljs-value, +.hljs-doctag, +.tex .hljs-formula { + color: #d14; +} + +.hljs-title, +.hljs-id, +.scss .hljs-preprocessor { + color: #900; + font-weight: bold; +} + +.hljs-list .hljs-keyword, +.hljs-subst { + font-weight: normal; +} + +.hljs-class .hljs-title, +.hljs-type, +.vhdl .hljs-literal, +.tex .hljs-command { + color: #458; + font-weight: bold; +} + +.hljs-tag, +.hljs-tag .hljs-title, +.hljs-rule .hljs-property, +.django .hljs-tag .hljs-keyword { + color: #000080; + font-weight: normal; +} + +.hljs-attribute, +.hljs-variable, +.lisp .hljs-body, +.hljs-name { + color: #008080; +} + +.hljs-regexp { + color: #009926; +} + +.hljs-symbol, +.ruby .hljs-symbol .hljs-string, +.lisp .hljs-keyword, +.clojure .hljs-keyword, +.scheme .hljs-keyword, +.tex .hljs-special, +.hljs-prompt { + color: #990073; +} + +.hljs-built_in { + color: #0086b3; +} + +.hljs-preprocessor, +.hljs-pragma, +.hljs-pi, +.hljs-doctype, +.hljs-shebang, +.hljs-cdata { + color: #999; + font-weight: bold; +} + +.hljs-deletion { + background: #fdd; +} + +.hljs-addition { + background: #dfd; +} + +.diff .hljs-change { + background: #0086b3; +} + +.hljs-chunk { + color: #aaa; +} \ No newline at end of file diff --git a/src/app/core/scss/partials/plugins/_plugins.scss b/src/app/core/scss/partials/plugins/_plugins.scss index ff43a35a..ae93f511 100644 --- a/src/app/core/scss/partials/plugins/_plugins.scss +++ b/src/app/core/scss/partials/plugins/_plugins.scss @@ -1,2 +1,3 @@ +@import "highlight"; @import "perfect-scrollbar"; @import "ngx-datatable"; \ No newline at end of file diff --git a/src/app/main/content/apps/contacts/contacts.component.html b/src/app/main/content/apps/contacts/contacts.component.html index b7053db6..0db9640a 100644 --- a/src/app/main/content/apps/contacts/contacts.component.html +++ b/src/app/main/content/apps/contacts/contacts.component.html @@ -1,7 +1,7 @@ -
+
-
+
diff --git a/src/app/main/content/components/datatable/ngx-datatable.component.ts b/src/app/main/content/components/datatable/ngx-datatable.component.ts index 73b7f985..78bc7d69 100644 --- a/src/app/main/content/components/datatable/ngx-datatable.component.ts +++ b/src/app/main/content/components/datatable/ngx-datatable.component.ts @@ -19,7 +19,7 @@ export class NgxDatatableComponent implements OnInit ngOnInit() { - this.http.get('api/contacts') + this.http.get('api/contacts-contacts') .subscribe(contacts => { this.rows = contacts.json().data; this.loadingIndicator = false; diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss index 21a35018..a2afbb87 100644 --- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss +++ b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss @@ -41,7 +41,7 @@ } .title { - font-size: 17px; + font-size: 20px; margin: 16px 0 32px 0; } diff --git a/src/app/main/content/pages/authentication/lock/lock.component.scss b/src/app/main/content/pages/authentication/lock/lock.component.scss index 28a3d1ef..c5d5da39 100644 --- a/src/app/main/content/pages/authentication/lock/lock.component.scss +++ b/src/app/main/content/pages/authentication/lock/lock.component.scss @@ -28,7 +28,7 @@ } .title { - font-size: 17px; + font-size: 20px; margin-bottom: 8px; } diff --git a/src/app/main/content/pages/authentication/login/login.component.scss b/src/app/main/content/pages/authentication/login/login.component.scss index 16a48f24..72b143c9 100644 --- a/src/app/main/content/pages/authentication/login/login.component.scss +++ b/src/app/main/content/pages/authentication/login/login.component.scss @@ -41,7 +41,7 @@ } .title { - font-size: 17px; + font-size: 20px; margin: 16px 0 32px 0; } diff --git a/src/app/main/content/pages/authentication/register/register.component.scss b/src/app/main/content/pages/authentication/register/register.component.scss index 086b3018..7b4b3797 100644 --- a/src/app/main/content/pages/authentication/register/register.component.scss +++ b/src/app/main/content/pages/authentication/register/register.component.scss @@ -41,7 +41,7 @@ } .title { - font-size: 17px; + font-size: 20px; margin: 16px 0 32px 0; } diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss b/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss index 88451321..e66db3a6 100644 --- a/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss +++ b/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss @@ -16,8 +16,8 @@ } #reset-password-form { - width: 384px; - max-width: 384px; + width: 400px; + max-width: 400px; padding: 32px; text-align: center; background: #FFFFFF; @@ -41,7 +41,7 @@ } .title { - font-size: 17px; + font-size: 20px; margin: 16px 0 32px 0; } diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html b/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html index ac9d11d6..b7eef1ec 100644 --- a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html +++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html @@ -3,10 +3,14 @@ - - +
+ + + +
diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html b/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html index 97fd6ae6..ad023c18 100644 --- a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html +++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html @@ -33,10 +33,14 @@ - - +
+ + + +
diff --git a/src/app/main/content/ui/typography/typography.component.html b/src/app/main/content/ui/typography/typography.component.html index 842906c6..4cc0daf4 100644 --- a/src/app/main/content/ui/typography/typography.component.html +++ b/src/app/main/content/ui/typography/typography.component.html @@ -1 +1,291 @@ -typography \ No newline at end of file +
+ + +
+
+
+ home + chevron_right + User Interface +
+
Typography
+
+
+ + + +
+ + + + + +
+ +
Material design typography classes
+ +
+ +
+ +
+
112px
+ Display 4 +
+ + + + +
+ +
+ +
+
56px
+ Display 3 +
+ + + + +
+ +
+ +
+
45px
+ Display 2 +
+ + + +
+ +
+ +
+
34px
+ Display 1 +
+ + + + +
+ +
+ +
+
24px
+ Headline +
+ + + + +
+ +
+ +
+
20px
+ Title +
+ + + + +
+ +
+ +
+
16px
+ Subheading 2 +
+ + + + +
+ +
+ +
+
15px
+ Subheading 1 +
+ + + + +
+ +
+ +
+
14px
+ Body 1 +
+ + + + +
+ +
+ +
+
14px
+ Body 2 +
+ + + + +
+ +
+ +
+
12px
+ Caption +
+ + + + +
+ +
+ +
Standard Headings
+ +
+ +
+ +
+
24px
+ Heading 1 +
+ + + + +
+ +
+ +
+
20px
+ Heading 2 +
+ + + + +
+ +
+ +
+
16px
+ Heading 3 +
+ + + + +
+ +
+ +
+
15px
+ Heading 4 +
+ + + + +
+ +
+ +
+
13px
+ Heading 5 +
+ + + +
+ +
+ +
+
12px
+ Heading 6 +
+ + + + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + +
+ + +
\ No newline at end of file diff --git a/src/app/main/content/ui/typography/typography.component.scss b/src/app/main/content/ui/typography/typography.component.scss index 8fdbe2d4..6f1e1604 100644 --- a/src/app/main/content/ui/typography/typography.component.scss +++ b/src/app/main/content/ui/typography/typography.component.scss @@ -1,3 +1,34 @@ :host { + #typography { + + .content { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } + } } \ No newline at end of file diff --git a/src/app/main/content/ui/typography/typography.module.ts b/src/app/main/content/ui/typography/typography.module.ts index 19f4ebb2..12c50460 100644 --- a/src/app/main/content/ui/typography/typography.module.ts +++ b/src/app/main/content/ui/typography/typography.module.ts @@ -13,7 +13,7 @@ const routes: Routes = [ @NgModule({ imports : [ SharedModule, - RouterModule.forChild(routes), + RouterModule.forChild(routes) ], declarations: [ TypographyComponent diff --git a/src/app/main/main.component.scss b/src/app/main/main.component.scss index 6156b367..974421cb 100644 --- a/src/app/main/main.component.scss +++ b/src/app/main/main.component.scss @@ -18,6 +18,7 @@ fuse-main { display: flex; flex: 1; flex-direction: column; + overflow: hidden; #wrapper { display: flex;