From 7ff86db35291a59d6906a44d55ade3544b59b9f7 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 5 May 2015 16:49:23 -0500
Subject: [PATCH] Tons of form shit

---
 ionic/components.js                        |  3 ++-
 ionic/components/form/form.scss            |  7 +++--
 ionic/components/{ => form}/input/input.js |  0
 ionic/components/form/input/input.scss     | 30 ++++++++++++++++++++++
 ionic/components/form/label/label.js       | 15 +++++++++++
 ionic/components/form/label/label.scss     | 11 ++++++++
 ionic/components/form/test/basic/main.html | 29 +++++++++++++++------
 ionic/components/form/test/basic/main.js   |  6 +++--
 ionic/components/input/input.scss          |  6 -----
 ionic/components/item/extensions/ios.scss  |  6 ++---
 ionic/components/item/item.scss            |  3 +--
 ionic/components/list/extensions/ios.scss  |  7 ++++-
 ionic/components/list/list.js              |  6 +++--
 ionic/components/list/list.scss            | 11 +++++++-
 ionic/ionic.scss                           |  3 ++-
 15 files changed, 112 insertions(+), 31 deletions(-)
 rename ionic/components/{ => form}/input/input.js (100%)
 create mode 100644 ionic/components/form/input/input.scss
 create mode 100644 ionic/components/form/label/label.js
 create mode 100644 ionic/components/form/label/label.scss
 delete mode 100644 ionic/components/input/input.scss

diff --git a/ionic/components.js b/ionic/components.js
index d8dbd96b22..214d8af960 100644
--- a/ionic/components.js
+++ b/ionic/components.js
@@ -8,7 +8,8 @@ export * from 'ionic/components/content/content'
 // export * from 'ionic/components/icon/icon'
 export * from 'ionic/components/item/item'
 export * from 'ionic/components/form/form'
-export * from 'ionic/components/input/input'
+export * from 'ionic/components/form/input/input'
+export * from 'ionic/components/form/label/label'
 // export * from 'ionic/components/layout/layout'
 export * from 'ionic/components/list/list'
 export * from 'ionic/components/nav/nav'
diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss
index cc5e3c83cb..29b42aa601 100644
--- a/ionic/components/form/form.scss
+++ b/ionic/components/form/form.scss
@@ -187,12 +187,12 @@ input[type="search"],
 input[type="tel"],
 input[type="color"] {
   display: block;
-  padding-top: 2px;
+  //padding-top: 2px;
   padding-left: 0;
-  height: $line-height-computed + $font-size-base;
+  height: 3.8rem;//$line-height-computed + $font-size-base;
   color: $input-color;
   vertical-align: middle;
-  font-size: $font-size-base;
+  font-size: 1.6rem;//$font-size-base;
   line-height: $font-size-base + 2;
 }
 
@@ -306,4 +306,3 @@ input[type="radio"][readonly],
 input[type="checkbox"][readonly] {
   background-color: transparent;
 }
