feature(layout): sticky footer (and footer-inner) (#212)

* feature(layout): sticky footer (and footer-inner) * removed extra space from selector name * fixed example in nav-list * fixed manage-list example * remove inner footer in layout demos * update(footer): disable lint for multiple selectors
Teradata · Dec 28, 2016 · 59253be · 59253be
1 parent 6cd31f0
commit 59253be
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 29 deletions.
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
@@ -193,12 +193,13 @@ <h3 md-line>Feature Requests & Bugs</h3>
           </a>
         </md-nav-list>
       </td-expansion-panel>
-      <md-divider></md-divider>
-      <div layout="row" layout-align="start center" layout-padding>
-        <span class="md-caption">Copyright &copy; 2016 Teradata. All rights reserved</span>
-        <span flex></span>
-        <md-icon class="md-icon-ux" svgIcon="assets:teradata-ux"></md-icon>
-      </div>
     </div>
   </td-layout-card-over>
+  <td-layout-footer>
+    <div layout="row" layout-align="start center">
+      <span class="md-caption">Copyright &copy; 2016 Teradata. All rights reserved</span>
+      <span flex></span>
+      <md-icon class="md-icon-ux" svgIcon="assets:teradata-ux"></md-icon>
+    </div>
+  </td-layout-footer>
 </td-layout-nav>
diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html
@@ -98,6 +98,14 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
                 <md-divider></md-divider>
               </md-list>
             </td-step>
+            <td-step label="Step 5: td-layout-footer" sublabel="optional sticky footer">
+              <md-list>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<td-layout-footer>]]></code></h3>
+                  <p md-line>Optional footer</p>
+                </md-list-item>
+              </md-list>
+            </td-step>
           </td-steps>
         </div>
         <div flex-gt-md="55">
@@ -115,6 +123,9 @@ <h3 class="md-title">HTML</h3>
                 <td-layout-card-over cardTitle="Card Title" cardSubtitle="Card subtitle" cardWidth="75">
                   <router-outlet></router-outlet>
                 </td-layout-card-over>
+                <td-layout-footer>
+                  Optional footer
+                </td-layout-footer>
               </td-layout-nav>
             </td-layout>
             ]]>
@@ -151,4 +162,7 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
         <a md-button color="accent" [routerLink]="'/layouts/manage-list'">Manage List</a>
     </md-card-actions>
   </td-layout-card-over>
+  <td-layout-footer>
+    Optional footer
+  </td-layout-footer>
 </td-layout-nav>
diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -148,6 +148,19 @@ <h3 md-line><code class="text-sm"><![CDATA[<button md-button class="md-icon-butt
                   <md-divider></md-divider>
                 </md-list>
               </td-step>
+              <td-step label="Step 6: td-layout-footer" sublabel="optional sticky footer">
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout-footer>]]></code></h3>
+                    <p md-line>Optional footer before <code><![CDATA[</td-layout>]]></code></p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout-footer-inner>]]></code></h3>
+                    <p md-line>Optional inner footer before <code><![CDATA[</td-layout-manage-list>]]></code></p>
+                  </md-list-item>
+                </md-list>
+              </td-step>
             </td-steps>
           </div>
           <div flex-gt-md="50">
@@ -180,7 +193,13 @@ <h3 class="md-title">HTML</h3>
                         <button md-button class="md-icon-button"><md-icon class="md-24">more_vert</md-icon></button>
                       </div>
                       <router-outlet></router-outlet>
+                      <td-layout-footer-inner>
+                        Optional inner footer
+                      </td-layout-footer-inner>
                     </td-layout-manage-list>
+                    <td-layout-footer>
+                      Optional footer
+                    </td-layout-footer>
                   </td-layout-nav>
                 </td-layout>
                 ]]>
@@ -222,4 +241,7 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
       </md-card-actions>
     </md-card>
   </td-layout-manage-list>
+  <td-layout-footer>
+      Optional footer
+  </td-layout-footer>
 </td-layout-nav>
diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -103,6 +103,19 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
                 <md-divider></md-divider>
               </md-list>
             </td-step>
