feat(layout): add toggle/open/close directives for layouts with siden…

…av. (#745) * feat(layout): add toggle/open/close directives for layouts with sidenav. so we can open/close/toggle any sidenav from any child component, we need special directives that access their parent layouts. with this we can affect the behavior of it, and it also includes [hideWhenOpened] input and a default input to disable/enable the action leveraging the media service * fix(): lint errors * update(docs): overhaul layout demos
Teradata · Jul 7, 2017 · 346a4bf · 346a4bf
1 parent da52d3d
commit 346a4bf
Show file tree

Hide file tree

Showing 31 changed files with 2,113 additions and 901 deletions.
diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html
@@ -15,7 +15,7 @@ <h3 md-subheader>Core Components</h3>
           [routerLink]="[item.route]" 
           [routerLinkActive]="['active']" 
           [routerLinkActiveOptions]="{exact:true}"
-          (click)="!media.query('gt-sm') && navList.close()">
+          [tdLayoutNavListClose]="!media.query('gt-sm')">
         <md-icon md-list-avatar>{{item.icon}}</md-icon>
         <h3 md-line> {{item.title}} </h3>
         <p md-line> {{item.description}} </p>
@@ -28,7 +28,7 @@ <h3 md-subheader>Optional Components</h3>
           [routerLink]="[item.route]" 
           [routerLinkActive]="['active']" 
           [routerLinkActiveOptions]="{exact:true}"
-          (click)="!media.query('gt-sm') && navList.close()">
+          [tdLayoutNavListClose]="!media.query('gt-sm')">
         <md-icon md-list-avatar>{{item.icon}}</md-icon>
         <h3 md-line> {{item.title}} </h3>
         <p md-line> {{item.description}} </p>
@@ -50,7 +50,7 @@ <h3 md-line> Angular Material </h3>
           [routerLink]="[item.route]"
           [routerLinkActive]="['active']"
           [routerLinkActiveOptions]="{exact:true}"
-          (click)="!media.query('gt-sm') && navList.close()">
+          [tdLayoutNavListClose]="!media.query('gt-sm')">
         <md-icon md-list-avatar>{{item.icon}}</md-icon>
         <h3 md-line> {{item.title}} </h3>
         <p md-line> {{item.description}} </p>
@@ -59,7 +59,7 @@ <h3 md-line> {{item.title}} </h3>
     </ng-template>
   </md-nav-list>
   <div td-toolbar-content layout="row" layout-align="start center" flex>
-    <button md-icon-button tdLayoutNavListToggle>
+    <button md-icon-button tdLayoutNavListOpen [hideWhenOpened]="true">
       <md-icon>arrow_back</md-icon>
     </button>
     <span hide-gt-md flex>Components &amp; Addons</span>

diff --git a/src/app/components/docs/docs.component.html b/src/app/components/docs/docs.component.html
@@ -14,7 +14,7 @@
            [routerLink]="[item.route]" 
            [routerLinkActive]="['active']" 
            [routerLinkActiveOptions]="{exact:true}"
-           (click)="!media.query('gt-sm') && navList.close()">
+           [tdLayoutNavListClose]="!media.query('gt-sm')">
           <md-icon md-list-avatar>{{item.icon}}</md-icon>
           <h3 md-line> {{item.title}} </h3>
           <p md-line> {{item.description}} </p>
@@ -23,7 +23,7 @@ <h3 md-line> {{item.title}} </h3>
       </ng-template>
   </md-nav-list>
   <div td-toolbar-content layout="row" layout-align="start center" flex>
-    <button md-icon-button tdLayoutNavListToggle>
+    <button md-icon-button tdLayoutNavListOpen [hideWhenOpened]="true">
       <md-icon>arrow_back</md-icon>
     </button>
     <span hide-gt-md flex>Documentation</span>