chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html - Issue 2081873008: Changed look of pin keyboard.

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

Issue 2081873008: Changed look of pin keyboard. (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 578269313f4b33d49fe26c54d4c91200c503e443..7bbe5f9982bf9b0b2bf4ca2d90312e0837be5b86 100644

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

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

@@ -19,10 +19,6 @@

#container-constrained-width {

jdufault 2016/06/22 18:03:43 This entire block should be removed.

sammiequon 2016/06/22 23:05:39 Done.

-webkit-tap-highlight-color: transparent;

background: white;

- border-radius: 2px;

- box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),

- 0 2px 6px rgba(0, 0, 0, 0.15),

- 0 3px 0 rgba(0, 0, 0, 0.08);

cursor: pointer;

flex-direction: column;

outline: none;

@@ -40,12 +36,51 @@

align-items: center;

background: none;

border-radius: 50px;

+ box-sizing: border-box;

display: flex;

+ flex-direction: column;

font-size: 30px;

+ height: 70px;

justify-content: center;

- margin: 5px;

- min-width: 94px;

- width: 94px;

+ margin: 0;

+ min-height: 70px;

+ min-width: 85px;

+ padding: 15px 20px;

+ width: 85px;

+ }

+ .digit-button .icon-button {

+ height: 100%;

+ }

+ .digit-button .icon-button .icon-div,

+ .digit-button .icon-div {

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

+ border-radius: 100px;

+ height: 24px;

+ margin: auto;

+ width: 24px;

+ }

+ .digit-button .icon-button .icon-div .icon,

+ .digit-button .icon-div .icon {

+ color: white;

+ display: block;

+ height: 16px;

+ left: 4px;

+ top: 4px;

+ width: 16px;

+ }

+ .digit-button .icon-button .text-div {

+ text-align: center;

+ }

+ .digit-button .icon-button .text-div .text {

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

+ font-size: 10px;

+ padding: 10px;

+ text-transform: capitalize;

}

.digit-button inner-text {

@@ -54,31 +89,18 @@

height: 52px;

}

- .digit-button inner-text subhead {

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

- font-size: 16px;

- }

- .digit-button .submit-button {

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

- color: white;

- font-size: 20px;

- height: 60px;

- min-width: 0;

- width: 60px;

+ .first-row {

+ height: 54px;

+ min-height: 54px;

}

#pin-input {

-webkit-text-security: disc;

- border-bottom-color: lightgray;

- border-left: none;

- border-right: none;

- border-top: none;

+ border: 0;

font-size: 20px;

- height: 30px;

- margin-top: 10px;

+ height: 54px;

text-align: center;

- width: 95%;

+ width: 75%;

}

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

@@ -99,6 +121,14 @@

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

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

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

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

+ on-tap="onPinSubmit_">

+ <div class="icon-div">

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

+ </div>

+ </paper-button>

+ </div>

</div>

@@ -106,32 +136,32 @@

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

</paper-button>

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

- <inner-text>2<subhead>ABC</subhead></inner-text>

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

</paper-button>

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

- <inner-text>3<subhead>DEF</subhead></inner-text>

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

</paper-button>

</div>

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

- <inner-text>4<subhead>GHI</subhead></inner-text>

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

</paper-button>

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

- <inner-text>5<subhead>JKL</subhead></inner-text>

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

</paper-button>

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

- <inner-text>6<subhead>MNO</subhead></inner-text>

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

</paper-button>

</div>

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

- <inner-text>7<subhead>PQRS</subhead></inner-text>

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

</paper-button>

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

- <inner-text>8<subhead>TUV</subhead></inner-text>

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

</paper-button>

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

- <inner-text>9<subhead>WXYZ</subhead></inner-text>

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

</paper-button>

</div>

@@ -139,11 +169,16 @@

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

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

</paper-button>

- <div class="digit-button">

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

- icon="icons:check" on-tap="onPinSubmit_">

- </paper-icon-button>

- </div>

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

+ <div class="icon-button">

+ <div class="icon-div">

jdufault 2016/06/22 18:03:44 icon-button, icon-div, text-div can all be done us

sammiequon 2016/06/22 23:05:39 Done.

sammiequon 2016/06/22 23:05:40 icon-div is used to highlight the background of th

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

+ </div>

+ <div class="text-div">

+ <inner-text class="text">Clear</inner-text>

+ </div>

+ </paper-button>

</div>