chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html - Issue 2841313002: md settings: Update lock screen to match new mocks.

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

Issue 2841313002: md settings: Update lock screen to match new mocks. (Closed)

Patch Set: Rebased. Created 3 years, 7 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

« no previous file with comments | « chrome/browser/resources/chromeos/quick_unlock/compiled_resources2.gyp ('k') | chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js » ('j') | no next file with comments »
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 4b7642e749316fcded11784a7db1f1f15f6acca9..703a1617eab251dff3dc9ba965887ded5e60b5d5 100644

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

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

@@ -3,10 +3,12 @@

sense in every scenario? -->

+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">

+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">

@@ -31,11 +33,17 @@

<dom-module id="pin-keyboard">

- <style>

+ <style include="cr-shared-style">

:host {

outline: none;

}

+ :host(:not([enable-submit-button])) #pinInput {

+ left: 0;

+ text-align: center;

+ width: 180px;

+ }

#root {

direction: ltr;

display: flex;

@@ -117,8 +125,7 @@

height: 52px;

}

- #pin-input {

- -webkit-text-security: disc;

+ #pinInput {

background-color: white;

border: 0;

box-sizing: border-box;

@@ -130,36 +137,30 @@

outline: 0;

position: relative;

width: 127px;

+ --paper-input-container-input: {

+ caret-color: var(--paper-input-container-focus-color);

+ }

}

- #pin-input[has-content] {

+ #pinInput[has-content] {

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

}

- #pin-input[is-input-rtl] {

+ #pinInput[is-input-rtl] {

direction: rtl;

}

- :host(:not([enable-submit-button])) #pin-input {

- left: 0;

- text-align: center;

- width: 180px;

- }

- hr {

- border: 0;

- border-bottom: 1px solid #000;

- left: 10px;

+ #pinInput[type=number]::-webkit-inner-spin-button,

+ #pinInput[type=number]::-webkit-outer-spin-button {

+ -webkit-appearance: none;

margin: 0;

- opacity: 0.14;

- position: relative;

- width: 160px;

}

- #pin-input[type=number]::-webkit-inner-spin-button,

- #pin-input[type=number]::-webkit-outer-spin-button {

- -webkit-appearance: none;

- margin: 0;

+ .separator {

+ border-bottom: var(--cr-separator-line);

+ margin: 0 10px;

+ position: relative;

}

/* Ensure that all children of paper-button do not consume events. This

@@ -172,61 +173,63 @@

- <input id="pin-input" type="password"

- is-input-rtl$="[[isInputRtl_(value)]]"

- has-content$="[[hasInput_(value)]]"

- placeholder="[[getInputPlaceholder_(enablePassword)]]"

- on-keydown="onInputKeyDown_">

- </input>

+ <paper-input id="pinInput" type="password" no-label-float

+ value="[[value]]"

+ is-input-rtl$="[[isInputRtl_(value)]]"

+ has-content$="[[hasInput_(value)]]"

+ label="[[getInputPlaceholder_(enablePassword)]]"

+ on-keydown="onInputKeyDown_"

+ hidden="[[!showPinInput_]]">

+ </paper-input>

</div>

- <hr>

+ <div class="separator" hidden="[[showPinInput_]]"></div>

<paper-button class="digit-button" on-tap="onNumberTap_" value="1"

- noink>

+ noink>

<inner-text>$i18n{pinKeyboard1}</inner-text>

<paper-ripple>

</paper-button>

<paper-button class="digit-button" on-tap="onNumberTap_" value="2"

- noink>

+ noink>

<inner-text>$i18n{pinKeyboard2}</inner-text>

<paper-ripple>

</paper-button>

<paper-button class="digit-button" on-tap="onNumberTap_" value="3"

- noink>

+ noink>

<inner-text>$i18n{pinKeyboard3}</inner-text>

<paper-ripple>

</paper-button>

</div>

<paper-button class="digit-button" on-tap="onNumberTap_" value="4"

- noink>

+ noink>

<inner-text>$i18n{pinKeyboard4}</inner-text>

<paper-ripple>

</paper-button>

<paper-button class="digit-button" on-tap="onNumberTap_" value="5"

- noink>

+ noink>

<inner-text>$i18n{pinKeyboard5}</inner-text>

<paper-ripple>

</paper-button>

<paper-button class="digit-button" on-tap="onNumberTap_" value="6"

- noink>

+ noink>

<inner-text>$i18n{pinKeyboard6}</inner-text>

<paper-ripple>

</paper-button>

</div>

<paper-button class="digit-button" on-tap="onNumberTap_" value="7"

- noink>

+ noink>

<inner-text>$i18n{pinKeyboard7}</inner-text>

<paper-ripple>

</paper-button>

<paper-button class="digit-button" on-tap="onNumberTap_" value="8"

- noink>

+ noink>

<inner-text>$i18n{pinKeyboard8}</inner-text>

<paper-ripple>

</paper-button>

<paper-button class="digit-button" on-tap="onNumberTap_" value="9"

- noink>

+ noink>

<inner-text>$i18n{pinKeyboard9}</inner-text>

<paper-ripple>

</paper-button>

@@ -234,19 +237,19 @@

<paper-button class="digit-button" on-tap="onNumberTap_" value="0"

- noink>

+ noink>

<inner-text>$i18n{pinKeyboard0}</inner-text>

<paper-ripple>

</paper-button>

<paper-icon-button class="digit-button backspace-button"

- has-content$="[[hasInput_(value)]]"

- icon="pin-keyboard:backspace"

- on-pointerdown="onBackspacePointerDown_"

- on-pointerout="onBackspacePointerOut_"

- on-pointerup="onBackspacePointerUp_"

- aria-label="$i18n{pinKeyboardDeleteAccessibleName}"

- noink>

+ has-content$="[[hasInput_(value)]]"

+ icon="pin-keyboard:backspace"

+ on-pointerdown="onBackspacePointerDown_"

+ on-pointerout="onBackspacePointerOut_"

+ on-pointerup="onBackspacePointerUp_"

+ aria-label="$i18n{pinKeyboardDeleteAccessibleName}"

+ noink>

</paper-icon-button>

<paper-ripple>

</div>