From a8bc0d201103e18355cb0dd64aaeb0fa9a6bcb97 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 27 Jan 2016 15:36:41 -0500
Subject: [PATCH] docs(demos): prettify the config demo

---
 demos/config/index.ts  |   7 +--
 demos/config/main.html | 103 ++++++++++++++++++++---------------------
 demos/config/tabs.html |   8 ++--
 3 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/demos/config/index.ts b/demos/config/index.ts
index e116fcb439..3456bcbcd3 100644
--- a/demos/config/index.ts
+++ b/demos/config/index.ts
@@ -28,7 +28,7 @@ export class InitialPage {
   constructor(platform: Platform) {
     this.platform = platform;
     if (window.localStorage.getItem('configDemo') !== null) {
-      this.config = JSON.parse(window.localStorage.getItem('configDemo')); 
+      this.config = JSON.parse(window.localStorage.getItem('configDemo'));
     }
     else if (platform.is('ios')) {
       this.config = {
@@ -43,11 +43,12 @@ export class InitialPage {
         'tabbarPlacement': 'top'
       };
     }
+
+    this.initialConfig = JSON.parse(JSON.stringify(this.config));
   }
 
   load() {
     window.localStorage.setItem('configDemo', JSON.stringify(this.config));
     window.location.reload();
-  } 
+  }
 }
-
diff --git a/demos/config/main.html b/demos/config/main.html
index 161ea96864..b9a71788ae 100644
--- a/demos/config/main.html
+++ b/demos/config/main.html
@@ -2,63 +2,60 @@
   <ion-title>Config</ion-title>
 </ion-navbar>
 
-<ion-content padding>
+<ion-content class="config-demo">
+  <ion-list>
+    <ion-item>
+      <ion-label>Back Button Icon</ion-label>
+      <ion-select [(ngModel)]="config.backButtonIcon">
+        <ion-option value="ion-ios-arrow-back">ion-ios-arrow-back</ion-option>
+        <ion-option value="ion-md-arrow-back">ion-md-arrow-back</ion-option>
+      </ion-select>
+    </ion-item>
 
-  <ion-row>
-  @App({
-  </ion-row>
+    <ion-item>
+      <ion-label>Icon Mode</ion-label>
+      <ion-select [(ngModel)]="config.iconMode">
+        <ion-option value="ios">ios</ion-option>
+        <ion-option value="md">md</ion-option>
+      </ion-select>
+    </ion-item>
 
-  <ion-row>
+    <ion-item>
+      <ion-label>Tab Placement</ion-label>
+      <ion-select [(ngModel)]="config.tabbarPlacement">
+        <ion-option value="bottom">bottom</ion-option>
+        <ion-option value="top">top</ion-option>
+      </ion-select>
+    </ion-item>
 
-    <ion-col>
-      config: {
+  </ion-list>
+  <p class="note">Note: the config will not be updated until you click the button below.</p>
 
-        <ion-row>
-          <ion-col>
-          backButtonIcon: 
-            <select [(ngModel)]="config.backButtonIcon">
-              <option value="ion-ios-arrow-back">ion-ios-arrow-back</option>
-              <option value="ion-md-arrow-back">ion-md-arrow-back</option>
-            </select>
-          </ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col>
-          iconMode: 
-            <select [(ngModel)]="config.iconMode">
-              <option value="ios">ios</option>
-              <option value="md">md</option>
-            </select>
-          </ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col>
-          tabbarPlacement: 
-            <select [(ngModel)]="config.tabbarPlacement">
-              <option value="bottom">bottom</option>
-              <option value="top">top</option>
-            </select>
-          </ion-col>
-        </ion-row>
-
-
-
-      }
-    </ion-col>
-
-  </ion-row>
-
-  <ion-row>
-  })
-  </ion-row>
-
-  <ion-row>
-    <button full (click)="load()">
-      <ion-icon name="refresh"></ion-icon>
-      Reload Config
+  <div padding>
+    <button block (click)="load()">
+      Update Config
     </button>
-  </ion-row>
+  </div>
+
+  <!-- this has to be formatted weird for pre -->
+  <pre margin>@App({
+  config: {
+    backButtonIcon: {{initialConfig.backButtonIcon}}
+    iconMode: {{initialConfig.iconMode}}
+    tabbarPlacement: {{initialConfig.tabbarPlacement}}
+  }
+})</pre>
 
 </ion-content>
+
+<style>
+  .config-demo pre {
+    background-color: #f8f8f8;
+  }
+
+  .config-demo .note {
+    color: #444;
+    font-style: italic;
+    margin: 0 16px;
+  }
+</style>
diff --git a/demos/config/tabs.html b/demos/config/tabs.html
index 99fb1cc28d..fcb1e2a846 100644
--- a/demos/config/tabs.html
+++ b/demos/config/tabs.html
@@ -1,5 +1,5 @@
 <ion-tabs>
-  <ion-tab tabTitle="Music" [root]="tabOne"></ion-tab>
-  <ion-tab tabTitle="Movies" [root]="tabOne"></ion-tab>
-  <ion-tab tabTitle="Games" [root]="tabOne"></ion-tab>
-</ion-tabs>
\ No newline at end of file
+  <ion-tab tabTitle="Music" tabIcon="musical-notes" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Movies" tabIcon="videocam" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Games" tabIcon="game-controller-b" [root]="tabOne"></ion-tab>
+</ion-tabs>