From 0c18cc31539d3a27167166ec2b66780f5729860a Mon Sep 17 00:00:00 2001
From: Marcos Moura <mrufino@ciandt.com>
Date: Tue, 9 Aug 2016 16:46:33 -0300
Subject: [PATCH] Create subheaders

---
 index.html                                   |   1 +
 src/components/mdList/mdList.scss            |   4 +
 src/components/mdSubheader/index.js          |   8 +
 src/components/mdSubheader/mdSubheader.scss  |  12 ++
 src/components/mdSubheader/mdSubheader.theme |  17 ++
 src/components/mdSubheader/mdSubheader.vue   |   7 +
 src/docs/pages/List.vue                      |  30 ++--
 src/docs/pages/Subheader.vue                 | 157 +++++++++++++++++++
 src/docs/routes.js                           |   5 +
 src/vue-material.js                          |   2 +
 10 files changed, 228 insertions(+), 15 deletions(-)
 create mode 100644 src/components/mdSubheader/index.js
 create mode 100644 src/components/mdSubheader/mdSubheader.scss
 create mode 100644 src/components/mdSubheader/mdSubheader.theme
 create mode 100644 src/components/mdSubheader/mdSubheader.vue
 create mode 100644 src/docs/pages/Subheader.vue

diff --git a/index.html b/index.html
index 25759ad..84a2427 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,7 @@
           <md-list-item v-link="list">List</md-list-item>
           <md-list-item v-link="ripple">Ripple</md-list-item>
           <md-list-item v-link="sidenav">Sidenav</md-list-item>
+          <md-list-item v-link="subheader">Subheader</md-list-item>
           <md-list-item v-link="theme">Theme</md-list-item>
           <md-list-item v-link="toolbar">Toolbar</md-list-item>
           <md-list-item v-link="tooltip">Tooltip</md-list-item>
diff --git a/src/components/mdList/mdList.scss b/src/components/mdList/mdList.scss
index 11a9d84..06fcd88 100644
--- a/src/components/mdList/mdList.scss
+++ b/src/components/mdList/mdList.scss
@@ -108,6 +108,10 @@
       align-items: flex-start;
     }
   }
