From ec480b1fd9e270d128539f47f5481fc60617e4e1 Mon Sep 17 00:00:00 2001
From: Drew Rygh <drew.rygh@gmail.com>
Date: Thu, 1 Oct 2015 11:36:04 -0500
Subject: [PATCH] docs(demos): add list and item demo

---
 demos/component-docs/app.css           |  21 +++
 demos/component-docs/index.ts          |  24 ++-
 demos/component-docs/main.html         | 219 ++++++++++++++++++++++++-
 scripts/demos/docs.index.template.html |   2 +-
 4 files changed, 258 insertions(+), 8 deletions(-)

diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
index 08f2652abd..5dd53a967f 100644
--- a/demos/component-docs/app.css
+++ b/demos/component-docs/app.css
@@ -5,3 +5,24 @@ body {
 section.hidden {
   display: none !important;
 }
+
+#ionitron {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 25%;
+  margin-top: -50px;
+  left: 50%;
+  margin-left: -50px;
+}
+
+.animation-buttons {
+  position: absolute;
+  bottom: 25%; 
+  left: 60px; 
+  display: inline;
+}
+
+.components-demo h4 {
+    text-align: center;
+}
diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
index 577fd60582..863987886a 100644
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -1,4 +1,4 @@
-import {App, ActionSheet} from 'ionic/ionic';
+import {App, ActionSheet, Animation} from 'ionic/ionic';
 import {NgZone} from 'angular2/angular2';
 
 function toTitleCase(str) {
@@ -26,6 +26,7 @@ class DemoApp {
         }
       });
     };
+    this.setupAnimations();
   }
 
   openMenu() {
@@ -54,5 +55,26 @@ class DemoApp {
     });
   }
 
+  setupAnimations() {
+    this.animation = new Animation();
+    this.animation
+      .duration(2000)
+
+    var ionitronSpin = new Animation(document.querySelector('#ionitron'));
+    ionitronSpin
+      .from('transform', 'rotate(0deg)')
+      .to('transform', 'rotate(360deg)')
+
+    this.animation.add(ionitronSpin);
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
 
 }
\ No newline at end of file
diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
index 89aff44058..f08a2d9909 100644
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -9,24 +9,231 @@
     </button>
   </section>
 
+
   <section id="animation" [ng-class]="{hidden: component.title !== 'Animations' }">
-   TODO
+   <img src="http://ionicframework.com/present-ionic/slides/img/me.png" id="ionitron">
+
+   <div class="animation-buttons">
+     <button icon pause primary (click)="pause($event)">
+       Pause
+       <icon pause></icon>
+     </button>
+     <button icon play secondary (click)="play($event)">
+       Play
+       <icon play></icon>
+     </button>
+   </div>
   </section>
 
+
   <section id="buttons" [ng-class]="{hidden: component.title !== 'Buttons' }">
-   TODO
+    <h4>Colors</h4>
+
+    <p>
+      <button block>Default</button>
+    </p>
+
+    <p>
+      <button secondary block>Secondary</button>
+    </p>
+
+    <p>
+      <button danger block>Danger</button>
+    </p>
+
+    <p>
+      <button light block>Light</button>
+    </p>
+
+    <p>
+      <button dark block>Dark</button>
+    </p>
+
+    <h4>Shapes</h4>
+
+    <p>
+      <button full>Full Button</button>
+    </p>
+
+    <p>
+      <button block>Block Button</button>
+    </p>
+
+    <p>
+      <button round>Round Button</button>
+    </p>
+
+      <p>
+      <button fab style="position: relative;">FAB</button>
+    </p>
+
+    <h4>Outlines</h4>
+
+    <p>
+      <button secondary full outline>Outline + Full</button>
+    </p>
+
+    <p>
+      <button secondary block outline>Outline + Block</button>
+    </p>
+
+    <p>
+      <button secondary round outline>Outline + Round</button>
+    </p>
+
+      <p>
+      <button secondary fab outline style="position: relative;">FAB</button>
+    </p>
+
+    <h4>Icons</h4>
+
+    <p>
+      <button dark>
+        <icon star></icon>
+        Left Icon
+      </button>
+    </p>
+
+    <p>
+      <button dark>
+        Right Icon
+        <icon star></icon>
+      </button>
+    </p>
+
+    <p>
+      <button dark>
+        <icon star></icon>
+      </button>
+    </p>
+
+
+    <h4>Sizes</h4>
+
+    <p>
+      <button light large>Large</button>
+    </p>
+
+    <p>
+      <button light>Default</button>
+    </p>
+
+    <p>
+      <button light small>Small</button>
+    </p>
   </section>
 
-   <section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
-   TODO
+
+  <section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
+
+    <ion-card>
+
+      <ion-card-header primary>
+        Menu
+      </ion-card-header>
+
+      <ion-card-content>
+        <a ion-item href="#">
+          <icon home item-left></icon>
+          Home
+        </a>
+
+        <a ion-item href="#">
+          <icon people item-left></icon>
+          Friends
+        </a>
+
+        <button ion-item>
+          <icon musical-notes item-left></icon>
+          Music
+        </button>
+
+        <button ion-item>
+          <icon mail item-left></icon>
+          Mail
+        </button>
+      </ion-card-content>
+
+    </ion-card> 
+
+
+    <ion-card>
+
+      <ion-item>
+        <icon football item-left></icon>
+        Schedule
+        <button outline item-right>Open</button>
+      </ion-item>
+
+    </ion-card>
+
+    <ion-card>
+
+      <ion-item>
+        <icon trophy item-left></icon>
+        Trophies
+        <button outline item-right>View</button>
+      </ion-item>
+
+    </ion-card>
+
+
   </section>
    
     <section id="icons" [ng-class]="{hidden: component.title !== 'Icons' }">
    TODO
   </section>
 
-     <section id="lists" [ng-class]="{hidden: component.title !== 'Lists' }">
-   TODO
+  <section id="lists" [ng-class]="{hidden: component.title !== 'Lists' }">
+    <ion-list>
+
+      <ion-header>
+        Classes
+      </ion-header>
+
+      <ion-item>
+        <icon color-wand item-left></icon>
+        Dark Arts
+      </ion-item>
+
+      <ion-item>
+        <icon planet item-left></icon>
+        Astronomy
+      </ion-item>
+
+      <ion-item>
+        <icon flask item-left></icon>
+        Potions
+      </ion-item>
+
+      <ion-item>
+        <icon star item-left></icon>
+        Charms
+      </ion-item>
+
+    </ion-list>
+
+
+    <ion-list>
+
+      <ion-header>
+        Menu
+      </ion-header>
+
+      <ion-switch checked="true">
+        <icon shirt item-left></icon>
+        Invisibility Cloak
+      </ion-switch>
+
+      <ion-item>
+        <icon call item-left></icon>
+        Call Ron
+        <div class="item-note" item-right>Maybe later</div>
+      </ion-item>
+
+    </ion-list>
+
+
   </section>
     <section id="menus" [ng-class]="{hidden:component.title !== 'Menus' }">
    TODO
diff --git a/scripts/demos/docs.index.template.html b/scripts/demos/docs.index.template.html
index 5870e1b3cf..01a6fd3fb8 100644
--- a/scripts/demos/docs.index.template.html
+++ b/scripts/demos/docs.index.template.html
@@ -5,7 +5,7 @@
   <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-  <link href="/css/ionic.css" rel="stylesheet">
+  <link href="/css/v2-demos/css/ionic.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="app.css">
 
 </head>