feat(dashboard): move status card to separate control, add tabs

src/app/pages/dashboard/dashboard.component.html

@@ -1,14 +1,25 @@
-<div class="row status-cards">
+
-  <div class="col-lg-3" *ngFor="let card of statusCards">
+<ngx-status-cards></ngx-status-cards>
-    <nga-card (click)="card.on = !card.on" [ngClass]="{'on': card.on}">
+
-      <div class="icon-container {{card.type}}">
+<div class="row">
-        <i class="{{card.icon}}"></i>
+  <div class="col-lg-3">
+    <nga-card size="xmedium">
+      <nga-tabset fullWidth>
+        <nga-tab tabTitle="Temperature">
+          <span>Content #1</span>
+        </nga-tab>
+        <nga-tab tabTitle="Humidity">
+          <span>Content #2</span>
+        </nga-tab>
+      </nga-tabset>
+    </nga-card>
   </div>
 
-      <div class="details">
+  <div class="col-lg-9">
-        <div class="title">{{card.title}}</div>
+    <nga-card size="xmedium">
-        <div class="status">{{card.on ? 'ON' : 'OFF'}}</div>
+      <nga-card-header>
-      </div>
+        Electricity
+      </nga-card-header>
     </nga-card>
   </div>
 </div>

src/app/pages/dashboard/dashboard.component.scss

@@ -1,73 +1,7 @@
 @import '~@nga/theme/styles_new/all';
 
 @include nga-install-component() {
-  .status-cards {
+  nga-card-header {
-    nga-card {
-      flex-direction: row;
-      align-items: center;
-      height: 6rem;
-      box-shadow: 0 3px 0 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
-      overflow: visible;
-      cursor: pointer;
 
-      position: relative;
-      &::before {
-        position: absolute;
-        content: '';
-        height: calc(100% + 3px);
-        width: 100%;
-        left: 0;
-        top: 0;
-        background: rgba(0, 0, 0, 0.1);
-        border-radius: nga-theme(card-border-radius);
-      }
-
-      &.on {
-        box-shadow: inset 0 3px 9px 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
-
-        .icon-container {
-          box-shadow: none;
-          &.success {
-            box-shadow: inset 0 5px 9px 0 #00967d, 0 4px 10px 0 rgba(33, 7, 77, 0.5), 0 2px 12px 0 rgba(35, 255, 181, 0.6);
-          }
-        }
-        &::before {
-          display: none;
-        }
-      }
-    }
-
-    .icon-container {
-      font-size: 4em;
-      padding: 0.5rem 1.75rem;
-      color: nga-theme(card-foreground);
-      border-radius: nga-theme(card-border-radius) 0 0 nga-theme(card-border-radius);
-
-      &.primary {
-        @include btn-hero-primary();
-      }
-      &.success {
-        @include btn-hero-success();
-      }
-      &.info {
-        @include btn-hero-info();
-      }
-      &.warning {
-        @include btn-hero-warning();
-      }
-    }
-
-    .details {
-      margin-left: 1.5rem;
-    }
-    .title {
-      font-size: 1.5rem;
-    }
-    .status {
-      font-size: 1.125rem;
-      font-weight: nga-theme(font-weight-light);
-      text-transform: uppercase;
-      color: nga-theme(card-foreground-secondary);
-    }
   }
 }

src/app/pages/dashboard/dashboard.component.ts

@@ -6,10 +6,4 @@ import { Component } from '@angular/core';
   templateUrl: './dashboard.component.html',
 })
 export class DashboardComponent {
-  statusCards = [
-    { title: 'Light', on: true, type: 'primary', icon: 'ion-ios-game-controller-b-outline' },
-    { title: 'RollerShades', on: false, type: 'success', icon: 'ion-ios-game-controller-b-outline' },
-    { title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
-    { title: 'Coffee Maker', on: false, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
-  ];
 }

src/app/pages/dashboard/dashboard.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { NgaTabsetModule } from '@nga/theme';
+
+import { SharedModule } from '../../shared.module';
+import { DashboardComponent } from './dashboard.component';
+import { StatusCardsComponent } from './status-cards/status-cards.component';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    NgaTabsetModule,
+  ],
+  declarations: [
+    DashboardComponent,
+    StatusCardsComponent,
+  ],
+})
+export class DashboardModule { }

src/app/pages/dashboard/status-cards/status-cards.component.scss

@@ -0,0 +1,71 @@
+@import '~@nga/theme/styles_new/all';
+
+@include nga-install-component() {
+  nga-card {
+    flex-direction: row;
+    align-items: center;
+    height: 6rem;
+    box-shadow: 0 3px 0 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
+    overflow: visible;
+    cursor: pointer;
+
+    position: relative;
+    &::before {
+      position: absolute;
+      content: '';
+      height: calc(100% + 3px);
+      width: 100%;
+      left: 0;
+      top: 0;
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: nga-theme(card-border-radius);
+    }
+
+    &.on {
+      box-shadow: inset 0 3px 9px 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
+
+      .icon-container {
+        box-shadow: none;
+        &.success {
+          box-shadow: inset 0 5px 9px 0 #00967d, 0 4px 10px 0 rgba(33, 7, 77, 0.5), 0 2px 12px 0 rgba(35, 255, 181, 0.6);
+        }
+      }
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .icon-container {
+    font-size: 4em;
+    padding: 0.5rem 1.75rem;
+    color: nga-theme(card-foreground);
+    border-radius: nga-theme(card-border-radius) 0 0 nga-theme(card-border-radius);
+
+    &.primary {
+      @include btn-hero-primary();
+    }
+    &.success {
+      @include btn-hero-success();
+    }
+    &.info {
+      @include btn-hero-info();
+    }
+    &.warning {
+      @include btn-hero-warning();
+    }
+  }
+
+  .details {
+    margin-left: 1.5rem;
+  }
+  .title {
+    font-size: 1.5rem;
+  }
+  .status {
+    font-size: 1.125rem;
+    font-weight: nga-theme(font-weight-light);
+    text-transform: uppercase;
+    color: nga-theme(card-foreground-secondary);
+  }
+}

src/app/pages/dashboard/status-cards/status-cards.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-status-cards',
+  styleUrls: ['./status-cards.component.scss'],
+  template: `
+    <div class="row">
+      <div class="col-lg-3" *ngFor="let card of statusCards">
+        <nga-card (click)="card.on = !card.on" [ngClass]="{'on': card.on}">
+          <div class="icon-container {{card.type}}">
+            <i class="{{card.icon}}"></i>
+          </div>
+
+          <div class="details">
+            <div class="title">{{card.title}}</div>
+            <div class="status">{{card.on ? 'ON' : 'OFF'}}</div>
+          </div>
+        </nga-card>
+      </div>
+    </div>
+  `,
+})
+export class StatusCardsComponent {
+  statusCards = [
+    { title: 'Light', on: true, type: 'primary', icon: 'ion-ios-game-controller-b-outline' },
+    { title: 'RollerShades', on: false, type: 'success', icon: 'ion-ios-game-controller-b-outline' },
+    { title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
+    { title: 'Coffee Maker', on: false, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
+  ];
+}

src/app/pages/pages.module.ts

@@ -5,13 +5,12 @@ import { NgaMenuModule, NgaSidebarModule, NgaThemeModule } from '@nga/theme';
 import { menuItems } from './pages-menu';
 
 import { PagesComponent } from './pages.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
+import { DashboardModule } from './dashboard/dashboard.module';
 import { PagesRoutingModule } from './pages-routing.module';
 import { ThemeModule } from '../@theme/theme.module';
 
 const PAGES_COMPONENTS = [
   PagesComponent,
-  DashboardComponent,
 ];
 
 @NgModule({
@@ -22,6 +21,7 @@ const PAGES_COMPONENTS = [
     NgaMenuModule.forRoot({ items: menuItems }),
     PagesRoutingModule,
     ThemeModule,
+    DashboardModule,
   ],
   declarations: [
     ...PAGES_COMPONENTS,