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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2222583002: Lock screen pin keyboard ui upgrades. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@lkgr
Patch Set: Fixed patch set 6 errors. Created 4 years, 4 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 | « chrome/app/generated_resources.grd ('k') | 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') | Show Comments 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 ffc5a62da781827ea2dc7207763f2cda46755d4c..a95449244735289aaf428d696c541af53e75d51f 100644
--- a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
@@ -6,6 +6,7 @@
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<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-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">
@@ -17,7 +18,13 @@
Inlined from Polymer's iron-icons to avoid importing everything.
See http://goo.gl/Y1OdAq for instructions on adding additional icons.
-->
- <g id="forward"><path d="M12 8V4l8 8-8 8v-4H4V8z"></path></g>
+ <g id="arrow-forward">
+ <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z">
+ </path>
+ </g>
+ <g id="backspace">
+ <path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z">
+ </g>
</defs>
</svg>
</iron-iconset-svg>
@@ -41,68 +48,66 @@
.digit-button {
align-items: center;
background: none;
- border-radius: 20px;
+ border-radius: 100px;
box-sizing: border-box;
- color: var(--paper-blue-grey-700);
+ color: #000;
display: flex;
flex-direction: column;
- font-size: 32px;
- height: 70px;
+ font-size: 18px;
+ height: 48px;
justify-content: center;
- margin: 0;
- min-height: 70px;
- min-width: 70px;
- padding: 15px 20px;
- width: 70px;
+ margin: 0 6px;
+ min-height: 48px;
+ min-width: 48px;
+ opacity: 0.87;
+ padding: 15px;
+ width: 48px;
}
- .digit-button.clear-button {
- display: block;
+ .bottom-row {
+ margin-bottom: 6px;
}
- .digit-button.center-button {
- margin: 0 30px;
+ .top-row {
+ margin-top: 6px;
}
- .digit-button.submit-button {
- left: 20px;
- position: relative;
+ .digit-button.backspace-button {
+ opacity: var(--dark-primary-opacity);
}
- .digit-button.submit-button.submit-button-hidden {
- display: none;
+ .digit-button.backspace-button[disabled] {
+ color: #000;
+ opacity: 0.26;
+ padding: 14px;
}
- .digit-button .icon-container {
- background: var(--paper-grey-400);
- border-radius: 100px;
- height: 24px;
- margin: auto;
- width: 24px;
+ .digit-button.submit-button {
+ color: var(--google-blue-500);
+ height: 43px;
+ left: 137px;
+ margin: 0;
+ min-height: 43px;
+ min-width: 43px;
+ opacity: var(--light-primary-opacity);
+ padding: 11.5px 10px;
+ position: absolute;
+ width: 43px;
}
- .digit-button .icon-container.ready-background {
- background: var(--paper-blue-800);
+ .digit-button.submit-button[disabled] {
+ color: #000;
+ opacity: 0.26;
}
- .digit-button .icon-container .icon {
- color: white;
- display: block;
- height: 16px;
- left: 4px;
- top: 4px;
- width: 16px;
+ .digit-button.submit-button.error-show,
+ .digit-button.submit-button.error-show[disabled] {
+ color: var(--google-red-700);
+ opacity: 1;
}
- .digit-button .icon-subheading {
- color: var(--paper-grey-400);
- font-size: 10px;
- left: 0;
- position: absolute;
- text-align: center;
- text-transform: capitalize;
- top: 44px;
- width: 100%;
+ .digit-button.submit-button.submit-button-hidden {
+ display: none;
}
.digit-button inner-text {
@@ -112,10 +117,19 @@
height: 52px;
}
- .first-row {
- height: 64px;
- min-height: 64px;
- padding: 28px 15px 12px 15px;
+ #problem-message {
+ color: var(--google-red-700);
jdufault 2016/08/24 01:20:18 I don't think if the problem is a warning message
sammiequon 2016/08/25 23:50:02 No more problem message.
+ font-size: 12px;
+ height: 0;
+ left: 0;
+ padding: 0 10px;
+ position: relative;
+ width: 160px;
+ z-index: 1;
+ }
+
+ #problem-message.problem-rtl {
+ direction: rtl;
}
#pin-input {
@@ -123,20 +137,35 @@
background-color: white;
border: 0;
box-sizing: border-box;
- font-size: 18px;
- height: 64px;
- left: 20px;
+ font-face: Roboto-Regular;
+ font-size: 13px;
+ height: 43px;
+ left: 10px;
+ opacity: var(--dark-secondary-opacity);
outline: 0;
- padding: 28px 3px 12px 3px;
position: relative;
- width: 180px;
+ text-color: #000;
+ width: 127px;
+ }
+
+ #pin-input.has-content {
+ opacity: var(--dark-primary-opacity);
}
#pin-input.submit-button-hidden {
- border-bottom: 2px;
- border-bottom-style: solid;
+ left: 0;
text-align: center;
- width: 230px;
+ width: 180px;
+ }
+
+ hr {
+ border: 0;
+ border-bottom: 1px solid #000;
+ left: 10px;
+ margin: 0;
+ opacity: 0.14;
+ position: relative;
+ width: 160px;
}
#pin-input[type=number]::-webkit-inner-spin-button,
@@ -157,25 +186,30 @@
<div class="row">
<input id="pin-input" type="[[getInputType_(enablePassword)]]"
class$="[[getInputClass_(value)]]
- [[getSubmitHiddenClass_(enableSubmitButton)]]"
+ [[getSubmitClass_(enableSubmitButton)]]
+ [[getContentClass_(value)]]"
placeholder="[[getInputPlaceholder_(enablePassword)]]"
value="{{value::input}}"
on-keydown="onInputKeyDown_"></input>
- <paper-button class$="digit-button first-row submit-button
- [[getSubmitHiddenClass_(enableSubmitButton)]]"
- on-tap="firePinSubmitEvent_">
- <div class$="icon-container [[getSubmitClass_(value)]]">
- <iron-icon class="icon" icon="pin-keyboard:forward"><iron-icon>
- </div>
- </paper-button>
+ <paper-icon-button icon="pin-keyboard:arrow-forward"
+ class$="digit-button submit-button
+ [[getSubmitClass_(enableSubmitButton)]]
+ [[getProblemClass_(problemMessage)]]"
jdufault 2016/08/24 01:20:18 Can we use problemClass_ directly?
sammiequon 2016/08/25 23:50:02 No more problem message.
+ disabled="[[!hasInput_(value)]]"
+ on-tap="firePinSubmitEvent_">
+ </paper-icon-button>
</div>
-
- <div class="row keyboard">
+ <hr>
+ <template is="dom-if" if="[[hasProblemMessage_(problemMessage)]]">
+ <div id="problem-message" class$="[[getProblemDirection_()]]">
+ [[problemMessage]]
+ </div>
+ </template>
+ <div class="row keyboard top-row">
<paper-button class="digit-button" on-tap="onNumberTap_" value="1">
<inner-text>$i18n{pinKeyboard1}</inner-text>
</paper-button>
- <paper-button class="digit-button center-button" on-tap="onNumberTap_"
- value="2">
+ <paper-button class="digit-button" on-tap="onNumberTap_" value="2">
<inner-text>$i18n{pinKeyboard2}</inner-text>
</paper-button>
<paper-button class="digit-button" on-tap="onNumberTap_" value="3">
@@ -186,8 +220,7 @@
<paper-button class="digit-button" on-tap="onNumberTap_" value="4">
<inner-text>$i18n{pinKeyboard4}</inner-text>
</paper-button>
- <paper-button class="digit-button center-button" on-tap="onNumberTap_"
- value="5">
+ <paper-button class="digit-button" on-tap="onNumberTap_" value="5">
<inner-text>$i18n{pinKeyboard5}</inner-text>
</paper-button>
<paper-button class="digit-button" on-tap="onNumberTap_" value="6">
@@ -198,28 +231,22 @@
<paper-button class="digit-button" on-tap="onNumberTap_" value="7">
<inner-text>$i18n{pinKeyboard7}</inner-text>
</paper-button>
- <paper-button class="digit-button center-button" on-tap="onNumberTap_"
- value="8">
+ <paper-button class="digit-button" on-tap="onNumberTap_" value="8">
<inner-text>$i18n{pinKeyboard8}</inner-text>
</paper-button>
<paper-button class="digit-button" on-tap="onNumberTap_" value="9">
<inner-text>$i18n{pinKeyboard9}</inner-text>
</paper-button>
</div>
- <div class="row keyboard">
+ <div class="row keyboard bottom-row">
<div class="digit-button"></div>
- <paper-button class="digit-button center-button" on-tap="onNumberTap_"
- value="0">
+ <paper-button class="digit-button" on-tap="onNumberTap_" value="0">
<inner-text>$i18n{pinKeyboard0}</inner-text>
</paper-button>
- <paper-button class="digit-button clear-button" on-tap="onPinClear_">
- <div class="icon-container">
- <iron-icon class="icon" icon="cr:clear"><iron-icon>
- </div>
- <inner-text class="icon-subheading">
- $i18n{pinKeyboardClear}
- </inner-text>
- </paper-button>
+ <paper-icon-button class="digit-button backspace-button"
+ disabled="[[!hasInput_(value)]]"
+ on-tap="onPinClear_" icon="pin-keyboard:backspace">
+ </paper-icon-button>
</div>
</div>
</div>
« no previous file with comments | « chrome/app/generated_resources.grd ('k') | chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js » ('j') | chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698