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: Fixed patch set 6 errors. 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..60fc4ca9278e6d3ae1cd058681fe5c4ea1704762 100644

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

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

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

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

@@ -36,6 +37,12 @@

outline: none;

}

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

+ left: 0;

+ text-align: center;

+ width: 180px;

+ }

#root {

direction: ltr;

display: flex;

@@ -117,8 +124,7 @@

height: 52px;

}

- #pin-input {

- -webkit-text-security: disc;

+ #pinInput {

background-color: white;

border: 0;

box-sizing: border-box;

@@ -130,38 +136,34 @@

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;

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

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

+ -webkit-appearance: none;

+ margin: 0;

}

- hr {

- border: 0;

+ .separator {

border-bottom: 1px solid #000;

stevenjb 2017/05/08 19:30:30 @apply(--cr-separator-line) ? Opacity is .06 inste

sammiequon 2017/05/08 21:06:38 Done.

left: 10px;

- margin: 0;

opacity: 0.14;

position: relative;

width: 160px;

stevenjb 2017/05/08 19:30:30 Using a fixed width is less than ideal, but is may

sammiequon 2017/05/08 21:06:38 I think the dialog is fixed at 180px so this works

}

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

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

- -webkit-appearance: none;

- margin: 0;

- }

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

* simplifies the event handler code. */

paper-button * {

@@ -172,61 +174,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}}"

sammiequon 2017/05/08 19:16:49 Added this because previously, using the clear but

stevenjb 2017/05/08 19:30:30 Does [[value]] work? I'd be worried that the two-w

sammiequon 2017/05/08 21:06:38 Works. Done.

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