implementing list

addon/components/paper-item.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName:'md-item-content',
+  classNames:['paper-item']
+});

addon/components/paper-list.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName:'md-list',
+  classNames:['paper-list']
+});

addon/components/paper-tile-content.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames:['md-tile-content']
+});

addon/components/paper-tile-left.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames:['md-tile-left']
+});

addon/styles/scss/main.scss

@@ -38,5 +38,6 @@
 @import 'paper-radio';
 @import 'paper-toggle';
 @import 'paper-text';
+@import 'paper-list';
 
 @import 'paper-sidenav';

addon/styles/scss/paper-list.scss

@@ -0,0 +1,78 @@
+$list-h3-font-size: 1.1em !default;
+$list-h3-margin: 0 0 3px 0 !default;
+$list-h3-font-weight: 400 !default;
+$list-h4-font-size: 0.9em !default;
+$list-h4-font-weight: 400 !default;
+$list-h4-margin: 0 0 3px 0 !default;
+$list-p-font-size: 0.75em !default;
+$list-p-margin: 0 0 3px 0 !default;
+
+$list-padding-top: $baseline-grid !default;
+$list-padding-right: 0px !default;
+$list-padding-left: 0px !default;
+$list-padding-bottom: $baseline-grid !default;
+
+$item-padding-top: 0px !default;
+$item-padding-right: 0px !default;
+$item-padding-left: 0px !default;
+$item-padding-bottom: 0px !default;
+
+md-list {
+  padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
+}
+
+md-item {
+
+}
+
+md-item-content {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  box-sizing: border-box;
+
+  position: relative;
+
+  padding: $item-padding-top $item-padding-right $item-padding-bottom $item-padding-left;
+}
+
+/**
+ * The left tile for a list item.
+ */
+.md-tile-left {
+  min-width: 56px;
+  margin-right: -16px;
+}
+
+/**
+ * The center content tile for a list item.
+ */
+.md-tile-content {
+  flex: 1;
+
+  padding: $baseline-grid * 2;
+
+  text-overflow: ellipsis;
+
+  h3 {
+    margin: $list-h3-margin;
+    font-weight: $list-h3-font-weight;
+    font-size: $list-h3-font-size;
+  }
+  h4 {
+    margin: $list-h4-margin;
+    font-weight: $list-h4-font-weight;
+    font-size: $list-h4-font-size;
+  }
+  p {
+    margin: $list-p-margin;
+    font-size: $list-p-font-size;
+  }
+}
+
+/**
+ * The right tile for a list item.
+ */
+.md-tile-right {
+  padding-right: $item-padding-right;
+}

app/components/paper-item.js

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

app/components/paper-list.js

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

app/components/paper-tile-content.js

@@ -0,0 +1,3 @@
+import PaperTileContent from 'ember-paper/components/paper-tile-content';
+
+export default PaperTileContent;

app/components/paper-tile-left.js

@@ -0,0 +1,3 @@
+import PaperTileLeft from 'ember-paper/components/paper-tile-left';
+
+export default PaperTileLeft;

tests/dummy/app/controllers/lists.js

@@ -0,0 +1,30 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  listData: [{
+    face: '/tomster.png',
+    who: 'tomster',
+    what: 'a message for you',
+    notes: 'this is a message for you about ember'
+  },{
+    face: '/tomster.png',
+    who: 'tomster',
+    what: 'a message for you',
+    notes: 'this is a message for you about ember'
+  },{
+    face: '/tomster.png',
+    who: 'tomster',
+    what: 'a message for you',
+    notes: 'this is a message for you about ember'
+  },{
+    face: '/tomster.png',
+    who: 'tomster',
+    what: 'a message for you',
+    notes: 'this is a message for you about ember'
+  },{
+    face: '/tomster.png',
+    who: 'tomster',
+    what: 'a message for you',
+    notes: 'this is a message for you about ember'
+  }]
+})

tests/dummy/app/styles/app.css

@@ -1,33 +1,10 @@
-body {
-  overflow: hidden;
-  max-width: 100%;
-  max-height: 100%;
-  font-size: 14px;
-}
-
-.md-button {
-  margin: 1em;
-  line-height: 25px;
-}
-
-.md-button:not(.md-fab) {
-  min-width: 10em;
-}
-
 .preview-block {
   background: #f5f5f5;
   padding: 20px;
 }
 
-/* LISTS */
-.paper-list-inline {
-  list-style  : none;
-  margin-left : -5px;
-  padding-left: 0;
-}
-
-.paper-list-inline > li {
-  display      : inline-block;
-  padding-left : 5px;
-  padding-right: 5px;
-}
+.list-demo .face {
+  border-radius: 30px;
+  border: 1px solid #ddd;
+  width: 48px;
+  margin: 16px; }

tests/dummy/app/templates/lists.hbs

@@ -1,29 +1,44 @@
 <h3>Lists</h3>
-<div class="preview-block">
+<div class="preview-block list-demo">
 
-  <h3>Ordered</h3>
-  <ol>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-    <li>Item 4</li>
-    <li>Item 5</li>
-  </ol>
-  <h3>Unordered</h3>
-  <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-    <li>Item 4</li>
-    <li>Item 5</li>
-  </ul>
-  <h3>Inlined</h3>
-  <ul class="paper-list-inline">
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-    <li>Item 4</li>
-    <li>Item 5</li>
-  </ul>
 
-</div>
+  {{#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}}
+    {{/each}}
+  {{/paper-list}}
+
+</div>
+
+<h3>Template</h3>
+<pre>
+  \{{#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}}
+    \{{/each}}
+  \{{/paper-list}}
+</pre>