Merge branch 'master' into skeleton

package.json

@@ -1,17 +1,20 @@
 {
   "name": "fuse2",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --open",
     "start-hmr": "ng serve --hmr -e=hmr -sm=false",
     "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
     "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
+    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
     "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
+    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
   },
   "private": true,
   "dependencies": {
@@ -29,28 +32,28 @@
     "@angular/platform-browser": "5.1.2",
     "@angular/platform-browser-dynamic": "5.1.2",
     "@angular/router": "5.1.2",
-    "@ngx-translate/core": "9.0.2",
-    "@swimlane/ngx-charts": "7.0.1",
-    "@swimlane/ngx-datatable": "11.1.7",
-    "@swimlane/ngx-dnd": "3.1.0",
-    "angular-calendar": "0.23.0",
-    "angular-in-memory-web-api": "0.5.2",
-    "angular2-markdown": "1.6.0",
-    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.3",
-    "d3": "4.12.0",
-    "hammerjs": "2.0.8",
-    "highlight.js": "9.12.0",
-    "intl": "1.2.5",
-    "moment": "2.20.1",
     "@ngrx/effects": "4.1.1",
     "@ngrx/router-store": "4.1.1",
     "@ngrx/store": "4.1.1",
     "@ngrx/store-devtools": "4.1.1",
+    "@ngx-translate/core": "9.0.2",
+    "@swimlane/ngx-charts": "7.0.1",
+    "@swimlane/ngx-datatable": "11.1.7",
+    "@swimlane/ngx-dnd": "3.1.0",
+    "@types/prismjs": "1.9.0",
+    "angular-calendar": "0.23.0",
+    "angular-in-memory-web-api": "0.5.2",
+    "classlist.js": "1.1.20150312",
+    "core-js": "2.5.3",
+    "d3": "4.12.0",
+    "hammerjs": "2.0.8",
+    "intl": "1.2.5",
+    "moment": "2.20.1",
     "ngrx-store-freeze": "0.2.0",
     "ngx-color-picker": "5.3.0",
     "ngx-cookie-service": "1.0.9",
     "perfect-scrollbar": "1.3.0",
+    "prismjs": "1.9.0",
     "rxjs": "5.5.6",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.18"
@@ -75,6 +78,7 @@
     "protractor": "5.1.2",
     "ts-node": "3.2.2",
     "tslint": "5.7.0",
-    "typescript": "2.4.2"
+    "typescript": "2.4.2",
+    "webpack-bundle-analyzer": "2.9.1"
   }
 }

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

@@ -0,0 +1,6 @@
+:host {
+    display: block;
+    padding: 8px;
+    background: #263238;
+    cursor: text;
+}

src/app/core/components/highlight/highlight.component.ts

@@ -0,0 +1,102 @@
+import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import * as Prism from 'prismjs/prism';
+import './prism-languages';
+
+@Component({
+    selector : 'fuse-highlight',
+    template : ' ',
+    styleUrls: ['./highlight.component.scss']
+})
+export class FuseHighlightComponent implements OnInit
+{
+    @ContentChild('source') source: ElementRef;
+    @Input('lang') lang: string;
+    @Input('path') path: string;
+
+    constructor(
+        private elementRef: ElementRef,
+        private http: HttpClient
+    )
+    {
+    }
+
+    ngOnInit()
+    {
+        // If there is no language defined, return...
+        if ( !this.lang )
+        {
+            return;
+        }
+
+        // If the path is defined...
+        if ( this.path )
+        {
+            // Get the source
+            this.http.get(this.path, {responseType: 'text'}).subscribe((response) => {
+
+                // Highlight it
+                this.highlight(response);
+            });
+        }
+
+        // If the path is not defined and the source element exists...
+        if ( !this.path && this.source )
+        {
+            // Highlight it
+            this.highlight(this.source.nativeElement.value);
+        }
+    }
+
+    highlight(sourceCode)
+    {
+        // Split the source into lines
+        const sourceLines = sourceCode.split('\n');
+
+        // Remove the first and the last line of the source
+        // code if they are blank lines. This way, the html
+        // can be formatted properly while using fuse-highlight
+        // component
+        if ( !sourceLines[0].trim() )
+        {
+            sourceLines.shift();
+        }
+
+        if ( !sourceLines[sourceLines.length - 1].trim() )
+        {
+            sourceLines.pop();
+        }
+
+        // Find the first non-whitespace char index in
+        // the first line of the source code
+        const indexOfFirstChar = sourceLines[0].search(/\S|$/);
+
+        // Generate the trimmed source
+        let source = '';
+
+        // Iterate through all the lines
+        sourceLines.forEach((line, index) => {
+
+            // Trim the beginning white space depending on the index
+            // and concat the source code
+            source = source + line.substr(indexOfFirstChar, line.length);
+
+            // If it's not the last line...
+            if ( index !== sourceLines.length - 1 )
+            {
+                // Add a line break at the end
+                source = source + '\n';
+            }
+        });
+
+        // Generate the highlighted code
+        const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
+
+        // Replace the innerHTML of the component with the highlighted code
+        this.elementRef.nativeElement.innerHTML =
+            '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
+
+    }
+}
+

