add list dividers

addon/components/paper-divider.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName:'md-divider',
+  attributeBindings:['insetAttr:md-inset'],
+  classNames:['paper-divider','md-default-theme'],
+  /*
+   * Not binding boolean values in Ember 1.8.1?
+   * https://github.com/emberjs/ember.js/issues/9595
+   */
+  insetAttr:function(){
+    return this.get('inset') ? 'md-inset' : null;
+  }.property('inset')
+});

addon/styles/scss/main.scss

@@ -52,5 +52,7 @@
 @import 'paper-toggle';
 @import 'paper-text';
 @import 'paper-list';
+@import 'paper-divider';
+@import 'paper-whiteframe';
 
 @import 'paper-sidenav';

addon/styles/scss/paper-divider.scss

@@ -0,0 +1,13 @@
+md-divider {
+  display: block;
+  border-top: 1px solid;
+  margin: 0;
+
+  &[md-inset] {
+    margin-left: $baseline-grid * 10;
+  }
+}
+
+md-divider.md-#{$theme-name}-theme {
+  border-top-color: $foreground-quarternary-color;
+}

addon/styles/scss/paper-whiteframe.scss

@@ -0,0 +1,15 @@
+.md-whiteframe-z1 {
+  box-shadow: $whiteframe-shadow-z1;
+}
+.md-whiteframe-z2 {
+  box-shadow: $whiteframe-shadow-z2;
+}
+.md-whiteframe-z3 {
+  box-shadow: $whiteframe-shadow-z3;
+}
+.md-whiteframe-z4 {
+  box-shadow: $whiteframe-shadow-z4;
+}
+.md-whiteframe-z5 {
+  box-shadow: $whiteframe-shadow-z5;
+}

app/components/paper-divider.js

@@ -0,0 +1,3 @@
+import PaperDivider from 'ember-paper/components/paper-divider';
+
+export default PaperDivider;

tests/dummy/app/router.js

@@ -12,7 +12,8 @@ Router.map(function() {
   this.route('radio');
   this.route('toggle');
   this.route('typography');
-  this.route('lists');
+  this.route('list');
+  this.route('divider');
   this.route('navigation');
   this.route('textfield');
   //this.route('index',);

tests/dummy/app/routes/divider.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  controllerName: 'list'
+});

tests/dummy/app/templates/application.hbs

@@ -7,7 +7,8 @@
         <li>{{#link-to "index"}}Introduction{{/link-to}}</li>
           <li>{{#link-to "navigation"}}Navigation{{/link-to}}</li>
           <li>{{#link-to "typography"}}Typography{{/link-to}}</li>
-          <li>{{#link-to "lists"}}Lists{{/link-to}}</li>
+          <li>{{#link-to "list"}}Lists{{/link-to}}</li>
+          <li>{{#link-to "divider"}}Dividers{{/link-to}}</li>
           <li>{{#link-to "button"}}Button{{/link-to}}</li>
           <li>{{#link-to "checkbox"}}Checkbox{{/link-to}}</li>
           <li>{{#link-to "toggle"}}Toggle{{/link-to}}</li>

tests/dummy/app/templates/divider.hbs

@@ -0,0 +1,69 @@
+<h3>Dividers</h3>
+
+<h4>Full width dividers</h4>
+{{#paper-content classNames="md-whiteframe-z1 list-demo"}}
+  {{#paper-list}}
+    {{#each listData}}
+      {{#paper-item}}
+        {{#paper-tile-left}}
+          <img {{bind-attr src=face alt=who}} class="face">
+        {{/paper-tile-left}}
+
+        {{#paper-tile-content}}
+          <h3>{{what}}</h3>
+          <h4>{{who}}</h4>
+          <p>
+            {{notes}}
+          </p>
+        {{/paper-tile-content}}
+      {{/paper-item}}
+      {{paper-divider}}
+    {{/each}}
+  {{/paper-list}}
+{{/paper-content}}
+
+<h4>Inset dividers</h4>
+{{#paper-content classNames="md-whiteframe-z1 list-demo"}}
+  {{#paper-list}}
+    {{#each listData}}
+      {{#paper-item}}
+        {{#paper-tile-left}}
+          <img {{bind-attr src=face alt=who}} class="face">
+        {{/paper-tile-left}}
+
+        {{#paper-tile-content}}
+          <h3>{{what}}</h3>
+          <h4>{{who}}</h4>
+          <p>
+            {{notes}}
+          </p>
+        {{/paper-tile-content}}
+      {{/paper-item}}
+      {{paper-divider inset=true}}
+    {{/each}}
+  {{/paper-list}}
+{{/paper-content}}
+
+<h3>Template</h3>
+<pre>
+\{{#paper-content classNames="md-whiteframe-z1"}}
+  \{{#paper-list}}
+    \{{#each listData}}
+      \{{#paper-item}}
+        \{{#paper-tile-left}}
+          &lt;img \{{bind-attr src=face alt=who}} class=&quot;face&quot;&gt;
+        \{{/paper-tile-left}}
+
+        \{{#paper-tile-content}}
+          &lt;h3&gt;\{{what}}&lt;/h3&gt;
+          &lt;h4&gt;\{{who}}&lt;/h4&gt;
+          &lt;p&gt;
+            \{{notes}}
+          &lt;/p&gt;
+        \{{/paper-tile-content}}
+      \{{/paper-item}}
+      \{{paper-divider}} \{{! OR \{{paper-divider inset=true}} }}
+    \{{/each}}
+  \{{/paper-list}}
+\{{/paper-content}}
+</pre>

tests/dummy/app/templates/lists.hbs → tests/dummy/app/templates/list.hbs

@@ -1,7 +1,7 @@
 <h3>Lists</h3>
-<div class="preview-block list-demo">
-
+<div class="list-demo">
 
+{{#paper-content classNames="md-whiteframe-z1 list-demo"}}
   {{#paper-list}}
     {{#each listData}}
       {{#paper-item}}
@@ -19,11 +19,12 @@
       {{/paper-item}}
     {{/each}}
   {{/paper-list}}
-
+{{/paper-content}}
 </div>
 
 <h3>Template</h3>
 <pre>
+\{{#paper-content classNames="md-whiteframe-z1 list-demo"}}
   \{{#paper-list}}
     \{{#each listData}}
       \{{#paper-item}}
@@ -41,4 +42,5 @@
       \{{/paper-item}}
     \{{/each}}
   \{{/paper-list}}
+\{{/paper-content}}
 </pre>