Skip to content

GitLab

T
tangled
Commit 12bda387 authored by sammiequon's avatar sammiequon Committed by Commit bot
Browse files
Options

Lock screen pin keyboard ui upgrades. 

Changed the pin keyboard to match the specs at https://folio.googleplex.com/cros-core-ui/spec#%2F5.1%20-%20Start%20screen%20Pin%20lock%20pods.png%3Fz=width, minus the submit button on the normal pod and the errors on the pin keyboard.

BUG=627222
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2222583002
Cr-Commit-Position: refs/heads/master@{#414858}
parent 92c4a9fc
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 185 deletions
chrome/app/generated_resources.grd
View file @ 12bda387
......@@ -13210,11 +13210,14 @@ Please check your email at <ph name="ACCOUNT_EMAIL">$2<ex>jane.doe@gmail.com</ex
PIN
</message>
<message name="IDS_PIN_KEYBOARD_HINT_TEXT_PIN_PASSWORD" desc="Text to display in the pin field for user pod when no pin has been entered, and passwords are allowed.">
Enter PIN or Password
Pin or password
</message>
<message name="IDS_PIN_KEYBOARD_CLEAR" desc="Text to display text of button on pin keyboard which deletes last character.">
Clear
</message>
<message name="IDS_PIN_KEYBOARD_ERROR_MESSAGE" desc="Text to display the error message on the pin keyboard if the user has entered a wrong password or pin.">
Pin or password incorrect.
</message>
</if>
<message name="IDS_LOGIN_ERROR_AUTHENTICATING" desc="Couldn't sign in because password is invalid">
Sorry, your password could not be verified. Please try again.
......
chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
View file @ 12bda387
......@@ -6,6 +6,7 @@
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
......@@ -17,7 +18,13 @@
Inlined from Polymer's iron-icons to avoid importing everything.
See http://goo.gl/Y1OdAq for instructions on adding additional icons.
-->
<g id="forward"><path d="M12 8V4l8 8-8 8v-4H4V8z"></path></g>
<g id="arrow-forward">
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z">
</path>
</g>
<g id="backspace">
<path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z">
</g>
</defs>
</svg>
</iron-iconset-svg>
......@@ -30,10 +37,6 @@
display: flex;
}
.input-non-pin {
direction: rtl;
}
.row {
display: flex;
}
......@@ -41,68 +44,60 @@
.digit-button {
align-items: center;
background: none;
border-radius: 20px;
border-radius: 100px;
box-sizing: border-box;
color: var(--paper-blue-grey-700);
color: #000;
display: flex;
flex-direction: column;
font-size: 32px;
height: 70px;
font-size: 18px;
height: 48px;
justify-content: center;
margin: 0;
min-height: 70px;
min-width: 70px;
padding: 15px 20px;
width: 70px;
margin: 0 6px;
min-height: 48px;
min-width: 48px;
opacity: 0.87;
padding: 15px;
width: 48px;
}
.digit-button.clear-button {
display: block;
[hidden=true] {
display: none;
}
.digit-button.center-button {
margin: 0 30px;
.bottom-row {
margin-bottom: 6px;
}
.digit-button.submit-button {
left: 20px;
position: relative;
.top-row {
margin-top: 6px;
}
.digit-button.submit-button.submit-button-hidden {
display: none;
.digit-button.backspace-button {
opacity: var(--dark-primary-opacity);
}
.digit-button .icon-container {
background: var(--paper-grey-400);
border-radius: 100px;
height: 24px;
margin: auto;
width: 24px;
}
.digit-button .icon-container.ready-background {
background: var(--paper-blue-800);
.digit-button.backspace-button[disabled] {
color: #000;
opacity: 0.26;
padding: 14px;
}
.digit-button .icon-container .icon {
color: white;
display: block;
height: 16px;
left: 4px;
top: 4px;
width: 16px;
.digit-button.submit-button {
color: var(--google-blue-500);
height: 43px;
left: 137px;
margin: 0;
min-height: 43px;
min-width: 43px;
opacity: var(--light-primary-opacity);
padding: 11.5px 10px;
position: absolute;
width: 43px;
}
.digit-button .icon-subheading {
color: var(--paper-grey-400);
font-size: 10px;
left: 0;
position: absolute;
text-align: center;
text-transform: capitalize;
top: 44px;
width: 100%;
.digit-button.submit-button[disabled] {
color: #000;
opacity: 0.26;
}
.digit-button inner-text {
......@@ -112,31 +107,44 @@
height: 52px;
}
.first-row {
height: 64px;
min-height: 64px;
padding: 28px 15px 12px 15px;
}
#pin-input {
-webkit-text-security: disc;
background-color: white;
border: 0;
box-sizing: border-box;
font-size: 18px;
height: 64px;
left: 20px;
font-face: Roboto-Regular;
font-size: 13px;
height: 43px;
left: 10px;
opacity: var(--dark-secondary-opacity);
outline: 0;
padding: 28px 3px 12px 3px;
position: relative;
width: 180px;
text-color: #000;
width: 127px;
}
#pin-input[has-content] {
opacity: var(--dark-primary-opacity);
}
#pin-input.submit-button-hidden {
border-bottom: 2px;
border-bottom-style: solid;
#pin-input[is-input-rtl] {
direction: rtl;
}
:host(:not([enable-submit-button])) #pin-input {
left: 0;
text-align: center;
width: 230px;
width: 180px;
}
hr {
border: 0;
border-bottom: 1px solid #000;
left: 10px;
margin: 0;
opacity: 0.14;
position: relative;
width: 160px;
}
#pin-input[type=number]::-webkit-inner-spin-button,
......@@ -156,26 +164,25 @@
<div id="container-constrained-width">
<div class="row">
<input id="pin-input" type="[[getInputType_(enablePassword)]]"
class$="[[getInputClass_(value)]]
[[getSubmitHiddenClass_(enableSubmitButton)]]"
is-input-rtl$="[[isInputRtl_(value)]]"
has-content$="[[hasInput_(value)]]"
placeholder="[[getInputPlaceholder_(enablePassword)]]"
value="{{value::input}}"
on-keydown="onInputKeyDown_"></input>
<paper-button class$="digit-button first-row submit-button
[[getSubmitHiddenClass_(enableSubmitButton)]]"
on-tap="firePinSubmitEvent_">
<div class$="icon-container [[getSubmitClass_(value)]]">
<iron-icon class="icon" icon="pin-keyboard:forward"><iron-icon>
</div>
</paper-button>
on-keydown="onInputKeyDown_">
</input>
<paper-icon-button icon="pin-keyboard:arrow-forward"
class="digit-button submit-button"
disabled="[[!hasInput_(value)]]"
hidden="[[!enableSubmitButton]]"
on-tap="firePinSubmitEvent_">
</paper-icon-button>
</div>
<div class="row keyboard">
<hr>
<div class="row keyboard top-row">
<paper-button class="digit-button" on-tap="onNumberTap_" value="1">
<inner-text>$i18n{pinKeyboard1}</inner-text>
</paper-button>
<paper-button class="digit-button center-button" on-tap="onNumberTap_"
value="2">
<paper-button class="digit-button" on-tap="onNumberTap_" value="2">
<inner-text>$i18n{pinKeyboard2}</inner-text>
</paper-button>
<paper-button class="digit-button" on-tap="onNumberTap_" value="3">
......@@ -186,8 +193,7 @@
<paper-button class="digit-button" on-tap="onNumberTap_" value="4">
<inner-text>$i18n{pinKeyboard4}</inner-text>
</paper-button>
<paper-button class="digit-button center-button" on-tap="onNumberTap_"
value="5">
<paper-button class="digit-button" on-tap="onNumberTap_" value="5">
<inner-text>$i18n{pinKeyboard5}</inner-text>
</paper-button>
<paper-button class="digit-button" on-tap="onNumberTap_" value="6">
......@@ -198,28 +204,22 @@
<paper-button class="digit-button" on-tap="onNumberTap_" value="7">
<inner-text>$i18n{pinKeyboard7}</inner-text>
</paper-button>
<paper-button class="digit-button center-button" on-tap="onNumberTap_"
value="8">
<paper-button class="digit-button" on-tap="onNumberTap_" value="8">
<inner-text>$i18n{pinKeyboard8}</inner-text>
</paper-button>
<paper-button class="digit-button" on-tap="onNumberTap_" value="9">
<inner-text>$i18n{pinKeyboard9}</inner-text>
</paper-button>
</div>
<div class="row keyboard">
<div class="row keyboard bottom-row">
<div class="digit-button"></div>
<paper-button class="digit-button center-button" on-tap="onNumberTap_"
value="0">
<paper-button class="digit-button" on-tap="onNumberTap_" value="0">
<inner-text>$i18n{pinKeyboard0}</inner-text>
</paper-button>
<paper-button class="digit-button clear-button" on-tap="onPinClear_">
<div class="icon-container">
<iron-icon class="icon" icon="cr:clear"><iron-icon>
</div>
<inner-text class="icon-subheading">
$i18n{pinKeyboardClear}
</inner-text>
</paper-button>
<paper-icon-button class="digit-button backspace-button"
disabled="[[!hasInput_(value)]]"
on-tap="onPinClear_" icon="pin-keyboard:backspace">
</paper-icon-button>
</div>
</div>
</div>
......
chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
View file @ 12bda387
......@@ -127,12 +127,12 @@ Polymer({
},
/**
* Changes the color of the submit button if PIN is ready.
* Disables the submit and backspace button if nothing is entered.
* @param {string} value
* @private
*/
getSubmitClass_: function(value) {
return value.length > 0 ? 'ready-background' : '';
hasInput_: function(value) {
return value.length > 0;
},
/**
......@@ -160,7 +160,7 @@ Polymer({
* @param {string} password
* @private
*/
getInputClass_: function(password) {
isInputRtl_: function(password) {
// +password will convert a string to a number or to NaN if that's not
// possible. Number.isInteger will verify the value is not a NaN and that it
// does not contain decimals.
......@@ -169,16 +169,6 @@ Polymer({
// Since we still support users entering their passwords through the PIN
// keyboard, we swap the input box to rtl when we think it is a password
// (just numbers), if the document direction is rtl.
var enableRtl = (document.dir == 'rtl') && !Number.isInteger(+password);
return enableRtl ? 'input-non-pin' : '';
return (document.dir == 'rtl') && !Number.isInteger(+password);
},
/**
* Computes if the submit button is visible.
* @param {boolean} submitEnabled
* @private
*/
getSubmitHiddenClass_: function(submitEnabled) {
return submitEnabled ? '' : 'submit-button-hidden';
}
});
ui/login/account_picker/user_pod_row.css
View file @ 12bda387
......@@ -46,22 +46,18 @@ pin-keyboard {
.pod.flying-pin-pod {
transition: height 180ms ease-in-out,
left 180ms ease-in-out,
top 180ms ease-in-out,
width 180ms ease-in-out;
top 180ms ease-in-out;
}
.pod.pin-enabled {
height: 594px;
top: -200px !important;
width: 270px;
height: 417px;
top: -87px !important;
}
.pod .pin-container {
height: 344px;
height: 204px;
position: absolute;
top: 250px;
width: 270px;
top: 170px;
}
.pod.faded {
......@@ -98,23 +94,11 @@ podrow[ncolumns='6'] .pod {
z-index: 3;
}
.user-image-pane.pin-enabled {
height: 230px;
left: 20px;
top: 20px;
width: 230px;
}
html[dir=rtl] .user-image-pane {
left: auto;
right: 10px;
}
html[dir=rtl] .user-image-pane.pin-enabled {
left: auto;
right: 20px;
}
.user-image-container {
align-items: center;
display: flex;
......@@ -134,14 +118,6 @@ html:not([screen=login-add-user]) .pod .user-image {
max-width: 160px;
opacity: 0.7;
position: absolute;
transition: max-height 180ms ease-in-out,
max-width 180ms ease-in-out,
top 180ms ease-in-out;
}
html:not([screen=login-add-user]) .pod .user-image.pin-enabled {
max-height: 230px;
max-width: 230px;
}
html:not([screen=login-add-user]) .pod.focused .user-image {
......@@ -164,18 +140,9 @@ html:not([screen=login-add-user]) .pod.focused .user-image {
position: absolute;
text-align: center;
top: 0;
transition: left 180ms ease-in-out,
top 180ms ease-in-out,
width 180ms ease-in-out;
width: 100%;
}
.pod.signed-in .signed-in-indicator.pin-enabled {
left: 20px;
top: 20px;
width: 230px;
}
.main-pane {
left: 10px;
position: absolute;
......
ui/login/account_picker/user_pod_row.js
View file @ 12bda387
......@@ -59,9 +59,7 @@ cr.define('login', function() {
var POD_ROW_PADDING = 10;
var DESKTOP_ROW_PADDING = 32;
var CUSTOM_ICON_CONTAINER_SIZE = 40;
var CROS_PIN_POD_WIDTH = 270;
var CROS_PIN_POD_HEIGHT = 594;
var PIN_EXTRA_WIDTH = 90;
var CROS_PIN_POD_HEIGHT = 417;
/**
* Minimal padding between user pod and virtual keyboard.
......@@ -1093,6 +1091,10 @@ cr.define('login', function() {
}
},
isPinReady: function() {
return this.pinKeyboard && this.pinKeyboard.offsetHeight > 0;
},
toggleTransitions: function(enable) {
this.classList.toggle('flying-pin-pod', enable);
},
......@@ -3001,28 +3003,6 @@ cr.define('login', function() {
return {columns: columns, rows: rows};
},
/**
* Calculates the row and column of the given |pod|.
* @param {UserPod} pod Pod we want the row and column of.
* @param {number} columns Columns in the podrow.
* @param {number} rows Rows in the podrow.
* @return {{columns: number, rows: number}}
* @private
*/
findPodLocation_: function(pod, columns, rows) {
var column = -1;
var row = -1;
var index = this.pods.indexOf(pod);
if (index >= 0) {
row = Math.floor(index / columns);
column = index % columns;
}
else {
console.error('Pod not found in pod row.');
}
return {column: column, row: row};
},
/**
* Places pods onto their positions onto pod grid.
* @private
......@@ -3058,23 +3038,16 @@ cr.define('login', function() {
console.error('Pod offsetHeight (' + pod.offsetHeight +
') and POD_HEIGHT (' + height + ') are not equal.');
}
if (pod.offsetWidth != width &&
pod.offsetWidth != CROS_PIN_POD_WIDTH) {
if (pod.offsetWidth != width) {
console.error('Pod offsetWidth (' + pod.offsetWidth +
') and POD_WIDTH (' + width + ') are not equal.');
}
var column = index % columns;
var row = Math.floor(index / columns);
var offsetFromPin = 0;
if (row == pinPodLocation.row) {
offsetFromPin = PIN_EXTRA_WIDTH / 2;
if (column <= pinPodLocation.column)
offsetFromPin *= -1;
}
var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
POD_ROW_PADDING;
pod.left = rowPadding + column * (width + margin) + offsetFromPin;
pod.left = rowPadding + column * (width + margin);
// On desktop, we want the rows to always be equally spaced.
pod.top = isDesktopUserManager ? row * (height + rowPadding) :
......@@ -3163,7 +3136,9 @@ cr.define('login', function() {
var hadFocus = !!this.focusedPod_;
this.focusedPod_ = podToFocus;
if (podToFocus) {
this.setFocusedPodPinVisibility(true);
// Only show the keyboard if it is fully loaded.
if (podToFocus.isPinReady())
podToFocus.setPinVisibility(true);
podToFocus.classList.remove('faded');
podToFocus.classList.add('focused');
if (!podToFocus.multiProfilesPolicyApplied) {
......@@ -3186,7 +3161,6 @@ cr.define('login', function() {
this.scrollFocusedPodIntoView();
}
this.insideFocusPod_ = false;
this.placePods_();
},
/**
......
ui/login/account_picker/user_pod_template.html
View file @ 12bda387
<div id="user-pod-template" class="pod disabled" hidden>
<div class="user-image-pane pin-tag">
<div class="user-image-pane">
<div class="user-image-container">
<img class="user-image pin-tag" alt>
<img class="user-image" alt>
</div>
<div class="signed-in-indicator" i18n-content="signedIn"></div>
<div class="indicator-container">
......
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