From ad7885f6a482dd2bc64fbe2ce74b472e68174b91 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 26 Jan 2016 16:24:31 -0600 Subject: [PATCH] fix(input): fix floating/stacked label relocate --- ionic/components/input/input-base.ts | 5 +++-- ionic/components/input/input.ios.scss | 6 ++++++ ionic/components/input/input.md.scss | 8 ++++++++ ionic/components/input/input.scss | 10 ++++++---- ionic/components/input/native-input.ts | 22 +++++++++++++--------- 5 files changed, 36 insertions(+), 15 deletions(-) diff --git a/ionic/components/input/input-base.ts b/ionic/components/input/input-base.ts index 22573d6a2e..e68c674fc6 100644 --- a/ionic/components/input/input-base.ts +++ b/ionic/components/input/input-base.ts @@ -40,7 +40,7 @@ export class InputBase { protected _nav: NavController, ngControl: NgControl ) { - this._useAssist = true;// config.get('scrollAssist'); + this._useAssist = config.get('scrollAssist'); this._keyboardHeight = config.get('keyboardHeight'); if (ngControl) { @@ -67,6 +67,7 @@ export class InputBase { self._scrollMove = function(ev: UIEvent) { // scroll move event listener this instance can reuse + console.log('scrollmove', ev) if (!(self._nav && self._nav.isTransitioning())) { self.deregScrollMove(); @@ -130,7 +131,7 @@ export class InputBase { if (val) { val = val.toLowerCase(); - if (/password|email|number|search|tel|url|date|datetime|datetime-local|month/.test(val)) { + if (/password|email|number|search|tel|url|date|datetime|datetime-local|month|time|week/.test(val)) { this._type = val; } } diff --git a/ionic/components/input/input.ios.scss b/ionic/components/input/input.ios.scss index 6062b319ef..9b20ab1b1a 100644 --- a/ionic/components/input/input.ios.scss +++ b/ionic/components/input/input.ios.scss @@ -40,6 +40,12 @@ $text-input-ios-input-clear-icon-size: 18px !default; margin-bottom: 8px; } +.item-label-floating .text-input.cloned-input, +.item-label-stacked .text-input.cloned-input { + top: 30px; +} + + // iOS Clear Input Icon // -------------------------------------------------- diff --git a/ionic/components/input/input.md.scss b/ionic/components/input/input.md.scss index 68e83a3fa9..e33edaa26a 100644 --- a/ionic/components/input/input.md.scss +++ b/ionic/components/input/input.md.scss @@ -71,6 +71,14 @@ ion-input.ng-invalid.ng-touched:after { margin-bottom: 8px; } +.item-label-floating .text-input.cloned-input { + top: 32px; +} + +.item-label-stacked .text-input.cloned-input { + top: 27px; +} + // Material Design Clear Input Icon // -------------------------------------------------- diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss index 4e83f603c6..9830b52453 100644 --- a/ionic/components/input/input.scss +++ b/ionic/components/input/input.scss @@ -7,11 +7,10 @@ ion-input, ion-textarea { display: block; flex: 1; + width: 100%; } - - // Textarea Within An Item // -------------------------------------------------- @@ -108,9 +107,12 @@ input.text-input:-webkit-autofill { // Cloned Input // -------------------------------------------------- -.text-input.cloned-input, -.text-input.cloned-hidden { +.text-input.cloned-input { position: absolute; top: 0; pointer-events: none; } + +.item-input:not(.item-label-floating) .text-input.cloned-active { + display: none; +} diff --git a/ionic/components/input/native-input.ts b/ionic/components/input/native-input.ts index b533576e11..ebfd835ed0 100644 --- a/ionic/components/input/native-input.ts +++ b/ionic/components/input/native-input.ts @@ -62,11 +62,13 @@ export class NativeInput { * @private */ relocate(shouldRelocate: boolean, inputRelativeY: number) { + console.debug('native input relocate', shouldRelocate, inputRelativeY); + if (this._relocated !== shouldRelocate) { let focusedInputEle = this.element(); if (shouldRelocate) { - let clonedInputEle = cloneInput(focusedInputEle, 'cloned-input'); + let clonedInputEle = cloneInput(focusedInputEle, 'cloned-focus'); focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle); focusedInputEle.style[CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`; @@ -75,15 +77,15 @@ export class NativeInput { this.setFocus(); raf(() => { - focusedInputEle.style.display = 'none'; + focusedInputEle.classList.add('cloned-active'); }); } else { + focusedInputEle.classList.remove('cloned-active'); focusedInputEle.style[CSS.transform] = ''; - focusedInputEle.style.display = ''; focusedInputEle.style.opacity = ''; - removeClone(focusedInputEle, 'cloned-input'); + removeClone(focusedInputEle, 'cloned-focus'); } this._relocated = shouldRelocate; @@ -94,18 +96,19 @@ export class NativeInput { * @private */ hideFocus(shouldHideFocus: boolean) { + console.debug('native input hideFocus', shouldHideFocus); + let focusedInputEle = this.element(); if (shouldHideFocus) { - let clonedInputEle = cloneInput(focusedInputEle, 'cloned-hidden'); + let clonedInputEle = cloneInput(focusedInputEle, 'cloned-move'); - focusedInputEle.style.display = 'none'; + focusedInputEle.classList.add('cloned-active'); focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle); } else { - focusedInputEle.style.display = ''; - - removeClone(focusedInputEle, 'cloned-hidden'); + focusedInputEle.classList.remove('cloned-active'); + removeClone(focusedInputEle, 'cloned-move'); } } @@ -128,6 +131,7 @@ export class NativeInput { function cloneInput(focusedInputEle, addCssClass) { let clonedInputEle = focusedInputEle.cloneNode(true); + clonedInputEle.classList.add('cloned-input'); clonedInputEle.classList.add(addCssClass); clonedInputEle.setAttribute('aria-hidden', true); clonedInputEle.removeAttribute('aria-labelledby');