+
+  > .md-subheader:first-of-type {
+    margin-top: -8px;
+  }
 }
 
 .md-list-item {
diff --git a/src/components/mdSubheader/index.js b/src/components/mdSubheader/index.js
new file mode 100644
index 0000000..59bbdd7
--- /dev/null
+++ b/src/components/mdSubheader/index.js
@@ -0,0 +1,8 @@
+import mdSubheader from './mdSubheader.vue';
+import mdSubheaderTheme from './mdSubheader.theme';
+
+export default function install(Vue) {
+  Vue.component('md-subheader', Vue.extend(mdSubheader));
+
+  window.VueMaterial.styles.push(mdSubheaderTheme);
+}
diff --git a/src/components/mdSubheader/mdSubheader.scss b/src/components/mdSubheader/mdSubheader.scss
new file mode 100644
index 0000000..6596eb7
--- /dev/null
+++ b/src/components/mdSubheader/mdSubheader.scss
@@ -0,0 +1,12 @@
+@import '../../core/variables.scss';
+
+.md-subheader {
+  min-height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  color: rgba(#000, .54);
+  font-size: 14px;
+  font-weight: 500;
+}
diff --git a/src/components/mdSubheader/mdSubheader.theme b/src/components/mdSubheader/mdSubheader.theme
new file mode 100644
index 0000000..c1d0216
--- /dev/null
+++ b/src/components/mdSubheader/mdSubheader.theme
@@ -0,0 +1,17 @@
+.THEME_NAME {
+  .md-subheader,
+  &.md-subheader {
+
+    &.md-primary {
+      color: PRIMARY-COLOR;
+    }
+
+    &.md-accent {
+      color: ACCENT-COLOR;
+    }
+
+    &.md-warn {
+      color: WARN-COLOR;
+    }
+  }
+}
diff --git a/src/components/mdSubheader/mdSubheader.vue b/src/components/mdSubheader/mdSubheader.vue
new file mode 100644
index 0000000..939da47
--- /dev/null
+++ b/src/components/mdSubheader/mdSubheader.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="md-subheader">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" src="./mdSubheader.scss"></style>
diff --git a/src/docs/pages/List.vue b/src/docs/pages/List.vue
index d3b4307..d910a20 100644
--- a/src/docs/pages/List.vue
+++ b/src/docs/pages/List.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <h1 class="title">Lists</h1>
+    <h1 class="md-title">Lists</h1>
 
     <div>
       <div class="cell-phone scrollable">
         <md-toolbar>
-          <h2 class="title">Normal - Single Line</h2>
+          <h2 class="md-title">Normal - Single Line</h2>
         </md-toolbar>
 
         <md-list>
@@ -67,7 +67,7 @@
 
       <div class="cell-phone scrollable">
         <md-toolbar>
-          <h2 class="title">Dense - Single Line</h2>
+          <h2 class="md-title">Dense - Single Line</h2>
         </md-toolbar>
 
         <md-list class="md-dense">
@@ -131,7 +131,7 @@
     <div v-md-theme="'indigo'">
       <div class="cell-phone scrollable">
         <md-toolbar>
-          <h2 class="title">Normal - Double Line</h2>
+          <h2 class="md-title">Normal - Double Line</h2>
         </md-toolbar>
 
         <md-list class="md-double-line">
@@ -181,7 +181,7 @@
 
       <div class="cell-phone scrollable">
         <md-toolbar>
-          <h2 class="title">Dense - Double Line</h2>
+          <h2 class="md-title">Dense - Double Line</h2>
         </md-toolbar>
 
         <md-list class="md-double-line md-dense">
@@ -233,7 +233,7 @@
     <div class="custom-list" v-md-theme="'orange'">
       <div class="cell-phone scrollable">
         <md-toolbar>
-          <h2 class="title">Normal - Triple Line</h2>
+          <h2 class="md-title">Normal - Triple Line</h2>
         </md-toolbar>
 
         <md-list class="md-triple-line">
@@ -252,7 +252,7 @@
               <md-icon class="md-primary">star</md-icon>
             </md-button>
 
-            <md-divider></md-divider>
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -270,7 +270,7 @@
               <md-icon>star_border</md-icon>
             </md-button>
 
-            <md-divider></md-divider>
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -288,7 +288,7 @@
               <md-icon>star_border</md-icon>
             </md-button>
 
-            <md-divider></md-divider>
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -306,14 +306,14 @@
               <md-icon>star_border</md-icon>
             </md-button>
 
-            <md-divider></md-divider>
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
         </md-list>
       </div>
 
       <div class="cell-phone scrollable">
         <md-toolbar>
-          <h2 class="title">Dense - Triple Line</h2>
+          <h2 class="md-title">Dense - Triple Line</h2>
         </md-toolbar>
 
         <md-list class="md-triple-line md-dense">
@@ -332,7 +332,7 @@
               <md-icon class="md-primary">star</md-icon>
             </md-button>
 
-            <md-divider></md-divider>
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -350,7 +350,7 @@
               <md-icon>star_border</md-icon>
             </md-button>
 
-            <md-divider></md-divider>
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -368,7 +368,7 @@
               <md-icon>star_border</md-icon>
             </md-button>
 
-            <md-divider></md-divider>
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -386,7 +386,7 @@
               <md-icon>star_border</md-icon>
             </md-button>
 
-            <md-divider></md-divider>
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
         </md-list>
       </div>
diff --git a/src/docs/pages/Subheader.vue b/src/docs/pages/Subheader.vue
new file mode 100644
index 0000000..b1cda90
--- /dev/null
+++ b/src/docs/pages/Subheader.vue
@@ -0,0 +1,157 @@
+<template>
+  <section>
+    <h2 class="md-title">Sidenav</h2>
+
+    <div v-md-theme="'blue'">
+      <div class="cell-phone scrollable">
+        <md-toolbar>
+          <h2 class="md-title">Normal - Single Line</h2>
+        </md-toolbar>
+
+        <md-list>
+          <md-subheader>Navigation</md-subheader>
+
+          <md-list-item>
+            <md-icon>move_to_inbox</md-icon> <span>Inbox</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>send</md-icon> <span>Outbox</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>delete</md-icon> <span>Trash</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>error</md-icon> <span>Spam</span>
+
+            <md-divider class="md-inset"></md-divider>
+          </md-list-item>
+
+          <md-subheader>Contacts</md-subheader>
+
+          <md-list-item>
+            <md-avatar>
+              <img src="https://placeimg.com/40/40/people/5" alt="People">
+            </md-avatar>
+
+            <span>Abbey Christansen</span>
+
+            <md-button class="md-icon-button md-list-action">
+              <md-icon class="md-primary">chat_bubble</md-icon>
+            </md-button>
+          </md-list-item>
+
+          <md-list-item>
+            <md-avatar>
+              <img src="https://placeimg.com/40/40/people/1" alt="People">
+            </md-avatar>
+
+            <span>Alex Nelson</span>
+
+            <md-button class="md-icon-button md-list-action">
+              <md-icon class="md-primary">chat_bubble</md-icon>
+            </md-button>
+          </md-list-item>
+
+          <md-list-item>
+            <md-avatar>
+              <img src="https://placeimg.com/40/40/people/6" alt="People">
+            </md-avatar>
+
+            <span>Mary Johnson</span>
+
+            <md-button class="md-icon-button md-list-action">
+              <md-icon>chat_bubble</md-icon>
+            </md-button>
+          </md-list-item>
+        </md-list>
+      </div>
+    </div>
+
+    <div v-md-theme="'bottom-bar'">
+      <div class="cell-phone scrollable">
+        <md-toolbar>
+          <h2 class="md-title">Normal - Triple Line</h2>
+        </md-toolbar>
+
+        <md-list class="md-triple-line">
+          <md-subheader>Today</md-subheader>
+
+          <md-list-item>
+            <md-avatar>
+              <img src="https://placeimg.com/40/40/people/1" alt="People">
+            </md-avatar>
+
+            <div class="md-list-text-container">
+              <span>Ali Connors</span>
+              <span>Brunch this weekend?</span>
+              <p>I'll be in your neighborhood doing errands...</p>
+            </div>
+
+            <md-button class="md-icon-button md-list-action">
+              <md-icon class="md-primary">star</md-icon>
+            </md-button>
+
+            <md-divider class="md-inset"></md-divider>
+          </md-list-item>
+
+          <md-list-item>
+            <md-avatar>
+              <img src="https://placeimg.com/40/40/people/6" alt="People">
+            </md-avatar>
+
+            <div class="md-list-text-container">
+              <span>me, Scott, Jennifer</span>
+              <span>Summer BBQ</span>
+              <p>Wish I could come, but I'm out of town ...</p>
+            </div>
+
+            <md-button class="md-icon-button md-list-action">
+              <md-icon>star_border</md-icon>
+            </md-button>
+
+            <md-divider class="md-inset"></md-divider>
+          </md-list-item>
+
+          <md-list-item>
+            <md-avatar>
+              <img src="https://placeimg.com/40/40/people/5" alt="People">
+            </md-avatar>
+
+            <div class="md-list-text-container">
+              <span>Sandra Adams</span>
+              <span>Oui oui</span>
+              <p>Do you have Paris recommendations ...</p>
+            </div>
+
+            <md-button class="md-icon-button md-list-action">
+              <md-icon>star_border</md-icon>
+            </md-button>
+
+            <md-divider class="md-inset"></md-divider>
+          </md-list-item>
+
+          <md-list-item>
+            <md-avatar>
+              <img src="https://placeimg.com/40/40/people/8" alt="People">
+            </md-avatar>
+
+            <div class="md-list-text-container">
+              <span>Trevor Hansen</span>
+              <span>Order confirmation</span>
+              <p>Thank you for your recent order from ...</p>
+            </div>
+
+            <md-button class="md-icon-button md-list-action">
+              <md-icon>star_border</md-icon>
+            </md-button>
+
+            <md-divider class="md-inset"></md-divider>
+          </md-list-item>
+        </md-list>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/docs/routes.js b/src/docs/routes.js
index 63c8429..932bd99 100644
--- a/src/docs/routes.js
+++ b/src/docs/routes.js
@@ -12,6 +12,7 @@ import Input from './pages/Input';
 import Ripple from './pages/Ripple';
 import List from './pages/List';
 import Sidenav from './pages/Sidenav';
+import Subheader from './pages/Subheader';
 import Theme from './pages/Theme';
 import Toolbar from './pages/Toolbar';
 import Tooltip from './pages/Tooltip';
@@ -74,6 +75,10 @@ const routes = {
     name: 'sidenav',
     component: Sidenav
   },
+  '/subheader': {
+    name: 'subheader',
+    component: Subheader
+  },
   '/theme': {
     name: 'theme',
     component: Theme
diff --git a/src/vue-material.js b/src/vue-material.js
index 71397e4..b1444ed 100644
--- a/src/vue-material.js
+++ b/src/vue-material.js
@@ -13,6 +13,7 @@ import MdBottomBar from './components/mdBottomBar';
 import MdToolbar from './components/mdToolbar';
 import MdTooltip from './components/mdTooltip';
 import MdSidenav from './components/mdSidenav';
+import MdSubheader from './components/mdSubheader';
 import MdAvatar from './components/mdAvatar';
 import MdList from './components/mdList';
 import MdWhiteframe from './components/mdWhiteframe';
@@ -31,6 +32,7 @@ let options = {
   MdInkRipple,
   MdList,
   MdSidenav,
+  MdSubheader,
   MdToolbar,
   MdTooltip,
   MdWhiteframe,