feature(docs): new landing page & theme (#645)

* feature(home): new landing page, theme & toolbar component

* update(theme): custom orange contrast

* update(): responsive improvements

* update(index): dark bg color

* update(theme): tab-like toolbar nav

* update(app): remove drawer from auto opening

* update(routes): ordering to match others

* update(app): import toolbar

* update(components): move … LTR/RTL menu

* update(home): layout overhaul

* update(components): darker colors

* update(toolbar): active routerlinks

* update(components): remove unused columns

* feature(templates): add templates page

* feature(LTR): LTR/RTL switch in toolbar for entire docs

* update(templates): grid-list of images w/ links

* feat(firebase): load templates from firebase database and storage

* chore(): remove template imgs since they arent needed anymore

* fix(): separate home link so its active only when exact

* fix(templates): make template rows be responsive

* update(): responsive improvements

* update(): import tooltips for templates page

* update(theme): add alt-theme to match prev doc content

src/app/app.component.html

@@ -1,10 +1,24 @@
 <td-layout #layout
-            [opened]="media.registerQuery('gt-md') | async"
             [mode]="(media.registerQuery('gt-md') | async) ? 'side' : 'over'"
             [sidenavWidth]="(media.registerQuery('gt-md') | async) ? '257px' : '320px'">
-  <td-navigation-drawer sidenavTitle="Covalent" logo="assets:teradata" navigationRoute="/">
-    <md-nav-list>
-      <a *ngFor="let item of routes" md-list-item (click)="!media.query('gt-md') && layout.close()" [routerLink]="[item.route]"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
+  <td-navigation-drawer sidenavTitle="Covalent" logo="assets:teradata" navigationRoute="/" flex color="primary">
+    <md-nav-list flex>
+      <a md-list-item
+          (click)="!media.query('gt-md') && layout.close()"
+          [routerLink]="['/']"
+          [routerLinkActive]="['active']"
+          [routerLinkActiveOptions]="{exact:true}">
+          <md-icon md-list-icon>home</md-icon>
+          Home
+      </a>
+      <a *ngFor="let item of routes" 
+          md-list-item
+          (click)="!media.query('gt-md') && layout.close()"
+          [routerLink]="[item.route]"
+          [routerLinkActive]="['active']">
+          <md-icon md-list-icon>{{item.icon}}</md-icon>
+          {{item.title}}
+      </a>
     </md-nav-list>
   </td-navigation-drawer>
   <router-outlet></router-outlet>

src/app/app.component.ts

@@ -14,25 +14,25 @@ import { getSelectedLanguage } from './utilities/translate';
 export class DocsAppComponent implements AfterViewInit {
 
   routes: Object[] = [{
-      icon: 'home',
-      route: '.',
-      title: 'Home',
-    }, {
       icon: 'library_books',
       route: 'docs',
       title: 'Documentation',
     }, {
-      icon: 'color_lens',
-      route: 'style-guide',
-      title: 'Style Guide',
+      icon: 'picture_in_picture',
+      route: 'components',
+      title: 'Components & Addons',
     }, {
       icon: 'view_quilt',
       route: 'layouts',
       title: 'Layouts',
     }, {
-      icon: 'picture_in_picture',
-      route: 'components',
-      title: 'Components & Addons',
+      icon: 'color_lens',
+      route: 'style-guide',
+      title: 'Style Guide',
+    }, {
+      icon: 'view_carousel',
+      route: 'templates',
+      title: 'Templates',
     },
   ];
 
@@ -56,6 +56,16 @@ export class DocsAppComponent implements AfterViewInit {
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/github.svg'));
     this._iconRegistry.addSvgIconInNamespace('assets', 'covalent',
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/covalent.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'covalent-stroke',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/covalent-stroke.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'covalent-outline',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/covalent-outline.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'angular',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/angular.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'angular-outline',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/angular-outline.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'material-outline',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/material-outline.svg'));
     this._iconRegistry.addSvgIconInNamespace('assets', 'teradata-ux',
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/teradata-ux.svg'));
     this._iconRegistry.addSvgIconInNamespace('assets', 'appcenter',

src/app/app.module.ts

@@ -8,9 +8,11 @@ import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-transla
 
 import { DocsAppComponent } from './app.component';
 import { HomeComponent } from './components/home/home.component';
+import { TemplatesComponent } from './components/templates/templates.component';
 import { appRoutes, appRoutingProviders } from './app.routes';
 
-import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdCoreModule, MdMenuModule } from '@angular/material';
+import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdCoreModule, MdMenuModule, MdTabsModule,
+         MdToolbarModule, MdGridListModule, MdTooltipModule } from '@angular/material';
 
 import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentNotificationsModule, CovalentMenuModule,
          CovalentMediaModule } from '../platform/core';
@@ -19,13 +21,16 @@ import { CovalentHttpModule } from '../platform/http';
 import { CovalentMarkdownModule } from '../platform/markdown';
 import { CovalentDynamicFormsModule } from '../platform/dynamic-forms';
 
-import { GitHubService } from './services';
+import { ToolbarModule } from './components/toolbar/toolbar.module';
+
+import { GitHubService, InternalDocsService } from './services';
 import { getSelectedLanguage, createTranslateLoader } from './utilities/translate';
 
 @NgModule({
   declarations: [
     DocsAppComponent,
     HomeComponent,
+    TemplatesComponent,
   ], // directives, components, and pipes owned by this NgModule
   imports: [
     BrowserAnimationsModule,
@@ -41,16 +46,21 @@ import { getSelectedLanguage, createTranslateLoader } from './utilities/translat
     MdIconModule,
     MdCardModule,
     MdMenuModule,
+    MdTabsModule,
+    MdToolbarModule,
+    MdGridListModule,
+    MdTooltipModule,
     /** Covalent Modules */
     CovalentLayoutModule,
     CovalentExpansionPanelModule,
     CovalentNotificationsModule,
     CovalentMenuModule,
+    CovalentMediaModule,
     CovalentHttpModule.forRoot(),
     CovalentHighlightModule,
     CovalentMarkdownModule,
     CovalentDynamicFormsModule,
-    CovalentMediaModule,
+    ToolbarModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
@@ -62,7 +72,8 @@ import { getSelectedLanguage, createTranslateLoader } from './utilities/translat
   ], // modules needed to run this module
   providers: [
     appRoutingProviders,
-    GitHubService, {
+    GitHubService,
+    InternalDocsService, {
       // Configure LOCALE_ID depending on the language set in browser
       provide: LOCALE_ID, useFactory: getSelectedLanguage, deps: [TranslateService],
     },

src/app/app.routes.ts

@@ -1,6 +1,7 @@
 import { Routes, RouterModule } from '@angular/router';
 
 import { HomeComponent } from './components/home/home.component';
+import { TemplatesComponent } from './components/templates/templates.component';
 
 const routes: Routes = [{
     component: HomeComponent,
@@ -13,6 +14,9 @@ const routes: Routes = [{
     path: '', loadChildren: './components/layouts/layouts.module#LayoutsModule',
   }, {
     path: '', loadChildren: './components/components/components.module#ComponentsModule',
+  }, {
+    component: TemplatesComponent,
+    path: 'templates',
   },
 ];