fuse2...

src/app/app.component.html

@@ -1 +1,12 @@
-<fuse-layout></fuse-layout>
+<md-sidenav-container>
+
+    <fuse-layout></fuse-layout>
+
+    <!-- QUICK PANEL -->
+    <md-sidenav id="quick-panel" #quickPanel [fuseMdSidenavHelper]="quickPanel" align="end">
+        quick-panel
+    </md-sidenav>
+    <!-- / QUICK PANEL -->
+
+</md-sidenav-container>
+

src/app/app.module.ts

@@ -1,25 +1,28 @@
-import {BrowserModule} from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
 import 'hammerjs';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {AppComponent} from './app.component';
+import { AppComponent } from './app.component';
-import {RouterModule, Routes} from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
-import {LayoutComponent} from './core/components/layout/layout.component';
+import { LayoutComponent } from './core/components/layout/layout.component';
-import {MailModule} from './main/apps/mail/mail.module';
+import { MailModule } from './main/apps/mail/mail.module';
-import {ChatModule} from './main/apps/chat/chat.module';
+import { ChatModule } from './main/apps/chat/chat.module';
-import {ProjectModule} from './main/apps/dashboards/project/project.module';
+import { ProjectModule } from './main/apps/dashboards/project/project.module';
-import {CardedFullWidthModule} from './main/ui/page-layouts/carded/fullwidth/fullwidth.module';
+import { CardedFullWidthModule } from './main/ui/page-layouts/carded/fullwidth/fullwidth.module';
-import {LayoutService} from './core/services/layout.service';
+import { LayoutService } from './core/services/layout.service';
-import {NavbarComponent} from './core/components/layout/navbar/navbar.component';
+import { NavbarComponent } from './core/components/layout/navbar/navbar.component';
-import {ToolbarComponent} from './core/components/layout/toolbar/toolbar.component';
+import { ToolbarComponent } from './core/components/layout/toolbar/toolbar.component';
-import {NavigationModule} from './core/components/navigation/navigation.module';
+import { NavigationModule } from './core/components/navigation/navigation.module';
-import {NavigationService} from './core/components/navigation/navigation.service';
+import { NavigationService } from './core/components/navigation/navigation.service';
-import {SidenavComponent} from './core/components/sidenav/sidenav.component';
+import { SidenavComponent } from './core/components/sidenav/sidenav.component';
-import {FuseMatchMedia} from './core/services/match-media.service';
+import { FuseMatchMedia } from './core/services/match-media.service';
-import {NavbarToggleDirective} from './core/components/layout/navbar/navbar-toggle.directive';
+import { NavbarToggleDirective } from './core/components/layout/navbar/navbar-toggle.directive';
-import {NavbarService} from './core/components/layout/navbar/navbar.service';
+import { NavbarService } from './core/components/layout/navbar/navbar.service';
 import { ContentComponent } from './core/components/layout/content/content.component';
 import { SharedModule } from './core/modules/shared.module';
