chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html - Issue 2222583002: Lock screen pin keyboard ui upgrades.

Unified Diff: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

Issue 2222583002: Lock screen pin keyboard ui upgrades. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@lkgr

Patch Set: Pin warnings moved inside pin keyboard. Created 4 years, 4 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « chrome/app/generated_resources.grd ('k') | chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js » ('j') | chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

index ffc5a62da781827ea2dc7207763f2cda46755d4c..a415e06328c4e9ab934b5712cc572b2e36a9a0e0 100644

--- a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

@@ -6,6 +6,7 @@

+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.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>

@@ -41,68 +48,66 @@

.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;

+ .bottom-row {

+ margin-bottom: 6px;

}

- .digit-button.center-button {

- margin: 0 30px;

+ .top-row {

+ margin-top: 6px;

}

- .digit-button.submit-button {

- left: 20px;

- position: relative;

+ .digit-button.backspace-button {

+ opacity: var(--dark-primary-opacity);

}

- .digit-button.submit-button.submit-button-hidden {

- display: none;

+ .digit-button.backspace-button[disabled] {

+ color: #000;

+ opacity: 0.26;

+ padding: 14px;

}

- .digit-button .icon-container {

- background: var(--paper-grey-400);

- border-radius: 100px;

- height: 24px;

- margin: auto;

- width: 24px;

+ .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-container.ready-background {

- background: var(--paper-blue-800);

+ .digit-button.submit-button[disabled] {

+ color: #000;

+ opacity: 0.26;

}

- .digit-button .icon-container .icon {

- color: white;

- display: block;

- height: 16px;

- left: 4px;

- top: 4px;

- width: 16px;

+ .digit-button.submit-button.error-show,

+ .digit-button.submit-button.error-show[disabled] {

+ color: var(--google-red-700);

+ opacity: 1;

}

- .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.submit-button-hidden {

+ display: none;

}

.digit-button inner-text {

@@ -112,10 +117,19 @@

height: 52px;

}

- .first-row {

- height: 64px;

- min-height: 64px;

- padding: 28px 15px 12px 15px;

+ #error-message {

+ color: var(--google-red-700);

+ font-size: 12px;

+ height: 0;

+ left: 0;

+ padding: 0 10px;

+ position: relative;

+ width: 160px;

+ z-index: 1;

+ }

+ #error-message.error-rtl {

+ direction: rtl;

}

#pin-input {

@@ -123,20 +137,35 @@

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;

+ 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,

@@ -157,25 +186,30 @@

<input id="pin-input" type="[[getInputType_(enablePassword)]]"

class$="[[getInputClass_(value)]]

- [[getSubmitHiddenClass_(enableSubmitButton)]]"

+ [[getSubmitClass_(enableSubmitButton)]]

+ [[getContentClass_(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>

+ <paper-icon-button icon="pin-keyboard:arrow-forward"

+ class$="digit-button submit-button

+ [[getSubmitClass_(enableSubmitButton)]]

+ [[getErrorClass_(errorMessage)]]"

+ disabled="[[!hasInput_(value)]]"

+ on-tap="firePinSubmitEvent_">

+ </paper-icon-button>

</div>

- <div class="row keyboard">

+ <hr>

+ <template is="dom-if" if="[[hasErrorMessage_(errorMessage)]]">

+ <div id="error-message" class$="[getErrorDirection_]">

jdufault 2016/08/22 20:56:39 [[getErrorDirection_()]]

sammiequon 2016/08/23 17:30:18 Done.

+ [[errorMessage]]

jdufault 2016/08/22 20:56:40 Please also add support for warnings. I'd rename e

sammiequon 2016/08/23 17:30:18 Done.

+ </div>

+ </template>

+ <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 +220,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 +231,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">

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