javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(labels): improve floating labels focus

Browse Source 
Closes #613
This commit is contained in:
Adam Bradley
2015-11-25 21:55:57 -06:00
parent ef488b27c4
commit 194c964dfb
3 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
ionic/components/content/content.ts
View File

@@ -200,27 +200,27 @@ export class Content extends Ion {
this.scrollPadding = newScrollPadding;
this.scrollElement.style.paddingBottom = newScrollPadding + 'px';
if (!this.keyboardPromise) {
console.debug('add scroll keyboard close callback', newScrollPadding);
this.keyboardPromise = this.keyboard.onClose(() => {
console.debug('scroll keyboard closed', newScrollPadding);
if (this) {
if (this.scrollPadding && this.scrollElement) {
let close = new Animation(this.scrollElement);
close
.duration(150)
.fromTo('paddingBottom', this.scrollPadding + 'px', '0px')
.play();
}
this.scrollPadding = 0;
this.keyboardPromise = null;
}
});
}
// if (!this.keyboardPromise) {
// console.debug('add scroll keyboard close callback', newScrollPadding);
//
// this.keyboardPromise = this.keyboard.onClose(() => {
// console.debug('scroll keyboard closed', newScrollPadding);
//
// if (this) {
// if (this.scrollPadding && this.scrollElement) {
// let close = new Animation(this.scrollElement);
// close
// .duration(250)
// .fromTo('paddingBottom', this.scrollPadding + 'px', '0px')
// .play();
// }
//
// this.scrollPadding = 0;
// this.keyboardPromise = null;
// }
// });
//
// }
}
}

21
ionic/components/text-input/text-input.ts
View File

@@ -449,11 +449,7 @@ export class TextInputElement {
let focusedInputEle = this.getNativeElement();
if (shouldRelocate) {
let clonedInputEle = focusedInputEle.cloneNode(true);
clonedInputEle.classList.add('cloned-input');
clonedInputEle.classList.remove('hide-focused-input');
clonedInputEle.setAttribute('aria-hidden', true);
clonedInputEle.tabIndex = -1;
let clonedInputEle = cloneInput(focusedInputEle, 'cloned-input');
focusedInputEle.classList.add('hide-focused-input');
focusedInputEle.style[dom.CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
@@ -478,10 +474,7 @@ export class TextInputElement {
let focusedInputEle = this.getNativeElement();
if (shouldHideFocus) {
let clonedInputEle = focusedInputEle.cloneNode(true);
clonedInputEle.classList.add('cloned-hidden');
clonedInputEle.setAttribute('aria-hidden', true);
clonedInputEle.tabIndex = -1;
let clonedInputEle = cloneInput(focusedInputEle, 'cloned-hidden');
focusedInputEle.classList.add('hide-focused-input');
focusedInputEle.style[dom.CSS.transform] = 'translate3d(-9999px,0,0)';
@@ -526,6 +519,16 @@ class InputScrollAssist {
}
function cloneInput(srcInput, addCssClass) {
let clonedInputEle = srcInput.cloneNode(true);
clonedInputEle.classList.add(addCssClass);
clonedInputEle.classList.remove('hide-focused-input');
clonedInputEle.setAttribute('aria-hidden', true);
clonedInputEle.removeAttribute('aria-labelledby');
clonedInputEle.tabIndex = -1;
return clonedInputEle;
}
const SCROLL_ASSIST_SPEED = 0.4;

5
ionic/util/util.scss
View File

@@ -126,6 +126,11 @@ focus-ctrl {
pointer-events: none;
}
[floating-label] .hide-focused-input,
[stacked-label] .hide-focused-input {
margin-top: -8px !important;
}
.cloned-input {
pointer-events: none;
}