diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 8cbf66a771..3939f674e7 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/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';
'' +
''
})
-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() {
diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts
index 4333b502ff..04b153752d 100644
--- a/ionic/components/content/content.ts
+++ b/ionic/components/content/content.ts
@@ -19,9 +19,10 @@ import {ScrollTo} from '../../animations/scroll-to';
template: '
'
})
export class Content extends Ion {
- constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
- super(elementRef, ionicConfig);
- this.scrollPadding = false;
+ constructor(elementRef: ElementRef, config: IonicConfig) {
+ super(elementRef, config);
+
+ this.scrollPadding = config.setting('keyboardScrollAssist');
}
onIonInit() {
diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss
index be6af01faf..d5d0aee9a3 100644
--- a/ionic/components/form/form.scss
+++ b/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
diff --git a/ionic/components/form/form.ts b/ionic/components/form/form.ts
index 80d785efe2..933f8aab79 100644
--- a/ionic/components/form/form.ts
+++ b/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) {
- this.input.id = 'input-' + this.id;
- }
- if (this.label) {
- this.label.id = 'label-' + this.id;
+ if (this.input && this.label) {
+ this.input.id = (this.input.id || 'input-' + this.id);
+ this.label.id = (this.label.id || 'label-' + this.id);
this.input.labelledBy = this.label.id;
}
}
- registerInput(directive) {
- this.input = directive;
+ registerInput(input) {
+ this.input = input;
}
- registerLabel(directive) {
- this.label = directive;
+ registerLabel(label) {
+ this.label = label;
+ }
+
+ focus() {
+ this.input && this.input.focus();
}
}
diff --git a/ionic/components/form/label.scss b/ionic/components/form/label.scss
index b68d4adb68..0d3ea9ca97 100644
--- a/ionic/components/form/label.scss
+++ b/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;
+ }
+ }
}
diff --git a/ionic/components/form/label.ts b/ionic/components/form/label.ts
index b9ddfb1493..215bb009a1 100644
--- a/ionic/components/form/label.ts
+++ b/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;
+ }
+ }
+}
diff --git a/ionic/components/form/tap-input.ts b/ionic/components/form/tap-input.ts
index c321907860..0e86413d0e 100644
--- a/ionic/components/form/tap-input.ts
+++ b/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);
diff --git a/ionic/components/form/test/input/main.html b/ionic/components/form/test/input/main.html
index e446c2b010..56e3767592 100644
--- a/ionic/components/form/test/input/main.html
+++ b/ionic/components/form/test/input/main.html
@@ -5,59 +5,73 @@
-
+
+
-
+
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
+
-
+
+
-
+
+
+
-
+
+
-
+
+
diff --git a/ionic/components/form/text-input.ts b/ionic/components/form/text-input.ts
index 08280083a0..e1605ea4f7 100644
--- a/ionic/components/form/text-input.ts
+++ b/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);