layout

.angular-cli.json

@@ -19,6 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "of",
       "styles": [
+        "theme.scss",
         "styles.scss",
         "../node_modules/@covalent/core/common/platform.scss"
       ],

src/app/commons/layouts/header/header.component.html

@@ -0,0 +1,11 @@
+<div td-toolbar-content layout="row" layout-align="start center" flex>
+  <button mat-icon-button class="td-menu-button" (click)="sidenav.toggle()" mdTooltip="Main menu">
+      <mat-icon>menu</mat-icon>
+  </button>
+  <mat-icon class="mat-icon-logo"></mat-icon>
+  <span>overFlow</span>
+  <span flex></span>
+  <button mat-icon-button>
+      <mat-icon>notifications</mat-icon>
+  </button>
+</div>

src/app/commons/layouts/header/header.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/commons/layouts/header/header.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/commons/layouts/layouts.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SidebarComponent } from './sidebar/sidebar.component';
+import { HeaderComponent } from './header/header.component';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: [SidebarComponent]
+  declarations: [SidebarComponent, HeaderComponent]
 })
 export class LayoutsModule { }

src/app/commons/layouts/sidebar/sidebar.component.html

@@ -1 +1,57 @@
-<div>sidebar</div>
+<mat-sidenav #sidenav mode="side" opened="true" style="width:257px;border-right:1px solid #ccc">
+  <div flex class="mat-content bgc-grey-50">
+    <mat-nav-list td-sidenav-content class="bgc-purple-900">
+
+      <h3 mat-header class="tc-white">
+        User profile area
+      </h3>
+      <mat-divider></mat-divider>
+
+      <a mat-list-item class="tc-white" routerLink="">
+        <mat-icon class="tc-white" matListIcon>home</mat-icon> Home
+      </a>
+      <mat-divider></mat-divider>
+
+      <h3 mat-subheader class="tc-white">
+        INFRA
+      </h3>
+      <a mat-list-item class="tc-white" routerLink="map">
+        <mat-icon class="tc-white" matListIcon>forum</mat-icon>Map</a>
+      <a mat-list-item class="tc-white" routerLink="sensors">
+        <mat-icon class="tc-white" matListIcon>forum</mat-icon>Sensors</a>
+      <a mat-list-item class="tc-white" routerLink="probes">
+        <mat-icon class="tc-white" matListIcon>forum</mat-icon>Probes</a>
+      <mat-divider></mat-divider>
+
+      <h3 mat-subheader class="tc-white">
+        MONITOR
+      </h3>
+      <a mat-list-item class="tc-white" routerLink="overview">
+        <mat-icon class="tc-white" matListIcon>forum</mat-icon>Overview</a>
+      <a mat-list-item class="tc-white" routerLink="dashboards">
+        <mat-icon class="tc-white" matListIcon>forum</mat-icon>Dashboards</a>
+      <mat-divider></mat-divider>
+
+      <a mat-list-item class="tc-white" routerLink="alert">
+        <mat-icon class="tc-white" matListIcon>warning</mat-icon> Alert
+      </a>
+      <mat-divider></mat-divider>
+
+      <a mat-list-item class="tc-white" routerLink="report">
+        <mat-icon class="tc-white" matListIcon>announcement</mat-icon> Report
+      </a>
+      <mat-divider></mat-divider>
+
+      <a mat-list-item class="tc-white" routerLink="log">
+        <mat-icon class="tc-white" matListIcon>history</mat-icon> Log
+      </a>
+      <mat-divider></mat-divider>
+
+      <a mat-list-item class="tc-white" routerLink="setting">
+        <mat-icon class="tc-white" matListIcon>settings</mat-icon> Setting
+      </a>
+      <mat-divider></mat-divider>
+
+    </mat-nav-list>
+  </div>
+</mat-sidenav>

src/app/commons/layouts/sidebar/sidebar.component.ts

