From 8ecd913d215f49cc25e88d3a471be708f2da8087 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 27 Jul 2015 17:17:56 -0500
Subject: [PATCH] inline labels

---
 ionic/components/form/label.scss              | 10 +++
 .../e2e.ts                                    |  0
 .../index.ts                                  |  0
 .../form/test/fixed-inline-labels/main.html   | 71 +++++++++++++++++++
 .../e2e.ts                                    |  0
 .../index.ts                                  |  0
 .../main.html                                 | 39 ++++------
 .../e2e.ts                                    |  0
 .../index.ts                                  |  0
 .../main.html                                 |  2 +-
 .../form/test/stacked-labels/e2e.ts           |  1 +
 .../form/test/stacked-labels/index.ts         |  7 ++
 .../main.html                                 |  2 +-
 ionic/components/item/item.scss               |  6 +-
 14 files changed, 108 insertions(+), 30 deletions(-)
 rename ionic/components/form/test/{labelled-text-input => fixed-inline-labels}/e2e.ts (100%)
 rename ionic/components/form/test/{labelled-text-input => fixed-inline-labels}/index.ts (100%)
 create mode 100644 ionic/components/form/test/fixed-inline-labels/main.html
 rename ionic/components/form/test/{placeholder-text-input => inline-labels}/e2e.ts (100%)
 rename ionic/components/form/test/{placeholder-text-input => inline-labels}/index.ts (100%)
 rename ionic/components/form/test/{labelled-text-input => inline-labels}/main.html (57%)
 rename ionic/components/form/test/{stacked-labelled-text-input => placeholder-labels}/e2e.ts (100%)
 rename ionic/components/form/test/{stacked-labelled-text-input => placeholder-labels}/index.ts (100%)
 rename ionic/components/form/test/{placeholder-text-input => placeholder-labels}/main.html (90%)
 create mode 100644 ionic/components/form/test/stacked-labels/e2e.ts
 create mode 100644 ionic/components/form/test/stacked-labels/index.ts
 rename ionic/components/form/test/{stacked-labelled-text-input => stacked-labels}/main.html (95%)

