From 1f8ade26ad5998a65addacf44bbf0fec17b0ebce Mon Sep 17 00:00:00 2001
From: Nick Wientge <nick@exygeninteractive.com>
Date: Wed, 17 Dec 2014 14:53:30 -0800
Subject: [PATCH] fix list showcase

---
 components/ionItem/ionItem.html               |  8 ++-----
 components/ionItem/ionItem.js                 | 14 ++++++++----
 showcase/client/stylesheets/app.scss          | 10 +++++++++
 showcase/client/templates/forms/forms.html    |  9 ++++----
 showcase/client/templates/lists/lists.html    | 22 ++++++++++++++++---
 showcase/client/templates/lists/lists.js      |  9 ++++++++
 showcase/client/templates/popup/popup.html    | 16 +++++++-------
 .../client/templates/slideBox/slideBox.html   |  2 +-
 .../templates/userAccounts/userAccounts.html  |  9 ++++----
 9 files changed, 69 insertions(+), 30 deletions(-)
 create mode 100644 showcase/client/templates/lists/lists.js

diff --git a/components/ionItem/ionItem.html b/components/ionItem/ionItem.html
index dd1ba89..ecce8a4 100644
--- a/components/ionItem/ionItem.html
+++ b/components/ionItem/ionItem.html
@@ -1,15 +1,11 @@
 <template name="ionItem">
   {{#if isAnchor}}
     <a class="{{itemClasses}}" href="{{url}}" target="{{target}}">
-      <div class="{{contentClasses}}">
-        {{> UI.contentBlock}}
-      </div>
+      {{> UI.contentBlock}}
     </a>
   {{else}}
     <div class="{{itemClasses}}">
-      <div class="{{contentClasses}}">
-        {{> UI.contentBlock}}
-      </div>
+      {{> UI.contentBlock}}
     </div>
   {{/if}}
 </template>
diff --git a/components/ionItem/ionItem.js b/components/ionItem/ionItem.js
index 168fdb7..489a941 100644
--- a/components/ionItem/ionItem.js
+++ b/components/ionItem/ionItem.js
@@ -9,6 +9,10 @@ Template.ionItem.helpers({
       });
     }
 
+    if (this.avatar) {
+      classes.push('item-avatar');
+    }
+
     if (this.iconLeft) {
       classes.push('item-icon-left');
     }
@@ -17,11 +21,13 @@ Template.ionItem.helpers({
       classes.push('item-icon-right');
     }
 
-    return classes.join(' ');
-  },
+    if (this.buttonLeft) {
+      classes.push('item-button-left');
+    }
 
-  contentClasses: function () {
-    var classes = ['item-content'];
+    if (this.buttonRight) {
+      classes.push('item-button-right');
+    }
 
     return classes.join(' ');
   },
diff --git a/showcase/client/stylesheets/app.scss b/showcase/client/stylesheets/app.scss
index ef377dc..404904a 100644
--- a/showcase/client/stylesheets/app.scss
+++ b/showcase/client/stylesheets/app.scss
@@ -4,3 +4,13 @@
 .popover {
   height: auto;
 }
+
+.item p {
+  margin-bottom: 0;
+}
+
+.item-button-left, .item-button-right {
+  button {
+    top: 16px;
+  }
+}
diff --git a/showcase/client/templates/forms/forms.html b/showcase/client/templates/forms/forms.html
index 87d39b4..97d5958 100644
--- a/showcase/client/templates/forms/forms.html
+++ b/showcase/client/templates/forms/forms.html
@@ -6,9 +6,10 @@
     <h1 class="title">Forms</h1>
   {{/ionHeaderBar}}
 
-  {{#ionContent}}
-    <div class="padding">
-      Content goes here
-    </div>
+  {{#ionContent class="padding"}}
+    <p>
+      Forms use the <a href="https://github.com/meteoric/autoform-ionic" class="positive" target="_blank"><i>meteoric:autoform-ionic</i> package.</a>
+    </p>
+    <a href="http://autoform-ionic.meteor.com/" class="button button-positive" target="_blank">{{> ionIcon icon="ios-upload-outline"}} Launch Example</a>
   {{/ionContent}}
 </template>
diff --git a/showcase/client/templates/lists/lists.html b/showcase/client/templates/lists/lists.html
index 324cd33..babdc39 100644
--- a/showcase/client/templates/lists/lists.html
+++ b/showcase/client/templates/lists/lists.html
@@ -4,11 +4,27 @@
       {{> ionIcon icon='ios-arrow-back'}}
     </a>
     <h1 class="title">Lists</h1>
+    <button class="button button-clear" onclick="alert('TODO')">Edit</button>
   {{/ionHeaderBar}}
 
   {{#ionContent}}
-    <div class="padding">
-      Content goes here
-    </div>
+    {{#ionList}}
+
+      {{#each times}}
+
+        {{#ionItem buttonRight=true avatar=true}}
+
+          <img src="https://randomuser.me/api/portraits/thumb/men/27.jpg">
+          <h2>John Smith</h2>
+          <p>
+            (555) 555-1212
+          </p>
+          <button class="button button-balanced">{{> ionIcon icon="ios-telephone"}}</button>
+
+        {{/ionItem}}
+
+      {{/each}}
+
+    {{/ionList}}
   {{/ionContent}}
 </template>
diff --git a/showcase/client/templates/lists/lists.js b/showcase/client/templates/lists/lists.js
new file mode 100644
index 0000000..1ab96b3
--- /dev/null
+++ b/showcase/client/templates/lists/lists.js
@@ -0,0 +1,9 @@
+Template.lists.helpers({
+  times: function () {
+    var times = [];
+    _(20).times(function(n){
+      times.push(n);
+    });
+    return times;
+  }
+});
diff --git a/showcase/client/templates/popup/popup.html b/showcase/client/templates/popup/popup.html
index 2321324..b3fdd79 100644
--- a/showcase/client/templates/popup/popup.html
+++ b/showcase/client/templates/popup/popup.html
@@ -8,17 +8,17 @@
 
   {{#ionContent}}
     <div class="padding">
-      <button class="button button-block button-stable" data-action="showPopup">
-        Popup
+      <button class="button button-block button-stable" data-action="showPopup" onclick="alert('TODO')">
+        Show Popup
       </button>
-      <button class="button button-block button-stable" data-action="showConfirm">
-        Confirm
+      <button class="button button-block button-stable" data-action="showConfirm" onclick="alert('TODO')">
+        Show Confirm
       </button>
-      <button class="button button-block button-stable" data-action="showAlert">
-        Alert
+      <button class="button button-block button-stable" data-action="showAlert" onclick="alert('TODO')">
+        Show Alert
       </button>
-      <button class="button button-block button-stable" data-action="showPrompt">
-        Prompt
+      <button class="button button-block button-stable" data-action="showPrompt" onclick="alert('TODO')">
+        Show Prompt
       </button>
     </div>
   {{/ionContent}}
diff --git a/showcase/client/templates/slideBox/slideBox.html b/showcase/client/templates/slideBox/slideBox.html
index 9275eee..cafe6f4 100644
--- a/showcase/client/templates/slideBox/slideBox.html
+++ b/showcase/client/templates/slideBox/slideBox.html
@@ -8,7 +8,7 @@
 
   {{#ionContent}}
     <div class="padding">
-      Content goes here
+      Coming Soon
     </div>
   {{/ionContent}}
 </template>
diff --git a/showcase/client/templates/userAccounts/userAccounts.html b/showcase/client/templates/userAccounts/userAccounts.html
index 1662a27..7bc0b73 100644
--- a/showcase/client/templates/userAccounts/userAccounts.html
+++ b/showcase/client/templates/userAccounts/userAccounts.html
@@ -6,9 +6,10 @@
     <h1 class="title">User Accounts</h1>
   {{/ionHeaderBar}}
 
-  {{#ionContent}}
-    <div class="padding">
-      Content goes here
-    </div>
+  {{#ionContent class="padding"}}
+    <p>
+      User accounts use the <a href="https://github.com/meteoric/useraccounts-ionic" class="positive" target="_blank"><i>useraccounts:ionic</i> package.</a>
+    </p>
+    <a href="http://useraccounts-ionic.meteor.com/" class="button button-positive" target="_blank">{{> ionIcon icon="ios-upload-outline"}} Launch Example</a>
   {{/ionContent}}
 </template>