javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): fix floating/stacked label relocate

Browse Source
This commit is contained in:
Adam Bradley
2016-01-26 16:24:31 -06:00
parent f79a121bde
commit ad7885f6a4
5 changed files with 36 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ionic/components/input/input-base.ts
View File

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

6
ionic/components/input/input.ios.scss
View File

@ -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
// --------------------------------------------------

8
ionic/components/input/input.md.scss
View File

@ -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
// --------------------------------------------------

10
ionic/components/input/input.scss
View File

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

22
ionic/components/input/native-input.ts
View File

@ -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');