Commit 740a775c authored by Esmael El-Moslimany's avatar Esmael El-Moslimany Committed by Commit Bot

Settings: show cr-input underline while pin-keyboard has focus

Bug: 877571
Change-Id: I981008a53c0a88aa98027f5fa56697ba410917ab
Reviewed-on: https://chromium-review.googlesource.com/1204511Reviewed-by: default avatarScott Chen <scottchen@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589227}
parent 0310e5c9
...@@ -181,8 +181,22 @@ suite('cr-input', function() { ...@@ -181,8 +181,22 @@ suite('cr-input', function() {
}) })
.then(() => { .then(() => {
input.blur(); input.blur();
whenTransitionEnd =
test_util.eventToPromise('transitionend', underline);
// Wait for underline to fade out.
return whenTransitionEnd;
})
.then(() => {
whenTransitionEnd =
test_util.eventToPromise('transitionend', underline);
assertFalse(crInput.hasAttribute('focused_')); assertFalse(crInput.hasAttribute('focused_'));
assertEquals('0', getComputedStyle(underline).opacity); assertEquals('0', getComputedStyle(underline).opacity);
// The width transition has a delay larger than the opacity transition
// duration so that the width can be reset to 0 after the underline is
// no longer visible.
return whenTransitionEnd;
})
.then(() => {
assertEquals(0, underline.offsetWidth); assertEquals(0, underline.offsetWidth);
}); });
}); });
......
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
is-input-rtl$="[[isInputRtl_(value)]]" is-input-rtl$="[[isInputRtl_(value)]]"
has-content$="[[hasInput_(value)]]" invalid="[[hasError]]" has-content$="[[hasInput_(value)]]" invalid="[[hasError]]"
placeholder="[[getInputPlaceholder_(enablePassword)]]" placeholder="[[getInputPlaceholder_(enablePassword)]]"
on-keydown="onInputKeyDown_"> on-keydown="onInputKeyDown_" force-underline$="[[forceUnderline_]]">
</cr-input> </cr-input>
</div> </div>
<slot select="[problem]"></slot> <slot select="[problem]"></slot>
......
...@@ -103,6 +103,19 @@ Polymer({ ...@@ -103,6 +103,19 @@ Polymer({
value: '', value: '',
observer: 'onPinValueChange_', observer: 'onPinValueChange_',
}, },
/**
* @private
*/
forceUnderline_: {
type: Boolean,
value: false,
}
},
listeners: {
'blur': 'onBlur_',
'focus': 'onFocus_',
}, },
/** /**
...@@ -174,6 +187,16 @@ Polymer({ ...@@ -174,6 +187,16 @@ Polymer({
this.focus(this.selectionStart_, this.selectionEnd_); this.focus(this.selectionStart_, this.selectionEnd_);
}, },
/** @private */
onFocus_: function() {
this.forceUnderline_ = true;
},
/** @private */
onBlur_: function() {
this.forceUnderline_ = false;
},
/** /**
* Called when a keypad number has been tapped. * Called when a keypad number has been tapped.
* @param {Event} event The event object. * @param {Event} event The event object.
......
...@@ -78,11 +78,12 @@ ...@@ -78,11 +78,12 @@
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 0; right: 0;
transition: opacity 120ms ease-out, width 0 linear 180ms; transition: opacity 120ms ease-out, width 0s linear 180ms;
width: 0; width: 0;
} }
:host([invalid]) #underline, :host([invalid]) #underline,
:host([force-underline]) #underline,
:host([focused_]:not([readonly])) #underline { :host([focused_]:not([readonly])) #underline {
opacity: 1; opacity: 1;
transition: width 180ms ease-out, opacity 120ms ease-in; transition: width 180ms ease-out, opacity 120ms ease-in;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment