diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 730e169e..77c727ae 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,62 +4,54 @@ 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 { FuseLayoutService } from './core/services/layout.service'; +import { FuseNavigationService } 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 { FuseNavbarService } from './core/components/layout/navbar/navbar.service'; 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'; +import { UIPageLayoutsModule } from './main/ui/page-layouts/page-layouts.module'; +import { FuseLayoutModule } from './core/components/layout/layout.module'; const appRoutes: Routes = [ + { + path : 'apps/mail', + loadChildren: './main/apps/mail/mail.module#MailModule' + }, { path : '**', redirectTo: 'apps/dashboards/project' - } + }, ]; @NgModule({ declarations: [ AppComponent, - LayoutComponent, - ToolbarComponent, - NavbarComponent, SidenavComponent, - NavbarToggleDirective, - FuseMdSidenavHelperDirective, - FuseMdSidenavTogglerDirective, - ContentComponent, - FooterComponent ], imports : [ - SharedModule, BrowserModule, BrowserAnimationsModule, + SharedModule, RouterModule.forRoot(appRoutes), - NavigationModule, - MailModule, + + FuseLayoutModule, + + // MailModule, ChatModule, ProjectModule, - CardedFullWidthModule + + UIPageLayoutsModule ], providers : [ - NavigationService, - LayoutService, + FuseNavigationService, + FuseLayoutService, FuseMatchMedia, - NavbarService, + FuseNavbarService, FuseMdSidenavHelperService ], bootstrap : [AppComponent] diff --git a/src/app/core/components/demo/demo-content/demo-content.component.html b/src/app/core/components/demo/demo-content/demo-content.component.html new file mode 100644 index 00000000..14d474b3 --- /dev/null +++ b/src/app/core/components/demo/demo-content/demo-content.component.html @@ -0,0 +1,75 @@ + +
+ + beach + +

Early Sunrise

+

Demo Content

+ +

+ One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a + horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his + brown belly, slightly domed and divided by arches into stiff sections. +

+ +
+

+ The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, + pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's + happened to me? " he thought. It wasn't a dream. +

+
+ John Doe +
+
+ +

+ His room, a proper human room although a little too small, lay peacefully between its four familiar + walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - + and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in + a nice, gilded frame. +

+ +

+ It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that + covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the + dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. +

+ +

+ "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was + something he was unable to do because he was used to sleeping on his right, and in his present state + couldn't get into that position. However hard he threw himself onto his right, he always rolled back to + where he was. +

+ +

+ He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering + legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before. "Oh, + God", he thought, "what a strenuous career it is that I've chosen! +

+ +

+ Travelling day in and day out. Doing business like this takes much more effort than doing your own + business at home, and on top of that there's the curse of travelling, worries about making train + connections, bad and irregular food, contact with different people all the time so that you can never + get to know anyone or become friendly with them. +

+ +

+ "He felt a slight itch up on his belly; pushed himself slowly up on his back towards the headboard so + that he could lift his head better; found where the itch was, and saw that it was covered with lots of + little white spots which he didn't know what to make of; and when he tried to feel the place with one of + his legs he drew it quickly back because as soon as he touched it he was overcome by a cold shudder. He + slid back into his former position. +

+ +

+ "Getting up early all the time", he thought, "it makes you stupid. You've got to get enough sleep. Other + travelling salesmen live a life of luxury. For instance, whenever I go back to the guest house during + the morning to copy out the contract, these gentlemen are always still sitting there eating their + breakfasts. I ought to just try that with my boss; I'd get kicked out on the spot. But who knows, maybe + that would be the best thing for me... +

+
+ \ No newline at end of file diff --git a/src/app/core/components/demo/demo-content/demo-content.component.scss b/src/app/core/components/demo/demo-content/demo-content.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/core/components/demo/demo-content/demo-content.component.ts b/src/app/core/components/demo/demo-content/demo-content.component.ts new file mode 100644 index 00000000..1e697894 --- /dev/null +++ b/src/app/core/components/demo/demo-content/demo-content.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-demo-content', + templateUrl: './demo-content.component.html', + styleUrls : ['./demo-content.component.scss'] +}) +export class FuseDemoContentComponent +{ + constructor() + { + } +} diff --git a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html new file mode 100644 index 00000000..df8123cf --- /dev/null +++ b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html @@ -0,0 +1,100 @@ +
+ +

Sidenav Demo

+ + +

Sidenav Item 1

+
+ + + + +

Sidenav Item 2

+
+ + + + +

Sidenav Item 3

+
+ + + + +

Sidenav Item 4

+
+ + + + +

Sidenav Item 5

+
+ + + + +

Sidenav Item 6

+
+ + + + +

Sidenav Item 7

+
+ + + + +

Sidenav Item 8

+
+ + + + +

Sidenav Item 9

+
+ + + + +

Sidenav Item 10

+
+ + + + +

Sidenav Item 11

+
+ + + + +

Sidenav Item 12

+
+ + + + +

Sidenav Item 13

+
+ + + + +

Sidenav Item 14

+
+ + + + +

Sidenav Item 15

+
+ + + + +

Sidenav Item 16