-
diff --git a/ionic/components/input/input.js b/ionic/components/form/input/input.js
similarity index 100%
rename from ionic/components/input/input.js
rename to ionic/components/form/input/input.js
diff --git a/ionic/components/form/input/input.scss b/ionic/components/form/input/input.scss
new file mode 100644
index 0000000000..02c1bfc958
--- /dev/null
+++ b/ionic/components/form/input/input.scss
@@ -0,0 +1,30 @@
+$item-input-padding: 6px 0 5px 0px;
+
+ion-input {
+  display: block;
+
+
+  position: relative;
+  overflow: hidden;
+
+  @include flex-display();
+  @include flex-align-items(center);
+
+  .item-label {
+    padding: $item-input-padding;
+  }
+
+  input, textarea {
+    width: 100%;
+    //font-size: 1.6rem;
+
+    border-radius: 0;
+
+    @include flex(1, 220px);
+    @include appearance(none);
+
+    margin: 0;
+    padding-right: 24px;
+    background-color: transparent;
+  }
+}
diff --git a/ionic/components/form/label/label.js b/ionic/components/form/label/label.js
new file mode 100644
index 0000000000..f3149743bf
--- /dev/null
+++ b/ionic/components/form/label/label.js
@@ -0,0 +1,15 @@
+import {NgElement, Decorator} from 'angular2/angular2'
+import {IonicComponent} from 'ionic/config/component'
+
+@Decorator({
+  selector: 'ion-label'
+})
+export class Label {
+  constructor(
+    @NgElement() ngElement:NgElement
+  ) {
+    this.domElement = ngElement.domElement
+  }
+}
+new IonicComponent(Label, {
+})
diff --git a/ionic/components/form/label/label.scss b/ionic/components/form/label/label.scss
new file mode 100644
index 0000000000..488b4b2891
--- /dev/null
+++ b/ionic/components/form/label/label.scss
@@ -0,0 +1,11 @@
+$input-label-color: #000;
+
+ion-label {
+  display: table;
+  padding: 9px 10px 7px 0px;
+  max-width: 200px;
+  width: 35%;
+  color: $input-label-color;
+  font-size: 1.6rem;
+  white-space: nowrap;
+}
diff --git a/ionic/components/form/test/basic/main.html b/ionic/components/form/test/basic/main.html
index 6abc4d519d..549e1ec090 100644
--- a/ionic/components/form/test/basic/main.html
+++ b/ionic/components/form/test/basic/main.html
@@ -1,11 +1,24 @@
 <ion-content class="padding">
-  <form (^submit)="doSubmit($event)" [control-group]="form" ion-list>
-    <ion-input ion-item>
-      <input control="email" type="email" placeholder="Your email">
-    </ion-input ion-item>
-    <ion-input>
-      <input control="password" type="password" placeholder="Your password">
-    </ion-input ion-item>
-    <button ion-button stable block type="submit">Submit</button>
+  <form (^submit)="doSubmit($event)" [control-group]="form">
+    <ion-list inset>
+      <div class="list-header">
+        Your account
+      </div>
+      <ion-input ion-item>
+        <input control="email" type="email" placeholder="Your email">
+      </ion-input>
+      <ion-input ion-item>
+        <input control="password" type="password" placeholder="Your password">
+      </ion-input>
+      <ion-input ion-item>
+        <ion-label>Description</ion-label>
+        <input control="description" type="text" placeholder="A description">
+      </ion-input>
+      <ion-input ion-item>
+        <ion-label>Note</ion-label>
+        <textarea control="note" type="text" placeholder="A description"></textarea>
+      </ion-input>
+    </ion-list>
+    <button ion-button primary block type="submit">Submit</button>
   </form>
 </ion-content>
diff --git a/ionic/components/form/test/basic/main.js b/ionic/components/form/test/basic/main.js
index b9b4b2840c..f50819c1b3 100644
--- a/ionic/components/form/test/basic/main.js
+++ b/ionic/components/form/test/basic/main.js
@@ -1,11 +1,11 @@
 import {Component, View, bootstrap} from 'angular2/angular2'
 import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
