input updates

ionic/components/checkbox/checkbox.ts

@@ -8,7 +8,7 @@ import {
 } from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {IonInputContainer} from '../form/form';
+import {IonInputItem} from '../form/form';
 import {IonicConfig} from '../../config/config';
 import {IonicComponent, IonicView} from '../../config/annotations';
 import {Icon} from '../icon/icon';
@@ -35,15 +35,15 @@ import {Icon} from '../icon/icon';
     '<content></content>' +
   '</div>'
 })
-export class Checkbox extends IonInputContainer {
+export class Checkbox extends IonInputItem {
 
   _checkbox: CheckboxInput;
 
   constructor(
     elementRef: ElementRef,
-    ionicConfig: IonicConfig
+    config: IonicConfig
   ) {
-    super(elementRef, ionicConfig);
+    super(elementRef, config);
   }
 
   onAllChangesDone() {

ionic/components/content/content.ts

@@ -19,9 +19,10 @@ import {ScrollTo} from '../../animations/scroll-to';
   template: '<div class="scroll-content"><content></content></div>'
 })
 export class Content extends Ion {
-  constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
+  constructor(elementRef: ElementRef, config: IonicConfig) {
-    super(elementRef, ionicConfig);
+    super(elementRef, config);
-    this.scrollPadding = false;
+
+    this.scrollPadding = config.setting('keyboardScrollAssist');
   }
 
   onIonInit() {

ionic/components/form/form.scss

@@ -103,68 +103,6 @@ textarea {
   margin-left: ($item-padding / 3) * 2;
 }
 
-.input-label {
-  display: table;
-  padding: 7px 10px 7px 0px;
-  max-width: 200px;
-  width: 35%;
-  color: $input-label-color;
-  font-size: 16px;
-}
-
-.placeholder-icon {
-  color: #aaa;
-  &:first-child {
-    padding-right: 6px;
-  }
-  &:last-child {
-    padding-left: 6px;
-  }
-}
-
-.item-stacked-label {
-  display: block;
-  background-color: transparent;
-  box-shadow: none;
-
-  .input-label, .icon {
-    display: inline-block;
-    padding: 4px 0 0 0px;
-    vertical-align: middle;
-  }
-}
-
-.item-stacked-label input,
-.item-stacked-label textarea {
-  border-radius: 2px;
-  padding: 4px 8px 3px 0;
-  border: none;
-  background-color: $input-bg;
-}
-.item-stacked-label input {
-  overflow: hidden;
-  height: $line-height-computed + $font-size-base + 0.5rem;
-}
-
-.item-floating-label {
-  display: block;
-  background-color: transparent;
-  box-shadow: none;
-
-  .input-label {
-    position: relative;
-    padding: 5px 0 0 0;
-    opacity: 0;
-    top: 10px;
-    transition: opacity .15s ease-in, top .2s linear;
-
-    &.has-input {
-      opacity: 1;
-      top: 0;
-      transition: opacity .15s ease-in, top .2s linear;
-    }
-  }
-}
 
 
 // Form Controls

ionic/components/form/form.ts

@@ -1,23 +1,31 @@
+import {Directive, ElementRef} from 'angular2/angular2';
+
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
 import * as dom  from '../../util/dom';
 
+
 let inputRegistry = [];
+let itemRegistry = [];
+let inputItemIds = -1;
 let activeInput = null;
 let lastInput = null;
-let containerIds = -1;
 
 
+// Input element (not the container)
 export class IonInput {
   constructor(
     elementRef: ElementRef,
     app: IonicApp,
+    config: IonicConfig,
     scrollView: Content
   ) {
     this.elementRef = elementRef;
     this.app = app;
     this.scrollView = scrollView;
 
+    this.scrollAssist = config.setting('keyboardScrollAssist');
+
     inputRegistry.push(this);
   }
 
@@ -88,32 +96,36 @@ export class IonInput {
 }
 
 
-export class IonInputContainer extends Ion {
+// Container element for the label and input element
+export class IonInputItem extends Ion {
 
   constructor(
     elementRef: ElementRef,
     ionicConfig: IonicConfig
   ) {
     super(elementRef, ionicConfig);
-    this.id = ++containerIds;
+    this.id = ++inputItemIds;
+    itemRegistry.push(this);
   }
 
   onInit() {
-    if (this.input) {
+    if (this.input && this.label) {
-      this.input.id = 'input-' + this.id;
+      this.input.id = (this.input.id || 'input-' + this.id);
-    }
+      this.label.id = (this.label.id || 'label-' + this.id);
-    if (this.label) {
-      this.label.id = 'label-' + this.id;
       this.input.labelledBy = this.label.id;
     }
   }
 
-  registerInput(directive) {
+  registerInput(input) {
-    this.input = directive;
+    this.input = input;
   }
 
-  registerLabel(directive) {
+  registerLabel(label) {
-    this.label = directive;
+    this.label = label;
+  }
+
+  focus() {
+    this.input && this.input.focus();
   }
 
 }

ionic/components/form/label.scss

@@ -1,6 +1,11 @@
-$input-label-color: #000;
 
-ion-label {
+// Label
+// -------------------------------
+
+$input-label-color:         #000 !default;
+
+
+.input-label {
   display: table;
   padding: 9px 10px 7px 0px;
   max-width: 200px;
@@ -9,4 +14,60 @@ ion-label {
   color: $input-label-color;
   font-size: 1.6rem;
   white-space: nowrap;
+
+  pointer-events: none;
+}
+
+.placeholder-icon {
+  color: #aaa;
+  &:first-child {
+    padding-right: 6px;
+  }
+  &:last-child {
+    padding-left: 6px;
+  }
+}
+
+.item-stacked-label {
+  display: block;
+  background-color: transparent;
+  box-shadow: none;
+
+  .input-label, .icon {
+    display: inline-block;
+    padding: 4px 0 0 0px;
+    vertical-align: middle;
+  }
+}
+
+.item-stacked-label input,
+.item-stacked-label textarea {
+  border-radius: 2px;
+  padding: 4px 8px 3px 0;
+  border: none;
+  background-color: $input-bg;
+}
+.item-stacked-label input {
+  overflow: hidden;
+  height: $line-height-computed + $font-size-base + 0.5rem;
+}
+
+.item-floating-label {
+  display: block;
+  background-color: transparent;
+  box-shadow: none;
+
+  .input-label {
+    position: relative;
+    padding: 5px 0 0 0;
+    opacity: 0;
+    top: 10px;
+    transition: opacity .15s ease-in, top .2s linear;
+
+    &.has-input {
+      opacity: 1;
+      top: 0;
+      transition: opacity .15s ease-in, top .2s linear;
+    }
+  }
 }

ionic/components/form/label.ts

@@ -1,7 +1,21 @@
-import {Directive} from 'angular2/angular2';
+import {Directive, Parent, Optional} from 'angular2/angular2';
+
+import {Input} from './text-input';
+import {IonicConfig} from '../../config/config';
 
 
 @Directive({
-  selector: 'ion-label'
+  selector: 'label',
+  host: {
+    '[attr.id]': 'id',
+    '[class.input-label]': 'inputLabel'
+  }
 })
-export class Label {}
+export class Label {
+  constructor(@Optional() @Parent() container: Input, config: IonicConfig) {
+    if (container) {
+      container.registerLabel(this);
+      this.inputLabel = true;
+    }
+  }
+}

ionic/components/form/tap-input.ts

@@ -2,9 +2,11 @@ import {Parent, Ancestor, Optional, ElementRef, Attribute, Directive} from 'angu
 
 import {IonInput} from './form';
 import {IonicApp} from '../app/app';
+import {IonicConfig} from '../../config/config';
 import {Content} from '../content/content';
 import {Checkbox} from '../checkbox/checkbox';
 
+
 @Directive({
   selector: 'input[type=checkbox],input[type=radio]'
 })
@@ -14,9 +16,10 @@ export class TapInput extends IonInput {
     @Optional() @Ancestor() scrollView: Content,
     @Attribute('type') type: string,
     elementRef: ElementRef,
-    app: IonicApp
+    app: IonicApp,
+    config: IonicConfig
   ) {
-    super(elementRef, app, scrollView);
+    super(elementRef, app, IonicConfig, scrollView);
 
     if (container) {
       container.registerInput(this);

ionic/components/form/test/input/main.html

@@ -5,59 +5,73 @@
 <ion-content class="padding">
 
   <ion-input>
-    <input value="1" type="text">
+    <label>Label 1</label>
+    <input value="Text 1" type="text">
   </ion-input>
 
   <ion-input>
-    <input value="2" type="text">
+    <label>Label 2</label>
+    <input value="Text 2" type="text">
   </ion-input>
 
   <ion-input>
+    <label>Label 3</label>
     <input value="3" type="number">
   </ion-input>
 
   <ion-input>
-    <textarea>4</textarea>
+    <label>Label 4</label>
+    <textarea>Textarea 4</textarea>
   </ion-input>
 
   <ion-input>
-    <input value="5" type="text">
+    <label>Label 5</label>
+    <input value="http://url5.com/" type="url">
   </ion-input>
 
   <ion-input>
-    <input value="6" type="text">
+    <label>Label 6</label>
+    <input value="email6@email.com" type="email">
   </ion-input>
 
   <ion-input>
-    <textarea>7</textarea>
+    <label>Label 7</label>
+    <textarea>Textarea 7</textarea>
   </ion-input>
 
   <ion-input>
-    <input value="8" type="text">
+    <label>Label 8</label>
+    <input value="Text 8" type="text">
   </ion-input>
 
   <ion-input>
+    <label>Label 9</label>
     <input value="9" type="number">
   </ion-input>
 
   <ion-input>
-    <textarea>10</textarea>
+    <label>Label 10</label>
+    <textarea>Textarea 10</textarea>
   </ion-input>
 
   <ion-input>
-    <input value="11" type="text">
+    <label>Label 11</label>
+    <input value="Text 11" type="text">
   </ion-input>
 
   <ion-input>
+    <label>Label 12</label>
     <input value="12" type="number">
   </ion-input>
 
   <ion-input>
-    <textarea>13</textarea>
+    <label>Label 13</label>
+    <textarea>Textarea 13</textarea>
   </ion-input>
 
   <ion-input>
-    <textarea>14</textarea>
+    <label>Label 14</label>
+    <textarea>Textarea 14</textarea>
   </ion-input>
 
 </ion-content>

ionic/components/form/text-input.ts

@@ -2,7 +2,7 @@ import {Directive, View, Parent, Ancestor, Optional, ElementRef, Attribute, forw
 
 import {IonicDirective} from '../../config/annotations';
 import {IonicConfig} from '../../config/config';
-import {IonInput, IonInputContainer} from './form';
+import {IonInput, IonInputItem} from './form';
 import {IonicApp} from '../app/app';
 import {Content} from '../content/content';
 import {ClickBlock} from '../../util/click-block';
@@ -13,7 +13,7 @@ import {Platform} from '../../platform/platform';
 @IonicDirective({
   selector: 'ion-input'
 })
-export class Input extends IonInputContainer {
+export class Input extends IonInputItem {
 
   constructor(
     elementRef: ElementRef,
@@ -51,7 +51,7 @@ export class TextInput extends IonInput {
     app: IonicApp,
     config: IonicConfig
   ) {
-    super(elementRef, app, scrollView);
+    super(elementRef, app, config, scrollView);
 
     if (container) {
       container.registerInput(this);
@@ -61,8 +61,6 @@ export class TextInput extends IonInput {
     this.type = type;
     this.elementRef = elementRef;
     this.tabIndex = this.tabIndex || '';
-
-    this.scrollAssist = config.setting('keyboardScrollAssist');
   }
 
   pointerStart(ev) {
@@ -81,6 +79,8 @@ export class TextInput extends IonInput {
 
       // focus this input if the pointer hasn't moved XX pixels
       // and the input doesn't already have focus
+      console.log('!this.hasFocus()', !this.hasFocus());
+
       if (this.startCoord && !dom.hasPointerMoved(20, this.startCoord, endCoord) && !this.hasFocus()) {
         ev.preventDefault();
         ev.stopPropagation();
@@ -98,7 +98,7 @@ export class TextInput extends IonInput {
     if (scrollView && this.scrollAssist) {
       // this input is inside of a scroll view
       // scroll the input to the top
-      let inputY = this.elementRef.nativeElement.offsetTop - 8;
+      let inputY = this.elementRef.nativeElement.offsetTop - 15;
 
       // do not allow any clicks while it's scrolling
       ClickBlock(true, SCROLL_INTO_VIEW_DURATION + 200);