+
+ +
+
diff --git a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.scss b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.ts b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.ts new file mode 100644 index 00000000..dde5b68f --- /dev/null +++ b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-demo-sidenav', + templateUrl: './demo-sidenav.component.html', + styleUrls : ['./demo-sidenav.component.scss'] +}) +export class FuseDemoSidenavComponent +{ + constructor() + { + } +} diff --git a/src/app/core/components/demo/demo.module.ts b/src/app/core/components/demo/demo.module.ts new file mode 100644 index 00000000..2f9a7882 --- /dev/null +++ b/src/app/core/components/demo/demo.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../../modules/shared.module'; +import { RouterModule } from '@angular/router'; +import { FuseDemoContentComponent } from './demo-content/demo-content.component'; +import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component'; + +@NgModule({ + declarations: [ + FuseDemoContentComponent, + FuseDemoSidenavComponent + ], + imports : [ + SharedModule, + RouterModule + ], + exports : [ + FuseDemoContentComponent, + FuseDemoSidenavComponent + ] +}) +export class FuseDemoModule +{ +} diff --git a/src/app/core/components/layout/content/content.component.ts b/src/app/core/components/layout/content/content.component.ts index c7429377..66677ef6 100644 --- a/src/app/core/components/layout/content/content.component.ts +++ b/src/app/core/components/layout/content/content.component.ts @@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core'; templateUrl: './content.component.html', styleUrls : ['./content.component.scss'] }) -export class ContentComponent implements OnInit +export class FuseContentComponent implements OnInit { constructor() diff --git a/src/app/core/components/layout/footer/footer.component.ts b/src/app/core/components/layout/footer/footer.component.ts index 7b9c17e1..88abc14c 100644 --- a/src/app/core/components/layout/footer/footer.component.ts +++ b/src/app/core/components/layout/footer/footer.component.ts @@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core'; templateUrl: './footer.component.html', styleUrls: ['./footer.component.scss'] }) -export class FooterComponent implements OnInit { +export class FuseFooterComponent implements OnInit { constructor() { } diff --git a/src/app/core/components/layout/layout.component.ts b/src/app/core/components/layout/layout.component.ts index 413481fd..7480b510 100644 --- a/src/app/core/components/layout/layout.component.ts +++ b/src/app/core/components/layout/layout.component.ts @@ -1,16 +1,16 @@ import { Component, OnInit } from '@angular/core'; -import { LayoutService } from '../../services/layout.service'; +import { FuseLayoutService } from '../../services/layout.service'; @Component({ selector : 'fuse-layout', templateUrl: './layout.component.html', styleUrls : ['./layout.component.scss'] }) -export class LayoutComponent implements OnInit +export class FuseLayoutComponent implements OnInit { layoutSettings: { navigation: string, toolbar: string, footer: string }; - constructor(private layoutService: LayoutService) + constructor(private layoutService: FuseLayoutService) { this.layoutSettings = layoutService.getSettings(); } diff --git a/src/app/core/components/layout/layout.module.ts b/src/app/core/components/layout/layout.module.ts new file mode 100644 index 00000000..5710911a --- /dev/null +++ b/src/app/core/components/layout/layout.module.ts @@ -0,0 +1,33 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../../modules/shared.module'; +import { RouterModule } from '@angular/router'; +import { FuseLayoutComponent } from './layout.component'; +import { FuseContentComponent } from './content/content.component'; +import { FuseFooterComponent } from './footer/footer.component'; +import { FuseNavbarComponent } from './navbar/navbar.component'; +import { FuseToolbarComponent } from './toolbar/toolbar.component'; +import { FuseNavigationModule } from '../navigation/navigation.module'; +import { FuseNavbarToggleDirective } from './navbar/navbar-toggle.directive'; + +@NgModule({ + declarations: [ + FuseContentComponent, + FuseFooterComponent, + FuseLayoutComponent, + FuseNavbarComponent, + FuseToolbarComponent, + FuseNavbarToggleDirective + ], + imports : [ + SharedModule, + RouterModule, + FuseNavigationModule + ], + exports : [ + FuseLayoutComponent + ] +}) + +export class FuseLayoutModule +{ +} 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 3b5a5046..50e41ee5 100644 --- a/src/app/core/components/layout/navbar/navbar-toggle.directive.ts +++ b/src/app/core/components/layout/navbar/navbar-toggle.directive.ts @@ -1,16 +1,16 @@ import { Directive, HostListener, Input } from '@angular/core'; -import {NavbarService} from './navbar.service'; -import {NavbarComponent} from './navbar.component'; +import { FuseNavbarService } from './navbar.service'; +import { FuseNavbarComponent } from './navbar.component'; @Directive({ - selector: '[fuseNavbar]', + selector: '[fuseNavbar]' }) -export class NavbarToggleDirective +export class FuseNavbarToggleDirective { @Input() fuseNavbar: string; - navbar: NavbarComponent; + navbar: FuseNavbarComponent; - constructor(navbar: NavbarService) + constructor(navbar: FuseNavbarService) { this.navbar = navbar.getNavBar(); } diff --git a/src/app/core/components/layout/navbar/navbar.component.ts b/src/app/core/components/layout/navbar/navbar.component.ts index ebcdc803..3557867b 100644 --- a/src/app/core/components/layout/navbar/navbar.component.ts +++ b/src/app/core/components/layout/navbar/navbar.component.ts @@ -2,14 +2,14 @@ import { Component, HostBinding, HostListener, OnDestroy, OnInit } from '@angula import { AppComponent } from '../../../../app.component'; import { Subscription } from 'rxjs/Subscription'; import { FuseMatchMedia } from '../../../services/match-media.service'; -import { NavbarService } from './navbar.service'; +import { FuseNavbarService } from './navbar.service'; @Component({ selector : 'fuse-navbar', templateUrl: './navbar.component.html', styleUrls : ['./navbar.component.scss'] }) -export class NavbarComponent implements OnInit, OnDestroy +export class FuseNavbarComponent implements OnInit, OnDestroy { @HostBinding('class.close') isClosed: boolean; @HostBinding('class.open') isOpened: boolean = !this.isClosed; @@ -22,7 +22,7 @@ export class NavbarComponent implements OnInit, OnDestroy constructor( private bodyEl: AppComponent, private fuseMatchMedia: FuseMatchMedia, - private navBarService: NavbarService + private navBarService: FuseNavbarService ) { navBarService.setNavBar(this); diff --git a/src/app/core/components/layout/navbar/navbar.service.ts b/src/app/core/components/layout/navbar/navbar.service.ts index e0e4acd4..a6252b14 100644 --- a/src/app/core/components/layout/navbar/navbar.service.ts +++ b/src/app/core/components/layout/navbar/navbar.service.ts @@ -1,7 +1,7 @@ -import {EventEmitter, Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; @Injectable() -export class NavbarService +export class FuseNavbarService { navBarRef; diff --git a/src/app/core/components/layout/toolbar/toolbar.component.ts b/src/app/core/components/layout/toolbar/toolbar.component.ts index 127eeb49..128daaec 100644 --- a/src/app/core/components/layout/toolbar/toolbar.component.ts +++ b/src/app/core/components/layout/toolbar/toolbar.component.ts @@ -1,19 +1,14 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector : 'fuse-toolbar', templateUrl: './toolbar.component.html', styleUrls : ['./toolbar.component.scss'] }) -export class ToolbarComponent implements OnInit -{ - @Input() sidenav; +export class FuseToolbarComponent +{ constructor() { } - - ngOnInit() - { - } } diff --git a/src/app/core/components/navigation/nav-collapse/nav-collapse.component.ts b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.ts index ad865f8e..46ac069a 100644 --- a/src/app/core/components/navigation/nav-collapse/nav-collapse.component.ts +++ b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.ts @@ -1,7 +1,7 @@ -import {Component, HostBinding, Input, OnInit} from '@angular/core'; -import {NavigationService} from '../navigation.service'; -import {NavigationEnd, Router} from '@angular/router'; -import {Animations} from '../../../animations'; +import { Component, HostBinding, Input, OnInit } from '@angular/core'; +import { FuseNavigationService } from '../navigation.service'; +import { NavigationEnd, Router } from '@angular/router'; +import { Animations } from '../../../animations'; @Component({ selector : 'fuse-nav-collapse', @@ -9,13 +9,13 @@ import {Animations} from '../../../animations'; styleUrls : ['./nav-collapse.component.scss'], animations : [Animations.slideInOut] }) -export class NavCollapseComponent implements OnInit +export class FuseNavCollapseComponent implements OnInit { @Input() item: any; @HostBinding('class') classes = 'nav-collapse nav-item'; @HostBinding('class.open') public isOpen = false; - constructor(private navigationService: NavigationService, private router: Router) + constructor(private navigationService: FuseNavigationService, private router: Router) { /** * When navigation changed @@ -120,7 +120,7 @@ export class NavCollapseComponent implements OnInit { if ( arr.children[i].children ) { - return this.isUrlInChildren(arr.children[i], url) + return this.isUrlInChildren(arr.children[i], url); } else { diff --git a/src/app/core/components/navigation/nav-item/nav-item.component.ts b/src/app/core/components/navigation/nav-item/nav-item.component.ts index 43418d33..1c0a4917 100644 --- a/src/app/core/components/navigation/nav-item/nav-item.component.ts +++ b/src/app/core/components/navigation/nav-item/nav-item.component.ts @@ -5,7 +5,7 @@ import {Component, HostBinding, Input, OnInit} from '@angular/core'; templateUrl: './nav-item.component.html', styleUrls : ['./nav-item.component.scss'] }) -export class NavItemComponent implements OnInit +export class FuseNavItemComponent implements OnInit { @HostBinding('class') classes = 'nav-item'; @Input() item: any; diff --git a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.spec.ts b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.spec.ts deleted file mode 100644 index 8c937474..00000000 --- a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NavSubheaderComponent } from './nav-subheader.component'; - -describe('NavSubheaderComponent', () => { - let component: NavSubheaderComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ NavSubheaderComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NavSubheaderComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts index ba3a650e..4c7dbc59 100644 --- a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts +++ b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts @@ -5,7 +5,7 @@ import {Component, HostBinding, Input, OnInit} from '@angular/core'; templateUrl: './nav-subheader.component.html', styleUrls : ['./nav-subheader.component.scss'] }) -export class NavSubheaderComponent implements OnInit +export class FuseNavSubheaderComponent implements OnInit { @HostBinding('class') classes = 'nav-subheader'; @Input() item: any; diff --git a/src/app/core/components/navigation/navigation.component.ts b/src/app/core/components/navigation/navigation.component.ts index 6c0218c7..9b5bb1f1 100644 --- a/src/app/core/components/navigation/navigation.component.ts +++ b/src/app/core/components/navigation/navigation.component.ts @@ -1,23 +1,19 @@ -import {Component, EventEmitter, OnInit, ViewEncapsulation} from '@angular/core'; -import {NavigationService} from './navigation.service'; +import { Component, ViewEncapsulation } from '@angular/core'; +import { FuseNavigationService } from './navigation.service'; @Component({ selector : 'fuse-navigation', templateUrl : './navigation.component.html', styleUrls : ['./navigation.component.scss'], - encapsulation: ViewEncapsulation.None, + encapsulation: ViewEncapsulation.None }) -export class NavigationComponent implements OnInit +export class FuseNavigationComponent { navigation: object[]; - constructor(private navigationService: NavigationService) + constructor(private navigationService: FuseNavigationService) { this.navigation = navigationService.getNavigation(); } - ngOnInit() - { - } - } diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts index 499529e5..cb91e409 100644 --- a/src/app/core/components/navigation/navigation.model.ts +++ b/src/app/core/components/navigation/navigation.model.ts @@ -286,17 +286,32 @@ export class FuseNavigation { 'title': 'Full Width', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/carded/full-width' + 'url' : '/ui/page-layouts/carded/full-width' }, { - 'title': 'Left Sidebar', + 'title': 'Full Width 2', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/carded/left-sidebar' + 'url' : '/ui/page-layouts/carded/full-width-2' }, { - 'title': 'Right Sidebar', + 'title': 'Left Sidenav', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/carded/right-sidebar' + 'url' : '/ui/page-layouts/carded/left-sidenav' + }, + { + 'title': 'Left Sidenav 2', + 'type' : 'nav-item', + 'url' : '/ui/page-layouts/carded/left-sidenav-2' + }, + { + 'title': 'Right Sidenav', + 'type' : 'nav-item', + 'url' : '/ui/page-layouts/carded/right-sidenav' + }, + { + 'title': 'Right Sidenav', + 'type' : 'nav-item', + 'url' : '/ui/page-layouts/carded/right-sidenav-2' } ] }, @@ -307,49 +322,49 @@ export class FuseNavigation { 'title': 'Full Width', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/simple/full-width' + 'url' : '/ui/page-layouts/simple/full-width' }, { 'title': 'Left Sidebar', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/simple/left-sidebar' + 'url' : '/ui/page-layouts/simple/left-sidebar' }, { 'title': 'Left Sidebar Inner', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/simple/left-sidebar-inner' + 'url' : '/ui/page-layouts/simple/left-sidebar-inner' }, { 'title': 'Left Sidebar Floating', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/simple/left-sidebar-floating' + 'url' : '/ui/page-layouts/simple/left-sidebar-floating' }, { 'title': 'Right Sidebar', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/simple/right-sidebar' + 'url' : '/ui/page-layouts/simple/right-sidebar' }, { 'title': 'Right Sidebar Inner', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/simple/sidebar-inner' + 'url' : '/ui/page-layouts/simple/sidebar-inner' }, { 'title': 'Right Sidebar Floating', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/simple/right-sidebar-floating' + 'url' : '/ui/page-layouts/simple/right-sidebar-floating' }, { 'title': 'Tabbed', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/simple/tabbed' + 'url' : '/ui/page-layouts/simple/tabbed' } ] }, { 'title': 'Blank', 'type' : 'nav-item', - 'url' : '/user-interface/page-layouts/blank' + 'url' : '/ui/page-layouts/blank' } ] }, diff --git a/src/app/core/components/navigation/navigation.module.ts b/src/app/core/components/navigation/navigation.module.ts index 60cb2322..132d5b90 100644 --- a/src/app/core/components/navigation/navigation.module.ts +++ b/src/app/core/components/navigation/navigation.module.ts @@ -1,11 +1,10 @@ import {NgModule} from '@angular/core'; import {SharedModule} from '../../modules/shared.module'; import {RouterModule, Routes} from '@angular/router'; -import {NavSubheaderComponent} from './nav-subheader/nav-subheader.component'; -import {NavigationComponent} from './navigation.component'; -import {NavItemComponent} from './nav-item/nav-item.component'; -import {NavCollapseComponent} from './nav-collapse/nav-collapse.component'; - +import {FuseNavSubheaderComponent} from './nav-subheader/nav-subheader.component'; +import {FuseNavigationComponent} from './navigation.component'; +import {FuseNavItemComponent} from './nav-item/nav-item.component'; +import {FuseNavCollapseComponent} from './nav-collapse/nav-collapse.component'; @NgModule({ imports : [ @@ -13,15 +12,15 @@ import {NavCollapseComponent} from './nav-collapse/nav-collapse.component'; RouterModule ], exports : [ - NavigationComponent + FuseNavigationComponent ], declarations: [ - NavigationComponent, - NavSubheaderComponent, - NavItemComponent, - NavCollapseComponent + FuseNavigationComponent, + FuseNavSubheaderComponent, + FuseNavItemComponent, + FuseNavCollapseComponent ], }) -export class NavigationModule +export class FuseNavigationModule { } diff --git a/src/app/core/components/navigation/navigation.service.ts b/src/app/core/components/navigation/navigation.service.ts index 12e4bd0c..c604522c 100644 --- a/src/app/core/components/navigation/navigation.service.ts +++ b/src/app/core/components/navigation/navigation.service.ts @@ -2,7 +2,7 @@ import {EventEmitter, Injectable} from '@angular/core'; import {FuseNavigation} from './navigation.model'; @Injectable() -export class NavigationService +export class FuseNavigationService { onNavCollapseToggled = new EventEmitter(); navigation: object[]; 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 index 77ae00c4..f0e7cb00 100644 --- 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 @@ -1,6 +1,8 @@ -import { Directive, Input, OnInit, HostListener, ElementRef } from '@angular/core'; +import { Directive, Input, OnInit, HostListener, ElementRef, AfterViewInit, HostBinding } from '@angular/core'; import { MdSidenav } from '@angular/material'; import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service'; +import { FuseMatchMedia } from '../../services/match-media.service'; +import { MediaMonitor, ObservableMedia } from '@angular/flex-layout'; @Directive({ selector: '[fuseMdSidenavHelper]' @@ -8,18 +10,52 @@ import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helpe export class FuseMdSidenavHelperDirective implements OnInit { @Input('fuseMdSidenavHelper') mdSidenavInstance: MdSidenav; + @Input('md-is-locked-open') mdIsLockedOpen: string; constructor( private fuseMdSidenavService: FuseMdSidenavHelperService, - private elRef: ElementRef + private elRef: ElementRef, + private fuseMatchMedia: FuseMatchMedia, + private observableMedia: ObservableMedia ) { - } ngOnInit() { this.fuseMdSidenavService.setSidenav(this.elRef.nativeElement.id, this.mdSidenavInstance); + + console.warn(this.mdIsLockedOpen); + + if ( this.observableMedia.isActive(this.mdIsLockedOpen) ) + { + this.mdSidenavInstance.open(); + this.mdSidenavInstance.mode = 'side'; + } + else + { + this.mdSidenavInstance.close(); + this.mdSidenavInstance.mode = 'over'; + } + + this.fuseMatchMedia.onMediaChange.subscribe((change) => + { + console.log(this.observableMedia.isActive(this.mdIsLockedOpen)); + + if ( this.observableMedia.isActive(this.mdIsLockedOpen) ) + { + this.mdSidenavInstance.open(); + this.mdSidenavInstance.mode = 'side'; + } + else + { + this.mdSidenavInstance.close(); + this.mdSidenavInstance.mode = 'over'; + } + }); + + console.warn(this.mdIsLockedOpen); + } } diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index a8f352a7..3ea9a713 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -1,23 +1,31 @@ -import {NgModule} from '@angular/core'; -import {MaterialModule} from './material.module'; -import {FlexLayoutModule} from '@angular/flex-layout'; -import {FormsModule} from '@angular/forms'; -import {CommonModule} from '@angular/common'; +import { NgModule } from '@angular/core'; +import { MaterialModule } from './material.module'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; +import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive'; @NgModule({ - imports: [ + declarations: [ + FuseMdSidenavHelperDirective, + FuseMdSidenavTogglerDirective + ], + imports : [ FlexLayoutModule, MaterialModule, CommonModule, FormsModule ], - exports: [ + exports : [ FlexLayoutModule, MaterialModule, CommonModule, - FormsModule - ], + FormsModule, + FuseMdSidenavHelperDirective, + FuseMdSidenavTogglerDirective + ] }) + export class SharedModule { diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss index 1022d614..b5944c3b 100644 --- a/src/app/core/scss/core.scss +++ b/src/app/core/scss/core.scss @@ -19,4 +19,7 @@ @include angular-material-typography($custom-typography); // Partials - +@import "partials/global"; +@import "partials/angular-material-fix"; +@import "partials/typography"; +@import "partials/page-layouts"; diff --git a/src/app/core/scss/partials/_angular-material-fix.scss b/src/app/core/scss/partials/_angular-material-fix.scss new file mode 100644 index 00000000..30464965 --- /dev/null +++ b/src/app/core/scss/partials/_angular-material-fix.scss @@ -0,0 +1,13 @@ +.mat-body { + + p { + margin: 0; + } +} + +.mat-icon-button { + + .mat-button-ripple { + border-radius: 50%; + } +} \ No newline at end of file diff --git a/src/app/core/scss/partials/_global.scss b/src/app/core/scss/partials/_global.scss new file mode 100644 index 00000000..7f51a123 --- /dev/null +++ b/src/app/core/scss/partials/_global.scss @@ -0,0 +1,24 @@ +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +body { + + &.fuse-nav-bar-folded { + + .content-wrapper { + padding-left: 64px; + } + } + + > md-sidenav-container { + height: 100%; + } +} \ No newline at end of file diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss new file mode 100644 index 00000000..8d7c3136 --- /dev/null +++ b/src/app/core/scss/partials/_page-layouts.scss @@ -0,0 +1,339 @@ +// Page Layouts +$header-height: 200px; +$header-height-sm: 160px; + +$card-toolbar-height: 64px; +$card-header-height: $header-height - $card-toolbar-height; +$card-header-height-sm: $header-height-sm - $card-toolbar-height; + +.page-layout { + position: relative; + overflow: hidden; + + // Top bg + .top-bg { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + height: $header-height; + background-color: mat-color($mat-blue, 500); + } + + // Carded layout + &.carded { + display: flex; + flex-direction: row; + min-height: 100%; + height: 100%; + + // Fullwidth + &.fullwidth { + + // Single scroll + &.single-scroll { + height: auto; + + > .center { + + .content-card { + + .content { + overflow: hidden; + } + } + } + } + + // Center + > .center { + display: flex; + flex-direction: column; + flex: 1; + position: relative; + z-index: 2; + margin-left: 32px; + margin-right: 32px; + + .header { + height: $card-header-height; + min-height: $card-header-height; + max-height: $card-header-height; + padding: 24px; + } + + .content-card { + display: flex; + flex-direction: column; + flex: 1; + background: #FFFFFF; + overflow: hidden; + @include mat-elevation(7); + + .toolbar { + display: flex; + justify-content: flex-start; + align-items: center; + padding: 8px 24px; + height: $card-toolbar-height; + min-height: $card-toolbar-height; + max-height: $card-toolbar-height; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + } + + .content { + display: flex; + flex: 1; + padding: 24px; + background: #FFFFFF; + overflow: auto; + } + } + } + } + + // Left sidenav + &.left-sidenav { + + // Single scroll + &.single-scroll { + height: auto; + + > .center { + + .content-card { + + .content { + overflow: hidden; + } + } + } + } + + // Sidenav + > md-sidenav-container { + background: none; + z-index: 2; + + .sidenav { + display: flex; + flex-direction: column; + width: 240px; + min-width: 240px; + max-width: 240px; + z-index: 2; + overflow-y: hidden; + @include mat-elevation(7); + + .header { + height: $header-height; + min-height: $header-height; + max-height: $header-height; + padding: 24px; + } + + .content { + background: transparent; + padding: 24px; + overflow: auto; + } + + @include media-breakpoint('gt-md') { + background: none; + box-shadow: none; + } + + /*&.md-locked-open { + width: 220px; + min-width: 220px; + max-width: 220px; + z-index: 2; + background: transparent; + box-shadow: none; + + + .center { + margin-left: 0; + } + } + + &:not(.md-locked-open) { + + .header { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + } + + .content { + overflow: hidden; + } + }*/ + } + + .mat-sidenav-content { + overflow: visible; + + // Center + .center { + display: flex; + flex-direction: column; + flex: 1; + position: relative; + z-index: 3; + height: 100%; + margin-left: 32px; + margin-right: 32px; + + @include media-breakpoint('gt-md') { + margin-left: 0; + } + + .header { + display: flex; + height: $card-header-height; + min-height: $card-header-height; + max-height: $card-header-height; + padding: 24px; + } + + .content-card { + display: flex; + flex-direction: column; + flex: 1; + background: #FFFFFF; + overflow: hidden; + @include mat-elevation(7); + + .toolbar { + display: flex; + justify-content: flex-start; + align-items: center; + flex: 1; + padding: 8px 24px; + height: $card-toolbar-height; + min-height: $card-toolbar-height; + max-height: $card-toolbar-height; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + + .sidenav-toggle { + margin: 0 8px 0 0 !important; + padding: 0 !important; + border-radius: 0; + } + } + + .content { + display: flex; + flex: 1; + padding: 24px; + background: #FFFFFF; + overflow: auto; + } + } + } + } + } + } + + // Right sidenav + &.right-sidenav { + + // Single scroll + &.single-scroll { + height: auto; + + > .center { + + .content-card { + + .content { + overflow: hidden; + } + } + } + } + + // Sidenav + > .sidenav { + width: 240px; + min-width: 240px; + max-width: 240px; + z-index: 51; + @include mat-elevation(7); + + .header { + height: $header-height; + min-height: $header-height; + max-height: $header-height; + padding: 24px 24px 24px 0; + } + + .content { + background: transparent; + padding: 24px 24px 24px 0; + } + + &.md-locked-open { + width: 196px; + min-width: 196px; + max-width: 196px; + z-index: 2; + background: transparent; + box-shadow: none; + } + + &:not(.md-locked-open) { + + .header { + padding: 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + } + + .content { + overflow: hidden; + padding: 24px; + } + } + } + + // Center + > .center { + position: relative; + z-index: 2; + margin-left: 32px; + margin-right: 32px; + + .header { + height: $card-header-height; + min-height: $card-header-height; + max-height: $card-header-height; + padding: 24px; + } + + .content-card { + background: #FFFFFF; + overflow: hidden; + @include mat-elevation(7); + + .toolbar { + padding: 8px 24px; + height: $card-toolbar-height; + min-height: $card-toolbar-height; + max-height: $card-toolbar-height; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + + .sidenav-toggle { + margin: 0 0 0 8px !important; + padding: 0 !important; + border-radius: 0; + } + } + + .content { + padding: 24px; + background: #FFFFFF; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/core/scss/partials/_typography.scss b/src/app/core/scss/partials/_typography.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/core/services/layout.service.ts b/src/app/core/services/layout.service.ts index 4950f7f9..0a705ff6 100644 --- a/src/app/core/services/layout.service.ts +++ b/src/app/core/services/layout.service.ts @@ -2,7 +2,7 @@ import { EventEmitter, Injectable } from '@angular/core'; import { NavigationStart, Router } from '@angular/router'; @Injectable() -export class LayoutService +export class FuseLayoutService { defaultSettings: { navigation: string, toolbar: string, footer: string }; settings: { navigation: string, toolbar: string, footer: string }; @@ -17,8 +17,8 @@ export class LayoutService // Set the default settings this.defaultSettings = { navigation: 'left', // 'right', 'left', 'top', none - toolbar : 'above', // 'above', 'below', none - footer : 'above' // 'above', 'below', none + toolbar : 'below', // 'above', 'below', none + footer : 'none' // 'above', 'below', none }; // Assign default settings at the init @@ -38,7 +38,7 @@ export class LayoutService } /** - * Get Settings + * Gets settings * @returns {{navigation: string, toolbar: string, footer: string}} */ getSettings() @@ -47,7 +47,7 @@ export class LayoutService } /** - * Set Settings + * Sets settings * @param newSettings */ setSettings(newSettings) @@ -55,4 +55,15 @@ export class LayoutService Object.assign(this.settings, newSettings); this.onSettingsChanged.emit(this.settings); } + + /** + * Sets default settings + * @param newDefaultSettings + */ + setDefaultSettings(newDefaultSettings) + { + Object.assign(this.defaultSettings, newDefaultSettings); + + // this.onSettingsChanged.emit(this.settings); + } } diff --git a/src/app/core/services/match-media.service.ts b/src/app/core/services/match-media.service.ts index 9c5b3531..5e58e525 100644 --- a/src/app/core/services/match-media.service.ts +++ b/src/app/core/services/match-media.service.ts @@ -1,19 +1,20 @@ import { MediaChange, ObservableMedia } from '@angular/flex-layout'; import { Observable } from 'rxjs/Observable'; import { Observer } from 'rxjs/Observer'; -import { Injectable } from '@angular/core'; +import { EventEmitter, Injectable } from '@angular/core'; @Injectable() export class FuseMatchMedia { activeMediaQuery: string; - onMediaChange: Observable; + // onMediaChange: Observable; + onMediaChange: EventEmitter = new EventEmitter(); constructor(private observableMedia: ObservableMedia) { this.activeMediaQuery = ''; - this.onMediaChange = Observable.create((observer: Observer) => + /*this.onMediaChange = Observable.create((observer: Observer) => { this.observableMedia.subscribe((change: MediaChange) => { @@ -23,6 +24,20 @@ export class FuseMatchMedia observer.next(this.activeMediaQuery); } }); + });*/ + + /*this.onMediaChange = Observable.create((observer: Observer) => + { + + });*/ + + this.observableMedia.subscribe((change: MediaChange) => + { + if ( this.activeMediaQuery !== change.mqAlias ) + { + this.activeMediaQuery = change.mqAlias; + this.onMediaChange.emit(change.mqAlias); + } }); } } diff --git a/src/app/main/apps/dashboards/project/project.component.ts b/src/app/main/apps/dashboards/project/project.component.ts index f9fece90..ece466af 100644 --- a/src/app/main/apps/dashboards/project/project.component.ts +++ b/src/app/main/apps/dashboards/project/project.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { LayoutService } from '../../../../core/services/layout.service'; +import { FuseLayoutService } from '../../../../core/services/layout.service'; @Component({ selector : 'fuse-project', @@ -10,7 +10,7 @@ export class ProjectComponent implements OnInit { layoutSettings: any; - constructor(private layoutService: LayoutService) + constructor(private layoutService: FuseLayoutService) { /*this.layoutService.setSettings({ navigation: 'left', diff --git a/src/app/main/apps/mail/mail.component.ts b/src/app/main/apps/mail/mail.component.ts index 89759f05..664ec915 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 { FuseLayoutService } from '../../../core/services/layout.service'; @Component({ selector : 'fuse-mail', @@ -9,7 +9,7 @@ import { LayoutService } from '../../../core/services/layout.service'; export class MailComponent implements OnInit { - constructor(private layoutService: LayoutService) + constructor(private layoutService: FuseLayoutService) { this.layoutService.setSettings({ navigation: 'left', diff --git a/src/app/main/apps/mail/mail.module.ts b/src/app/main/apps/mail/mail.module.ts index 5bb12111..2d48a01f 100644 --- a/src/app/main/apps/mail/mail.module.ts +++ b/src/app/main/apps/mail/mail.module.ts @@ -7,7 +7,7 @@ import { ClassicViewComponent } from './views/classic/classic-view.component'; const routes: Routes = [ { - path : 'apps/mail', + path : '', component: MailComponent, children : [ { diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.html b/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.html new file mode 100644 index 00000000..6c897c08 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.html @@ -0,0 +1,39 @@ +
+ + +
+ + + +
+ + +
+

Fullwidth with page scroll

+
+ + + +
+ + +
+ Content toolbar +
+ + + +
+ + + +
+ + +
+ + +
+ + +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.scss b/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.ts new file mode 100644 index 00000000..dec931f7 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-carded-fullwidth-2', + templateUrl: './fullwidth-2.component.html', + styleUrls : ['./fullwidth-2.component.scss'] +}) +export class CardedFullWidth2Component +{ + constructor() + { + } +} diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html index 6542eede..4c3bae7c 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html +++ b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html @@ -1,3 +1,39 @@ -

- FullWidth works! -

+
+ + +
+ + + +
+ + +
+

Fullwidth with content scroll

+
+ + + +
+ + +
+ Content toolbar +
+ + + +
+ + + +
+ + +
+ + +
+ + +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts index 17a75f0a..f8ef444c 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts +++ b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts @@ -1,19 +1,13 @@ -import {Component, OnInit} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ - selector : 'fuse-chat', + selector : 'fuse-carded-fullwidth', templateUrl: './fullwidth.component.html', styleUrls : ['./fullwidth.component.scss'] }) -export class CardedFullWidthComponent implements OnInit +export class CardedFullWidthComponent { - constructor() { } - - ngOnInit() - { - } - } diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.module.ts b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.module.ts deleted file mode 100644 index b986cf40..00000000 --- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -import {NgModule} from '@angular/core'; -import {RouterModule, Routes} from '@angular/router'; -import {CardedFullWidthComponent} from './fullwidth.component'; -import {SharedModule} from '../../../../../core/modules/shared.module'; - -const routes: Routes = [ - { - path: 'user-interface/page-layouts/carded/full-width', component: CardedFullWidthComponent, children: [] - } -] - -@NgModule({ - imports : [ - SharedModule, - RouterModule.forChild(routes) - ], - declarations: [ - CardedFullWidthComponent - ] -}) -export class CardedFullWidthModule -{ -} diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html new file mode 100644 index 00000000..2d37b51d --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html @@ -0,0 +1,67 @@ +
+ + +
+ + + + + + + + +
+

Sidenav header

+
+ + + +
+ +
+ + +
+ + + +
+ + +
+

Left sidenav with content scroll

+
+ + + +
+ + +
+ + +

Content toolbar

+
+ + + +
+ + + +
+ + +
+ + +
+ + +
+ +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts new file mode 100644 index 00000000..94b366c1 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector : 'fuse-left-sidenav', + templateUrl: './left-sidenav.component.html', + styleUrls : ['./left-sidenav.component.scss'] +}) +export class CardedLeftSidenavComponent implements OnInit +{ + sidenavMode: string; + + constructor() + { + + this.sidenavMode = 'side'; + } + + ngOnInit() + { + setTimeout(() => + { + this.sidenavMode = 'over' + }, 1000); + } +} diff --git a/src/app/main/ui/page-layouts/page-layouts.module.ts b/src/app/main/ui/page-layouts/page-layouts.module.ts new file mode 100644 index 00000000..ab1a5ba5 --- /dev/null +++ b/src/app/main/ui/page-layouts/page-layouts.module.ts @@ -0,0 +1,41 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { CardedFullWidthComponent } from './carded/fullwidth/fullwidth.component'; +import { SharedModule } from '../../../core/modules/shared.module'; +import { CardedFullWidth2Component } from './carded/fullwidth-single-scroll/fullwidth-2.component'; +import { FuseDemoModule } from '../../../core/components/demo/demo.module'; +import { CardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component'; + +const routes: Routes = [ + { + path : 'ui/page-layouts/carded/full-width', + component: CardedFullWidthComponent, + children : [] + }, + { + path : 'ui/page-layouts/carded/full-width-2', + component: CardedFullWidth2Component, + children : [] + }, + { + path : 'ui/page-layouts/carded/left-sidenav', + component: CardedLeftSidenavComponent, + children : [] + } +]; + +@NgModule({ + imports : [ + SharedModule, + RouterModule.forChild(routes), + FuseDemoModule + ], + declarations: [ + CardedFullWidthComponent, + CardedFullWidth2Component, + CardedLeftSidenavComponent + ] +}) +export class UIPageLayoutsModule +{ +} diff --git a/src/assets/images/beach.jpg b/src/assets/images/beach.jpg new file mode 100644 index 00000000..550e00c6 Binary files /dev/null and b/src/assets/images/beach.jpg differ diff --git a/src/styles.scss b/src/styles.scss index b824164e..6c21d1e3 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,23 +1,2 @@ // Import Fuse main library @import "app/core/scss/core"; - -html, body { - margin: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - -body { - - &.fuse-nav-bar-folded { - - .content-wrapper { - padding-left: 64px; - } - } - - > md-sidenav-container { - height: 100%; - } -}