From 3042e7e9d095a234d7b070a7086e8d6c64d21d95 Mon Sep 17 00:00:00 2001
From: Drew Rygh <drew.rygh@gmail.com>
Date: Wed, 30 Sep 2015 14:01:53 -0500
Subject: [PATCH] chore(demos): add local app.css to each demo

---
 demos/component-docs/app.css      |  7 +++++
 demos/component-docs/index.ts     | 49 +++++++++++++++++++++++++++++++
 demos/component-docs/main.html    | 49 +++++++++++++++++++++++++++++++
 gulpfile.js                       |  1 +
 scripts/demos/index.template.html |  2 ++
 5 files changed, 108 insertions(+)
 create mode 100644 demos/component-docs/app.css
 create mode 100644 demos/component-docs/index.ts
 create mode 100644 demos/component-docs/main.html

diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
new file mode 100644
index 0000000000..08f2652abd
--- /dev/null
+++ b/demos/component-docs/app.css
@@ -0,0 +1,7 @@
+body {
+  cursor: url('http://ionicframework.com/img/finger.png'), auto;
+}
+
+section.hidden {
+  display: none !important;
+}
diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
new file mode 100644
index 0000000000..ec8ee55d69
--- /dev/null
+++ b/demos/component-docs/index.ts
@@ -0,0 +1,49 @@
+import {App, ActionSheet} from 'ionic/ionic';
+
+function toTitleCase(str) {
+  return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
+}
+
+@App({
+  templateUrl: 'main.html'
+})
+class DemoApp {
+
+  constructor(actionSheet: ActionSheet) {
+    this.actionSheet = actionSheet;
+    this.component = {
+      title: 'Action Sheet',
+    }
+    window.onmessage = (e) => {
+        this.component.title = toTitleCase(e.data.replace('-', ' '));
+    };
+  }
+
+  openMenu() {
+    this.actionSheet.open({
+      buttons: [
+        { text: 'Share This' },
+        { text: 'Move' }
+      ],
+      destructiveText: 'Delete',
+      titleText: 'Modify your album',
+      cancelText: 'Cancel',
+      cancel: function() {
+        console.log('Canceled');
+      },
+      destructiveButtonClicked: () => {
+        console.log('Destructive clicked');
+      },
+      buttonClicked: function(index) {
+        console.log('Button clicked', index);
+        if(index == 1) { return false; }
+        return true;
+      }
+
+    }).then(actionSheetRef => {
+      this.actionSheetRef = actionSheetRef;
+    });
+  }
+
+
+}
\ No newline at end of file
diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
new file mode 100644
index 0000000000..f364a7fa34
--- /dev/null
+++ b/demos/component-docs/main.html
@@ -0,0 +1,49 @@
+
+<ion-toolbar><ion-title>{{ component.title }}</ion-title></ion-toolbar>
+
+<ion-content class="has-header padding components-demo">
+
+
+  <section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheet' }">
+    <button class="button" (click)="openMenu()">
+      Show Actionsheet
+    </button>
+  </section>
+
+  <section id="animation" [ng-class]="{hidden: component.title !== 'Animations' }">
+   TODO
+  </section>
+
+  <section id="buttons" [ng-class]="{hidden: component.title !== 'Buttons' }">
+   TODO
+  </section>
+
+   <section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
+   TODO
+  </section>
+   
+    <section id="icons" [ng-class]="{hidden: component.title !== 'Icons' }">
+   TODO
+  </section>
+
+     <section id="lists" [ng-class]="{hidden: component.title !== 'Lists' }">
+   TODO
+  </section>
+    <section id="menus" [ng-class]="{hidden:component.title !== 'Menus' }">
+   TODO
+  </section>
+    <section id="modals" [ng-class]="{hidden: component.title !== 'Modals' }">
+   TODO
+  </section>
+    <section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">
+   TODO
+  </section>
+    <section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
+   TODO
+  </section>
+
+    <section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">
+   TODO
+  </section>
+
+</ion-content>
diff --git a/gulpfile.js b/gulpfile.js
index 44f2681433..b1f5aff1d6 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -58,6 +58,7 @@ gulp.task('build', function(done) {
     'bundle',
     'e2e',
     'demos',
+    'copy.docs-demo',
     'sass',
     'fonts',
     done
diff --git a/scripts/demos/index.template.html b/scripts/demos/index.template.html
index 6c5ec2649d..bc1240c66d 100644
--- a/scripts/demos/index.template.html
+++ b/scripts/demos/index.template.html
@@ -6,6 +6,8 @@
   <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 rel="stylesheet" type="text/css" href="app.css">
+
 </head>
 <body>