Merge branch 'master' into skeleton

.angular-cli.json

@@ -1,7 +1,7 @@
 {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "project": {
-        "name": "fuse2"
+        "name": "fuse"
     },
     "apps": [
         {
@@ -39,25 +39,19 @@
         {
             "project": "src/tsconfig.app.json",
             "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
+                "**/node_modules/**"
             ]
         },
         {
             "project": "src/tsconfig.spec.json",
             "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
+                "**/node_modules/**"
             ]
         },
         {
             "project": "e2e/tsconfig.e2e.json",
             "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
+                "**/node_modules/**"
             ]
         }
     ],

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "5.2.8",
+  "version": "5.2.10",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "5.2.8",
+  "version": "5.2.10",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",

src/@fuse/components/sidebar/sidebar.component.ts

@@ -1,11 +1,11 @@
-import { Component, ElementRef, HostBinding, HostListener, Inject, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subscription } from 'rxjs/Subscription';
 
 import { FuseSidebarService } from './sidebar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
-import { DOCUMENT } from '@angular/common';
+import { FuseConfigService } from '@fuse/services/config.service';
 
 @Component({
     selector     : 'fuse-sidebar',
@@ -21,7 +21,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
     // Align
     @Input()
-    align: string;
+    align: 'left' | 'right';
 
     // Open
     @HostBinding('class.open')
@@ -38,37 +38,91 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     // Folded
     @HostBinding('class.folded')
     @Input()
-    folded: boolean;
+    set folded(value: boolean)
+    {
+        // Only work if the sidebar is not closed
+        if ( !this.opened )
+        {
+            return;
+        }
+
+        // Set the folded
+        this._folded = value;
+
+        // Programmatically add/remove margin to the element
+        // that comes after or before based on the alignment
+        let sibling,
+            styleRule;
+
+        const styleValue = '64px';
+
+        // Get the sibling and set the style rule
+        if ( this.align === 'left' )
+        {
+            sibling = this.elementRef.nativeElement.nextElementSibling;
+            styleRule = 'marginLeft';
+        }
+        else
+        {
+            sibling = this.elementRef.nativeElement.previousElementSibling;
+            styleRule = 'marginRight';
+        }
+
+        // If there is no sibling, return...
+        if ( !sibling )
+        {
+            return;
+        }
+
+        // If folded...
+        if ( value )
+        {
+            // Set the style
+            this.renderer.setStyle(sibling, styleRule, styleValue);
+        }
+        // If unfolded...
+        else
+        {
+            // Remove the style
+            this.renderer.removeStyle(sibling, styleRule);
+        }
+    }
+
+    get folded(): boolean
+    {
+        return this._folded;
+    }
 
     // Folded unfolded
     @HostBinding('class.unfolded')
     unfolded: boolean;
 
     // Private
+    private _folded: boolean;
     private _wasActive: boolean;
     private _backdrop: HTMLElement | null = null;
     private _player: AnimationPlayer;
-    private _matchMediaWatcher: Subscription;
+    private _onMediaChangeSubscription: Subscription;
 
     /**
      * Constructor
      *
-     * @param renderer
-     * @param elementRef
-     * @param animationBuilder
-     * @param sidebarService
-     * @param matchMedia
-     * @param media
-     * @param document
+     * @param {Renderer2} renderer
+     * @param {ElementRef} elementRef
+     * @param {AnimationBuilder} animationBuilder
+     * @param {ObservableMedia} observableMedia
+     * @param {FuseConfigService} fuseConfigService
+     * @param {FuseSidebarService} fuseSidebarService
+     * @param {FuseMatchMediaService} fuseMatchMediaService
      */
     constructor(
         private renderer: Renderer2,
         private elementRef: ElementRef,
         private animationBuilder: AnimationBuilder,
-        private sidebarService: FuseSidebarService,
-        private matchMedia: FuseMatchMediaService,
-        private media: ObservableMedia,
-        @Inject(DOCUMENT) private document: any
+        private observableMedia: ObservableMedia,
+        private fuseConfigService: FuseConfigService,
+        private fuseSidebarService: FuseSidebarService,
+        private fuseMatchMediaService: FuseMatchMediaService
     )
     {
         // Set the defaults
@@ -83,7 +137,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     ngOnInit(): void
     {
         // Register the sidebar
-        this.sidebarService.register(this.name, this);
+        this.fuseSidebarService.register(this.name, this);
 
         // Setup alignment
         this._setupAlignment();
@@ -97,27 +151,35 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      */
     ngOnDestroy(): void
     {
-        // Unregister the sidebar
-        this.sidebarService.unregister(this.name);
+        // If the sidebar is folded, unfold it to revert modifications
+        if ( this.folded )
+        {
+            this.unfold();
+        }
 
-        // Unregister the media watcher
-        this._matchMediaWatcher.unsubscribe();
+        // Unregister the sidebar
+        this.fuseSidebarService.unregister(this.name);
+
+        // Unsubscribe from the media watcher subscription
+        this._onMediaChangeSubscription.unsubscribe();
     }
 
     /**
-     * Setup the alignment
+     * Set the sidebar alignment
      *
      * @private
      */
     private _setupAlignment(): void
     {
-        if ( this.align === 'left' )
+        // Add the correct class name to the sidebar
+        // element depending on the align attribute
+        if ( this.align === 'right' )
         {
-            this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned');
+            this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
         }
         else
         {
-            this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
+            this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned');
         }
     }
 
@@ -138,12 +200,12 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         this._wasActive = false;
 
         // Act on every media change
-        this._matchMediaWatcher =
+        this._onMediaChangeSubscription =
 
-            this.matchMedia.onMediaChange.subscribe(() => {
+            this.fuseMatchMediaService.onMediaChange.subscribe(() => {
 
                 // Get the active status
-                const isActive = this.media.isActive(this.lockedOpen);
+                const isActive = this.observableMedia.isActive(this.lockedOpen);
 
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )
@@ -151,14 +213,24 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                     return;
                 }
 
-                // Store the new active status
-                this._wasActive = isActive;
-
                 // Activate the lockedOpen
                 if ( isActive )
                 {
                     // Set the lockedOpen status
                     this.isLockedOpen = true;
+
+                    // Force the the opened status to true
+                    this.opened = true;
+
+                    // Read the folded setting from the config
+                    // and fold the sidebar if it's true
+                    if ( this.fuseConfigService.config.layout.navigationFolded )
+                    {
+                        this.fold();
+                    }
+
+                    // Hide the backdrop if any exists
+                    this.hideBackdrop();
                 }
                 // De-Activate the lockedOpen
                 else
@@ -168,7 +240,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
                     // Unfold the sidebar in case if it was folded
                     this.unfold();
+
+                    // Force the the opened status to close
+                    this.opened = false;
                 }
+
+                // Store the new active status
+                this._wasActive = isActive;
             });
     }
 
@@ -187,9 +265,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
         // Set the opened status
         this.opened = true;
-
-        // Add a css class to the body
-        this.renderer.addClass(this.document.body, 'fuse-sidebar-opened');
     }
 
     /**
@@ -197,7 +272,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      */
     close(): void
     {
-        if ( !this.opened )
+        if ( !this.opened || this.isLockedOpen )
         {
             return;
         }
@@ -207,9 +282,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
         // Set the opened status
         this.opened = false;
-
-        // Remove the css class from the body
-        this.renderer.removeClass(this.document.body, 'fuse-sidebar-opened');
     }
 
     /**
@@ -241,9 +313,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
         // Unfold the sidebar temporarily
         this.unfolded = true;
-
-        // Add a css class to the body
-        this.renderer.addClass(this.document.body, 'fuse-sidebar-folded-unfolded');
     }
 
     /**
@@ -260,9 +329,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
         // Fold the sidebar back
         this.unfolded = false;
-
-        // Remove the css class from the body
-        this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded-unfolded');
     }
 
     /**
@@ -270,10 +336,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      */
     fold(): void
     {
-        this.folded = true;
+        // Only work if the sidebar is not folded
+        if ( this.folded )
+        {
+            return;
+        }
 
-        // Add a css class to the body
-        this.renderer.addClass(this.document.body, 'fuse-sidebar-folded');
+        // Fold
+        this.folded = true;
     }
 
     /**
@@ -281,10 +351,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      */
     unfold(): void
     {
-        this.folded = false;
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
 
-        // Remove the css class from the body
-        this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded');
+        // Unfold
+        this.folded = false;
     }
 
     /**

src/app/main/navbar/navbar.component.html

@@ -10,14 +10,12 @@
             </div>
 
             <button mat-button class="toggle-button-navbar mat-icon-button"
-                    (click)="toggleSidebarFolded('navbar')"
-                    fxHide.lt-lg>
+                    (click)="toggleSidebarFolded('navbar')" fxHide.lt-lg>
                 <mat-icon>menu</mat-icon>
             </button>
 
             <button mat-button class="toggle-button-navbar mat-icon-button"
-                    (click)="toggleSidebarOpened('navbar')"
-                    fxHide.gt-md>
+                    (click)="toggleSidebarOpened('navbar')" fxHide.gt-md>
                 <mat-icon>arrow_back</mat-icon>
             </button>
 

src/index.html

@@ -3,7 +3,7 @@
 
     <head>
 
-        <title>Fuse2 - Angular 5+ Material Design Admin Template</title>
+        <title>Fuse - Angular 5+ Material Design Admin Template</title>
         <base href="/">
 
         <meta charset="utf-8">