New dashboard look & feel

[src/xds/xds-agent.git] / webapp / src / app / @theme / layouts / sample / sample.layout.ts

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 (file)
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();
+  }
+}