Tons of form shit

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'

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;
 }
-

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;
+  }
+}

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, {
+})

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;
+}

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>

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]
     });
   }
 }

ionic/components/input/input.scss

@@ -1,6 +0,0 @@
-ion-input {
-  display: block;
-  input {
-    width: 100%;
-  }
-}

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;

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%;
   }
 }
-
-

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);
   }

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']
+})

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 {

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",