+            <td-step label="Step 4: td-layout-footer" sublabel="optional sticky footer">
+              <md-list>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<td-layout-footer>]]></code></h3>
+                  <p md-line>Optional footer</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<td-layout-footer-inner>]]></code></h3>
+                  <p md-line>Optional inner footer</p>
+                </md-list-item>
+              </md-list>
+            </td-step>
           </td-steps>
         </div>
         <div flex-gt-md="50">
@@ -131,6 +144,12 @@ <h3 md-line> { {item.title} } </h3>
                     <span>Page Title</span>
                   </div>
                   <router-outlet></router-outlet>
+                  <td-layout-footer-inner>
+                    Optional inner footer
+                  </td-layout-footer-inner>
+                  <td-layout-footer>
+                    Optional footer
+                  </td-layout-footer>
                 </td-layout-nav-list>
               </td-layout>
               ]]>
@@ -173,4 +192,7 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
         <a md-button color="accent" [routerLink]="'/layouts/card-over'">Card Over</a>
     </md-card-actions>
   </md-card>
+  <td-layout-footer>
+    Optional footer
+  </td-layout-footer>
 </td-layout-nav-list>
diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
@@ -75,6 +75,14 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
                   <md-divider></md-divider>
                 </md-list>
               </td-step>
+              <td-step label="Step 4: td-layout-footer" sublabel="optional sticky footer">
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout-footer>]]></code></h3>
+                    <p md-line>Optional footer</p>
+                  </md-list-item>
+                </md-list>
+              </td-step>
             </td-steps>
           </div>
           <div flex-gt-md="50">
@@ -90,6 +98,9 @@ <h3 class="md-title">HTML</h3>
                   </md-nav-list>
                   <td-layout-nav toolbarTitle="Toolbar Title" logo="svgIconName">
                     <router-outlet></router-outlet>
+                    <td-layout-footer>
+                      Optional footer
+                    </td-layout-footer>
                   </td-layout-nav>
                 </td-layout>
                 ]]>
@@ -127,4 +138,7 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
       </md-card-actions>
     </md-card>
   </div>
+  <td-layout-footer>
+    Optional footer
+  </td-layout-footer>
 </td-layout-nav>
diff --git a/src/platform/core/layout/_layout-theme.scss b/src/platform/core/layout/_layout-theme.scss
@@ -3,6 +3,8 @@
 
 @mixin td-layout-theme($theme) {
   $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
   .md-sidenav-container {
     background-color: md-color($background, status-bar);
   }
@@ -12,4 +14,9 @@
       z-index: 1;
     }
   }
+  .td-layout-footer {
+    background: md-color($background, app-bar);
+    color: md-color($foreground, text);
+    @include md-elevation(2);
+  }
 }
diff --git a/src/platform/core/layout/layout-footer/layout-footer.component.html b/src/platform/core/layout/layout-footer/layout-footer.component.html
@@ -0,0 +1,3 @@
+<div class="td-layout-footer">
+  <ng-content></ng-content>
+</div>
diff --git a/src/platform/core/layout/layout-footer/layout-footer.component.scss b/src/platform/core/layout/layout-footer/layout-footer.component.scss
@@ -0,0 +1,6 @@
+:host {
+  display: block;
+}
+.td-layout-footer {
+  padding: 10px 16px;
+}
diff --git a/src/platform/core/layout/layout-footer/layout-footer.component.ts b/src/platform/core/layout/layout-footer/layout-footer.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  /* tslint:disable-next-line */
+  selector: 'td-layout-footer,td-layout-footer-inner',
+  styleUrls: ['./layout-footer.component.scss' ],
+  templateUrl: './layout-footer.component.html',
+})
+export class TdLayoutFooterComponent {
+
+}
diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html
@@ -12,5 +12,6 @@
     <div class="md-content" flex>
       <ng-content></ng-content>
     </div>
+    <ng-content select="td-layout-footer-inner"></ng-content>
   </div>
 </md-sidenav-container>
diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html
@@ -1,23 +1,29 @@
-<md-sidenav-container fullscreen class="td-layout-nav-list" layout="row" flex>
-  <md-sidenav opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left md-whiteframe-z1" flex-gt-xs="none">
-    <md-toolbar color="primary" class="md-whiteframe-z1">
-      <button md-button (click)="menuClick()" md-icon-button><md-icon class="md-24">menu</md-icon></button>
-      <md-icon *ngIf="icon">{{icon}}</md-icon>
-      <md-icon *ngIf="logo" class="md-icon-logo" [svgIcon]="logo"></md-icon>
-      <span>{{toolbarTitle}}</span>
-      <ng-content select="[list-toolbar-content]"></ng-content>
-    </md-toolbar>
-    <div flex class="list md-content">
-      <ng-content select="[list-items]"></ng-content>
-    </div>
-  </md-sidenav>
-  <div layout="column" layout-fill class="md-content content">
-    <md-toolbar color="primary" class="md-whiteframe-z1">
-      <button md-button (click)="toggle()" md-icon-button hide-gt-xs><md-icon class="md-24">arrow_back</md-icon></button>
-      <ng-content select="[nav-toolbar-content]"></ng-content>
-    </md-toolbar>
-    <div class="md-content" flex>
-      <ng-content></ng-content>
-    </div>
+<div layout="column" layout-fill>
+  <div flex layout="column" class="content md-content">
+    <md-sidenav-container fullscreen class="td-layout-nav-list" layout="row" flex>
+      <md-sidenav opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left md-whiteframe-z1" flex-gt-xs="none">
+        <md-toolbar color="primary" class="md-whiteframe-z1">
+          <button md-button (click)="menuClick()" md-icon-button><md-icon class="md-24">menu</md-icon></button>
+          <md-icon *ngIf="icon">{{icon}}</md-icon>
+          <md-icon *ngIf="logo" class="md-icon-logo" [svgIcon]="logo"></md-icon>
+          <span>{{toolbarTitle}}</span>
+          <ng-content select="[list-toolbar-content]"></ng-content>
+        </md-toolbar>
+        <div flex class="list md-content">
+          <ng-content select="[list-items]"></ng-content>
+        </div>
+      </md-sidenav>
+      <div layout="column" layout-fill class="md-content content">
+        <md-toolbar color="primary" class="md-whiteframe-z1">
+          <button md-button (click)="toggle()" md-icon-button hide-gt-xs><md-icon class="md-24">arrow_back</md-icon></button>
+          <ng-content select="[nav-toolbar-content]"></ng-content>
+        </md-toolbar>
+        <div class="md-content" flex>
+          <ng-content></ng-content>
+        </div>
+        <ng-content select="td-layout-footer-inner"></ng-content>
+      </div>
+    </md-sidenav-container>
   </div>
-</md-sidenav-container>
+  <ng-content select="td-layout-footer"></ng-content>
+</div>
diff --git a/src/platform/core/layout/layout-nav/layout-nav.component.html b/src/platform/core/layout/layout-nav/layout-nav.component.html
@@ -9,4 +9,5 @@
   <div flex layout="column" class="content md-content">
     <ng-content></ng-content>
   </div>
+  <ng-content select="td-layout-footer"></ng-content>
 </div>
diff --git a/src/platform/core/layout/layout.module.ts b/src/platform/core/layout/layout.module.ts
@@ -9,6 +9,7 @@ import { TdLayoutNavComponent } from './layout-nav/layout-nav.component';
 import { TdLayoutNavListComponent } from './layout-nav-list/layout-nav-list.component';
 import { TdLayoutCardOverComponent } from './layout-card-over/layout-card-over.component';
 import { TdLayoutManageListComponent } from './layout-manage-list/layout-manage-list.component';
+import { TdLayoutFooterComponent } from './layout-footer/layout-footer.component';
 import { TdLayoutService } from './services/layout.service';
 
 const TD_LAYOUTS: Type<any>[] = [
@@ -17,10 +18,12 @@ const TD_LAYOUTS: Type<any>[] = [
   TdLayoutNavListComponent,
   TdLayoutCardOverComponent,
   TdLayoutManageListComponent,
+  TdLayoutFooterComponent,
 ];
 
 export { TdLayoutComponent, TdLayoutNavComponent, TdLayoutNavListComponent,
-         TdLayoutCardOverComponent, TdLayoutManageListComponent };
+          TdLayoutCardOverComponent, TdLayoutManageListComponent,
+          TdLayoutFooterComponent };
 
 @NgModule({
   imports: [