From d44a76b8c6dfe54ee73b63c5b4966d1fd45f0f00 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 27 Jul 2017 18:05:50 +0300 Subject: [PATCH] fixed layout service + some auth pages + simple page layouts + mail tweaks --- src/app/app.module.ts | 8 +- .../layout/content/content.component.html | 2 +- .../components/layout/layout.component.html | 84 ++----- .../components/layout/layout.component.ts | 25 +- .../nav-collapse/nav-collapse.component.ts | 20 +- .../components/navigation/navigation.model.ts | 26 +-- src/app/core/scss/core.scss | 1 + src/app/core/scss/partials/_colors.scss | 0 src/app/core/scss/partials/_page-layouts.scss | 125 +++++++++- src/app/core/scss/partials/_typography.scss | 1 - src/app/core/services/layout.service.ts | 72 +++--- .../dashboards/project/project.component.html | 6 +- .../dashboards/project/project.component.ts | 36 +-- .../mail-details/mail-details.component.html | 4 +- .../mail-details/mail-details.component.scss | 5 + .../mail/mail-list/mail-list.component.html | 2 +- .../mail/mail-list/mail-list.component.scss | 5 + src/app/main/apps/mail/mail.component.html | 2 +- src/app/main/apps/mail/mail.component.scss | 2 +- .../login-2/login-2.component.html | 85 +++++++ .../login-2/login-2.component.scss | 215 ++++++++++++++++++ .../login-2/login-2.component.ts | 61 +++++ .../authentication/login/login.component.html | 65 ++++++ .../authentication/login/login.component.scss | 155 +++++++++++++ .../authentication/login/login.component.ts | 55 +++++ .../register/register.component.html | 65 ++++++ .../register/register.component.scss | 149 ++++++++++++ .../register/register.component.ts | 60 +++++ src/app/main/pages/pages.module.ts | 58 +++++ .../page-layouts/blank/blank.component.html | 5 + .../page-layouts/blank/blank.component.scss | 0 .../ui/page-layouts/blank/blank.component.ts | 13 ++ .../fullwidth-2/fullwidth-2.component.html | 2 +- .../carded/fullwidth/fullwidth.component.html | 2 +- .../left-sidenav-2.component.html | 2 +- .../left-sidenav/left-sidenav.component.html | 2 +- .../right-sidenav.component.html | 2 +- .../ui/page-layouts/page-layouts.module.ts | 62 +++-- .../simple/fullwidth/fullwidth.component.html | 17 ++ .../simple/fullwidth/fullwidth.component.scss | 0 .../simple/fullwidth/fullwidth.component.ts | 13 ++ .../left-sidenav-2.component.html | 46 ++++ .../left-sidenav-2.component.scss | 0 .../left-sidenav-2.component.ts | 14 ++ .../left-sidenav/left-sidenav.component.html | 46 ++++ .../left-sidenav/left-sidenav.component.scss | 0 .../left-sidenav/left-sidenav.component.ts | 14 ++ .../right-sidenav-2.component.html | 46 ++++ .../right-sidenav-2.component.scss | 0 .../right-sidenav-2.component.ts | 14 ++ .../right-sidenav.component.html | 46 ++++ .../right-sidenav.component.scss | 0 .../right-sidenav/right-sidenav.component.ts | 14 ++ .../simple/tabbed/tabbed.component.html | 31 +++ .../simple/tabbed/tabbed.component.scss | 0 .../simple/tabbed/tabbed.component.ts | 14 ++ src/app/main/ui/ui.module.ts | 12 + 57 files changed, 1621 insertions(+), 190 deletions(-) create mode 100644 src/app/core/scss/partials/_colors.scss create mode 100644 src/app/main/pages/authentication/login-2/login-2.component.html create mode 100644 src/app/main/pages/authentication/login-2/login-2.component.scss create mode 100644 src/app/main/pages/authentication/login-2/login-2.component.ts create mode 100644 src/app/main/pages/authentication/login/login.component.html create mode 100644 src/app/main/pages/authentication/login/login.component.scss create mode 100644 src/app/main/pages/authentication/login/login.component.ts create mode 100644 src/app/main/pages/authentication/register/register.component.html create mode 100644 src/app/main/pages/authentication/register/register.component.scss create mode 100644 src/app/main/pages/authentication/register/register.component.ts create mode 100644 src/app/main/pages/pages.module.ts create mode 100644 src/app/main/ui/page-layouts/blank/blank.component.html create mode 100644 src/app/main/ui/page-layouts/blank/blank.component.scss create mode 100644 src/app/main/ui/page-layouts/blank/blank.component.ts create mode 100644 src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html create mode 100644 src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.scss create mode 100644 src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts create mode 100644 src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html create mode 100644 src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.scss create mode 100644 src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts create mode 100644 src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html create mode 100644 src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss create mode 100644 src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.scss create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts create mode 100644 src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html create mode 100644 src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.scss create mode 100644 src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts create mode 100644 src/app/main/ui/ui.module.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6c28fef6..d489382f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,7 +5,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { RouterModule, Routes } from '@angular/router'; import 'hammerjs'; -import { ChatModule } from './main/apps/chat/chat.module'; import { ProjectModule } from './main/apps/dashboards/project/project.module'; import { FuseLayoutService } from './core/services/layout.service'; import { FuseNavigationService } from './core/components/navigation/navigation.service'; @@ -14,13 +13,13 @@ import { FuseMatchMedia } from './core/services/match-media.service'; import { FuseNavbarService } from './core/components/layout/navbar/navbar.service'; import { SharedModule } from './core/modules/shared.module'; 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'; import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; import { HttpModule } from '@angular/http'; import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service'; -import { INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS } from '@angular/platform-browser-dynamic/src/platform_providers'; +import { PagesModule } from './main/pages/pages.module'; +import { UIModule } from './main/ui/ui.module'; const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { suppressScrollX: true @@ -66,7 +65,8 @@ const appRoutes: Routes = [ ProjectModule, - UIPageLayoutsModule + PagesModule, + UIModule ], providers : [ FuseNavigationService, diff --git a/src/app/core/components/layout/content/content.component.html b/src/app/core/components/layout/content/content.component.html index 0680b43f..90c6b646 100644 --- a/src/app/core/components/layout/content/content.component.html +++ b/src/app/core/components/layout/content/content.component.html @@ -1 +1 @@ - + \ No newline at end of file diff --git a/src/app/core/components/layout/layout.component.html b/src/app/core/components/layout/layout.component.html index ba8da7b8..470f8265 100644 --- a/src/app/core/components/layout/layout.component.html +++ b/src/app/core/components/layout/layout.component.html @@ -6,81 +6,27 @@
- - + -
+
- - - - - + + + + + - + - - - - - + + + + + -
+
- - - - - - - - -
- - - - - - - - - - - - - - - -
- - - - - - - -
- - - - - - - - - - - - - - - -
- - - - - +
diff --git a/src/app/core/components/layout/layout.component.ts b/src/app/core/components/layout/layout.component.ts index 03ceb3fe..4af4aa59 100644 --- a/src/app/core/components/layout/layout.component.ts +++ b/src/app/core/components/layout/layout.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { FuseLayoutService } from '../../services/layout.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector : 'fuse-layout', @@ -7,24 +8,28 @@ import { FuseLayoutService } from '../../services/layout.service'; styleUrls : ['./layout.component.scss'], encapsulation: ViewEncapsulation.None }) -export class FuseLayoutComponent implements OnInit +export class FuseLayoutComponent implements OnInit, OnDestroy { + onSettingsChanged: Subscription; layoutSettings: { navigation: string, toolbar: string, footer: string }; constructor(private layoutService: FuseLayoutService) { - this.layoutSettings = layoutService.getSettings(); + this.onSettingsChanged = + this.layoutService.onSettingsChanged + .subscribe( + (newSettings) => { + this.layoutSettings = newSettings; + } + ); } ngOnInit() { - this.layoutService.onSettingsChanged - .subscribe( - (newSettings) => - { - this.layoutSettings = newSettings; - } - ); } + ngOnDestroy() + { + this.onSettingsChanged.unsubscribe(); + } } 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 46ac069a..a5a1410d 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 @@ -21,8 +21,7 @@ export class FuseNavCollapseComponent implements OnInit * When navigation changed */ router.events.subscribe( - (event) => - { + (event) => { if ( event instanceof NavigationEnd ) { /** @@ -30,6 +29,7 @@ export class FuseNavCollapseComponent implements OnInit */ if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) ) { + // console.log(this.item); this.expand(); } else @@ -44,8 +44,7 @@ export class FuseNavCollapseComponent implements OnInit * Whenever a navigaiton collapse item toggled */ this.navigationService.onNavCollapseToggled.subscribe( - (clickedItem) => - { + (clickedItem) => { if ( clickedItem.children ) { /** @@ -116,20 +115,23 @@ export class FuseNavCollapseComponent implements OnInit { return false; } + for ( let i = 0; i < arr.children.length; i++ ) { if ( arr.children[i].children ) { - return this.isUrlInChildren(arr.children[i], url); - } - else - { - if ( arr.children[i].url === url ) + if ( this.isUrlInChildren(arr.children[i], url) ) { return true; } } + + if ( arr.children[i].url === url ) + { + return true; + } } + return false; } diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts index 5be3a735..66f4bfcb 100644 --- a/src/app/core/components/navigation/navigation.model.ts +++ b/src/app/core/components/navigation/navigation.model.ts @@ -325,34 +325,24 @@ export class FuseNavigation 'url' : '/ui/page-layouts/simple/full-width' }, { - 'title': 'Left Sidebar', + 'title': 'Left Sidenav', 'type' : 'nav-item', - 'url' : '/ui/page-layouts/simple/left-sidebar' + 'url' : '/ui/page-layouts/simple/left-sidenav' }, { - 'title': 'Left Sidebar Inner', + 'title': 'Left Sidenav 2', 'type' : 'nav-item', - 'url' : '/ui/page-layouts/simple/left-sidebar-inner' + 'url' : '/ui/page-layouts/simple/left-sidenav-2' }, { - 'title': 'Left Sidebar Floating', + 'title': 'Right Sidenav', 'type' : 'nav-item', - 'url' : '/ui/page-layouts/simple/left-sidebar-floating' + 'url' : '/ui/page-layouts/simple/right-sidenav' }, { - 'title': 'Right Sidebar', + 'title': 'Right Sidenav 2', 'type' : 'nav-item', - 'url' : '/ui/page-layouts/simple/right-sidebar' - }, - { - 'title': 'Right Sidebar Inner', - 'type' : 'nav-item', - 'url' : '/ui/page-layouts/simple/sidebar-inner' - }, - { - 'title': 'Right Sidebar Floating', - 'type' : 'nav-item', - 'url' : '/ui/page-layouts/simple/right-sidebar-floating' + 'url' : '/ui/page-layouts/simple/right-sidenav-2' }, { 'title': 'Tabbed', diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss index c68ca411..17a56077 100644 --- a/src/app/core/scss/core.scss +++ b/src/app/core/scss/core.scss @@ -31,6 +31,7 @@ @import "partials/spacing"; @import "partials/global"; @import "partials/icons"; +@import "partials/colors"; @import "partials/material"; @import "partials/angular-material-fix"; @import "partials/typography"; diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss index 89fe0093..a060d5df 100644 --- a/src/app/core/scss/partials/_page-layouts.scss +++ b/src/app/core/scss/partials/_page-layouts.scss @@ -95,7 +95,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; } } - // Left sidenav + // Left sidenav - Right sidenav &.left-sidenav, &.right-sidenav { @@ -254,4 +254,127 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; } } } + + // Simple layout + &.simple { + + // Fullwidth + &.fullwidth, + &.inner-sidenav { + min-height: 100%; + + > .header { + height: $header-height; + min-height: $header-height; + max-height: $header-height; + padding: 24px; + background-color: mat-color($accent); + } + + > .content { + padding: 24px; + } + } + + // Left sidenav - Right sidenav + &.left-sidenav, + &.right-sidenav { + min-height: 100%; + height: 100%; + + // Single scroll + &.single-scroll { + height: auto; + + > md-sidenav-container { + + > .center { + overflow: hidden; + } + } + } + + > md-sidenav-container { + + .sidenav { + width: 240px; + min-width: 240px; + max-width: 240px; + padding: 24px; + z-index: 51; + @include mat-elevation(7); + + &.md-is-locked-open { + width: 220px; + min-width: 220px; + max-width: 220px; + box-shadow: none; + background: transparent; + } + + &.md-stop-transition { + + ~ .mat-sidenav-content { + transition: none; + } + } + } + + .mat-sidenav-content { + overflow: visible; + + .header { + height: $header-height; + min-height: $header-height; + max-height: $header-height; + padding: 24px; + background-color: mat-color($accent); + } + + .center { + overflow: auto; + @include mat-elevation(7); + + .content { + padding: 24px; + background: #FFFFFF; + } + } + } + } + } + + // Tabbed + &.tabbed { + min-height: 100%; + + .header { + height: $header-height; + min-height: $header-height; + max-height: $header-height; + padding: 24px; + background-color: mat-color($accent); + } + + > .content { + + .mat-tab-group { + + .mat-tab-labels { + padding: 0 24px; + } + + .mat-tab-body { + padding: 24px; + } + } + } + } + } + + // Blank layout + &.blank { + min-height: 100%; + padding: 24px; + } } diff --git a/src/app/core/scss/partials/_typography.scss b/src/app/core/scss/partials/_typography.scss index 9e87ef62..ab9e0919 100644 --- a/src/app/core/scss/partials/_typography.scss +++ b/src/app/core/scss/partials/_typography.scss @@ -1,4 +1,3 @@ - // Truncate .text-truncate { display: block; diff --git a/src/app/core/services/layout.service.ts b/src/app/core/services/layout.service.ts index 0a705ff6..d7515c6d 100644 --- a/src/app/core/services/layout.service.ts +++ b/src/app/core/services/layout.service.ts @@ -1,13 +1,19 @@ -import { EventEmitter, Injectable } from '@angular/core'; -import { NavigationStart, Router } from '@angular/router'; +import { Injectable } from '@angular/core'; +import { ActivatedRoute, ActivatedRouteSnapshot, NavigationStart, Router, NavigationEnd } from '@angular/router'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; + +import 'rxjs/add/operator/filter'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/mergeMap'; @Injectable() export class FuseLayoutService { defaultSettings: { navigation: string, toolbar: string, footer: string }; - settings: { navigation: string, toolbar: string, footer: string }; - onSettingsChanged = new EventEmitter<{ navigation: string, toolbar: string, footer: string }>(); + // onSettingsChanged = new EventEmitter<{ navigation: string, toolbar: string, footer: string }>(); + + onSettingsChanged: BehaviorSubject<{ navigation: string, toolbar: string, footer: string }>; /** * @param router @@ -17,53 +23,47 @@ export class FuseLayoutService // Set the default settings this.defaultSettings = { navigation: 'left', // 'right', 'left', 'top', none - toolbar : 'below', // 'above', 'below', none + toolbar : 'none', // 'above', 'below', none footer : 'none' // 'above', 'below', none }; - // Assign default settings at the init - this.settings = {...this.defaultSettings}; + this.onSettingsChanged = new BehaviorSubject(this.defaultSettings); - // Reset the default settings whenever navigation starts router.events.subscribe( - (event) => - { + (event) => { if ( event instanceof NavigationStart ) { - this.settings = {...this.defaultSettings}; - this.onSettingsChanged.emit(this.settings); + const routerConfig = router.config; + + const currentRouteConfig = routerConfig.find((config) => { + return '/' + config.path === event.url; + }); + + if ( !currentRouteConfig || !currentRouteConfig.data ) + { + return; + } + + if ( currentRouteConfig.data.layout ) + { + this.setSettings(currentRouteConfig.data.layout); + } + else + { + this.setSettings(this.defaultSettings); + } } } ); } - /** - * Gets settings - * @returns {{navigation: string, toolbar: string, footer: string}} - */ - getSettings() - { - return {...this.settings}; - } - /** * Sets settings - * @param newSettings + * @param settings */ - setSettings(newSettings) + setSettings(settings) { - 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); + const newSettings = Object.assign({}, this.defaultSettings, settings); + this.onSettingsChanged.next(newSettings); } } diff --git a/src/app/main/apps/dashboards/project/project.component.html b/src/app/main/apps/dashboards/project/project.component.html index e24cddf8..a9be3d49 100644 --- a/src/app/main/apps/dashboards/project/project.component.html +++ b/src/app/main/apps/dashboards/project/project.component.html @@ -1,5 +1,5 @@ Navigation: - + Left Right None @@ -9,7 +9,7 @@ Navigation:
Toolbar: - + Below Above None @@ -19,7 +19,7 @@ Toolbar:
Footer: - + Below Above None diff --git a/src/app/main/apps/dashboards/project/project.component.ts b/src/app/main/apps/dashboards/project/project.component.ts index ece466af..48fb55d2 100644 --- a/src/app/main/apps/dashboards/project/project.component.ts +++ b/src/app/main/apps/dashboards/project/project.component.ts @@ -1,33 +1,39 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FuseLayoutService } from '../../../../core/services/layout.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector : 'fuse-project', templateUrl: './project.component.html', styleUrls : ['./project.component.scss'] }) -export class ProjectComponent implements OnInit +export class ProjectComponent implements OnInit, OnDestroy { - layoutSettings: any; + onSettingsChanged: Subscription; + layoutSettings: { navigation: string, toolbar: string, footer: string }; constructor(private layoutService: FuseLayoutService) { - /*this.layoutService.setSettings({ - navigation: 'left', - toolbar : 'above', - footer : 'above' - });*/ - // this.layoutSettings = Object.assign(this.layoutSettings, this.layoutService.getSettings()); - } - - onSettingsChanged() - { - this.layoutService.setSettings({...this.layoutSettings}); + this.onSettingsChanged = + this.layoutService.onSettingsChanged + .subscribe( + (newSettings) => { + this.layoutSettings = newSettings; + } + ); } ngOnInit() { - this.layoutSettings = this.layoutService.getSettings(); } + ngOnDestroy() + { + this.onSettingsChanged.unsubscribe(); + } + + onLayoutSettingsChanged() + { + this.layoutService.onSettingsChanged.next(this.layoutSettings); + } } diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.html b/src/app/main/apps/mail/mail-details/mail-details.component.html index 41d2c451..7ffea93d 100644 --- a/src/app/main/apps/mail/mail-details/mail-details.component.html +++ b/src/app/main/apps/mail/mail-details/mail-details.component.html @@ -1,6 +1,6 @@
- email - Select a message to read + email + Select a message to read
diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.scss b/src/app/main/apps/mail/mail-details/mail-details.component.scss index a74007ae..671f37c8 100644 --- a/src/app/main/apps/mail/mail-details/mail-details.component.scss +++ b/src/app/main/apps/mail/mail-details/mail-details.component.scss @@ -7,6 +7,11 @@ background: #FFFFFF; padding: 24px; + .select-message-text { + font-size: 24px; + font-weight: 300; + } + .mail-header { padding-bottom: 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.html b/src/app/main/apps/mail/mail-list/mail-list.component.html index 98f777dc..713a359c 100644 --- a/src/app/main/apps/mail/mail-list/mail-list.component.html +++ b/src/app/main/apps/mail/mail-list/mail-list.component.html @@ -1,5 +1,5 @@
- There are no messages! + There are no messages!
+
diff --git a/src/app/main/apps/mail/mail.component.scss b/src/app/main/apps/mail/mail.component.scss index ad94f7b6..b3d82494 100644 --- a/src/app/main/apps/mail/mail.component.scss +++ b/src/app/main/apps/mail/mail.component.scss @@ -1,6 +1,6 @@ @import "src/app/core/scss/fuse"; -:host, #mail { +:host { width: 100%; height: 100%; diff --git a/src/app/main/pages/authentication/login-2/login-2.component.html b/src/app/main/pages/authentication/login-2/login-2.component.html new file mode 100644 index 00000000..5c92c15b --- /dev/null +++ b/src/app/main/pages/authentication/login-2/login-2.component.html @@ -0,0 +1,85 @@ +
+ +
+ + +
+ Welcome to the FUSE! +
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat, + vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra. +
+
+ +
+ +
+ + + +
LOGIN TO YOUR ACCOUNT
+
Sed mollis velit facilisis facilisis viverra
+ +
+ + + + + Email is required + + + Please enter a valid email address + + + + + + + Password is required + + + +
+ + Remember Me + + + Forgot Password? +
+ + +
+ +
+ OR +
+ +
+ + + + + +
+ +
+ Don't have an account? + Create an account +
+
+
+
\ No newline at end of file diff --git a/src/app/main/pages/authentication/login-2/login-2.component.scss b/src/app/main/pages/authentication/login-2/login-2.component.scss new file mode 100644 index 00000000..07292966 --- /dev/null +++ b/src/app/main/pages/authentication/login-2/login-2.component.scss @@ -0,0 +1,215 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #login { + height: 100%; + overflow: hidden; + background: url('/assets/images/backgrounds/march.jpg') no-repeat; + background-size: cover; + + #login-intro { + padding: 128px; + + @include media-breakpoint('sm') { + padding: 128px 64px; + } + + .logo { + width: 128px; + height: 128px; + line-height: 128px; + font-size: 86px; + font-weight: 500; + margin-bottom: 32px; + color: #FFFFFF; + border-radius: 2px; + text-align: center; + background: mat-color($accent); + } + + .title { + font-size: 42px; + font-weight: 300; + line-height: 1; + } + + .description { + padding-top: 8px; + font-size: 14px; + max-width: 600px; + } + } + + #login-form-wrapper { + width: 400px; + min-width: 400px; + max-width: 400px; + height: 100%; + background: #FFFFFF; + @include mat-elevation(7); + + @include media-breakpoint('sm') { + width: 360px; + min-width: 360px; + max-width: 360px; + } + + @include media-breakpoint('xs') { + width: 100%; + min-width: 100%; + max-width: 100%; + } + + #login-form { + padding: 128px 48px 48px 48px; + + @include media-breakpoint('xs') { + text-align: center; + padding: 24px; + } + + .logo { + width: 128px; + height: 128px; + line-height: 128px; + font-size: 86px; + font-weight: 500; + text-align: center; + margin: 32px auto; + color: #FFFFFF; + border-radius: 2px; + background: mat-color($accent); + } + + .title { + font-size: 21px; + } + + .description { + padding-top: 8px; + } + + form { + width: 100%; + padding-top: 32px; + + md-input-container { + width: 100%; + + @include media-breakpoint('xs') { + width: 80%; + } + } + + md-checkbox { + margin: 0; + } + + .remember-forgot-password { + font-size: 13px; + margin-top: 8px; + + .remember-me { + margin-bottom: 16px + } + + .forgot-password { + font-size: 13px; + font-weight: 500; + margin-bottom: 16px + } + } + + .submit-button { + width: 100%; + margin: 16px auto; + display: block; + + @include media-breakpoint('xs') { + width: 80%; + } + } + } + + .separator { + font-size: 15px; + font-weight: 600; + margin: 24px auto; + position: relative; + overflow: hidden; + width: 100px; + text-align: center; + color: rgba(0, 0, 0, 0.54); + + .text { + display: inline-flex; + position: relative; + padding: 0 8px; + z-index: 9999; + + &:before, &:after { + content: ''; + display: block; + width: 30px; + position: absolute; + top: 10px; + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + + &:before { + right: 100%; + } + + &:after { + left: 100%; + } + } + } + + button { + + &.google, + &.facebook { + width: 70%; + text-transform: none; + color: #FFFFFF; + font-size: 13px; + + @include media-breakpoint('xs') { + width: 60%; + } + + md-icon { + color: #FFFFFF; + margin: 0 8px 0 0; + } + } + + &.google { + background-color: #D73D32; + margin-bottom: 8px; + } + + &.facebook { + background-color: rgb(63, 92, 154); + } + } + + .register { + margin: 32px auto 24px auto; + width: 250px; + font-weight: 500; + + .text { + margin-right: 8px; + } + + .link { + + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/authentication/login-2/login-2.component.ts b/src/app/main/pages/authentication/login-2/login-2.component.ts new file mode 100644 index 00000000..10a29939 --- /dev/null +++ b/src/app/main/pages/authentication/login-2/login-2.component.ts @@ -0,0 +1,61 @@ +import { Component, OnInit } from '@angular/core'; + +import { FuseLayoutService } from '../../../../core/services/layout.service'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector : 'fuse-login-2', + templateUrl: './login-2.component.html', + styleUrls : ['./login-2.component.scss'] +}) +export class Login2Component implements OnInit +{ + loginForm: FormGroup; + loginFormErrors: any; + + constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder) + { + this.layoutService.setSettings({ + navigation: 'none', + toolbar : 'none', + footer : 'none' + }); + + this.loginFormErrors = { + email : {}, + password: {} + }; + } + + ngOnInit() + { + this.loginForm = this.formBuilder.group({ + email : ['', [Validators.required, Validators.email]], + password: ['', Validators.required] + }); + + this.loginForm.valueChanges.subscribe(() => { + this.onLoginFormValuesChanged(); + }); + } + + onLoginFormValuesChanged() + { + for ( const field in this.loginFormErrors ) + { + if ( this.loginFormErrors.hasOwnProperty(field) ) + { + // Clear previous errors + this.loginFormErrors[field] = {}; + + // Get the control + const control = this.loginForm.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.loginFormErrors[field] = control.errors; + } + } + } + } +} diff --git a/src/app/main/pages/authentication/login/login.component.html b/src/app/main/pages/authentication/login/login.component.html new file mode 100644 index 00000000..333c7986 --- /dev/null +++ b/src/app/main/pages/authentication/login/login.component.html @@ -0,0 +1,65 @@ +
+ +
+ +
+ + +
LOGIN TO YOUR ACCOUNT
+ +
+ + + + + Email is required + + + Please enter a valid email address + + + + + + + Password is required + + + +
+ + Remember Me + + + Forgot Password? +
+ + + +
+ +
+ OR +
+ + + + + +
+ Don't have an account? + Create an account +
+
+
+
\ No newline at end of file diff --git a/src/app/main/pages/authentication/login/login.component.scss b/src/app/main/pages/authentication/login/login.component.scss new file mode 100644 index 00000000..16a48f24 --- /dev/null +++ b/src/app/main/pages/authentication/login/login.component.scss @@ -0,0 +1,155 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #login { + height: 100%; + background: url('/assets/images/backgrounds/march.jpg') no-repeat; + background-size: cover; + + #login-form-wrapper { + flex: 1 0 auto; + padding: 32px; + + @include media-breakpoint('xs') { + padding: 16px; + } + + #login-form { + width: 384px; + max-width: 384px; + padding: 32px; + background: #FFFFFF; + text-align: center; + @include mat-elevation(7); + + @include media-breakpoint('xs') { + padding: 24px; + width: 100%; + } + + .logo { + width: 128px; + height: 128px; + line-height: 128px; + font-size: 86px; + font-weight: 500; + margin: 32px auto; + color: #FFFFFF; + border-radius: 2px; + background: mat-color($accent); + } + + .title { + font-size: 17px; + margin: 16px 0 32px 0; + } + + form { + width: 100%; + text-align: left; + + md-input-container { + width: 100%; + } + + md-checkbox { + margin: 0; + } + + .remember-forgot-password { + font-size: 13px; + margin-top: 8px; + + .remember-me { + margin-bottom: 16px + } + + .forgot-password { + font-size: 13px; + font-weight: 500; + margin-bottom: 16px + } + } + + .submit-button { + width: 220px; + margin: 16px auto; + display: block; + + @include media-breakpoint('xs') { + width: 90%; + } + } + } + + .register { + margin: 32px auto 24px auto; + font-weight: 500; + + .text { + margin-right: 8px; + } + } + + .separator { + font-size: 15px; + font-weight: 600; + margin: 24px auto; + position: relative; + overflow: hidden; + width: 100px; + color: rgba(0, 0, 0, 0.54); + + .text { + display: inline-flex; + position: relative; + padding: 0 8px; + z-index: 9999; + + &:before, &:after { + content: ''; + display: block; + width: 30px; + position: absolute; + top: 10px; + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + + &:before { + right: 100%; + } + + &:after { + left: 100%; + } + } + } + + button { + + &.google, + &.facebook { + width: 192px; + text-transform: none; + color: #FFFFFF; + font-size: 13px; + } + + @include media-breakpoint('xs') { + width: 80%; + } + + &.google { + background-color: #D73D32; + margin-bottom: 8px; + } + + &.facebook { + background-color: rgb(63, 92, 154); + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/authentication/login/login.component.ts b/src/app/main/pages/authentication/login/login.component.ts new file mode 100644 index 00000000..f2292253 --- /dev/null +++ b/src/app/main/pages/authentication/login/login.component.ts @@ -0,0 +1,55 @@ +import { Component, OnInit } from '@angular/core'; + +import { FuseLayoutService } from '../../../../core/services/layout.service'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector : 'fuse-login', + templateUrl: './login.component.html', + styleUrls : ['./login.component.scss'] +}) +export class LoginComponent implements OnInit +{ + loginForm: FormGroup; + loginFormErrors: any; + + constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder) + { + this.loginFormErrors = { + email : {}, + password: {} + }; + } + + ngOnInit() + { + this.loginForm = this.formBuilder.group({ + email : ['', [Validators.required, Validators.email]], + password: ['', Validators.required] + }); + + this.loginForm.valueChanges.subscribe(() => { + this.onLoginFormValuesChanged(); + }); + } + + onLoginFormValuesChanged() + { + for ( const field in this.loginFormErrors ) + { + if ( this.loginFormErrors.hasOwnProperty(field) ) + { + // Clear previous errors + this.loginFormErrors[field] = {}; + + // Get the control + const control = this.loginForm.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.loginFormErrors[field] = control.errors; + } + } + } + } +} diff --git a/src/app/main/pages/authentication/register/register.component.html b/src/app/main/pages/authentication/register/register.component.html new file mode 100644 index 00000000..fb8d974c --- /dev/null +++ b/src/app/main/pages/authentication/register/register.component.html @@ -0,0 +1,65 @@ +
+ +
+ +
+ + +
CREATE AN ACCOUNT
+ +
+ + + + + Name is required + + + + + + + Email is required + + + Please enter a valid email address + + + + + + + Password is required + + + + + + + Password confirmation is required + + + +
+ + I read and accept + + terms and conditions +
+ + + +
+ +
+ Already have an account? + Login +
+
+
+
\ No newline at end of file diff --git a/src/app/main/pages/authentication/register/register.component.scss b/src/app/main/pages/authentication/register/register.component.scss new file mode 100644 index 00000000..649a4be3 --- /dev/null +++ b/src/app/main/pages/authentication/register/register.component.scss @@ -0,0 +1,149 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #register { + height: 100%; + background: url('/assets/images/backgrounds/march.jpg') no-repeat; + background-size: cover; + + #register-form-wrapper { + flex: 1 0 auto; + padding: 32px; + + @include media-breakpoint('xs') { + padding: 16px; + } + + #register-form { + width: 384px; + max-width: 384px; + padding: 32px; + background: #FFFFFF; + text-align: center; + @include mat-elevation(7); + + @include media-breakpoint('xs') { + padding: 24px; + width: 100%; + } + + .logo { + width: 128px; + height: 128px; + line-height: 128px; + font-size: 86px; + font-weight: 500; + margin: 32px auto; + color: #FFFFFF; + border-radius: 2px; + background: mat-color($accent); + } + + .title { + font-size: 17px; + margin: 16px 0 32px 0; + } + + form { + width: 100%; + text-align: left; + + md-input-container { + width: 100%; + } + + md-checkbox { + margin: 0; + } + + .terms { + font-size: 13px; + margin: 16px 0 32px 0; + + a { + margin-left: 4px; + } + } + + .submit-button { + width: 220px; + margin: 16px auto; + display: block; + + @include media-breakpoint('xs') { + width: 90%; + } + } + } + + .register { + margin: 32px auto 24px auto; + font-weight: 500; + + .text { + margin-right: 8px; + } + } + + .separator { + font-size: 15px; + font-weight: 600; + margin: 24px auto; + position: relative; + overflow: hidden; + width: 100px; + color: rgba(0, 0, 0, 0.54); + + .text { + display: inline-flex; + position: relative; + padding: 0 8px; + z-index: 9999; + + &:before, &:after { + content: ''; + display: block; + width: 30px; + position: absolute; + top: 10px; + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + + &:before { + right: 100%; + } + + &:after { + left: 100%; + } + } + } + + button { + + &.google, + &.facebook { + width: 192px; + text-transform: none; + color: #FFFFFF; + font-size: 13px; + } + + @include media-breakpoint('xs') { + width: 80%; + } + + &.google { + background-color: #D73D32; + margin-bottom: 8px; + } + + &.facebook { + background-color: rgb(63, 92, 154); + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/authentication/register/register.component.ts b/src/app/main/pages/authentication/register/register.component.ts new file mode 100644 index 00000000..4569927f --- /dev/null +++ b/src/app/main/pages/authentication/register/register.component.ts @@ -0,0 +1,60 @@ +import { Component, OnInit } from '@angular/core'; + +import { FuseLayoutService } from '../../../../core/services/layout.service'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector : 'fuse-register', + templateUrl: './register.component.html', + styleUrls : ['./register.component.scss'] +}) +export class RegisterComponent implements OnInit +{ + registerForm: FormGroup; + registerFormErrors: any; + + constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder) + { + this.registerFormErrors = { + name : {}, + email : {}, + password : {}, + passwordConfirm: {} + }; + } + + ngOnInit() + { + + this.registerForm = this.formBuilder.group({ + name : ['', Validators.required], + email : ['', [Validators.required, Validators.email]], + password : ['', Validators.required], + passwordConfirm: ['', Validators.required] + }); + + this.registerForm.valueChanges.subscribe(() => { + this.onRegisterFormValuesChanged(); + }); + } + + onRegisterFormValuesChanged() + { + for ( const field in this.registerFormErrors ) + { + if ( this.registerFormErrors.hasOwnProperty(field) ) + { + // Clear previous errors + this.registerFormErrors[field] = {}; + + // Get the control + const control = this.registerForm.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.registerFormErrors[field] = control.errors; + } + } + } + } +} diff --git a/src/app/main/pages/pages.module.ts b/src/app/main/pages/pages.module.ts new file mode 100644 index 00000000..5b4fb399 --- /dev/null +++ b/src/app/main/pages/pages.module.ts @@ -0,0 +1,58 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../../core/modules/shared.module'; +import { RouterModule } from '@angular/router'; + +import { LoginComponent } from './authentication/login/login.component'; +import { Login2Component } from './authentication/login-2/login-2.component'; +import { RegisterComponent } from './authentication/register/register.component'; + +const routes = [ + { + path : 'pages/auth/login', + component: LoginComponent, + data : { + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } + } + }, + { + path : 'pages/auth/login-2', + component: Login2Component, + data : { + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } + } + }, + { + path : 'pages/auth/register', + component: RegisterComponent, + data : { + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } + } + } +]; + +@NgModule({ + imports : [ + SharedModule, + RouterModule.forChild(routes) + ], + declarations: [ + LoginComponent, + Login2Component, + RegisterComponent + ] +}) +export class PagesModule +{ +} diff --git a/src/app/main/ui/page-layouts/blank/blank.component.html b/src/app/main/ui/page-layouts/blank/blank.component.html new file mode 100644 index 00000000..55a76587 --- /dev/null +++ b/src/app/main/ui/page-layouts/blank/blank.component.html @@ -0,0 +1,5 @@ +
+ +

Blank Page

+ +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/blank/blank.component.scss b/src/app/main/ui/page-layouts/blank/blank.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/blank/blank.component.ts b/src/app/main/ui/page-layouts/blank/blank.component.ts new file mode 100644 index 00000000..6b3c0575 --- /dev/null +++ b/src/app/main/ui/page-layouts/blank/blank.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-blank', + templateUrl: './blank.component.html', + styleUrls : ['./blank.component.scss'] +}) +export class BlankComponent +{ + constructor() + { + } +} diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html index 6c897c08..b057cab9 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html +++ b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html @@ -1,7 +1,7 @@
-
+
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 c207b6b2..4587aef1 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,7 +1,7 @@
-
+
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html index 75c5ef4d..4724141b 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html @@ -1,7 +1,7 @@
-
+
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 index e8d46989..c4351a01 100644 --- 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 @@ -1,7 +1,7 @@
-
+
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html index b719a19e..761e8111 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html +++ b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html @@ -1,7 +1,7 @@
-
+
diff --git a/src/app/main/ui/page-layouts/page-layouts.module.ts b/src/app/main/ui/page-layouts/page-layouts.module.ts index a91089d5..95696fe7 100644 --- a/src/app/main/ui/page-layouts/page-layouts.module.ts +++ b/src/app/main/ui/page-layouts/page-layouts.module.ts @@ -8,37 +8,66 @@ import { CardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.c import { CardedLeftSidenav2Component } from './carded/left-sidenav-2/left-sidenav-2.component'; import { CardedRightSidenavComponent } from './carded/right-sidenav/right-sidenav.component'; import { CardedRightSidenav2Component } from './carded/right-sidenav-2/right-sidenav-2.component'; +import { SimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component'; +import { SimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component'; +import { SimpleLeftSidenav2Component } from './simple/left-sidenav-2/left-sidenav-2.component'; +import { SimpleRightSidenavComponent } from './simple/right-sidenav/right-sidenav.component'; +import { SimpleRightSidenav2Component } from './simple/right-sidenav-2/right-sidenav-2.component'; +import { TabbedComponent } from './simple/tabbed/tabbed.component'; +import { BlankComponent } from './blank/blank.component'; const routes: Routes = [ { path : 'ui/page-layouts/carded/full-width', - component: CardedFullWidthComponent, - children : [] + component: CardedFullWidthComponent }, { path : 'ui/page-layouts/carded/full-width-2', - component: CardedFullWidth2Component, - children : [] + component: CardedFullWidth2Component }, { path : 'ui/page-layouts/carded/left-sidenav', - component: CardedLeftSidenavComponent, - children : [] + component: CardedLeftSidenavComponent }, { path : 'ui/page-layouts/carded/left-sidenav-2', - component: CardedLeftSidenav2Component, - children : [] + component: CardedLeftSidenav2Component }, { path : 'ui/page-layouts/carded/right-sidenav', - component: CardedRightSidenavComponent, - children : [] + component: CardedRightSidenavComponent }, { path : 'ui/page-layouts/carded/right-sidenav-2', - component: CardedRightSidenav2Component, - children : [] + component: CardedRightSidenav2Component + }, + { + path : 'ui/page-layouts/simple/full-width', + component: SimpleFullWidthComponent + }, + { + path : 'ui/page-layouts/simple/left-sidenav', + component: SimpleLeftSidenavComponent + }, + { + path : 'ui/page-layouts/simple/left-sidenav-2', + component: SimpleLeftSidenav2Component + }, + { + path : 'ui/page-layouts/simple/right-sidenav', + component: SimpleRightSidenavComponent + }, + { + path : 'ui/page-layouts/simple/right-sidenav-2', + component: SimpleRightSidenav2Component + }, + { + path : 'ui/page-layouts/simple/tabbed', + component: TabbedComponent + }, + { + path : 'ui/page-layouts/blank', + component: BlankComponent } ]; @@ -54,7 +83,14 @@ const routes: Routes = [ CardedLeftSidenavComponent, CardedLeftSidenav2Component, CardedRightSidenavComponent, - CardedRightSidenav2Component + CardedRightSidenav2Component, + SimpleFullWidthComponent, + SimpleLeftSidenavComponent, + SimpleLeftSidenav2Component, + SimpleRightSidenavComponent, + SimpleRightSidenav2Component, + TabbedComponent, + BlankComponent ] }) export class UIPageLayoutsModule diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html new file mode 100644 index 00000000..2e8a7fd2 --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html @@ -0,0 +1,17 @@ +
+ + +
+

Fullwidth

+
+ + + +
+ + + +
+ + +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.scss b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts new file mode 100644 index 00000000..7ade9c68 --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-simple-fullwidth', + templateUrl: './fullwidth.component.html', + styleUrls : ['./fullwidth.component.scss'] +}) +export class SimpleFullWidthComponent +{ + constructor() + { + } +} diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html new file mode 100644 index 00000000..3b7f8a24 --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html @@ -0,0 +1,46 @@ +
+ + + + + + + + + + + + +
+ + +
+ + + +
+

Left sidenav with page scroll

+
+ +
+ + + +
+ + + +
+ + +
+ + + + +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.scss b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts new file mode 100644 index 00000000..9c706359 --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-simple-left-sidenav-2', + templateUrl: './left-sidenav-2.component.html', + styleUrls : ['./left-sidenav-2.component.scss'] +}) +export class SimpleLeftSidenav2Component +{ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html new file mode 100644 index 00000000..d0e60e12 --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html @@ -0,0 +1,46 @@ +
+ + + + + + + + + + + + +
+ + +
+ + + +
+

Left sidenav with content scroll

+
+ +
+ + + +
+ + + +
+ + +
+ + + + +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts new file mode 100644 index 00000000..1b5813e5 --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-simple-left-sidenav', + templateUrl: './left-sidenav.component.html', + styleUrls : ['./left-sidenav.component.scss'] +}) +export class SimpleLeftSidenavComponent +{ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html new file mode 100644 index 00000000..a66c4d91 --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html @@ -0,0 +1,46 @@ +
+ + + + + + + + + + + + +
+ + +
+ + + +
+

Right sidenav with page scroll

+
+ +
+ + + +
+ + + +
+ + +
+ + + + +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.scss b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts new file mode 100644 index 00000000..a03ff34a --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-simple-right-sidenav-2', + templateUrl: './right-sidenav-2.component.html', + styleUrls : ['./right-sidenav-2.component.scss'] +}) +export class SimpleRightSidenav2Component +{ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html new file mode 100644 index 00000000..b830afa0 --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html @@ -0,0 +1,46 @@ +
+ + + + + + + + + + + + +
+ + +
+ + + +
+

Right sidenav with content scroll

+
+ +
+ + + +
+ + + +
+ + +
+ + + + +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts new file mode 100644 index 00000000..1806001b --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-simple-right-sidenav', + templateUrl: './right-sidenav.component.html', + styleUrls : ['./right-sidenav.component.scss'] +}) +export class SimpleRightSidenavComponent +{ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html new file mode 100644 index 00000000..28b5b1f9 --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html @@ -0,0 +1,31 @@ +
+ + +
+

Tabbed

+
+ + + +
+ + + + + + + + + + + + + + + + + +
+ + +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.scss b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts new file mode 100644 index 00000000..5d2d634e --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-tabbed', + templateUrl: './tabbed.component.html', + styleUrls : ['./tabbed.component.scss'] +}) +export class TabbedComponent +{ + constructor() + { + } + +} diff --git a/src/app/main/ui/ui.module.ts b/src/app/main/ui/ui.module.ts new file mode 100644 index 00000000..036b1d48 --- /dev/null +++ b/src/app/main/ui/ui.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { UIPageLayoutsModule } from './page-layouts/page-layouts.module'; + + +@NgModule({ + imports : [ + UIPageLayoutsModule + ] +}) +export class UIModule +{ +}