diff --git a/src/app/app.component.html b/src/app/app.component.html index bd8fbf88..1fd724e7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,12 @@ - + + + + + + + quick-panel + + + + + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4ac9c7eb..730e169e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,25 +1,28 @@ -import {BrowserModule} from '@angular/platform-browser'; -import {NgModule} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; import 'hammerjs'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {AppComponent} from './app.component'; -import {RouterModule, Routes} from '@angular/router'; -import {LayoutComponent} from './core/components/layout/layout.component'; -import {MailModule} from './main/apps/mail/mail.module'; -import {ChatModule} from './main/apps/chat/chat.module'; -import {ProjectModule} from './main/apps/dashboards/project/project.module'; -import {CardedFullWidthModule} from './main/ui/page-layouts/carded/fullwidth/fullwidth.module'; -import {LayoutService} from './core/services/layout.service'; -import {NavbarComponent} from './core/components/layout/navbar/navbar.component'; -import {ToolbarComponent} from './core/components/layout/toolbar/toolbar.component'; -import {NavigationModule} from './core/components/navigation/navigation.module'; -import {NavigationService} from './core/components/navigation/navigation.service'; -import {SidenavComponent} from './core/components/sidenav/sidenav.component'; -import {FuseMatchMedia} from './core/services/match-media.service'; -import {NavbarToggleDirective} from './core/components/layout/navbar/navbar-toggle.directive'; -import {NavbarService} from './core/components/layout/navbar/navbar.service'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { AppComponent } from './app.component'; +import { RouterModule, Routes } from '@angular/router'; +import { LayoutComponent } from './core/components/layout/layout.component'; +import { MailModule } from './main/apps/mail/mail.module'; +import { ChatModule } from './main/apps/chat/chat.module'; +import { ProjectModule } from './main/apps/dashboards/project/project.module'; +import { CardedFullWidthModule } from './main/ui/page-layouts/carded/fullwidth/fullwidth.module'; +import { LayoutService } from './core/services/layout.service'; +import { NavbarComponent } from './core/components/layout/navbar/navbar.component'; +import { ToolbarComponent } from './core/components/layout/toolbar/toolbar.component'; +import { NavigationModule } from './core/components/navigation/navigation.module'; +import { NavigationService } from './core/components/navigation/navigation.service'; +import { SidenavComponent } from './core/components/sidenav/sidenav.component'; +import { FuseMatchMedia } from './core/services/match-media.service'; +import { NavbarToggleDirective } from './core/components/layout/navbar/navbar-toggle.directive'; +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 diff --git a/src/app/core/components/layout/footer/footer.component.html b/src/app/core/components/layout/footer/footer.component.html new file mode 100644 index 00000000..8c48d3cc --- /dev/null +++ b/src/app/core/components/layout/footer/footer.component.html @@ -0,0 +1,5 @@ + + + Footer + + diff --git a/src/app/core/components/layout/footer/footer.component.scss b/src/app/core/components/layout/footer/footer.component.scss new file mode 100644 index 00000000..9376b0f9 --- /dev/null +++ b/src/app/core/components/layout/footer/footer.component.scss @@ -0,0 +1,7 @@ +:host { + + &.above { + position: relative; + z-index: 99; + } +} \ No newline at end of file diff --git a/src/app/core/components/layout/footer/footer.component.ts b/src/app/core/components/layout/footer/footer.component.ts new file mode 100644 index 00000000..7b9c17e1 --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/core/components/layout/layout.component.html b/src/app/core/components/layout/layout.component.html index 9b14ce1e..78202df6 100644 --- a/src/app/core/components/layout/layout.component.html +++ b/src/app/core/components/layout/layout.component.html @@ -1,11 +1,35 @@ - +
+ + + +
+ + + + + + + + + + + + + + + +
+ + + + @@ -13,15 +37,55 @@
+ - + + + + + + + +
+ + + +
+ + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + diff --git a/src/app/core/components/layout/layout.component.scss b/src/app/core/components/layout/layout.component.scss index bc8837c0..94d23454 100644 --- a/src/app/core/components/layout/layout.component.scss +++ b/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; diff --git a/src/app/core/components/layout/layout.component.ts b/src/app/core/components/layout/layout.component.ts index 22d8a65b..413481fd 100644 --- a/src/app/core/components/layout/layout.component.ts +++ b/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) { diff --git a/src/app/core/components/layout/navbar/navbar-toggle.directive.ts b/src/app/core/components/layout/navbar/navbar-toggle.directive.ts index adaae294..3b5a5046 100644 --- a/src/app/core/components/layout/navbar/navbar-toggle.directive.ts +++ b/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] ) { diff --git a/src/app/core/components/layout/navbar/navbar.component.scss b/src/app/core/components/layout/navbar/navbar.component.scss index cda11a3f..c831f593 100644 --- a/src/app/core/components/layout/navbar/navbar.component.scss +++ b/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; - min-width: 64px !important; - max-width: 64px !important; + width: 64px; + min-width: 64px; + max-width: 64px; } &.folded-open { diff --git a/src/app/core/components/layout/navbar/navbar.component.ts b/src/app/core/components/layout/navbar/navbar.component.ts index 3ba11c3f..ebcdc803 100644 --- a/src/app/core/components/layout/navbar/navbar.component.ts +++ b/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 {AppComponent} from '../../../../app.component'; -import {Subscription} from 'rxjs/Subscription'; -import {MatchMedia, MediaChange, MediaMonitor, ObservableMedia} from '@angular/flex-layout'; -import {FuseMatchMedia} from '../../../services/match-media.service'; -import {NavbarService} from './navbar.service'; +import { Component, HostBinding, HostListener, OnDestroy, OnInit } from '@angular/core'; +import { AppComponent } from '../../../../app.component'; +import { Subscription } from 'rxjs/Subscription'; +import { FuseMatchMedia } from '../../../services/match-media.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, - private bodyEl: AppComponent, - private observableMedia: ObservableMedia, - private fuseMatchMedia: FuseMatchMedia, - private navBarService: NavbarService) + constructor( + private bodyEl: AppComponent, + private fuseMatchMedia: FuseMatchMedia, + 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(); } diff --git a/src/app/core/components/layout/toolbar/toolbar.component.html b/src/app/core/components/layout/toolbar/toolbar.component.html index 6035b890..fa571c5c 100644 --- a/src/app/core/components/layout/toolbar/toolbar.component.html +++ b/src/app/core/components/layout/toolbar/toolbar.component.html @@ -6,4 +6,8 @@ Toolbar + + diff --git a/src/app/core/components/navigation/nav-collapse/nav-collapse.component.spec.ts b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.spec.ts deleted file mode 100644 index 32efb8fe..00000000 --- a/src/app/core/components/navigation/nav-collapse/nav-collapse.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ NavCollapseComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NavCollapseComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/core/components/navigation/nav-item/nav-item.component.spec.ts b/src/app/core/components/navigation/nav-item/nav-item.component.spec.ts deleted file mode 100644 index 94b2cabf..00000000 --- a/src/app/core/components/navigation/nav-item/nav-item.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ NavItemComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NavItemComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts b/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts new file mode 100644 index 00000000..77ae00c4 --- /dev/null +++ b/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(); + } +} diff --git a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts b/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts new file mode 100644 index 00000000..d928f46e --- /dev/null +++ b/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]; + } +} diff --git a/src/app/core/services/layout.service.ts b/src/app/core/services/layout.service.ts index 9774720b..57210abe 100644 --- a/src/app/core/services/layout.service.ts +++ b/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 }; - settings: { toolbar: string, navigation: string }; + defaultSettings: { navigation: string, toolbar: string, footer: 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 - toolbar : 'above' // 'above', 'below', false + navigation: 'left', // 'right', 'left', 'top', none + 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() { diff --git a/src/app/core/services/match-media.service.ts b/src/app/core/services/match-media.service.ts index bad27ac6..9c5b3531 100644 --- a/src/app/core/services/match-media.service.ts +++ b/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 'rxjs/add/operator/filter'; -import { Subscription } from 'rxjs/Subscription'; +import { Injectable } from '@angular/core'; @Injectable() export class FuseMatchMedia { activeMediaQuery: string; onMediaChange: Observable; - // onMediaChange = new EventEmitter(); - watcher: Subscription; - constructor(private observableMedia: ObservableMedia, - private mediaMonitor: MediaMonitor) + constructor(private observableMedia: ObservableMedia) { 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); - - });*/ } } diff --git a/src/app/main/apps/dashboards/project/project.component.html b/src/app/main/apps/dashboards/project/project.component.html index d1e1821e..c30714bb 100644 --- a/src/app/main/apps/dashboards/project/project.component.html +++ b/src/app/main/apps/dashboards/project/project.component.html @@ -1,3 +1,180 @@

- project works! + project works!

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ +

+ project works! +

+ +

+ diff --git a/src/app/main/apps/dashboards/project/project.component.scss b/src/app/main/apps/dashboards/project/project.component.scss index 44f89a98..108e906c 100644 --- a/src/app/main/apps/dashboards/project/project.component.scss +++ b/src/app/main/apps/dashboards/project/project.component.scss @@ -1,4 +1,3 @@ :host { - display: flex; - flex: 1; + padding: 32px; } \ No newline at end of file diff --git a/src/app/main/apps/dashboards/project/project.component.ts b/src/app/main/apps/dashboards/project/project.component.ts index fa01ca55..e5adc349 100644 --- a/src/app/main/apps/dashboards/project/project.component.ts +++ b/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() + constructor(private layoutService: LayoutService) { + this.layoutService.setSettings({ + navigation: 'left', + toolbar : 'above', + footer : 'above' + }); } ngOnInit() diff --git a/src/app/main/apps/mail/mail.component.ts b/src/app/main/apps/mail/mail.component.ts index b0936186..89759f05 100644 --- a/src/app/main/apps/mail/mail.component.ts +++ b/src/app/main/apps/mail/mail.component.ts @@ -1,5 +1,5 @@ -import {Component, OnInit} from '@angular/core'; -import {LayoutService} from '../../../core/services/layout.service'; +import { Component, OnInit } from '@angular/core'; +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' }); } diff --git a/tslint.json b/tslint.json index d8cf02e1..62ab1fea 100644 --- a/tslint.json +++ b/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-output-rename": true, + "no-input-rename": false, + "no-output-rename": false, "use-life-cycle-interface": true, "use-pipe-transform-interface": true, "component-class-suffix": true,