@@ -8,9 +8,6 @@ import { menus } from './menu-element';
 })
 export class SidebarComponent implements OnInit {
 
-  @Input() iconOnly = false;
-  public menus = menus;
-
   constructor() { }
 
   ngOnInit() {

src/app/commons/ui/covalent/covalent.module.ts

@@ -1,19 +1,41 @@
 import { NgModule } from '@angular/core';
-
-import { CovalentLayoutModule } from '@covalent/core/layout';
-import { CovalentStepsModule } from '@covalent/core/steps';
-import { CovalentHighlightModule } from '@covalent/highlight';
-import { CovalentMarkdownModule } from '@covalent/markdown';
-import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
+import {
+    CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, CovalentExpansionPanelModule,
+    CovalentStepsModule, CovalentLoadingModule, CovalentDialogsModule, CovalentSearchModule, CovalentPagingModule,
+    CovalentNotificationsModule, CovalentMenuModule, CovalentDataTableModule, CovalentMessageModule
+  } from '@covalent/core';
 
 @NgModule({
     imports: [
+        CovalentCommonModule,
         CovalentLayoutModule,
+        CovalentMediaModule,
+        CovalentExpansionPanelModule,
         CovalentStepsModule,
-        CovalentHighlightModule,
-        CovalentMarkdownModule,
-        CovalentDynamicFormsModule,
+        CovalentDialogsModule,
+        CovalentLoadingModule,
+        CovalentSearchModule,
+        CovalentPagingModule,
+        CovalentNotificationsModule,
+        CovalentMenuModule,
+        CovalentDataTableModule,
+        CovalentMessageModule,
     ],
+    exports : [
+        CovalentCommonModule,
+        CovalentLayoutModule,
+        CovalentMediaModule,
+        CovalentExpansionPanelModule,
+        CovalentStepsModule,
+        CovalentDialogsModule,
+        CovalentLoadingModule,
+        CovalentSearchModule,
+        CovalentPagingModule,
+        CovalentNotificationsModule,
+        CovalentMenuModule,
+        CovalentDataTableModule,
+        CovalentMessageModule,
+    ]
 })
 
 export class CovalentModule { }

src/app/pages/home/home-page.component.html

@@ -1,3 +1,3 @@
 <p>
-  home works!
+  home works! home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!
 </p>

src/app/pages/pages.component.html

@@ -1,4 +1,23 @@
-<div>header</div>
+<td-layout>
+    <td-layout-nav>
+
+        <of-header></of-header>
+
+        <mat-sidenav-container fullscreen>
             <of-sidebar></of-sidebar>
+
+            <div tdMediaToggle="gt-xs" [mediaClasses]="['push-md']">
                 <router-outlet></router-outlet>
-<div>footer</div>
+            </div>
+
+        </mat-sidenav-container>
+
+    </td-layout-nav>
+
+    <td-layout-footer>
+        <div layout="row" layout-align="start center">
+            <span class="mat-caption">Copyright &copy; 2017 Loafle. All rights reserved</span>
+        </div>
+    </td-layout-footer>
+
+</td-layout>

src/app/pages/pages.module.ts

@@ -5,6 +5,7 @@ import { PagesRoutingModule } from './pages-routing.module';
 import { SidebarComponent } from 'app/commons/layouts/sidebar/sidebar.component';
 import { CovalentModule } from 'app/commons/ui/covalent/covalent.module';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { HeaderComponent } from 'app/commons/layouts/header/header.component';
 
 @NgModule({
   imports: [
@@ -15,7 +16,8 @@ import { MaterialModule } from 'app/commons/ui/material/material.module';
   ],
   declarations: [
     PagesComponent,
-    SidebarComponent
+    SidebarComponent,
+    HeaderComponent
   ]
 })
 export class PagesModule { }

src/styles.scss

@@ -1,3 +1,35 @@
-/* You can add global styles to this file, and also import other style files */
+// Adjust your logo position
+.mat-icon {
+    &.mat-icon-logo {
+      position: relative;
+      top: -4px;
+    }
+  }
+  
+  // Hack for small search box
+  .td-search-box {
+  .td-search-icon.mat-icon-button {
+    margin: 0;
+    height: 30px;
+    .mat-icon {
+      margin-top: -10px;
+    }
+  }
+  td-search-input {
+    margin-left: 0 !important;
+    margin-bottom: 5px;
+    .mat-form-field {
+      width: auto;
+    }
+    .mat-form-field-wrapper {
+      padding-bottom: 0;
+    }
+    .mat-input-infix {
+      padding: 0;
+    }
+    .mat-form-field-infix {
+      border-top: 0;
+    }
+  }
+  }
   
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";

src/theme.scss

@@ -0,0 +1,78 @@
+/*
+ * Copyright (C) 2016-2017 by Teradata Corporation. All rights reserved.
+ * TERADATA CORPORATION CONFIDENTIAL AND TRADE SECRET
+ */
+
+ @import '~@angular/material/theming';
+ @import '~@covalent/core/theming/all-theme';
+ // Plus imports for other components in your app.
+ 
+ // Include the base styles for Angular Material core. We include this here so that you only
+ // have to load a single css file for Angular Material in your app.
+ @include mat-core();
+ 
+ // Define the palettes for your theme using the Material Design palettes available in palette.scss
+ // (imported above). For each palette, you can optionally specify a default, lighter, and darker
+ // hue.
+ $primary: mat-palette($mat-purple, 900, 100, 900);
+ $accent:  mat-palette($mat-teal, 600, 100, 900);
+ 
+ // The warn palette is optional (defaults to red).
+ $warn:    mat-palette($mat-red, 600, 100, 900);
+ 
+ // Create the theme object (a Sass map containing all of the palettes).
+ $theme: mat-light-theme($primary, $accent, $warn);
+ 
+ // Include theme styles for core and each component used in your app.
+ // Alternatively, you can import and @include the theme mixins for each component
+ // that you are using.
+ @include angular-material-theme($theme);
+ @include covalent-theme($theme);
+ 
+ // Active icon color in list nav
+ mat-nav-list, mat-list {
+     [mat-list-item].active {
+         mat-icon[matListAvatar] {
+             background-color: mat-color($accent);
+             color: mat-color($accent, default-contrast);
+         }
+         mat-icon[matListIcon] {
+             color: mat-color($accent);
+         }
+     }
+ }
+ 
+ /* ------------------------------------------------------------------------------- */
+ $foreground: map-get($theme, foreground);
+ $background: map-get($theme, background);
+ 
+ // Apply theme for this app
+ 
+ // NGX Charts
+ [ngx-charts-axis-label] text {
+     fill: mat-color($foreground, secondary-text);
+ }
+ .tick text {
+     fill: mat-color($foreground, disabled);
+ }
+ .gridline-path {
+     &.gridline-path-horizontal,
+     &.gridline-path-vertical {
+         stroke: rgba(black, 0.06);
+     }
+ }
+ .legend-title-text {
+     color: mat-color($foreground, secondary-text);
+ }
+ mat-card-title{
+   &:hover {
+     cursor: grab;
+     cursor: -moz-grab;
+     cursor: -webkit-grab;
+   }
+   &:active {
+     cursor: grabbing;
+     cursor: -moz-grabbing;
+     cursor: -webkit-grabbing;
+   }
+ }