feat(layouts): layouts + theme settings panel preview

src/app/@core/data/data.module.ts

@@ -3,10 +3,12 @@ import { CommonModule } from '@angular/common';
 
 import { UserService } from './users.service';
 import { ElectricityService } from './electricity.service';
+import { StateService } from './state.service';
 
 const SERVICES = [
   UserService,
   ElectricityService,
+  StateService,
 ];
 
 @NgModule({

src/app/@core/data/electricity.service.ts

@@ -61,6 +61,7 @@ export class ElectricityService {
   constructor() {
   }
 
+  // TODO: observables
   getData() {
     return this.data;
   }

src/app/@core/data/state.service.ts

@@ -0,0 +1,74 @@
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import 'rxjs/add/observable/of';
+
+@Injectable()
+export class StateService {
+
+  protected layouts: any = [
+    {
+      name: 'One Column',
+      icon: 'ion ion-grid',
+      id: 'one-column',
+      selected: true,
+    },
+    {
+      name: 'Two Column',
+      icon: 'ion ion-grid',
+      id: 'two-column',
+    },
+    {
+      name: 'Three Column',
+      icon: 'ion ion-grid',
+      id: 'three-column',
+    },
+    {
+      name: 'Center Column',
+      icon: 'ion ion-grid',
+      id: 'center-column',
+    },
+  ];
+
+  protected sidebars: any = [
+    {
+      name: 'Left Sidebar',
+      icon: 'ion ion-grid',
+      id: 'left',
+      selected: true,
+    },
+    {
+      name: 'Right Sidebar',
+      icon: 'ion ion-grid',
+      id: 'right',
+    },
+  ];
+
+  protected layoutState$ = new BehaviorSubject(this.layouts[0]);
+  protected sidebarState$ = new BehaviorSubject(this.sidebars[0]);
+
+  setLayoutState(state: any): any {
+    this.layoutState$.next(state);
+  }
+
+  getLayoutStates(): Observable<any[]> {
+    return Observable.of(this.layouts);
+  }
+
+  onLayoutState(): Observable<any> {
+    return this.layoutState$.asObservable();
+  }
+
+  setSidebarState(state: any): any {
+    this.sidebarState$.next(state);
+  }
+
+  getSidebarStates(): Observable<any[]> {
+    return Observable.of(this.sidebars);
+  }
+
+  onSidebarState(): Observable<any> {
+    return this.sidebarState$.asObservable();
+  }
+}

src/app/@theme/components/header/header.component.scss

@@ -5,7 +5,16 @@
   justify-content: space-between;
   width: 100%;
 
-  .left-container {
+  .left {
+    order: 0;
+    flex-direction: row;
+  }
+  .right {
+    order: 1;
+    flex-direction: row-reverse;
+  }
+
+  .header-container {
     display: flex;
     align-items: center;
 

src/app/@theme/components/header/header.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
-import { NgaSidebarService, NgaMenuService } from '@akveo/nga-theme';
+import { NgaMenuService, NgaSidebarService } from '@akveo/nga-theme';
 import { NgaThemeService } from '@akveo/nga-theme/services/theme.service';
 import { UserService } from '../../../@core/data/users.service';
 
@@ -8,7 +8,7 @@ import { UserService } from '../../../@core/data/users.service';
   selector: 'ngx-header',
   styleUrls: ['./header.component.scss'],
   template: `
-    <div class="left-container">
+    <div class="header-container" [class.left]="position === 'normal'" [class.right]="position === 'inverse'">
       <a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a>
       <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
       <div class="theme-buttons">
@@ -18,19 +18,28 @@ import { UserService } from '../../../@core/data/users.service';
       </div>
     </div>
 
-    <nga-actions size="medium" class="right">
+    <nga-actions
-      <nga-action><nga-search type="rotate-layout"></nga-search></nga-action>
+      size="medium"
-      <nga-action icon="ion-ios-email-outline"></nga-action>
+      class="header-container"
-      <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
+      [class.right]="position === 'normal'"
+      [class.left]="position === 'inverse'">
+      <nga-action icon="ion-ios-gear-outline" (click)="toggleSettings()"></nga-action>
       <nga-action>
         <nga-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nga-user>
       </nga-action>
-      <nga-action icon="ion-ios-gear-outline"></nga-action>
+      <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
+      <nga-action icon="ion-ios-email-outline"></nga-action>
+      <nga-action>
+        <nga-search type="rotate-layout"></nga-search>
+      </nga-action>
     </nga-actions>
   `,
 })
 export class HeaderComponent implements OnInit {
 
+
+  @Input() position: string = 'normal';
+
   user: any;
 
   userMenu = [
@@ -54,7 +63,12 @@ export class HeaderComponent implements OnInit {
   }
 
   toggleSidebar(): boolean {
-    this.sidebarService.toggle(true);
+    this.sidebarService.toggle(true, 'menu-sidebar');
+    return false;
+  }
+
+  toggleSettings(): boolean {
+    this.sidebarService.toggle(false, 'settings-sidebar');
     return false;
   }
 

src/app/@theme/components/index.ts

@@ -2,3 +2,4 @@ export * from './header/header.component';
 export * from './footer/footer.component';
 export * from './search-input/search-input.component';
 export * from './tiny-mce/tiny-mce.component';
+export * from './theme-settings/theme-settings.component';

src/app/@theme/components/theme-settings/theme-settings.component.scss

@@ -0,0 +1,22 @@
+@import '../../styles/variables';
+
+@include nga-install-component() {
+  .settings-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-bottom: 0.5rem;
+    flex-wrap: wrap;
+
+    a {
+      font-size: 2rem;
+      margin-right: 1rem;
+      color: nga-theme(color-white);
+
+      &.selected {
+        color: nga-theme(color-success);
+      }
+    }
+  }
+}
+

src/app/@theme/components/theme-settings/theme-settings.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { StateService } from '../../../@core/data/state.service';
+
+@Component({
+  selector: 'ngx-theme-settings',
+  styleUrls: ['./theme-settings.component.scss'],
+  template: `
+    <strong class="small">LAYOUTS</strong>
+    <div class="settings-row">
+      <a *ngFor="let layout of layouts"
+         href="#"
+         [class.selected]="layout.selected"
+         [attr.title]="layout.name"
+         (click)="layoutSelect(layout)">
+        <i [attr.class]="layout.icon"></i>
+      </a>
+    </div>
+    <strong class="small">SIDEBAR</strong>
+    <div class="settings-row">
+      <a *ngFor="let sidebar of sidebars"
+         href="#"
+         [class.selected]="sidebar.selected"
+         [attr.title]="sidebar.name"
+         (click)="sidebarSelect(sidebar)">
+        <i [attr.class]="sidebar.icon"></i>
+      </a>
+    </div>
+  `,
+})
+export class ThemeSettingsComponent {
+
+  layouts = [];
+  sidebars = [];
+
+  constructor(protected stateService: StateService) {
+    this.stateService.getLayoutStates()
+      .subscribe((layouts: any[]) => this.layouts = layouts);
+
+    this.stateService.getSidebarStates()
+      .subscribe((sidebars: any[]) => this.sidebars = sidebars);
+  }
+
+  layoutSelect(layout: any): boolean {
+    this.layouts = this.layouts.map((l: any) => {
+      l.selected = false;
+      return l;
+    });
+
+    layout.selected = true;
+    this.stateService.setLayoutState(layout);
+    return false;
+  }
+
+  sidebarSelect(sidebars: any): boolean {
+    this.sidebars = this.sidebars.map((s: any) => {
+      s.selected = false;
+      return s;
+    });
+
+    sidebars.selected = true;
+    this.stateService.setSidebarState(sidebars);
+    return false;
+  }
+}

src/app/@theme/layouts/index.ts

@@ -1 +1,4 @@
 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';

src/app/@theme/layouts/one-column/one-column.layout.scss

@@ -2,12 +2,13 @@
 
 @include nga-install-root-component() {
 
-  nga-sidebar {
+  nga-sidebar.menu-sidebar {
 
     margin-top: nga-theme(sidebar-header-gap);
 
     /deep/ .main-container {
-      height: calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)})!important;
+      height:
+        calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)}) !important;
       border-top-right-radius: 0.75rem;
     }
 

src/app/@theme/layouts/one-column/one-column.layout.ts

@@ -10,7 +10,7 @@ import { Component } from '@angular/core';
         <ngx-header></ngx-header>
       </nga-layout-header>
 
-      <nga-sidebar responsive>
+      <nga-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
         <nga-sidebar-header>
           <button class="btn btn-hero-success main-btn">
             <i class="ion ion-social-github"></i> <span>Support Us</span>

src/app/@theme/layouts/sample/sample.layout.scss

@@ -0,0 +1,80 @@
+@import '../../styles/variables';
+
+@include nga-install-root-component() {
+
+  nga-layout-column.small {
+    flex: 0.15 !important;
+  }
+
+  nga-sidebar.settings-sidebar {
+    width: 7rem;
+    /deep/ .main-container {
+      width: 7rem;
+      background: #3a3850;
+    }
+
+    &.collapsed {
+      width: 0;
+      /deep/ .main-container {
+        width: 0;
+      }
+    }
+  }
+
+  nga-sidebar.menu-sidebar {
+
+    margin-top: nga-theme(sidebar-header-gap);
+
+    /deep/ .main-container {
+      height:
+        calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)}) !important;
+      border-top-right-radius: 0.75rem;
+    }
+
+    /deep/ nga-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/ nga-sidebar-header {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .main-btn {
+        width: 46px;
+        height: 44px;
+        padding: 0;
+        border-radius: 5px;
+        transition: none;
+
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+}

src/app/@theme/layouts/sample/sample.layout.ts

@@ -0,0 +1,121 @@
+import { Component, Input, OnDestroy } from '@angular/core';
+import { List } from 'immutable';
+import { NgaMenuItem } from '@akveo/nga-theme';
+import { Subscription } from 'rxjs/Subscription';
+
+import { StateService } from '../../../@core/data/state.service';
+
+// TODO: move layouts into the framework
+@Component({
+  selector: 'ngx-sample-layout',
+  styleUrls: ['./sample.layout.scss'],
+  template: `
+    <nga-layout [center]="layout.id === 'center-column'">
+      <nga-layout-header fixed>
+        <ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header>
+      </nga-layout-header>
+
+      <nga-sidebar class="menu-sidebar"
+                   tag="menu-sidebar"
+                   responsive
+                   [right]="sidebar.id === 'right'">
+        <nga-sidebar-header>
+          <button class="btn btn-hero-success main-btn">
+            <i class="ion ion-social-github"></i> <span>Support Us</span>
+          </button>
+        </nga-sidebar-header>
+        <ng-content select="nga-menu"></ng-content>
+      </nga-sidebar>
+
+      <nga-layout-column>
+        <ng-content select="router-outlet"></ng-content>
+      </nga-layout-column>
+
+      <nga-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
+        <nga-menu [items]="subMenu"></nga-menu>
+      </nga-layout-column>
+
+      <nga-layout-column right class="small" *ngIf="layout.id === 'three-column'">
+        <nga-menu [items]="subMenu"></nga-menu>
+      </nga-layout-column>
+
+      <nga-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nga-layout-footer>
+
+      <nga-sidebar class="settings-sidebar"
+                   tag="settings-sidebar"
+                   state="collapsed"
+                   fixed
+                   [right]="sidebar.id !== 'right'">
+        <ngx-theme-settings></ngx-theme-settings>
+      </nga-sidebar>
+    </nga-layout>
+  `,
+})
+export class SampleLayoutComponent  implements OnDestroy {
+
+  subMenu: List<NgaMenuItem> = List(
+    [
+      {
+        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;
+
+  constructor(protected stateService: StateService) {
+    this.layoutState$ = this.stateService.onLayoutState()
+      .subscribe((layout: string) => this.layout = layout);
+
+    this.sidebarState$ = this.stateService.onSidebarState()
+      .subscribe((sidebar: string) => {
+        this.sidebar = sidebar
+      });
+  }
+
+  ngOnDestroy() {
+    this.layoutState$.unsubscribe();
+    this.sidebarState$.unsubscribe();
+  }
+}

src/app/@theme/layouts/three-columns/three-columns.layout.scss

@@ -0,0 +1,65 @@
+@import '../../styles/variables';
+
+@include nga-install-root-component() {
+
+  nga-layout-column.small {
+    flex: 0.15 !important;
+  }
+
+  nga-sidebar.menu-sidebar {
+
+    margin-top: nga-theme(sidebar-header-gap);
+
+    /deep/ .main-container {
+      height:
+        calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)}) !important;
+      border-top-right-radius: 0.75rem;
+    }
+
+    /deep/ nga-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/ nga-sidebar-header {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .main-btn {
+        width: 46px;
+        height: 44px;
+        padding: 0;
+        border-radius: 5px;
+        transition: none;
+
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+}

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: `
+    <nga-layout>
+      <nga-layout-header fixed>
+        <ngx-header></ngx-header>
+      </nga-layout-header>
+
+      <nga-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
+        <nga-sidebar-header>
+          <button class="btn btn-hero-success main-btn">
+            <i class="ion ion-social-github"></i> <span>Support Us</span>
+          </button>
+        </nga-sidebar-header>
+        <ng-content select="nga-menu"></ng-content>
+      </nga-sidebar>
+
+      <nga-layout-column class="small">
+      </nga-layout-column>
+
+      <nga-layout-column right>
+        <ng-content select="router-outlet"></ng-content>
+      </nga-layout-column>
+
+      <nga-layout-column class="small">
+      </nga-layout-column>
+
+      <nga-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nga-layout-footer>
+    </nga-layout>
+  `,
+})
+export class ThreeColumnsLayoutComponent {
+}

src/app/@theme/layouts/two-columns/two-columns.layout.scss

@@ -0,0 +1,65 @@
+@import '../../styles/variables';
+
+@include nga-install-root-component() {
+
+  nga-layout-column.small {
+    flex: 0.15 !important;
+  }
+
+  nga-sidebar.menu-sidebar {
+
+    margin-top: nga-theme(sidebar-header-gap);
+
+    /deep/ .main-container {
+      height:
+        calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)}) !important;
+      border-top-right-radius: 0.75rem;
+    }
+
+    /deep/ nga-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/ nga-sidebar-header {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .main-btn {
+        width: 46px;
+        height: 44px;
+        padding: 0;
+        border-radius: 5px;
+        transition: none;
+
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+}

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: `
+    <nga-layout>
+      <nga-layout-header fixed>
+        <ngx-header></ngx-header>
+      </nga-layout-header>
+
+      <nga-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
+        <nga-sidebar-header>
+          <button class="btn btn-hero-success main-btn">
+            <i class="ion ion-social-github"></i> <span>Support Us</span>
+          </button>
+        </nga-sidebar-header>
+        <ng-content select="nga-menu"></ng-content>
+      </nga-sidebar>
+
+      <nga-layout-column class="small">
+      </nga-layout-column>
+
+      <nga-layout-column right>
+        <ng-content select="router-outlet"></ng-content>
+      </nga-layout-column>
+
+      <nga-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nga-layout-footer>
+
+    </nga-layout>
+  `,
+})
+export class TwoColumnsLayoutComponent {
+}