diff --git a/ionic/components/form/label.scss b/ionic/components/form/label.scss
index 2fb4b44b74..6f951f44da 100644
--- a/ionic/components/form/label.scss
+++ b/ionic/components/form/label.scss
@@ -6,6 +6,16 @@ $input-label-color:         #444 !default;
 
 
 .input-label {
+  display: block;
+  max-width: 200px;
+  //width: 30%;
+  //min-width: 100px;
+  color: $input-label-color;
+  font-size: inherit;
+  white-space: nowrap;
+}
+
+.fixed-inline-label  {
   display: block;
   max-width: 200px;
   width: 30%;
diff --git a/ionic/components/form/test/labelled-text-input/e2e.ts b/ionic/components/form/test/fixed-inline-labels/e2e.ts
similarity index 100%
rename from ionic/components/form/test/labelled-text-input/e2e.ts
rename to ionic/components/form/test/fixed-inline-labels/e2e.ts
diff --git a/ionic/components/form/test/labelled-text-input/index.ts b/ionic/components/form/test/fixed-inline-labels/index.ts
similarity index 100%
rename from ionic/components/form/test/labelled-text-input/index.ts
rename to ionic/components/form/test/fixed-inline-labels/index.ts
diff --git a/ionic/components/form/test/fixed-inline-labels/main.html b/ionic/components/form/test/fixed-inline-labels/main.html
new file mode 100644
index 0000000000..311bf20166
--- /dev/null
+++ b/ionic/components/form/test/fixed-inline-labels/main.html
@@ -0,0 +1,71 @@
+
+<ion-toolbar><ion-title>Fixed Inline Label Text Input</ion-title></ion-toolbar>
+
+
+<ion-content>
+
+  <ion-list>
+
+    <ion-input>
+      <label class="fixed-inline-label">To</label>
+      <input value="Text 1" type="text">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">CC</label>
+      <input value="Text 2" type="text">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">From</label>
+      <input value="3" type="number">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Comments</label>
+      <textarea>Textarea 4</textarea>
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Message</label>
+      <input value="http://url5.com/" type="url">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Email</label>
+      <input value="email6@email.com" type="email">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Feedback</label>
+      <textarea>Textarea 7</textarea>
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">More Info</label>
+      <input value="Text 8" type="text">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Rank</label>
+      <input value="9" type="number">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Message</label>
+      <textarea>Textarea 10</textarea>
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">First Name</label>
+      <input value="Text 11" type="text">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Last Name</label>
+      <input value="12" type="number">
+    </ion-input>
+
+  </ion-list>
+
+</ion-content>
diff --git a/ionic/components/form/test/placeholder-text-input/e2e.ts b/ionic/components/form/test/inline-labels/e2e.ts
similarity index 100%
rename from ionic/components/form/test/placeholder-text-input/e2e.ts
rename to ionic/components/form/test/inline-labels/e2e.ts
diff --git a/ionic/components/form/test/placeholder-text-input/index.ts b/ionic/components/form/test/inline-labels/index.ts
similarity index 100%
rename from ionic/components/form/test/placeholder-text-input/index.ts
rename to ionic/components/form/test/inline-labels/index.ts
diff --git a/ionic/components/form/test/labelled-text-input/main.html b/ionic/components/form/test/inline-labels/main.html
similarity index 57%
rename from ionic/components/form/test/labelled-text-input/main.html
rename to ionic/components/form/test/inline-labels/main.html
index ea34b30982..e23820259d 100644
--- a/ionic/components/form/test/labelled-text-input/main.html
+++ b/ionic/components/form/test/inline-labels/main.html
@@ -1,5 +1,5 @@
 
-<ion-toolbar><ion-title>Labelled Text Input</ion-title></ion-toolbar>
+<ion-toolbar><ion-title>Inline Label Text Input</ion-title></ion-toolbar>
 
 
 <ion-content>
@@ -7,78 +7,65 @@
   <ion-list>
 
     <ion-input>
-      <label>Label 1</label>
+      <label>To:</label>
       <input value="Text 1" type="text">
     </ion-input>
 
     <ion-input>
-      <label>Label 2</label>
+      <label>CC:</label>
       <input value="Text 2" type="text">
     </ion-input>
 
     <ion-input>
-      <label>Label 3</label>
+      <label>From:</label>
       <input value="3" type="number">
     </ion-input>
 
     <ion-input>
-      <label>Label 4</label>
+      <label>Comments:</label>
       <textarea>Textarea 4</textarea>
     </ion-input>
 
     <ion-input>
-      <label>Label 5</label>
+      <label>Message:</label>
       <input value="http://url5.com/" type="url">
     </ion-input>
 
     <ion-input>
-      <label>Label 6</label>
+      <label>Email:</label>
       <input value="email6@email.com" type="email">
     </ion-input>
 
     <ion-input>
-      <label>Label 7</label>
+      <label>Feedback:</label>
       <textarea>Textarea 7</textarea>
     </ion-input>
 
     <ion-input>
-      <label>Label 8</label>
+      <label>More Info:</label>
       <input value="Text 8" type="text">
     </ion-input>
 
     <ion-input>
-      <label>Label 9</label>
+      <label>Rank:</label>
       <input value="9" type="number">
     </ion-input>
 
     <ion-input>
-      <label>Label 10</label>
+      <label>Message:</label>
       <textarea>Textarea 10</textarea>
     </ion-input>
 
     <ion-input>
-      <label>Label 11</label>
+      <label>First Name:</label>
       <input value="Text 11" type="text">
     </ion-input>
 
     <ion-input>
-      <label>Label 12</label>
+      <label>Last Name:</label>
       <input value="12" type="number">
     </ion-input>
 
-    <ion-input>
-      <label>Label 13</label>
-      <textarea>Textarea 13</textarea>
-    </ion-input>
-
-    <ion-input>
-      <label>Label 14</label>
-      <textarea>Textarea 14</textarea>
-    </ion-input>
-
   </ion-list>
 
 </ion-content>
-
-
-<ion-toolbar position="bottom"><ion-title>Footer</ion-title></ion-toolbar>
diff --git a/ionic/components/form/test/stacked-labelled-text-input/e2e.ts b/ionic/components/form/test/placeholder-labels/e2e.ts
similarity index 100%
rename from ionic/components/form/test/stacked-labelled-text-input/e2e.ts
rename to ionic/components/form/test/placeholder-labels/e2e.ts
diff --git a/ionic/components/form/test/stacked-labelled-text-input/index.ts b/ionic/components/form/test/placeholder-labels/index.ts
similarity index 100%
rename from ionic/components/form/test/stacked-labelled-text-input/index.ts
rename to ionic/components/form/test/placeholder-labels/index.ts
diff --git a/ionic/components/form/test/placeholder-text-input/main.html b/ionic/components/form/test/placeholder-labels/main.html
similarity index 90%
rename from ionic/components/form/test/placeholder-text-input/main.html
rename to ionic/components/form/test/placeholder-labels/main.html
index ec99eab2b9..b748ea7ad4 100644
--- a/ionic/components/form/test/placeholder-text-input/main.html
+++ b/ionic/components/form/test/placeholder-labels/main.html
@@ -1,5 +1,5 @@
 
-<ion-toolbar><ion-title>Placeholder Text Input</ion-title></ion-toolbar>
+<ion-toolbar><ion-title>Placeholder Label Text Input</ion-title></ion-toolbar>
 
 
 <ion-content>
diff --git a/ionic/components/form/test/stacked-labels/e2e.ts b/ionic/components/form/test/stacked-labels/e2e.ts
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/ionic/components/form/test/stacked-labels/e2e.ts
@@ -0,0 +1 @@
+
diff --git a/ionic/components/form/test/stacked-labels/index.ts b/ionic/components/form/test/stacked-labels/index.ts
new file mode 100644
index 0000000000..2dac2b7a35
--- /dev/null
+++ b/ionic/components/form/test/stacked-labels/index.ts
@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
diff --git a/ionic/components/form/test/stacked-labelled-text-input/main.html b/ionic/components/form/test/stacked-labels/main.html
similarity index 95%
rename from ionic/components/form/test/stacked-labelled-text-input/main.html
rename to ionic/components/form/test/stacked-labels/main.html
index 9ad38957a8..d9a2a3adff 100644
--- a/ionic/components/form/test/stacked-labelled-text-input/main.html
+++ b/ionic/components/form/test/stacked-labels/main.html
@@ -1,5 +1,5 @@
 
-<ion-toolbar><ion-title>Stack Labelled Text Input</ion-title></ion-toolbar>
+<ion-toolbar><ion-title>Stacked Label Text Input</ion-title></ion-toolbar>
 
 
 <ion-content>
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index a95e5cb77b..3683f65d9b 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -72,7 +72,8 @@ button.item.item {
   .item-media + .item-content,
   .item-content + .item-media,
   .item-content + .item-content,
-  icon + .input {
+  icon + .input,
+  .input-label + .input {
     margin-left: 0;
   }
 
@@ -145,7 +146,8 @@ button.item.item {
 
 }
 
-.vertical-align-top {
+.vertical-align-top,
+.item.item-input {
   align-items: flex-start;
 }