+import { FooterComponent } from './core/components/layout/footer/footer.component';
+import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from './core/directives/md-sidenav-helper/md-sidenav-helper.directive';
+import { FuseMdSidenavHelperService } from './core/directives/md-sidenav-helper/md-sidenav-helper.service';
 
 const appRoutes: Routes = [
     {
@@ -36,7 +39,10 @@ const appRoutes: Routes = [
         NavbarComponent,
         SidenavComponent,
         NavbarToggleDirective,
-        ContentComponent
+        FuseMdSidenavHelperDirective,
+        FuseMdSidenavTogglerDirective,
+        ContentComponent,
+        FooterComponent
     ],
     imports     : [
         SharedModule,
@@ -49,7 +55,13 @@ const appRoutes: Routes = [
         ProjectModule,
         CardedFullWidthModule
     ],
-    providers   : [NavigationService, LayoutService, FuseMatchMedia, NavbarService],
+    providers   : [
+        NavigationService,
+        LayoutService,
+        FuseMatchMedia,
+        NavbarService,
+        FuseMdSidenavHelperService
+    ],
     bootstrap   : [AppComponent]
 })
 export class AppModule

src/app/core/components/layout/footer/footer.component.html

@@ -0,0 +1,5 @@
+<md-toolbar>
+
+  <span>Footer</span>
+
+</md-toolbar>

src/app/core/components/layout/footer/footer.component.scss

@@ -0,0 +1,7 @@
+:host {
+
+    &.above {
+        position: relative;
+        z-index: 99;
+    }
+}

src/app/core/components/layout/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'fuse-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/components/layout/layout.component.html

@@ -1,11 +1,35 @@
 <!-- TOOLBAR: Above -->
 <ng-container *ngIf="layoutSettings.toolbar === 'above'">
-    <fuse-toolbar></fuse-toolbar>
+    <fuse-toolbar class="above"></fuse-toolbar>
 </ng-container>
 <!-- / TOOLBAR: Above -->
 
 <div id="wrapper">
 
+    <!-- NAVIGATION: None -->
+    <ng-container *ngIf="layoutSettings.navigation === 'none'">
+
+        <div class="content-wrapper">
+
+            <!-- TOOLBAR: Below -->
+            <ng-container *ngIf="layoutSettings.toolbar === 'below'">
+                <fuse-toolbar class="below"></fuse-toolbar>
+            </ng-container>
+            <!-- / TOOLBAR: Below -->
+
+            <fuse-content></fuse-content>
+
+            <!-- FOOTER: Below -->
+            <ng-container *ngIf="layoutSettings.footer === 'below'">
+                <fuse-footer class="below"></fuse-footer>
+            </ng-container>
+            <!-- / FOOTER: Below -->
+
+        </div>
+
+    </ng-container>
+    <!-- / NAVIGATION: None -->
+
     <!-- NAVIGATION: Left -->
     <ng-container *ngIf="layoutSettings.navigation === 'left'">
 
@@ -13,15 +37,55 @@
 
         <div class="content-wrapper">
 
+            <!-- TOOLBAR: Below -->
             <ng-container *ngIf="layoutSettings.toolbar === 'below'">
-                <fuse-toolbar></fuse-toolbar>
+                <fuse-toolbar class="below"></fuse-toolbar>
             </ng-container>
+            <!-- / TOOLBAR: Below -->
 
             <fuse-content></fuse-content>
 
+            <!-- FOOTER: Below -->
+            <ng-container *ngIf="layoutSettings.footer === 'below'">
+                <fuse-footer class="below"></fuse-footer>
+            </ng-container>
+            <!-- / FOOTER: Below -->
+
         </div>
 
     </ng-container>
     <!-- / NAVIGATION: Left -->
 
+    <!-- NAVIGATION: Right -->
+    <ng-container *ngIf="layoutSettings.navigation === 'right'">
+
+        <div class="content-wrapper">
+
+            <!-- TOOLBAR: Below -->
+            <ng-container *ngIf="layoutSettings.toolbar === 'below'">
+                <fuse-toolbar class="below"></fuse-toolbar>
+            </ng-container>
+            <!-- / TOOLBAR: Below -->
+
+            <fuse-content></fuse-content>
+
+            <!-- FOOTER: Below -->
+            <ng-container *ngIf="layoutSettings.footer === 'below'">
+                <fuse-footer class="below"></fuse-footer>
+            </ng-container>
+            <!-- / FOOTER: Below -->
+
+        </div>
+
+        <fuse-navbar></fuse-navbar>
+
+    </ng-container>
+    <!-- / NAVIGATION: Right -->
+
 </div>
+
+<!-- FOOTER: Above -->
+<ng-container *ngIf="layoutSettings.footer === 'above'">
+    <fuse-footer class="above"></fuse-footer>
+</ng-container>
+<!-- FOOTER: Above -->

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

@@ -6,13 +6,16 @@
 
     #wrapper {
         display: flex;
+        flex: 1;
 
         .content-wrapper {
             display: flex;
+            flex-direction: column;
             flex: 1;
 
             fuse-content {
                 display: flex;
+                flex-direction: row;
                 width: 100%;
                 height: 100%;
                 overflow-x: hidden;

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

@@ -8,7 +8,7 @@ import { LayoutService } from '../../services/layout.service';
 })
 export class LayoutComponent implements OnInit
 {
-    layoutSettings: { toolbar: any, navigation: any };
+    layoutSettings: { navigation: string, toolbar: string, footer: string };
 
     constructor(private layoutService: LayoutService)
     {

src/app/core/components/layout/navbar/navbar-toggle.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, HostListener, Input} from '@angular/core';
+import { Directive, HostListener, Input } from '@angular/core';
 import {NavbarService} from './navbar.service';
 import {NavbarComponent} from './navbar.component';
 
@@ -16,7 +16,7 @@ export class NavbarToggleDirective
     }
 
     @HostListener('click')
-    onMouseEnter()
+    onClick()
     {
         if ( !this.navbar[this.fuseNavbar] )
         {

src/app/core/components/layout/navbar/navbar.component.scss

@@ -3,6 +3,8 @@
 :host {
     display: block;
     width: 256px;
+    min-width: 256px;
+    max-width: 256px;
     height: 100%;
     background-color: #FFFFFF;
     overflow-y: auto;
@@ -16,9 +18,9 @@
         position: absolute;
 
         &:not(.folded-open) {
-            width: 64px !important;
+            width: 64px;
-            min-width: 64px !important;
+            min-width: 64px;
-            max-width: 64px !important;
+            max-width: 64px;
         }
 
         &.folded-open {

src/app/core/components/layout/navbar/navbar.component.ts

@@ -1,9 +1,8 @@
-import {AfterViewInit, Component, ElementRef, HostBinding, HostListener, OnDestroy, OnInit} from '@angular/core';
+import { Component, HostBinding, HostListener, OnDestroy, OnInit } from '@angular/core';
-import {AppComponent} from '../../../../app.component';
+import { AppComponent } from '../../../../app.component';
-import {Subscription} from 'rxjs/Subscription';
+import { Subscription } from 'rxjs/Subscription';
-import {MatchMedia, MediaChange, MediaMonitor, ObservableMedia} from '@angular/flex-layout';
+import { FuseMatchMedia } from '../../../services/match-media.service';
-import {FuseMatchMedia} from '../../../services/match-media.service';
+import { NavbarService } from './navbar.service';
-import {NavbarService} from './navbar.service';
 
 @Component({
     selector   : 'fuse-navbar',
@@ -20,11 +19,11 @@ export class NavbarComponent implements OnInit, OnDestroy
 
     matchMediaWatcher: Subscription;
 
-    constructor(private elementRef: ElementRef,
+    constructor(
-                private bodyEl: AppComponent,
+        private bodyEl: AppComponent,
-                private observableMedia: ObservableMedia,
+        private fuseMatchMedia: FuseMatchMedia,
-                private fuseMatchMedia: FuseMatchMedia,
+        private navBarService: NavbarService
-                private navBarService: NavbarService)
+    )
     {
         navBarService.setNavBar(this);
         this.isClosed = false;
@@ -34,7 +33,6 @@ export class NavbarComponent implements OnInit, OnDestroy
 
         this.matchMediaWatcher = this.fuseMatchMedia.onMediaChange.subscribe((mediaStep) =>
         {
-            console.warn('Media step changed:', mediaStep);
             if ( mediaStep === 'xs' )
             {
                 this.closeBar();
@@ -48,14 +46,12 @@ export class NavbarComponent implements OnInit, OnDestroy
 
     openBar()
     {
-        console.info('opened');
         this.isClosed = false;
         this.updateCssClasses();
     }
 
     closeBar()
     {
-        console.info('closed');
         this.isClosed = true;
         this.updateCssClasses();
     }

src/app/core/components/layout/toolbar/toolbar.component.html

@@ -6,4 +6,8 @@
 
     <span>Toolbar</span>
 
+    <button md-button class="toggle-button-navbar mat-icon-button" fuseMdSidenavToggler="quick-panel">
+        <md-icon>menu</md-icon>
+    </button>
+
 </md-toolbar>

src/app/core/components/navigation/nav-collapse/nav-collapse.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NavCollapseComponent } from './nav-collapse.component';
-
-describe('NavCollapseComponent', () => {
-  let component: NavCollapseComponent;
-  let fixture: ComponentFixture<NavCollapseComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NavCollapseComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NavCollapseComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/core/components/navigation/nav-item/nav-item.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NavItemComponent } from './nav-item.component';
-
-describe('NavItemComponent', () => {
-  let component: NavItemComponent;
-  let fixture: ComponentFixture<NavItemComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NavItemComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NavItemComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts

@@ -0,0 +1,44 @@
+import { Directive, Input, OnInit, HostListener, ElementRef } from '@angular/core';
+import { MdSidenav } from '@angular/material';
+import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
+
+@Directive({
+    selector: '[fuseMdSidenavHelper]'
+})
+export class FuseMdSidenavHelperDirective implements OnInit
+{
+    @Input('fuseMdSidenavHelper') mdSidenavInstance: MdSidenav;
+
+    constructor(
+        private fuseMdSidenavService: FuseMdSidenavHelperService,
+        private elRef: ElementRef
+    )
+    {
+
+    }
+
+    ngOnInit()
+    {
+        this.fuseMdSidenavService.setSidenav(this.elRef.nativeElement.id, this.mdSidenavInstance);
+    }
+}
+
+@Directive({
+    selector: '[fuseMdSidenavToggler]'
+})
+export class FuseMdSidenavTogglerDirective
+{
+    @Input('fuseMdSidenavToggler') id;
+    instance: MdSidenav;
+
+    constructor(private fuseMdSidenavService: FuseMdSidenavHelperService)
+    {
+    }
+
+    @HostListener('click')
+    onClick()
+    {
+        this.instance = this.fuseMdSidenavService.getSidenav(this.id);
+        this.instance.toggle();
+    }
+}

src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { MdSidenav } from '@angular/material';
+
+@Injectable()
+export class FuseMdSidenavHelperService
+{
+    sidenavInstances: MdSidenav[];
+
+    constructor()
+    {
+        this.sidenavInstances = [];
+    }
+
+    setSidenav(id, instance)
+    {
+        this.sidenavInstances[id] = instance;
+    }
+
+    getSidenav(id)
+    {
+        return this.sidenavInstances[id];
+    }
+}

src/app/core/services/layout.service.ts

@@ -4,10 +4,10 @@ import { NavigationStart, Router } from '@angular/router';
 @Injectable()
 export class LayoutService
 {
-    defaultSettings: { toolbar: string, navigation: string };
+    defaultSettings: { navigation: string, toolbar: string, footer: string };
-    settings: { toolbar: string, navigation: string };
+    settings: { navigation: string, toolbar: string, footer: string };
 
-    onSettingsChanged = new EventEmitter<{ toolbar: string, navigation: string }>();
+    onSettingsChanged = new EventEmitter<{ navigation: string, toolbar: string, footer: string }>();
 
     /**
      * @param router
@@ -16,8 +16,9 @@ export class LayoutService
     {
         // Set the default settings
         this.defaultSettings = {
-            navigation: 'left', // 'right', 'left', 'top', false
+            navigation: 'left', // 'right', 'left', 'top', none
-            toolbar   : 'above' // 'above', 'below', false
+            toolbar   : 'above', // 'above', 'below', none
+            footer    : 'above' // 'above', 'below', none
         };
 
         // Assign default settings at the init
@@ -38,7 +39,7 @@ export class LayoutService
 
     /**
      * Get Settings
-     * @returns {{navigation: any, toolbar: any}}
+     * @returns {{navigation: string, toolbar: string, footer: string}}
      */
     getSettings()
     {

src/app/core/services/match-media.service.ts

@@ -1,20 +1,15 @@
-import { MediaChange, MediaMonitor, ObservableMedia } from '@angular/flex-layout';
+import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 import { Observable } from 'rxjs/Observable';
 import { Observer } from 'rxjs/Observer';
-import { EventEmitter, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
-import 'rxjs/add/operator/filter';
-import { Subscription } from 'rxjs/Subscription';
 
 @Injectable()
 export class FuseMatchMedia
 {
     activeMediaQuery: string;
     onMediaChange: Observable<string>;
-    // onMediaChange = new EventEmitter<string>();
-    watcher: Subscription;
 
-    constructor(private observableMedia: ObservableMedia,
+    constructor(private observableMedia: ObservableMedia)
-                private mediaMonitor: MediaMonitor)
     {
         this.activeMediaQuery = '';
 
@@ -22,56 +17,12 @@ export class FuseMatchMedia
         {
             this.observableMedia.subscribe((change: MediaChange) =>
             {
-
                 if ( this.activeMediaQuery !== change.mqAlias )
                 {
                     this.activeMediaQuery = change.mqAlias;
                     observer.next(this.activeMediaQuery);
-                    console.warn('From observableMedia:', change.mqAlias);
-
                 }
             });
         });
-        /*
-         this.mediaMonitor.observe('xs').subscribe((change: MediaChange) =>
-         {
-         console.warn('From mediaMonitor:', change);
-
-         if ( this.activeMediaQuery !== change.mqAlias )
-         {
-         // this.activeMediaQuery = change.mqAlias;
-
-
-         // this.onMediaChange.emit(this.activeMediaQuery);
-         }
-         });*/
-
-        /* this.observableMedia.subscribe((change: MediaChange) =>
-         {
-         console.warn('From observableMedia:', change.mqAlias);
-
-         if ( this.activeMediaQuery !== change.mqAlias )
-         {
-         this.activeMediaQuery = change.mqAlias;
-
-
-         this.onMediaChange.emit(this.activeMediaQuery);
-         }
-         });*/
-        /*this.observableMedia.asObservable()
-         .filter((change: MediaChange) => change.mqAlias === 'xs')
-         .subscribe(() =>
-         {
-         console.warn('From observableMedia:', this.activeMediaQuery);
-
-         this.onMediaChange.emit(this.activeMediaQuery);
-         });*/
-
-        /*  this.watcher = this.observableMedia.subscribe((change: MediaChange) =>
-         {
-         this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
-         console.warn('From Watcher:', change.mqAlias);
-
-         });*/
     }
 }

src/app/main/apps/dashboards/project/project.component.html

@@ -1,3 +1,180 @@
 <p>
-  project works!
+    project works!
 </p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+
+<p>
+    project works!
+</p>
+
+<br><br>
+

src/app/main/apps/dashboards/project/project.component.scss

@@ -1,4 +1,3 @@
 :host {
-    display: flex;
+    padding: 32px;
-    flex: 1;
 }

src/app/main/apps/dashboards/project/project.component.ts

@@ -1,4 +1,5 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { LayoutService } from '../../../../core/services/layout.service';
 
 @Component({
     selector   : 'fuse-project',
@@ -7,9 +8,13 @@ import {Component, OnInit} from '@angular/core';
 })
 export class ProjectComponent implements OnInit
 {
-
+    constructor(private layoutService: LayoutService)
-    constructor()
     {
+        this.layoutService.setSettings({
+            navigation: 'left',
+            toolbar   : 'above',
+            footer    : 'above'
+        });
     }
 
     ngOnInit()

src/app/main/apps/mail/mail.component.ts

@@ -1,5 +1,5 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import {LayoutService} from '../../../core/services/layout.service';
+import { LayoutService } from '../../../core/services/layout.service';
 
 @Component({
     selector   : 'fuse-mail',
@@ -12,8 +12,9 @@ export class MailComponent implements OnInit
     constructor(private layoutService: LayoutService)
     {
         this.layoutService.setSettings({
+            navigation: 'left',
             toolbar   : 'below',
-            navigation: 'left'
+            footer    : 'below'
         });
     }
 

tslint.json

@@ -117,8 +117,8 @@
         "use-input-property-decorator": true,
         "use-output-property-decorator": true,
         "use-host-property-decorator": true,
-        "no-input-rename": true,
+        "no-input-rename": false,
-        "no-output-rename": true,
+        "no-output-rename": false,
         "use-life-cycle-interface": true,
         "use-pipe-transform-interface": true,
         "component-class-suffix": true,