feat(list): add nav list styles

angular · Apr 18, 2016 · 22c1ea3 · 22c1ea3
1 parent dfee018
commit 22c1ea3
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 4 deletions.
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -125,7 +125,7 @@ based on whether the list is in dense mode.
   }
 }
 
-md-list {
+md-list, md-nav-list  {
   padding-top: $md-list-top-padding;
   display: block;
 
@@ -152,7 +152,7 @@ md-list {
 }
 
 
-md-list[dense] {
+md-list[dense], md-nav-list[dense] {
   padding-top: $md-dense-top-padding;
   display: block;
 
@@ -182,4 +182,19 @@ md-divider {
   display: block;
   border-top: 1px solid md-color($md-foreground, divider);
   margin: 0;
+}
+
+md-nav-list {
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .md-list-item {
+    cursor: pointer;
+
+    &:hover {
+      background: md-color($md-background, 'hover');
+    }
+  }
 }
diff --git a/src/core/style/_palette.scss b/src/core/style/_palette.scss
@@ -332,6 +332,7 @@ $md-light-theme-background: (
   status-bar: map_get($md-grey, 300),
   app-bar:    map_get($md-grey, 100),
   background: map_get($md-grey, 50),
+  hover:             rgba(black, 0.04), // TODO(kara): check style with Material Design UX
   card:       white,
   dialog:     white,
   disabled-button:   rgba(black, 0.12)
@@ -342,6 +343,7 @@ $md-dark-theme-background: (
   status-bar: black,
   app-bar:    map_get($md-grey, 900),
   background: #303030,
+  hover:             rgba(white, 0.04), // TODO(kara): check style with Material Design UX
   card:       map_get($md-grey, 800),
   dialog:     map_get($md-grey, 800),
   disabled-button:   rgba(white, 0.12)

diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
@@ -39,6 +39,17 @@ <h4 md-line>{{message.from}}</h4>
         <p md-line class="demo-secondary-text">{{message.message}} </p>
       </md-list-item>
     </md-list>
+    <div *ngIf="infoClicked">
+      More info!
+    </div>
+    <md-nav-list>
+      <md-list-item *ngFor="#link of links">
+        <a md-line href="http://www.google.com">{{ link.name }}</a>
+        <button md-icon-button (click)="infoClicked=!infoClicked">
+          <i class="material-icons">info</i>
+        </button>
+      </md-list-item>
+    </md-nav-list>
   </div>
 
   <div>
@@ -66,5 +77,13 @@ <h4 md-line>{{message.from}}</h4>
         <p md-line class="demo-secondary-text">{{message.message}} </p>
       </md-list-item>
     </md-list>
+    <md-nav-list dense>
+      <md-list-item *ngFor="#link of links">
+        <a md-line href="http://www.google.com">{{ link.name }}</a>
+        <button md-icon-button (click)="infoClicked=!infoClicked">
+          <i class="material-icons">info</i>
+        </button>
+      </md-list-item>
+    </md-nav-list>
   </div>
 </div>
diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss
@@ -3,7 +3,7 @@
   width: 350px;
   display: flex;
 
-  md-list {
+  md-list, md-nav-list {
     border: 1px solid rgba(0,0,0,0.12);
     width: 350px;
     margin: 20px;
@@ -12,6 +12,10 @@
   h2 {
     margin: 0 20px;
   }
+
+  i {
+    color: rgba(0,0,0,0.12);
+  }
 }
 
 .demo-button {

diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts
@@ -42,6 +42,14 @@ export class ListDemo {
     }
   ];
 
-  thirdLine: boolean = false;
+  links: any[] = [
+    {name: 'Inbox'},
+    {name: 'Outbox'},
+    {name: 'Spam'},
+    {name: 'Trash'}
+
+  ];
 
+  thirdLine: boolean = false;
+  infoClicked: boolean = false;
 }