chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html - Issue 2100203003: Pin keyboard matches red lines (go/cros-quick-unlock-ux).

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

Issue 2100203003: Pin keyboard matches red lines (go/cros-quick-unlock-ux). (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@lkgr

Patch Set: Created 4 years, 6 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 | « no previous file | 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 3e11127c88f77cb4ae9ebe5bcc67f79b487a93c4..31d4cc7d221fc9305f44c25f4adb958cdc8b0b78 100644

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

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

@@ -27,30 +27,43 @@

background: none;

border-radius: 50px;

box-sizing: border-box;

+ color: rgb(87, 101, 107);

jdufault 2016/06/27 19:17:52 Is there a paper-* color element that this value c

sammiequon 2016/06/29 21:26:12 Done.

display: flex;

flex-direction: column;

- font-size: 30px;

+ font-size: 32px;

height: 70px;

justify-content: center;

- margin: 0;

+ margin: 0 15px;

min-height: 70px;

- min-width: 85px;

+ min-width: 70px;

padding: 15px 20px;

- width: 85px;

+ width: 70px;

}

.digit-button.clear-button {

display: block;

}

+ .digit-button.left-button {

+ margin: 0 15px 0 0;

+ }

+ .digit-button.right-button {

+ margin: 0 0 0 15px;

+ }

.digit-button .icon-container {

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

+ background: rgb(191, 197, 202);

jdufault 2016/06/27 19:17:52 Is there a paper-* color element that this value c

sammiequon 2016/06/29 21:26:12 Done.

border-radius: 100px;

height: 24px;

margin: auto;

width: 24px;

}

+ .digit-button .icon-container.ready-background {

+ background: blue;

+ }

.digit-button .icon-container .icon {

color: white;

display: block;

@@ -61,10 +74,14 @@

}

.digit-button .icon-subheading {

- color: var(--paper-grey-500);

+ color: rgb(191, 197, 202);

jdufault 2016/06/27 19:17:52 Is there a paper-* color element that this value c

sammiequon 2016/06/29 21:26:12 Done.

font-size: 10px;

- padding: 10px;

+ left: 0;

+ position: absolute;

+ text-align: center;

text-transform: capitalize;

+ top: 44px;

+ width: 100%;

}

.digit-button inner-text {

@@ -74,17 +91,20 @@

}

.first-row {

- height: 54px;

- min-height: 54px;

+ height: 64px;

+ min-height: 64px;

+ padding: 28px 15px 12px 15px;

}

#pin-input {

-webkit-text-security: disc;

border: 0;

- font-size: 20px;

- height: 54px;

- text-align: center;

- width: 171px;

+ font-size: 18px;

+ height: 64px;

+ left: 20px;

+ padding: 28px 3px 12px 3px;

+ position: relative;

+ width: 180px;

}

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

@@ -106,55 +126,61 @@

<input id="pin-input" type="number" placeholder="Enter PIN"

value="{{value::input}}"

on-keydown="onInputKeyDown_"></input>

- <div class="digit-button first-row">

- <paper-button class="digit-button submit-button"

- on-tap="firePinSubmitEvent_">

- <div class="icon-container">

- <iron-icon class="icon" icon="icons:forward"><iron-icon>

- </div>

- </paper-button>

- </div>

+ <paper-button class="digit-button first-row

jdufault 2016/06/27 19:17:52 Will this fit on one line?

sammiequon 2016/06/29 21:26:12 Done.

+ right-button submit-button"

+ on-tap="firePinSubmitEvent_">

+ <div class="icon-container">

+ <iron-icon class="icon" icon="icons:forward"><iron-icon>

+ </div>

+ </paper-button>

</div>

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

+ <paper-button class="digit-button left-button" on-tap="onNumberTap_"

jdufault 2016/06/27 19:17:52 Instead of having two left/right classes, what abo

sammiequon 2016/06/29 21:26:12 Done.

+ value="1">

<inner-text>1</inner-text>

</paper-button>

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

<inner-text>2</inner-text>

</paper-button>

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

+ <paper-button class="digit-button right-button" on-tap="onNumberTap_"

+ value="3">

<inner-text>3</inner-text>

</paper-button>

</div>

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

+ <paper-button class="digit-button left-button" on-tap="onNumberTap_"

+ value="4">

<inner-text>4</inner-text>

</paper-button>

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

<inner-text>5</inner-text>

</paper-button>

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

+ <paper-button class="digit-button right-button" on-tap="onNumberTap_"

+ value="6">

<inner-text>6</inner-text>

</paper-button>

</div>

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

+ <paper-button class="digit-button left-button" on-tap="onNumberTap_"

+ value="7">

<inner-text>7</inner-text>

</paper-button>

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

<inner-text>8</inner-text>

</paper-button>

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

+ <paper-button class="digit-button right-button" on-tap="onNumberTap_"

+ value="9">

<inner-text>9</inner-text>

</paper-button>

</div>

- <div class="digit-button"></div>

+ <div class="digit-button left-button"></div>

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

<inner-text>0</inner-text>

</paper-button>

- <paper-button class="digit-button clear-button" on-tap="onPinClear_">

+ <paper-button class="digit-button clear-button right-button"

+ on-tap="onPinClear_">

<iron-icon class="icon" icon="icons:clear"><iron-icon>

</div>