Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(3224)

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 5 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
Download patch
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..57df59c408bf4003384bc1e7d3caac865271a966 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/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
@@ -117,8 +118,7 @@
height: 52px;
}
- #pin-input {
- -webkit-text-security: disc;
+ #pinInput {
background-color: white;
border: 0;
box-sizing: border-box;
@@ -130,17 +130,21 @@
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 {
+ :host(:not([enable-submit-button])) #pinInput {
left: 0;
text-align: center;
width: 180px;
@@ -156,8 +160,8 @@
width: 160px;
}
- #pin-input[type=number]::-webkit-inner-spin-button,
- #pin-input[type=number]::-webkit-outer-spin-button {
+ #pinInput[type=number]::-webkit-inner-spin-button,
+ #pinInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
@@ -172,61 +176,61 @@
<div id="root">
<div id="container-constrained-width">
<div class="row first-row">
- <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
+ is-input-rtl$="[[isInputRtl_(value)]]"
+ has-content$="[[hasInput_(value)]]"
+ label="[[getInputPlaceholder_(enablePassword)]]"
+ on-keydown="onInputKeyDown_">
stevenjb 2017/05/08 18:12:21 hidden="[[!showPinInput_]]" (see comment in JS)
sammiequon 2017/05/08 19:16:49 Done.
+ </paper-input>
</div>
- <hr>
+ <hr id="divider">
stevenjb 2017/05/08 18:12:21 We only use <hr> one other place. Can we get the s
sammiequon 2017/05/08 19:16:49 Done.
<div class="row keyboard">
<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>
<div class="row keyboard">
<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>
<div class="row keyboard">
<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 @@
<div class="row keyboard bottom-row">
<div class="digit-button"></div>
<paper-button class="digit-button" on-tap="onNumberTap_" value="0"
- noink>
+ noink>
<inner-text>$i18n{pinKeyboard0}</inner-text>
<paper-ripple>
</paper-button>
<div class="backspace-button-container">
<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>

Powered by Google App Engine
This is Rietveld 408576698