src/app/@theme/styles/variables.scss

@@ -10,16 +10,19 @@ $nga-themes: nga-register-theme((
  // app wise variables for each theme
   sidebar-header-gap: 2rem,
   sidebar-header-height: initial,
+  layout-content-width: 1400px,
 ), default, default);
 
 $nga-themes: nga-register-theme((
   // app wise variables for each theme
   sidebar-header-gap: 2rem,
   sidebar-header-height: initial,
+  layout-content-width: 1400px,
 ), cosmic, cosmic);
 
 $nga-themes: nga-register-theme((
   // app wise variables for each theme
   sidebar-header-gap: 2rem,
   sidebar-header-height: initial,
+  layout-content-width: 1400px,
 ), light, light);

src/app/@theme/theme.module.ts

@@ -15,12 +15,23 @@ import {
   NgaUserModule,
 } from '@akveo/nga-theme';
 
-import { FooterComponent, HeaderComponent, SearchInputComponent, TinyMCEComponent } from './components';
+import {
+  FooterComponent,
+  HeaderComponent,
+  SearchInputComponent,
+  ThemeSettingsComponent,
+  TinyMCEComponent,
+} from './components';
 
 
 import { CapitalizePipe, PluralPipe, RoundPipe } from './pipes';
 
-import { OneColumnLayoutComponent } from './layouts';
+import {
+  OneColumnLayoutComponent,
+  SampleLayoutComponent,
+  ThreeColumnsLayoutComponent,
+  TwoColumnsLayoutComponent,
+} from './layouts';
 
 const BASE_MODULES = [
   CommonModule,
@@ -45,7 +56,11 @@ const COMPONENTS = [
   FooterComponent,
   SearchInputComponent,
   TinyMCEComponent,
+  ThemeSettingsComponent,
   OneColumnLayoutComponent,
+  TwoColumnsLayoutComponent,
+  ThreeColumnsLayoutComponent,
+  SampleLayoutComponent,
 ];
 
 const PIPES = [

src/app/pages/pages.component.ts

@@ -6,10 +6,10 @@ import { MENU_ITEMS } from './pages-menu';
 @Component({
   selector: 'ngx-pages',
   template: `
-    <ngx-one-column-layout>
+    <ngx-sample-layout>
       <nga-menu [items]="menu"></nga-menu>
       <router-outlet></router-outlet>
-    </ngx-one-column-layout>
+    </ngx-sample-layout>
   `,
 })
 export class PagesComponent {