-import {Button, Form, Item, Input, Content} from 'ionic/ionic';
+import {Button, Form, List, Label, Item, Input, Content} from 'ionic/ionic';
 
 @Component({ selector: '[ion-app]' })
 @View({
   templateUrl: 'main.html',
-  directives: [FormDirectives, Item, Button, Input, Content]
+  directives: [FormDirectives, List, Label, Item, Button, Input, Content]
 })
 class IonicApp {
   constructor() {
@@ -13,6 +13,8 @@ class IonicApp {
     this.form = fb.group({
       email: ['', Validators.required],
       password: ['', Validators.required],
+      description: ['', Validators.required],
+      note : ['', Validators.required]
     });
   }
 }
diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss
deleted file mode 100644
index 7d099993a0..0000000000
--- a/ionic/components/input/input.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-ion-input {
-  display: block;
-  input {
-    width: 100%;
-  }
-}
diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss
index 02433525b1..38bdc6d1a6 100644
--- a/ionic/components/item/extensions/ios.scss
+++ b/ionic/components/item/extensions/ios.scss
@@ -11,9 +11,9 @@ $item-ios-border-color:          $list-ios-border-color !default;
 
 .platform-ios {
 
-  .list-header {
-    margin-left: $item-ios-padding-left;
-  }
+  //.list-header {
+    //margin-left: $item-ios-padding-left;
+  //}
 
   .item {
     background: $item-ios-background-color;
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 8ed3a4edaa..81ce5d5546 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -67,6 +67,7 @@ ion-primary-swipe-buttons {
 .item-label {
   position: relative;
 
+  @include flex-display();
   @include flex(1);
   @include flex-shrink(1);
 
@@ -127,5 +128,3 @@ ion-primary-swipe-buttons {
     border-radius: 50%;
   }
 }
-
-
diff --git a/ionic/components/list/extensions/ios.scss b/ionic/components/list/extensions/ios.scss
index d95c6b5552..56d675789e 100644
--- a/ionic/components/list/extensions/ios.scss
+++ b/ionic/components/list/extensions/ios.scss
@@ -5,7 +5,7 @@
 $list-ios-background-color:      #fff !default;
 $list-ios-border-color:          #c8c7cc !default;
 
-$list-ios-header-margin:         35px 15px 10px 15px !default;
+  $list-ios-header-margin:       35px 15px 10px 15px !default;
 $list-ios-header-font-size:      1.4rem !default;
 $list-ios-header-color:          #6d6d72 !default;
 
@@ -17,9 +17,14 @@ $list-ios-footer-color:          #8f8f94 !default;
 .platform-ios {
 
   .list {
+  }
+
+  // Add the hairline to the top of the first item
+  .item:first-of-type {
     @include hairline(top, $list-ios-border-color, $z-index-list-border);
   }
 
+  // Add the hairline to the bottom of the last item
   .item:last-of-type {
     @include hairline(bottom, $list-ios-border-color, $z-index-list-border);
   }
diff --git a/ionic/components/list/list.js b/ionic/components/list/list.js
index 28be7c1614..6b9531487f 100644
--- a/ionic/components/list/list.js
+++ b/ionic/components/list/list.js
@@ -3,7 +3,7 @@ import {IonicComponent} from 'ionic/config/component'
 
 
 @Component({
-  selector: 'ion-list'
+  selector: 'ion-list, [ion-list]'
 })
 @View({
   template: `<content></content>`
@@ -17,4 +17,6 @@ export class List {
   }
 }
 
-new IonicComponent(List, {})
+new IonicComponent(List, {
+  propClasses: ['inset']
+})
diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss
index f14605e78c..02548f33c7 100644
--- a/ionic/components/list/list.scss
+++ b/ionic/components/list/list.scss
@@ -20,8 +20,17 @@ $list-margin-bottom:          10px !default;
   display: block;
   margin: $list-margin-top 0;
   padding: 0;
-  width: 100%;
+
+  // TODO: Verify if we need this, it makes margin sizing (inset, etc.) not
+  // work and is not present in v1
+  //width: 100%;
+
   list-style-type: none;
+
+  &.list-inset {
+    margin-left: -$content-padding;
+    margin-right: -$content-padding;
+  }
 }
 
 .list + .list-footer {
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index e83f6471ea..be89b0fa89 100644
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -37,7 +37,8 @@
   "components/content/content",
   "components/item/item",
   "components/form/form",
-  "components/input/input",
+  "components/form/label/label",
+  "components/form/input/input",
   "components/layout/layout",
   "components/list/list",
   "components/modal/modal",