Skip to content

GitLab

T
tangled
Commit 76e77ff0 authored by Alexander Alekseev's avatar Alexander Alekseev Committed by Commit Bot
Browse files
Options

Chrome OS: Update PIN setup element to new look. 


This Cl changes layout of PIN setup input/keyboard to match new specs.
This changes behavior both in First Run and in Settings UI.

Bug: 884667,890685
Change-Id: Ie0f94dfaa3ea22cdf99f478eb21ec1631de41bd5
Reviewed-on: https://chromium-review.googlesource.com/c/1286199Reviewed-by: default avatarMichael Giuffrida <michaelpg@chromium.org>
Reviewed-by: default avatarJacob Dufault <jdufault@chromium.org>
Reviewed-by: default avatarWenzhao (Colin) Zang <wzang@chromium.org>
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#600632}
parent e0e38ce5
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 51 deletions
chrome/browser/resources/chromeos/login/discover/modules/discover_module_pin_setup.css
View file @ 76e77ff0
......@@ -8,17 +8,7 @@
}
setup-pin-keyboard {
--cr-input-input: {
font-size: 28px;
letter-spacing: 28px;
};
--pin-keyboard-digit-button-letter: {
display: none;
};
--pin-keyboard-pin-input-style: {
width: 244px;
};
margin-top: 32px;
margin-top: 17px;
}
#done-illustration {
......
chrome/browser/resources/settings/people_page/setup_pin_dialog.html
View file @ 76e77ff0
......@@ -10,7 +10,11 @@
<dom-module id="settings-setup-pin-dialog">
<template>
<style include="settings-shared"></style>
<style include="settings-shared">
#pinKeyboardDiv {
justify-content: center;
}
</style>
<cr-dialog id="dialog" on-close="close"
close-text="$i18n{close}">
<div slot="title">[[getTitleMessage_(isConfirmStep_)]]</div>
......@@ -24,8 +28,7 @@
on-set-pin-done="onSetPinDone_"
set-modes="{{setModes}}"
quick-unlock-private="[[quickUnlockPrivate]]"
write-uma="[[writeUma_]]"
enable-placeholder>
write-uma="[[writeUma_]]">
</setup-pin-keyboard>
</div>
</div>
......
ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html
View file @ 76e77ff0
......@@ -36,6 +36,20 @@
<template>
<style include="cr-shared-style">
:host {
--backspace-button-ripple-left: calc((var(--backspace-button-width) -
var(--pin-button-ripple-width)) / 2);
--backspace-button-width: calc(var(--pin-button-width) +
var(--pin-button-horizontal-margin) * 2);
--pin-button-height: 40px;
--pin-button-horizontal-margin: 20px;
--pin-button-ripple-height: 48px;
--pin-button-ripple-left: calc((var(--pin-button-width) -
var(--pin-button-ripple-width)) / 2);
--pin-button-ripple-top: calc((var(--pin-button-height) -
var(--pin-button-ripple-height)) / 2);
--pin-button-ripple-width: 48px;
--pin-button-vertical-margin: 8px;
--pin-button-width: 40px;
outline: none;
}
......@@ -43,15 +57,20 @@
align-items: center;
display: flex;
flex-direction: column;
min-height: 0;
}
#rowsContainer {
direction: ltr;
display: block;
width: calc((var(--pin-button-width) +
var(--pin-button-horizontal-margin) * 2) * 3);
}
.row {
display: flex;
margin-bottom: calc(var(--pin-button-vertical-margin) * 2);
min-height: 0;
}
:host([enable-password]) #pinInputDiv {
......@@ -63,10 +82,10 @@
}
#backspaceButton {
color: var(--pin-keyboard-backspace-color, #000);
color: var(--pin-keyboard-backspace-color, var(--google-grey-700));
left: 0;
opacity: var(--pin-keyboard-backspace-opacity, --dark-primary-opacity);
padding: 14px;
padding: 12px;
position: absolute;
top: 0;
}
......@@ -77,74 +96,87 @@
#backspaceButtonContainer {
position: relative;
width: var(--backspace-button-width);
}
#backspaceButtonContainer paper-ripple {
left: var(--pin-keyboard-backspace-paper-ripple-offset, 0);
top: var(--pin-keyboard-backspace-paper-ripple-offset, 0);
left: var(--pin-keyboard-backspace-paper-ripple-offset,
var(--backspace-button-ripple-left));
top: var(--pin-keyboard-backspace-paper-ripple-offset,
var(--pin-button-ripple-top));
}
.digit-button {
--paper-button: {
min-width: 0;
};
align-items: center;
background: none;
border-radius: 0;
box-sizing: border-box;
color: #000;
color: var(--google-grey-900);
display: flex;
flex-direction: column;
height: 48px;
height: var(--pin-button-height)
justify-content: center;
margin: 0;
min-height: 48px;
min-width: 48px;
margin: 0 var(--pin-button-horizontal-margin);
min-height: 0;
opacity: 0.87px;
width: 60px;
padding: 0;
width: var(--pin-button-width);
@apply --pin-keyboard-digit-button;
}
.digit-button inner-text {
display: flex;
flex-direction: column;
font-family: 'Roboto';
}
inner-text.letter {
color: var(--pin-keyboard-letter-color, --paper-blue-grey-700);
font-size: 9px;
margin-top: 4px;
color: var(--pin-keyboard-letter-color, var(--google-grey-700));
font-size: 12px;
margin-top: 8px;
@apply --pin-keyboard-digit-button-letter;
}
.number {
color: var(--pin-keyboard-number-color, --paper-blue-grey-700);
font-size: 20px;
height: 52px;
color: var(--pin-keyboard-number-color, var(--paper-blue-grey-700));
font-size: 18px;
height: 16px;
}
paper-ripple {
color: var(--google-grey-700);
height: 48px;
left: 6px;
width: 48px;
height: var(--pin-button-ripple-height);
left: var(--pin-button-ripple-left);
top: var(--pin-button-ripple-top);
width: var(--pin-button-ripple-width);
@apply --pin-keyboard-paper-ripple;
}
#pinInput {
--cr-input-error-display: none;
--cr-input-input: {
font-size: 28px;
letter-spacing: 28px;
};
--cr-input-padding-bottom: 1px;
--cr-input-padding-end: 0;
--cr-input-padding-start: 0;
--cr-input-padding-top: 1px;
background-color: white;
border: 0;
box-sizing: border-box;
font-face: Roboto-Regular;
font-size: 13px;
height: 43px;
left: 0;
opacity: var(--dark-secondary-opacity);
outline: 0;
position: relative;
text-align: center;
width: 180px;
width: 200px;
@apply --pin-keyboard-pin-input-style;
}
......@@ -165,7 +197,7 @@
</style>
<div id="root" on-contextmenu="onContextMenu_" on-tap="focusInput_">
<div id="pinInputDiv" class="row">
<div id="pinInputDiv">
<cr-input id="pinInput" type="password" value="{{value}}"
is-input-rtl$="[[isInputRtl_(value)]]"
has-content$="[[hasInput_(value)]]" invalid="[[hasError]]"
......@@ -180,6 +212,7 @@
<paper-button class="digit-button" on-tap="onNumberTap_" value="1"
noink>
<inner-text class="number">[[i18n('pinKeyboard1')]]</inner-text>
<inner-text class="letter">&nbsp;</inner-text>
<paper-ripple class="circle" center></paper-ripple>
</paper-button>
<paper-button class="digit-button" on-tap="onNumberTap_" value="2"
......
ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.html
View file @ 76e77ff0
......@@ -46,11 +46,11 @@ Where:
<template>
<style include="settings-shared">
.error {
color: var(--paper-red-500);
color: var(--google-red-600);
}
.error > iron-icon {
--iron-icon-fill-color: var(--paper-red-500);
--iron-icon-fill-color: var(--google-red-600);
}
.warning {
......@@ -61,15 +61,12 @@ Where:
--iron-icon-fill-color: var(--google-grey-refresh-700);
}
pin-keyboard {
--pin-keyboard-digit-button: {
font-size: 18px;
padding: 15px 21px;
};
}
#pinKeyboardDiv {
justify-content: center;
#problemDiv {
align-items: center;
display: flex;
flex-direction: row;
height: 32px;
min-height: 0;
}
/* Hide this using visibility: hidden instead of hidden so that the
......@@ -89,8 +86,10 @@ Where:
<!-- Warning/error; only shown if title is hidden. -->
<div id="problemDiv" class$="[[problemClass_]]"
invisible$="[[!problemMessage_]]" problem>
<iron-icon icon="cr:error-outline"></iron-icon>
<span id="problemMessage">[[problemMessage_]]</span>
<div>
<iron-icon icon="cr:error-outline"></iron-icon>
<span id="problemMessage">[[problemMessage_]]</span>
</div>
</div>
</pin-keyboard>
</template>
......
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