typography page first tab

+ hljs component

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",

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",

src/app/core/components/hljs/hljs.component.scss

@@ -0,0 +1,3 @@
+:host {
+
+}

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 =
+            `<pre><code class="highlight">` + this.hljs.highlight(this.lang, this.source).value + `</code></pre>`;
+    }
+}

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: [

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 {

src/app/core/scss/partials/plugins/_highlight.scss

@@ -0,0 +1,124 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+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;
+}

src/app/core/scss/partials/plugins/_plugins.scss

@@ -1,2 +1,3 @@
+@import "highlight";
 @import "perfect-scrollbar";
 @import "ngx-datatable";

src/app/main/content/apps/contacts/contacts.component.html

@@ -1,7 +1,7 @@
-<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" fxfxLayout="column">
+<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" fxLayout="column">
 
     <!-- HEADER -->
-    <div class="header md-accent-bg p-24" fxfxLayout="row" fxLayoutAlign="space-between center">
+    <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="space-between center">
 
         <!-- APP TITLE -->
         <div fxLayout="row" fxLayoutAlign="start center">

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;

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;
                 }
 

src/app/main/content/pages/authentication/lock/lock.component.scss

@@ -28,7 +28,7 @@
                 }
 
                 .title {
-                    font-size: 17px;
+                    font-size: 20px;
                     margin-bottom: 8px;
                 }
 

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;
                 }
 

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;
                 }
 

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;
                 }
 

src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html

@@ -3,10 +3,14 @@
     <md-sidenav-container>
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened p-24" align="start" opened="true" mode="side"
+        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
 
-            <fuse-demo-sidenav></fuse-demo-sidenav>
+            <div class="sidenav-content p-24" perfect-scrollbar>
+
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+
+            </div>
 
         </md-sidenav>
         <!-- / SIDENAV -->

src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html

@@ -33,10 +33,14 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened p-24" align="end" opened="true" mode="side"
+        <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-right-sidenav" md-is-locked-open="gt-md">
 
-            <fuse-demo-sidenav></fuse-demo-sidenav>
+            <div class="sidenav-content p-24" perfect-scrollbar>
+
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+
+            </div>
 
         </md-sidenav>
         <!-- / SIDENAV -->

src/app/main/content/ui/typography/typography.component.html

@@ -1 +1,291 @@
-typography
+<div id="typography" class="page-layout simple tabbed" fxLayout="column">
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">User Interface</span>
+            </div>
+            <div class="h2 mt-16">Typography</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content">
+
+        <md-tab-group md-dynamic-height="true">
+
+            <md-tab label="Headings">
+
+                <div class="p-24">
+
+                    <div class="mat-title">Material design typography classes</div>
+
+                    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">112px</div>
+                                <span class="mat-display-4">Display 4</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="mat-display-4">Display 4</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">56px</div>
+                                <span class="mat-display-3">Display 3</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="mat-display-3">Display 3</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">45px</div>
+                                <span class="mat-display-2">Display 2</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="mat-display-2">Display 2</span>'>
+                            </fuse-hljs>
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">34px</div>
+                                <span class="mat-display-1">Display 1</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="mat-display-1">Display 1</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">24px</div>
+                                <span class="mat-headline">Headline</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="md-headline">Headline</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">20px</div>
+                                <span class="mat-title">Title</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="md-title">Title</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">16px</div>
+                                <span class="mat-subheading-2">Subheading 2</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="mat-subheading-2">Subheading 2</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">15px</div>
+                                <span class="mat-subheading-1">Subheading 1</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="mat-subheading-1">Subheading 1</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">14px</div>
+                                <span class="mat-body-1">Body 1</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="mat-body-1">Body 1</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">14px</div>
+                                <span class="mat-body-2">Body 2</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="mat-body-2">Body 2</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">12px</div>
+                                <span class="mat-caption">Caption</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50"
+                                       source='<span class="mat-caption">Caption</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                    </div>
+
+                    <div class="mat-title mt-20">Standard Headings</div>
+
+                    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">24px</div>
+                                <span class="h1">Heading 1</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50" source='<h1>Heading 1</h1><span class="h1">Heading 1</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">20px</div>
+                                <span class="h2">Heading 2</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50" source='<h2>Heading 2</h2><span class="h2">Heading 2</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">16px</div>
+                                <span class="h3">Heading 3</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50" source='<h3>Heading 3</h3><span class="h3">Heading 3</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">15px</div>
+                                <span class="h4">Heading 4</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50" source='<h4>Heading 4</h4><span class="h4">Heading 4</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">13px</div>
+                                <span class="h5">Heading 5</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50" source='<h5>Heading 5</h5><span class="h5">Heading 5</span>'>
+                            </fuse-hljs>
+                        </div>
+
+                        <div fxLayout="column" fxLayout.gt-md="row">
+
+                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                                <div class="mat-caption secondary-text">12px</div>
+                                <span class="h6">Heading 6</span>
+                            </div>
+
+                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                                       fxFlex="50" source='<h6>Heading 6</h6><span class="h6">Heading 6</span>'>
+                            </fuse-hljs>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </md-tab>
+
+            <md-tab label="Inline Text Elements">
+
+
+            </md-tab>
+
+            <md-tab label="Blockquotes & Lists">
+
+
+            </md-tab>
+
+            <md-tab label="Helpers">
+
+
+            </md-tab>
+
+        </md-tab-group>
+
+    </div>
+    <!-- / CONTENT -->
+
+</div>

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;
+                }
+            }
+        }
+    }
 }

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

src/app/main/main.component.scss

@@ -18,6 +18,7 @@ fuse-main {
                 display: flex;
                 flex: 1;
                 flex-direction: column;
+                overflow: hidden;
 
                 #wrapper {
                     display: flex;