From ff0f8ee8f7913bdbfcb828c7ad8dae978f0159b2 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 17 Jul 2015 09:16:00 -0500 Subject: [PATCH] input updates --- ionic/components/checkbox/checkbox.ts | 8 +-- ionic/components/content/content.ts | 7 ++- ionic/components/form/form.scss | 62 --------------------- ionic/components/form/form.ts | 36 ++++++++---- ionic/components/form/label.scss | 65 +++++++++++++++++++++- ionic/components/form/label.ts | 20 ++++++- ionic/components/form/tap-input.ts | 7 ++- ionic/components/form/test/input/main.html | 36 ++++++++---- ionic/components/form/text-input.ts | 12 ++-- 9 files changed, 148 insertions(+), 105 deletions(-) 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);