feat(list): support subheaders in lists

angular · Apr 5, 2016 · 0a9c169 · 0a9c169
1 parent 25077be
commit 0a9c169
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -1,4 +1,5 @@
 @import "variables";
+@import "default-theme";
 
 $md-list-side-padding: 16px;
 $md-list-avatar-size: 40px;
@@ -25,7 +26,7 @@ $md-dense-three-line-height: 76px;
 
 /*  
 This mixin provides all list-item styles, changing font size and height
-based on whether the list is in "dense" mode.
+based on whether the list is in dense mode.
 */
 @mixin md-list-item-base($font-size, $base-height, $avatar-height, 
   $two-line-height, $three-line-height) {
@@ -86,7 +87,7 @@ based on whether the list is in "dense" mode.
 
 /*
 This mixin provides all md-line styles, changing secondary font size 
-based on whether the list is in "dense" mode.
+based on whether the list is in dense mode.
 */
 @mixin md-line-base($secondary-font-size) {
 
@@ -104,10 +105,39 @@ based on whether the list is in "dense" mode.
   }
 }
 
+/*
+This mixin provides all subheader styles, adjusting heights and padding
+based on whether the list is in dense mode.
+*/
+@mixin md-subheader-base($top-padding, $secondary-size, $base-height) {
+  display: block;
+  box-sizing: border-box;
+  height: $base-height;
+  padding: $md-list-side-padding;
+  margin: 0;
+
+  font-size: $secondary-size;
+  font-weight: 500;
+  color: md-color($md-foreground, secondary-text);
+
+  &:first-child {
+    margin-top: -$top-padding;
+  }
+}
+
 md-list {
   padding-top: $md-list-top-padding;
   display: block;
 
+  [md-subheader] {
+    @include md-subheader-base(
+      $md-list-top-padding,
+      $md-list-secondary-font,
+      $md-list-base-height
+    );
+  }
+
+
   md-list-item {
     @include md-list-item-base(
       $md-list-font-size,
@@ -126,6 +156,13 @@ md-list[dense] {
   padding-top: $md-dense-top-padding;
   display: block;
 
+  [md-subheader] {
+    @include md-subheader-base(
+      $md-dense-top-padding,
+      $md-dense-font-size,
+      $md-dense-base-height
+    );
+  }
 
   md-list-item {
     @include md-list-item-base(

diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
@@ -8,6 +8,7 @@ <h1>md-list demo</h1>
     <h2>Normal lists</h2>
 
     <md-list>
+      <h3 md-subheader>Items</h3>
       <md-list-item *ngFor="#item of items">
         {{item}}
       </md-list-item>
@@ -22,19 +23,20 @@ <h3 md-line>{{contact.name}}</h3>
     </md-list>
 
     <md-list>
+      <h3 md-subheader>Today</h3>
       <md-list-item *ngFor="#message of messages">
         <img md-list-avatar [src]="message.image" alt="Image of {{message.from}}">
-        <h3 md-line>{{message.from}}</h3>
+        <h4 md-line>{{message.from}}</h4>
         <p md-line>
           <span>{{message.subject}} -- </span>
           <span class="demo-secondary-text">{{message.message}}</span>
         </p>
       </md-list-item>
     </md-list>
-
+    
     <md-list>
       <md-list-item *ngFor="#message of messages">
-        <h3 md-line>{{message.from}}</h3>
+        <h4 md-line>{{message.from}}</h4>
         <p md-line> {{message.subject}} </p>
         <p md-line class="demo-secondary-text">{{message.message}} </p>
       </md-list-item>
@@ -44,6 +46,7 @@ <h3 md-line>{{message.from}}</h3>
   <div>
     <h2>Dense lists</h2>
     <md-list dense>
+      <h3 md-subheader>Items</h3>
       <md-list-item *ngFor="#item of items">
         {{item}}
       </md-list-item>
@@ -57,9 +60,10 @@ <h3 md-line>{{contact.name}}</h3>
     </md-list>
 
     <md-list dense>
+      <h3 md-subheader>Today</h3>
       <md-list-item *ngFor="#message of messages">
         <img md-list-avatar [src]="message.image" alt="Image of {{message.from}}">
-        <h3 md-line>{{message.from}}</h3>
+        <h4 md-line>{{message.from}}</h4>
         <p md-line> {{message.subject}} </p>
         <p md-line class="demo-secondary-text">{{message.message}} </p>
       </md-list-item>

diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss
@@ -4,9 +4,9 @@
   display: flex;
 
   md-list {
-    border: 1px dotted gray;
+    border: 1px solid rgba(0,0,0,0.12);
     width: 350px;
-    margin: 0 20px;
+    margin: 20px;
 
   }
   h2 {