diff options
Diffstat (limited to 'webapp/src/app/@theme/layouts')
12 files changed, 1034 insertions, 0 deletions
diff --git a/webapp/src/app/@theme/layouts/index.ts b/webapp/src/app/@theme/layouts/index.ts new file mode 100644 index 0000000..47d2015 --- /dev/null +++ b/webapp/src/app/@theme/layouts/index.ts @@ -0,0 +1,6 @@ +export * from './one-column/one-column.layout'; +export * from './two-columns/two-columns.layout'; +export * from './three-columns/three-columns.layout'; +export * from './sample/sample.layout'; +// XDS_MODS +export * from './xds/xds.layout'; diff --git a/webapp/src/app/@theme/layouts/one-column/one-column.layout.scss b/webapp/src/app/@theme/layouts/one-column/one-column.layout.scss new file mode 100644 index 0000000..7ccf7b7 --- /dev/null +++ b/webapp/src/app/@theme/layouts/one-column/one-column.layout.scss @@ -0,0 +1,130 @@ +@import '../../styles/themes'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/breakpoints'; + +@include nb-install-component() { + nb-layout-column.small { + flex: 0.15 !important; + } + + nb-sidebar.settings-sidebar { + $sidebar-width: 7.5rem; + + transition: width 0.3s ease; + width: $sidebar-width; + overflow: hidden; + + &.collapsed { + width: 0; + + /deep/ .main-container { + width: 0; + + .scrollable { + width: $sidebar-width; + padding: 1.25rem; + } + } + } + + /deep/ .main-container { + width: $sidebar-width; + background: nb-theme(color-bg); + transition: width 0.3s ease; + overflow: hidden; + + .scrollable { + width: $sidebar-width; + } + + @include nb-for-theme(cosmic) { + background: nb-theme(layout-bg); + } + } + } + + nb-sidebar.menu-sidebar { + + margin-top: nb-theme(sidebar-header-gap); + + /deep/ .main-container { + height: + calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important; + border-top-right-radius: nb-theme(radius); + } + + /deep/ nb-sidebar-header { + padding-bottom: 0.5rem; + text-align: center; + } + + background: transparent; + + .main-btn { + padding: 0.75rem 2.5rem; + margin-top: -2rem; + font-weight: bold; + transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48); + + i { + font-size: 2rem; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + } + span { + padding-left: 0.25rem; + } + + i, span { + vertical-align: middle; + } + } + + &.compacted { + + /deep/ nb-sidebar-header { + padding-left: 0; + padding-right: 0; + } + + .main-btn { + width: 46px; + height: 44px; + padding: 0.375rem; + border-radius: 5px; + transition: none; + + span { + display: none; + } + } + } + } + + @include media-breakpoint-down(xs) { + .main-content { + padding: 0.75rem !important; + + } + } + + @include media-breakpoint-down(sm) { + + nb-sidebar.menu-sidebar { + + margin-top: 0; + + /deep/ .main-container { + height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important; + border-top-right-radius: 0; + + .scrollable { + padding-top: 0; + } + } + } + + .main-btn { + display: none; + } + } +} diff --git a/webapp/src/app/@theme/layouts/one-column/one-column.layout.ts b/webapp/src/app/@theme/layouts/one-column/one-column.layout.ts new file mode 100644 index 0000000..beeaf30 --- /dev/null +++ b/webapp/src/app/@theme/layouts/one-column/one-column.layout.ts @@ -0,0 +1,35 @@ +import { Component } from '@angular/core'; + +// TODO: move layouts into the framework +@Component({ + selector: 'ngx-one-column-layout', + styleUrls: ['./one-column.layout.scss'], + template: ` + <nb-layout> + <nb-layout-header fixed> + <ngx-header></ngx-header> + </nb-layout-header> + + <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive> + <nb-sidebar-header> + <!-- XDS_MODS + <a href="#" class="btn btn-hero-success main-btn"> + <i class="ion ion-social-github"></i> <span>Support Us</span> + </a> + --> + </nb-sidebar-header> + <ng-content select="nb-menu"></ng-content> + </nb-sidebar> + + <nb-layout-column> + <ng-content select="router-outlet"></ng-content> + </nb-layout-column> + + <nb-layout-footer fixed> + <ngx-footer></ngx-footer> + </nb-layout-footer> + </nb-layout> + `, +}) +export class OneColumnLayoutComponent { +} diff --git a/webapp/src/app/@theme/layouts/sample/sample.layout.scss b/webapp/src/app/@theme/layouts/sample/sample.layout.scss new file mode 100644 index 0000000..7ccf7b7 --- /dev/null +++ b/webapp/src/app/@theme/layouts/sample/sample.layout.scss @@ -0,0 +1,130 @@ +@import '../../styles/themes'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/breakpoints'; + +@include nb-install-component() { + nb-layout-column.small { + flex: 0.15 !important; + } + + nb-sidebar.settings-sidebar { + $sidebar-width: 7.5rem; + + transition: width 0.3s ease; + width: $sidebar-width; + overflow: hidden; + + &.collapsed { + width: 0; + + /deep/ .main-container { + width: 0; + + .scrollable { + width: $sidebar-width; + padding: 1.25rem; + } + } + } + + /deep/ .main-container { + width: $sidebar-width; + background: nb-theme(color-bg); + transition: width 0.3s ease; + overflow: hidden; + + .scrollable { + width: $sidebar-width; + } + + @include nb-for-theme(cosmic) { + background: nb-theme(layout-bg); + } + } + } + + nb-sidebar.menu-sidebar { + + margin-top: nb-theme(sidebar-header-gap); + + /deep/ .main-container { + height: + calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important; + border-top-right-radius: nb-theme(radius); + } + + /deep/ nb-sidebar-header { + padding-bottom: 0.5rem; + text-align: center; + } + + background: transparent; + + .main-btn { + padding: 0.75rem 2.5rem; + margin-top: -2rem; + font-weight: bold; + transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48); + + i { + font-size: 2rem; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + } + span { + padding-left: 0.25rem; + } + + i, span { + vertical-align: middle; + } + } + + &.compacted { + + /deep/ nb-sidebar-header { + padding-left: 0; + padding-right: 0; + } + + .main-btn { + width: 46px; + height: 44px; + padding: 0.375rem; + border-radius: 5px; + transition: none; + + span { + display: none; + } + } + } + } + + @include media-breakpoint-down(xs) { + .main-content { + padding: 0.75rem !important; + + } + } + + @include media-breakpoint-down(sm) { + + nb-sidebar.menu-sidebar { + + margin-top: 0; + + /deep/ .main-container { + height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important; + border-top-right-radius: 0; + + .scrollable { + padding-top: 0; + } + } + } + + .main-btn { + display: none; + } + } +} diff --git a/webapp/src/app/@theme/layouts/sample/sample.layout.ts b/webapp/src/app/@theme/layouts/sample/sample.layout.ts new file mode 100644 index 0000000..6d35c09 --- /dev/null +++ b/webapp/src/app/@theme/layouts/sample/sample.layout.ts @@ -0,0 +1,145 @@ +import { Component, OnDestroy } from '@angular/core'; +import { + NbMediaBreakpoint, + NbMediaBreakpointsService, + NbMenuItem, + NbMenuService, + NbSidebarService, + NbThemeService, +} from '@nebular/theme'; + +import { StateService } from '../../../@core/data/state.service'; + +import { Subscription } from 'rxjs/Subscription'; +import 'rxjs/add/operator/withLatestFrom'; +import 'rxjs/add/operator/delay'; + +// TODO: move layouts into the framework +@Component({ + selector: 'ngx-sample-layout', + styleUrls: ['./sample.layout.scss'], + template: ` + <nb-layout [center]="layout.id === 'center-column'" windowMode> + <nb-layout-header fixed> + <ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header> + </nb-layout-header> + + <nb-sidebar class="menu-sidebar" + tag="menu-sidebar" + responsive + [right]="sidebar.id === 'right'"> + <nb-sidebar-header> + <a href="#" class="btn btn-hero-success main-btn"> + <i class="ion ion-social-github"></i> <span>Support Us</span> + </a> + </nb-sidebar-header> + <ng-content select="nb-menu"></ng-content> + </nb-sidebar> + + <nb-layout-column class="main-content"> + <ng-content select="router-outlet"></ng-content> + </nb-layout-column> + + <nb-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'"> + <nb-menu [items]="subMenu"></nb-menu> + </nb-layout-column> + + <nb-layout-column right class="small" *ngIf="layout.id === 'three-column'"> + <nb-menu [items]="subMenu"></nb-menu> + </nb-layout-column> + + <nb-layout-footer fixed> + <ngx-footer></ngx-footer> + </nb-layout-footer> + + <nb-sidebar class="settings-sidebar" + tag="settings-sidebar" + state="collapsed" + fixed + [right]="sidebar.id !== 'right'"> + <ngx-theme-settings></ngx-theme-settings> + </nb-sidebar> + </nb-layout> + `, +}) +export class SampleLayoutComponent implements OnDestroy { + + subMenu: NbMenuItem[] = [ + { + title: 'PAGE LEVEL MENU', + group: true, + }, + { + title: 'Buttons', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/buttons', + }, + { + title: 'Grid', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/grid', + }, + { + title: 'Icons', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/icons', + }, + { + title: 'Modals', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/modals', + }, + { + title: 'Typography', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/typography', + }, + { + title: 'Animated Searches', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/search-fields', + }, + { + title: 'Tabs', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/tabs', + }, + ]; + layout: any = {}; + sidebar: any = {}; + + protected layoutState$: Subscription; + protected sidebarState$: Subscription; + protected menuClick$: Subscription; + + constructor(protected stateService: StateService, + protected menuService: NbMenuService, + protected themeService: NbThemeService, + protected bpService: NbMediaBreakpointsService, + protected sidebarService: NbSidebarService) { + this.layoutState$ = this.stateService.onLayoutState() + .subscribe((layout: string) => this.layout = layout); + + this.sidebarState$ = this.stateService.onSidebarState() + .subscribe((sidebar: string) => { + this.sidebar = sidebar; + }); + + const isBp = this.bpService.getByName('is'); + this.menuClick$ = this.menuService.onItemSelect() + .withLatestFrom(this.themeService.onMediaQueryChange()) + .delay(20) + .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => { + + if (bpTo.width <= isBp.width) { + this.sidebarService.collapse('menu-sidebar'); + } + }); + } + + ngOnDestroy() { + this.layoutState$.unsubscribe(); + this.sidebarState$.unsubscribe(); + this.menuClick$.unsubscribe(); + } +} diff --git a/webapp/src/app/@theme/layouts/three-columns/three-columns.layout.scss b/webapp/src/app/@theme/layouts/three-columns/three-columns.layout.scss new file mode 100644 index 0000000..7ccf7b7 --- /dev/null +++ b/webapp/src/app/@theme/layouts/three-columns/three-columns.layout.scss @@ -0,0 +1,130 @@ +@import '../../styles/themes'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/breakpoints'; + +@include nb-install-component() { + nb-layout-column.small { + flex: 0.15 !important; + } + + nb-sidebar.settings-sidebar { + $sidebar-width: 7.5rem; + + transition: width 0.3s ease; + width: $sidebar-width; + overflow: hidden; + + &.collapsed { + width: 0; + + /deep/ .main-container { + width: 0; + + .scrollable { + width: $sidebar-width; + padding: 1.25rem; + } + } + } + + /deep/ .main-container { + width: $sidebar-width; + background: nb-theme(color-bg); + transition: width 0.3s ease; + overflow: hidden; + + .scrollable { + width: $sidebar-width; + } + + @include nb-for-theme(cosmic) { + background: nb-theme(layout-bg); + } + } + } + + nb-sidebar.menu-sidebar { + + margin-top: nb-theme(sidebar-header-gap); + + /deep/ .main-container { + height: + calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important; + border-top-right-radius: nb-theme(radius); + } + + /deep/ nb-sidebar-header { + padding-bottom: 0.5rem; + text-align: center; + } + + background: transparent; + + .main-btn { + padding: 0.75rem 2.5rem; + margin-top: -2rem; + font-weight: bold; + transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48); + + i { + font-size: 2rem; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + } + span { + padding-left: 0.25rem; + } + + i, span { + vertical-align: middle; + } + } + + &.compacted { + + /deep/ nb-sidebar-header { + padding-left: 0; + padding-right: 0; + } + + .main-btn { + width: 46px; + height: 44px; + padding: 0.375rem; + border-radius: 5px; + transition: none; + + span { + display: none; + } + } + } + } + + @include media-breakpoint-down(xs) { + .main-content { + padding: 0.75rem !important; + + } + } + + @include media-breakpoint-down(sm) { + + nb-sidebar.menu-sidebar { + + margin-top: 0; + + /deep/ .main-container { + height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important; + border-top-right-radius: 0; + + .scrollable { + padding-top: 0; + } + } + } + + .main-btn { + display: none; + } + } +} diff --git a/webapp/src/app/@theme/layouts/three-columns/three-columns.layout.ts b/webapp/src/app/@theme/layouts/three-columns/three-columns.layout.ts new file mode 100644 index 0000000..447b23e --- /dev/null +++ b/webapp/src/app/@theme/layouts/three-columns/three-columns.layout.ts @@ -0,0 +1,39 @@ +import { Component } from '@angular/core'; + +// TODO: move layouts into the framework +@Component({ + selector: 'ngx-three-columns-layout', + styleUrls: ['./three-columns.layout.scss'], + template: ` + <nb-layout> + <nb-layout-header fixed> + <ngx-header></ngx-header> + </nb-layout-header> + + <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive > + <nb-sidebar-header> + <a href="#" class="btn btn-hero-success main-btn"> + <i class="ion ion-social-github"></i> <span>Support Us</span> + </a> + </nb-sidebar-header> + <ng-content select="nb-menu"></ng-content> + </nb-sidebar> + + <nb-layout-column class="small"> + </nb-layout-column> + + <nb-layout-column right> + <ng-content select="router-outlet"></ng-content> + </nb-layout-column> + + <nb-layout-column class="small"> + </nb-layout-column> + + <nb-layout-footer fixed> + <ngx-footer></ngx-footer> + </nb-layout-footer> + </nb-layout> + `, +}) +export class ThreeColumnsLayoutComponent { +} diff --git a/webapp/src/app/@theme/layouts/two-columns/two-columns.layout.scss b/webapp/src/app/@theme/layouts/two-columns/two-columns.layout.scss new file mode 100644 index 0000000..7ccf7b7 --- /dev/null +++ b/webapp/src/app/@theme/layouts/two-columns/two-columns.layout.scss @@ -0,0 +1,130 @@ +@import '../../styles/themes'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/breakpoints'; + +@include nb-install-component() { + nb-layout-column.small { + flex: 0.15 !important; + } + + nb-sidebar.settings-sidebar { + $sidebar-width: 7.5rem; + + transition: width 0.3s ease; + width: $sidebar-width; + overflow: hidden; + + &.collapsed { + width: 0; + + /deep/ .main-container { + width: 0; + + .scrollable { + width: $sidebar-width; + padding: 1.25rem; + } + } + } + + /deep/ .main-container { + width: $sidebar-width; + background: nb-theme(color-bg); + transition: width 0.3s ease; + overflow: hidden; + + .scrollable { + width: $sidebar-width; + } + + @include nb-for-theme(cosmic) { + background: nb-theme(layout-bg); + } + } + } + + nb-sidebar.menu-sidebar { + + margin-top: nb-theme(sidebar-header-gap); + + /deep/ .main-container { + height: + calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important; + border-top-right-radius: nb-theme(radius); + } + + /deep/ nb-sidebar-header { + padding-bottom: 0.5rem; + text-align: center; + } + + background: transparent; + + .main-btn { + padding: 0.75rem 2.5rem; + margin-top: -2rem; + font-weight: bold; + transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48); + + i { + font-size: 2rem; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + } + span { + padding-left: 0.25rem; + } + + i, span { + vertical-align: middle; + } + } + + &.compacted { + + /deep/ nb-sidebar-header { + padding-left: 0; + padding-right: 0; + } + + .main-btn { + width: 46px; + height: 44px; + padding: 0.375rem; + border-radius: 5px; + transition: none; + + span { + display: none; + } + } + } + } + + @include media-breakpoint-down(xs) { + .main-content { + padding: 0.75rem !important; + + } + } + + @include media-breakpoint-down(sm) { + + nb-sidebar.menu-sidebar { + + margin-top: 0; + + /deep/ .main-container { + height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important; + border-top-right-radius: 0; + + .scrollable { + padding-top: 0; + } + } + } + + .main-btn { + display: none; + } + } +} diff --git a/webapp/src/app/@theme/layouts/two-columns/two-columns.layout.ts b/webapp/src/app/@theme/layouts/two-columns/two-columns.layout.ts new file mode 100644 index 0000000..b7f3a67 --- /dev/null +++ b/webapp/src/app/@theme/layouts/two-columns/two-columns.layout.ts @@ -0,0 +1,37 @@ +import { Component } from '@angular/core'; + +// TODO: move layouts into the framework +@Component({ + selector: 'ngx-two-columns-layout', + styleUrls: ['./two-columns.layout.scss'], + template: ` + <nb-layout> + <nb-layout-header fixed> + <ngx-header></ngx-header> + </nb-layout-header> + + <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive > + <nb-sidebar-header> + <a href="#" class="btn btn-hero-success main-btn"> + <i class="ion ion-social-github"></i> <span>Support Us</span> + </a> + </nb-sidebar-header> + <ng-content select="nb-menu"></ng-content> + </nb-sidebar> + + <nb-layout-column class="small"> + </nb-layout-column> + + <nb-layout-column right> + <ng-content select="router-outlet"></ng-content> + </nb-layout-column> + + <nb-layout-footer fixed> + <ngx-footer></ngx-footer> + </nb-layout-footer> + + </nb-layout> + `, +}) +export class TwoColumnsLayoutComponent { +} diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.html b/webapp/src/app/@theme/layouts/xds/xds.layout.html new file mode 100644 index 0000000..bf2b4e6 --- /dev/null +++ b/webapp/src/app/@theme/layouts/xds/xds.layout.html @@ -0,0 +1,46 @@ +<nb-layout [center]="layout.id === 'center-column'" windowMode> + + <nb-layout-header fixed> + <ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header> + </nb-layout-header> + + <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive [right]="sidebar.id === 'right'"> + + <nb-sidebar-header (click)="toogleSidebar()"> + <!-- XXX - ugly rework --> + <nb-actions *ngIf="sidebar.id === 'left'" size="small" class="header-container right"> + <nb-action *ngIf="!sidebarCompact" icon="fa fa-angle-double-left" style="margin-left: 80%;"></nb-action> + <nb-action *ngIf="sidebarCompact" icon="fa fa-angle-double-right"></nb-action> + </nb-actions> + <nb-actions *ngIf="sidebar.id === 'right'" size="small" class="header-container left"> + <nb-action *ngIf="!sidebarCompact" icon="fa fa-angle-double-right" style="margin-right: 80%;"></nb-action> + <nb-action *ngIf="sidebarCompact" icon="fa fa-angle-double-left"></nb-action> + </nb-actions> + </nb-sidebar-header> + + <ng-content select="nb-menu"></ng-content> + + <nb-sidebar-footer> + </nb-sidebar-footer> + </nb-sidebar> + + <nb-layout-column class="main-content"> + <ng-content select="router-outlet"></ng-content> + </nb-layout-column> + + <nb-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'"> + <nb-menu [items]="subMenu"></nb-menu> + </nb-layout-column> + + <nb-layout-column right class="small" *ngIf="layout.id === 'three-column'"> + <nb-menu [items]="subMenu"></nb-menu> + </nb-layout-column> + + <nb-layout-footer fixed> + <ngx-footer></ngx-footer> + </nb-layout-footer> + + <nb-sidebar class="settings-sidebar" tag="settings-sidebar" state="collapsed" fixed [right]="sidebar.id !== 'right'"> + <ngx-theme-settings></ngx-theme-settings> + </nb-sidebar> +</nb-layout> diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.scss b/webapp/src/app/@theme/layouts/xds/xds.layout.scss new file mode 100644 index 0000000..7ccf7b7 --- /dev/null +++ b/webapp/src/app/@theme/layouts/xds/xds.layout.scss @@ -0,0 +1,130 @@ +@import '../../styles/themes'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/breakpoints'; + +@include nb-install-component() { + nb-layout-column.small { + flex: 0.15 !important; + } + + nb-sidebar.settings-sidebar { + $sidebar-width: 7.5rem; + + transition: width 0.3s ease; + width: $sidebar-width; + overflow: hidden; + + &.collapsed { + width: 0; + + /deep/ .main-container { + width: 0; + + .scrollable { + width: $sidebar-width; + padding: 1.25rem; + } + } + } + + /deep/ .main-container { + width: $sidebar-width; + background: nb-theme(color-bg); + transition: width 0.3s ease; + overflow: hidden; + + .scrollable { + width: $sidebar-width; + } + + @include nb-for-theme(cosmic) { + background: nb-theme(layout-bg); + } + } + } + + nb-sidebar.menu-sidebar { + + margin-top: nb-theme(sidebar-header-gap); + + /deep/ .main-container { + height: + calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important; + border-top-right-radius: nb-theme(radius); + } + + /deep/ nb-sidebar-header { + padding-bottom: 0.5rem; + text-align: center; + } + + background: transparent; + + .main-btn { + padding: 0.75rem 2.5rem; + margin-top: -2rem; + font-weight: bold; + transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48); + + i { + font-size: 2rem; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + } + span { + padding-left: 0.25rem; + } + + i, span { + vertical-align: middle; + } + } + + &.compacted { + + /deep/ nb-sidebar-header { + padding-left: 0; + padding-right: 0; + } + + .main-btn { + width: 46px; + height: 44px; + padding: 0.375rem; + border-radius: 5px; + transition: none; + + span { + display: none; + } + } + } + } + + @include media-breakpoint-down(xs) { + .main-content { + padding: 0.75rem !important; + + } + } + + @include media-breakpoint-down(sm) { + + nb-sidebar.menu-sidebar { + + margin-top: 0; + + /deep/ .main-container { + height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important; + border-top-right-radius: 0; + + .scrollable { + padding-top: 0; + } + } + } + + .main-btn { + display: none; + } + } +} diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.ts b/webapp/src/app/@theme/layouts/xds/xds.layout.ts new file mode 100644 index 0000000..8987584 --- /dev/null +++ b/webapp/src/app/@theme/layouts/xds/xds.layout.ts @@ -0,0 +1,76 @@ +import { Component, OnDestroy } from '@angular/core'; +import { + NbMediaBreakpoint, + NbMediaBreakpointsService, + NbMenuItem, + NbMenuService, + NbSidebarService, + NbThemeService, +} from '@nebular/theme'; + +import { StateService } from '../../../@core/data/state.service'; + +import { Subscription } from 'rxjs/Subscription'; +import 'rxjs/add/operator/withLatestFrom'; +import 'rxjs/add/operator/delay'; + +// TODO: move layouts into the framework +@Component({ + selector: 'ngx-xds-layout', + styleUrls: ['./xds.layout.scss'], + templateUrl: './xds.layout.html', +}) + +export class XdsLayoutComponent implements OnDestroy { + + subMenu: NbMenuItem[] = []; + layout: any = {}; + sidebar: any = {}; + sidebarCompact = true; + + protected layoutState$: Subscription; + protected sidebarState$: Subscription; + protected menuClick$: Subscription; + + constructor(protected stateService: StateService, + protected menuService: NbMenuService, + protected themeService: NbThemeService, + protected bpService: NbMediaBreakpointsService, + protected sidebarService: NbSidebarService) { + this.layoutState$ = this.stateService.onLayoutState() + .subscribe((layout: string) => this.layout = layout); + + this.sidebarState$ = this.stateService.onSidebarState() + .subscribe((sidebar: string) => { + this.sidebar = sidebar; + }); + + const isBp = this.bpService.getByName('is'); + this.menuClick$ = this.menuService.onItemSelect() + .withLatestFrom(this.themeService.onMediaQueryChange()) + .delay(20) + .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => { + + this.sidebarCompact = false; + if (bpTo.width <= isBp.width) { + this.sidebarService.collapse('menu-sidebar'); + } + }); + + // Set sidebarCompact according to sidebar state changes + this.sidebarService.onToggle().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = !this.sidebarCompact)); + this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true)); + this.sidebarService.onExpand().subscribe(() => this.sidebarCompact = false); + this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false)); + } + + toogleSidebar() { + this.sidebarService.toggle(true, 'menu-sidebar'); + } + + ngOnDestroy() { + this.layoutState$.unsubscribe(); + this.sidebarState$.unsubscribe(); + this.menuClick$.unsubscribe(); + } +} |