src/app/core/components/highlight/prism-languages.ts

@@ -0,0 +1,16 @@
+import 'prismjs/prism';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-diff';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-perl';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-typescript';

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

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

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

@@ -1,58 +0,0 @@
-import { Component, ContentChild, 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;
-
-    @ContentChild('source') source: ElementRef;
-    @Input('lang') lang: string;
-
-    constructor(
-        private elementRef: ElementRef
-    )
-    {
-        this.hljs = hljs;
-    }
-
-    ngOnInit()
-    {
-        const originalSource = this.source.nativeElement.value;
-
-        if ( !originalSource || !this.lang )
-        {
-            return;
-        }
-
-        // Split the source into lines
-        const sourceLines = originalSource.split('\n');
-
-        // Find the first non-whitespace char index in
-        // the first line of the source code
-        const indexOfFirstChar = sourceLines[0].search(/\S|$/);
-
-        // Generate the trimmed source
-        let source = '';
-
-        // Iterate through all the lines and trim the
-        // beginning white space depending on the index
-        sourceLines.forEach((line, index) => {
-
-            source = source + line.substr(indexOfFirstChar, line.length);
-
-            if ( index !== sourceLines.length - 1 )
-            {
-                source = source + '\n';
-            }
-        });
-
-        this.elementRef.nativeElement.innerHTML =
-            `<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
-    }
-}
-

src/app/core/modules/shared.module.ts

@@ -15,7 +15,7 @@ import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
-import { FuseHljsComponent } from '../components/hljs/hljs.component';
+import { FuseHighlightComponent } from '../components/highlight/highlight.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
@@ -29,7 +29,7 @@ import { TranslateModule } from '@ngx-translate/core';
         FuseMatSidenavTogglerDirective,
         FuseConfirmDialogComponent,
         FuseCountdownComponent,
-        FuseHljsComponent,
+        FuseHighlightComponent,
         FuseIfOnDomDirective,
         FusePerfectScrollbarDirective,
         FuseMaterialColorPickerComponent
@@ -54,7 +54,7 @@ import { TranslateModule } from '@ngx-translate/core';
         FuseMatSidenavTogglerDirective,
         FusePipesModule,
         FuseCountdownComponent,
-        FuseHljsComponent,
+        FuseHighlightComponent,
         FusePerfectScrollbarDirective,
         ReactiveFormsModule,
         ColorPickerModule,

src/app/core/scss/partials/_angular-material-fix.scss

@@ -20,8 +20,8 @@
 }
 
 .mat-pseudo-checkbox-checked:after {
-    width: 14px;
+    width: 14px !important;
-    height: 7px;
+    height: 7px !important;
 }
 
 // Fix: "Input underlines has wrong color opacity value"

src/app/core/scss/partials/_cards.scss

@@ -9,145 +9,47 @@
         min-width: 0;
     }
 
-    .card-rich-media {
+    // Buttons
-        position: relative;
+    .mat-button {
+        min-width: 0 !important;
+        padding: 0 8px !important;
+    }
 
-        .card-title {
+    // Button Toggle Group
-            position: absolute;
+    .mat-button-toggle-group,
-            right: 16px;
+    .mat-button-toggle-standalone {
-            bottom: 16px;
+        box-shadow: none !important;
-            left: 16px;
+    }
-            font-size: 20px;
+
-            color: white;
+    // Tabs
-        }
+    .mat-tab-labels {
-    }
+        justify-content: center;
-
+    }
-    .card-media-header {
+
-        display: flex;
+    .mat-tab-label {
-        padding: 16px;
+        min-width: 0 !important;
-        align-items: center;
+    }
-
+
-        &.medium {
+    // Divider
-            align-items: flex-start;
+    .card-divider {
-
+        border-top: 1px solid rgba(0, 0, 0, 0.12);
-            .card-rich-media {
+        margin: 16px;
-                width: 120px;
+
-                height: 120px;
+        &.light {
-            }
+            border-top-color: rgba(255, 255, 255, 0.12);
-        }
+        }
-
+
-        &.large {
+        &.full-width {
-            align-items: flex-start;
+            margin: 0;
-
-            .card-rich-media {
-                width: 160px;
-                height: 160px;
-            }
-        }
-
-        .card-primary-title {
-            padding: 0 16px 0 0;
-            flex: 1;
-        }
-
-        .card-rich-media {
-            width: 80px;
-            height: 80px;
-        }
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-avatar-header {
-        display: flex;
-        padding: 16px;
-        align-items: center;
-
-        .card-avatar {
-            width: 40px;
-            height: 40px;
-            border-radius: 100%;
-            margin-right: 16px;
-        }
-
-        .card-avatar-title {
-
-            .card-title {
-                font-size: 14px;
-                font-weight: bold;
-            }
-
-            .card-subtitle {
-                font-size: 13px;
-                font-weight: bold;
-            }
-        }
-    }
-
-    .card-primary-title {
-        padding: 16px;
-
-        .card-title {
-            font-size: 24px;
-        }
-
-        .card-subtitle {
-            font-size: 14px;
-        }
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-supporting-text {
-        padding: 16px;
-        font-size: 14px;
-        line-height: 1.75;
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-actions {
-        display: flex;
-        padding: 8px;
-
-        &.icon-buttons {
-            padding: 0 8px;
-        }
-
-        &.align-center {
-            justify-content: center;
-        }
-
-        &.align-right {
-            justify-content: flex-end;
-        }
-
-        .mat-button {
-            min-width: 0 !important;
-            padding: 0 8px !important;
-        }
-
-        .card-expander {
-            margin-left: auto;
-        }
-
-        + div {
-            padding-top: 0;
         }
     }
 
+    // Expand Area
     .card-expand-area {
         overflow: hidden;
 
-        .card-expanded-supporting-text {
+        .card-expanded-content {
             padding: 8px 16px 16px 16px;
-            font-size: 14px;
             line-height: 1.75;
         }
     }

src/app/core/scss/partials/_helpers.scss

@@ -1,9 +1,59 @@
+// ######################
+// POSITION HELPERS
+// ######################
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .position#{$infix}-relative {
+            position: relative;
+        }
+
+        .position#{$infix}-absolute {
+            position: absolute;
+        }
+
+        .position#{$infix}-static {
+            position: static;
+        }
+    }
+}
+
+// ####################################
+// ABSOLUTE POSITION ALIGNMENT HELPERS
+// ####################################
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .align#{$infix}-top {
+            top: 0;
+        }
+
+        .align#{$infix}-right {
+            right: 0;
+        }
+
+        .align#{$infix}-bottom {
+            bottom: 0;
+        }
+
+        .align#{$infix}-left {
+            left: 0;
+        }
+    }
+}
+
 // ######################
 // SIZE HELPERS
 // ######################
 @each $prop, $abbrev in (height: h, width: w) {
 
-    @for $index from 0 through 128 {
+    @for $index from 0 through 180 {
         $size: $index * 4;
         $length: #{$size}px;
 
@@ -28,7 +78,6 @@
 // ######################
 // SPACING HELPERS
 // ######################
-
 @each $breakpoint in map-keys($grid-breakpoints) {
 
     @include media-breakpoint-up($breakpoint) {
@@ -83,47 +132,45 @@
             }
 
             @if ($abbrev == m) {
-                @for $index from 0 through 64 {
-                    $size: $index * 4;
-                    $length: #{$size}px;
 
-                    // Some special margin utils for flex alignments
+                // Some special margin utils for flex alignments
-                    .m#{$infix}-auto {
+                .m#{$infix}-auto {
-                        margin: auto !important;
+                    margin: auto !important;
-                    }
+                }
 
-                    .mt#{$infix}-auto {
+                .mt#{$infix}-auto {
-                        margin-top: auto !important;
+                    margin-top: auto !important;
-                    }
+                }
 
-                    .mr#{$infix}-auto {
+                .mr#{$infix}-auto {
-                        margin-right: auto !important;
+                    margin-right: auto !important;
-                    }
+                }
 
-                    .mb#{$infix}-auto {
+                .mb#{$infix}-auto {
-                        margin-bottom: auto !important;
+                    margin-bottom: auto !important;
-                    }
+                }
 
-                    .ml#{$infix}-auto {
+                .ml#{$infix}-auto {
-                        margin-left: auto !important;
+                    margin-left: auto !important;
-                    }
+                }
 
-                    .mx#{$infix}-auto {
+                .mx#{$infix}-auto {
-                        margin-right: auto !important;
+                    margin-right: auto !important;
-                        margin-left: auto !important;
+                    margin-left: auto !important;
-                    }
+                }
 
-                    .my#{$infix}-auto {
+                .my#{$infix}-auto {
-                        margin-top: auto !important;
+                    margin-top: auto !important;
-                        margin-bottom: auto !important;
+                    margin-bottom: auto !important;
-                    }
                 }
             }
         }
     }
 }
 
-// Border helpers
+// ######################
+// BORDER HELPERS
+// ######################
 $border-style: 1px solid rgba(0, 0, 0, 0.12);
 
 .border,
@@ -162,3 +209,10 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
     border-top: $border-style;
     border-bottom: $border-style;
 }
+
+// ######################
+// BORDER RADIUS HELPERS
+// ######################
+.border-radius-100 {
+    border-radius: 100%;
+}

src/app/core/scss/partials/_material.scss

@@ -411,7 +411,6 @@ table {
                     color: rgba(0, 0, 0, 0.54);
                     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                     white-space: nowrap;
-                    min-width: 120px;
 
                     &:first-child {
                         padding-left: 24px;

src/app/core/scss/partials/_typography.scss

@@ -229,6 +229,22 @@ strong {
     }
 }
 
+.line-height-1 {
+    line-height: 1;
+}
+
+.line-height-1\.25 {
+    line-height: 1.25;
+}
+
+.line-height-1\.50 {
+    line-height: 1.5;
+}
+
+.line-height-1\.75 {
+    line-height: 1.75;
+}
+
 // Boxed text
 .text-boxed {
     border-radius: 2px;

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

@@ -1,124 +0,0 @@
-/*
-
-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,4 +1,4 @@
-@import "highlight";
+@import "prism";
 @import "perfect-scrollbar";
 @import "ngx-datatable";
 @import "ngx-color-picker";

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

@@ -0,0 +1,269 @@
+// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
+
+$base00: #263238;
+$base01: #2C393F;
+$base02: #62727A;
+$base03: #707880;
+$base04: #C9CCD3;
+$base05: #CDD3DE;
+$base06: #D5DBE5;
+$base07: #FFFFFF;
+$base08: #EC5F67;
+$base09: #EA9560;
+$base0A: #FFCC00;
+$base0B: #8BD649;
+$base0C: #80CBC4;
+$base0D: #89DDFF;
+$base0E: #82AAFF;
+$base0F: #EC5F67;
+
+$red: $base08;
+$orange: $base09;
+$yellow: $base0A;
+$green: $base0B;
+$cyan: $base0C;
+$blue: $base0D;
+$violet: $base0E;
+$magenta: $base0F;
+
+$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+$code-font-size: 14px;
+$code-line-height: 1.6;
+$code-background: $base00;
+$code-color: $base05;
+$code-color-fade: $base05;
+// $code-text-shadow: none; 
+$code-color-comment: $base02;
+$code-color-keyword: $base0B;
+$code-color-value: $base0C;
+$code-color-attr-name: $base09;
+$code-color-string: $base0C;
+$code-color-name: $base0A;
+$code-color-number: $base09;
+$code-color-variable: $base0D;
+$code-color-selector: $base0E;
+$code-color-property: $base0A;
+$code-color-important: $base08;
+$code-color-tag: $base0D;
+$code-color-atrule: $base0C;
+
+// @import "../partials/prism"; 
+/**
+ * Prism base code highlighter theme using Sass 
+ *
+ * @author @MoOx
+ * https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss
+ * slightly adapted by me, Bram de Haan
+ */
+
+// prism selector
+$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
+$code-selector-block: "pre[class*=\"language-\"]";
+$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
+
+// generic stuff
+$code-font-family: Menlo, Monaco, "Courier New", monospace !default;
+$code-font-size: 14px !default;
+$code-line-height: 1.6 !default;
+
+$code-tab-size: 4 !default;
+$code-hyphens: none !default;
+
+$code-block-padding: 12px !default;
+$code-inline-padding: 2px 6px !default;
+$code-border-radius: 0 !default;
+
+$code-border: none !default;
+$code-background: #2A2A2A !default;
+$code-color: #FFF !default;
+$code-color-fade: #BEBEC5 !default;
+// $code-text-shadow: 0 1px 0 #000 !default;
+$code-box-shadow: none !default;
+$code-color-property: #B58900 !default;
+$code-color-important: #CB4B16 !default;
+$code-color-tag: #268BD2 !default;
+$code-color-atrule: #2AA198 !default;
+$code-color-attr-name: #B65611 !default;
+
+// $code-linenums-padding:		7px !default;
+// $code-linenums-width: 			40px !default;
+// $code-linenums-background:		#444 !default;
+// $code-linenums-border-color:	#555 !default;
+// $code-linenums-border-width:	1px !default;
+
+@if $code-selector != null {
+    #{$code-selector} {
+        -moz-tab-size: $code-tab-size;
+        -o-tab-size: $code-tab-size;
+        tab-size: $code-tab-size;
+
+        -webkit-hyphens: $code-hyphens;
+        -moz-hyphens: $code-hyphens;
+        -ms-hyphens: $code-hyphens;
+        hyphens: $code-hyphens;
+
+        // whitespace management
+        white-space: pre; // fallback
+        white-space: pre-wrap;
+        word-break: break-all;
+        word-wrap: break-word;
+
+        font-family: $code-font-family;
+        font-size: $code-font-size;
+        line-height: $code-line-height;
+
+        color: $code-color;
+        // text-shadow: $code-text-shadow;
+        background: $code-background;
+    }
+}
+
+%code-background {
+    border-radius: $code-border-radius;
+    border: $code-border;
+    box-shadow: $code-box-shadow;
+}
+
+@if $code-selector-block != null {
+    #{$code-selector-block} {
+        @extend %code-background;
+        padding: $code-block-padding;
+    }
+}
+
+@if $code-selector-inline != null {
+    #{$code-selector-inline} {
+        @extend %code-background;
+        padding: $code-inline-padding;
+    }
+}
+
+// pre[class*="language-"],
+// :not(pre) > code[class*="language-"] {
+// 	background: $code-background;
+// }
+
+// prism tokens
+// 
+$code-color-comment: null !default;
+$code-color-keyword: null !default;
+$code-color-value: null !default;
+$code-color-string: null !default;
+$code-color-name: null !default;
+$code-color-number: null !default;
+$code-color-variable: null !default;
+$code-color-selector: null !default;
+$code-color-punctuation: $code-color-fade !default;
+
+#{$code-selector} {
+    .namespace {
+        opacity: .7;
+    }
+
+    .token {
+        &.comment,
+        &.prolog,
+        &.doctype,
+        &.cdata {
+            color: $code-color-comment;
+        }
+
+        &.null,
+        &.operator,
+        &.boolean,
+        &.number {
+            color: $code-color-number;
+        }
+
+        &.string {
+            color: $code-color-string;
+        }
+        &.attr-name {
+            color: $code-color-attr-name;
+        }
+
+        &.entity,
+        &.url,
+        .language-css &.string,
+        .style &.string {
+            color: $code-color-string;
+        }
+
+        &.selector {
+            color: $code-color-selector;
+        }
+
+        &.attr-value,
+        &.keyword,
+        &.control,
+        &.directive,
+        &.unit {
+            color: $code-color-keyword;
+        }
+        &.important {
+            color: $code-color-important;
+        }
+        &.atrule {
+            color: $code-color-atrule;
+        }
+
+        &.regex,
+        &.statement {
+            color: $code-color-value;
+        }
+
+        &.placeholder,
+        &.variable {
+            color: $code-color-variable;
+        }
+
+        &.property,
+        &.tag {
+            // font-style: italic;
+        }
+
+        &.property {
+            color: $code-color-property;
+        }
+        &.tag {
+            color: $code-color-tag;
+        }
+
+        &.important,
+        &.statement {
+            font-weight: bold;
+        }
+
+        // todo ?
+        // &.mixin
+        // &.gradient
+        // &.abslength
+        // &.easing
+        // &.time
+        // &.angle
+        // &.fontfamily
+
+        // ruby/vim https://github.com/LeaVerou/prism/pull/18
+        // &.inst-var
+        // &.builtin
+        // &.const
+        // &.symbol
+        //
+        // php https://github.com/LeaVerou/prism/pull/20
+        // &.deliminator
+        // &.function
+
+        &.punctuation {
+            color: $code-color-punctuation;
+        }
+
+        &.entity {
+            cursor: help;
+        }
+
+        // for dev :)
+        &.debug {
+            color: red
+        }
+    }
+}

src/app/main/toolbar/toolbar.component.html

@@ -36,7 +36,7 @@
                 </div>
             </button>
 
-            <mat-menu #userMenu="matMenu">
+            <mat-menu #userMenu="matMenu" [overlapTrigger]="false">
 
                 <button mat-menu-item>
                     <mat-icon>account_circle</mat-icon>
@@ -70,7 +70,7 @@
                 </div>
             </button>
 
-            <mat-menu #languageMenu="matMenu">
+            <mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
 
                 <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                     <div fxLayout="row" fxLayoutAlign="start center">