OLD | NEW |
1 <!-- TODO(crbug.com/603217): Use i18n instead of string literals. Figure out | 1 <!-- TODO(crbug.com/603217): Use i18n instead of string literals. Figure out |
2 what i18n to use for keypad, ie, does 1 ABC make | 2 what i18n to use for keypad, ie, does 1 ABC make |
3 sense in every scenario? --> | 3 sense in every scenario? --> |
4 | 4 |
5 <link rel="import" href="chrome://resources/cr_elements/icons.html"> | 5 <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| 6 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
6 <link rel="import" href="chrome://resources/html/i18n_behavior.html"> | 7 <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
7 <link rel="import" href="chrome://resources/html/polymer.html"> | 8 <link rel="import" href="chrome://resources/html/polymer.html"> |
8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt
on.html"> | 9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt
on.html"> |
9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> | 10 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> |
| 11 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input
.html"> |
10 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> | 12 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
11 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> | 13 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> |
12 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-i
conset-svg.html"> | 14 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-i
conset-svg.html"> |
13 | 15 |
14 <iron-iconset-svg name="pin-keyboard" size="24"> | 16 <iron-iconset-svg name="pin-keyboard" size="24"> |
15 <svg> | 17 <svg> |
16 <defs> | 18 <defs> |
17 <!-- | 19 <!-- |
18 Inlined from Polymer's iron-icons to avoid importing everything. | 20 Inlined from Polymer's iron-icons to avoid importing everything. |
19 See http://goo.gl/Y1OdAq for instructions on adding additional icons. | 21 See http://goo.gl/Y1OdAq for instructions on adding additional icons. |
20 --> | 22 --> |
21 <g id="arrow-forward"> | 23 <g id="arrow-forward"> |
22 <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"> | 24 <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"> |
23 </path> | 25 </path> |
24 </g> | 26 </g> |
25 <g id="backspace"> | 27 <g id="backspace"> |
26 <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"> | 28 <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"> |
27 </g> | 29 </g> |
28 </defs> | 30 </defs> |
29 </svg> | 31 </svg> |
30 </iron-iconset-svg> | 32 </iron-iconset-svg> |
31 | 33 |
32 <dom-module id="pin-keyboard"> | 34 <dom-module id="pin-keyboard"> |
33 <template> | 35 <template> |
34 <style> | 36 <style include="cr-shared-style"> |
35 :host { | 37 :host { |
36 outline: none; | 38 outline: none; |
37 } | 39 } |
38 | 40 |
| 41 :host(:not([enable-submit-button])) #pinInput { |
| 42 left: 0; |
| 43 text-align: center; |
| 44 width: 180px; |
| 45 } |
| 46 |
39 #root { | 47 #root { |
40 direction: ltr; | 48 direction: ltr; |
41 display: flex; | 49 display: flex; |
42 } | 50 } |
43 | 51 |
44 .row { | 52 .row { |
45 display: flex; | 53 display: flex; |
46 } | 54 } |
47 | 55 |
48 .digit-button { | 56 .digit-button { |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
110 opacity: 0.26; | 118 opacity: 0.26; |
111 } | 119 } |
112 | 120 |
113 .digit-button inner-text { | 121 .digit-button inner-text { |
114 color: var(--paper-blue-grey-700); | 122 color: var(--paper-blue-grey-700); |
115 display: flex; | 123 display: flex; |
116 flex-direction: column; | 124 flex-direction: column; |
117 height: 52px; | 125 height: 52px; |
118 } | 126 } |
119 | 127 |
120 #pin-input { | 128 #pinInput { |
121 -webkit-text-security: disc; | |
122 background-color: white; | 129 background-color: white; |
123 border: 0; | 130 border: 0; |
124 box-sizing: border-box; | 131 box-sizing: border-box; |
125 font-face: Roboto-Regular; | 132 font-face: Roboto-Regular; |
126 font-size: 13px; | 133 font-size: 13px; |
127 height: 43px; | 134 height: 43px; |
128 left: 10px; | 135 left: 10px; |
129 opacity: var(--dark-secondary-opacity); | 136 opacity: var(--dark-secondary-opacity); |
130 outline: 0; | 137 outline: 0; |
131 position: relative; | 138 position: relative; |
132 width: 127px; | 139 width: 127px; |
| 140 |
| 141 --paper-input-container-input: { |
| 142 caret-color: var(--paper-input-container-focus-color); |
| 143 } |
133 } | 144 } |
134 | 145 |
135 #pin-input[has-content] { | 146 #pinInput[has-content] { |
136 opacity: var(--dark-primary-opacity); | 147 opacity: var(--dark-primary-opacity); |
137 } | 148 } |
138 | 149 |
139 #pin-input[is-input-rtl] { | 150 #pinInput[is-input-rtl] { |
140 direction: rtl; | 151 direction: rtl; |
141 } | 152 } |
142 | 153 |
143 :host(:not([enable-submit-button])) #pin-input { | 154 #pinInput[type=number]::-webkit-inner-spin-button, |
144 left: 0; | 155 #pinInput[type=number]::-webkit-outer-spin-button { |
145 text-align: center; | |
146 width: 180px; | |
147 } | |
148 | |
149 hr { | |
150 border: 0; | |
151 border-bottom: 1px solid #000; | |
152 left: 10px; | |
153 margin: 0; | |
154 opacity: 0.14; | |
155 position: relative; | |
156 width: 160px; | |
157 } | |
158 | |
159 #pin-input[type=number]::-webkit-inner-spin-button, | |
160 #pin-input[type=number]::-webkit-outer-spin-button { | |
161 -webkit-appearance: none; | 156 -webkit-appearance: none; |
162 margin: 0; | 157 margin: 0; |
163 } | 158 } |
164 | 159 |
| 160 .separator { |
| 161 border-bottom: var(--cr-separator-line); |
| 162 margin: 0 10px; |
| 163 position: relative; |
| 164 } |
| 165 |
165 /* Ensure that all children of paper-button do not consume events. This | 166 /* Ensure that all children of paper-button do not consume events. This |
166 * simplifies the event handler code. */ | 167 * simplifies the event handler code. */ |
167 paper-button * { | 168 paper-button * { |
168 pointer-events: none; | 169 pointer-events: none; |
169 } | 170 } |
170 </style> | 171 </style> |
171 | 172 |
172 <div id="root"> | 173 <div id="root"> |
173 <div id="container-constrained-width"> | 174 <div id="container-constrained-width"> |
174 <div class="row first-row"> | 175 <div class="row first-row"> |
175 <input id="pin-input" type="password" | 176 <paper-input id="pinInput" type="password" no-label-float |
176 is-input-rtl$="[[isInputRtl_(value)]]" | 177 value="[[value]]" |
177 has-content$="[[hasInput_(value)]]" | 178 is-input-rtl$="[[isInputRtl_(value)]]" |
178 placeholder="[[getInputPlaceholder_(enablePassword)]]" | 179 has-content$="[[hasInput_(value)]]" |
179 on-keydown="onInputKeyDown_"> | 180 label="[[getInputPlaceholder_(enablePassword)]]" |
180 </input> | 181 on-keydown="onInputKeyDown_" |
| 182 hidden="[[!showPinInput_]]"> |
| 183 </paper-input> |
181 </div> | 184 </div> |
182 <hr> | 185 <div class="separator" hidden="[[showPinInput_]]"></div> |
183 <div class="row keyboard"> | 186 <div class="row keyboard"> |
184 <paper-button class="digit-button" on-tap="onNumberTap_" value="1" | 187 <paper-button class="digit-button" on-tap="onNumberTap_" value="1" |
185 noink> | 188 noink> |
186 <inner-text>$i18n{pinKeyboard1}</inner-text> | 189 <inner-text>$i18n{pinKeyboard1}</inner-text> |
187 <paper-ripple> | 190 <paper-ripple> |
188 </paper-button> | 191 </paper-button> |
189 <paper-button class="digit-button" on-tap="onNumberTap_" value="2" | 192 <paper-button class="digit-button" on-tap="onNumberTap_" value="2" |
190 noink> | 193 noink> |
191 <inner-text>$i18n{pinKeyboard2}</inner-text> | 194 <inner-text>$i18n{pinKeyboard2}</inner-text> |
192 <paper-ripple> | 195 <paper-ripple> |
193 </paper-button> | 196 </paper-button> |
194 <paper-button class="digit-button" on-tap="onNumberTap_" value="3" | 197 <paper-button class="digit-button" on-tap="onNumberTap_" value="3" |
195 noink> | 198 noink> |
196 <inner-text>$i18n{pinKeyboard3}</inner-text> | 199 <inner-text>$i18n{pinKeyboard3}</inner-text> |
197 <paper-ripple> | 200 <paper-ripple> |
198 </paper-button> | 201 </paper-button> |
199 </div> | 202 </div> |
200 <div class="row keyboard"> | 203 <div class="row keyboard"> |
201 <paper-button class="digit-button" on-tap="onNumberTap_" value="4" | 204 <paper-button class="digit-button" on-tap="onNumberTap_" value="4" |
202 noink> | 205 noink> |
203 <inner-text>$i18n{pinKeyboard4}</inner-text> | 206 <inner-text>$i18n{pinKeyboard4}</inner-text> |
204 <paper-ripple> | 207 <paper-ripple> |
205 </paper-button> | 208 </paper-button> |
206 <paper-button class="digit-button" on-tap="onNumberTap_" value="5" | 209 <paper-button class="digit-button" on-tap="onNumberTap_" value="5" |
207 noink> | 210 noink> |
208 <inner-text>$i18n{pinKeyboard5}</inner-text> | 211 <inner-text>$i18n{pinKeyboard5}</inner-text> |
209 <paper-ripple> | 212 <paper-ripple> |
210 </paper-button> | 213 </paper-button> |
211 <paper-button class="digit-button" on-tap="onNumberTap_" value="6" | 214 <paper-button class="digit-button" on-tap="onNumberTap_" value="6" |
212 noink> | 215 noink> |
213 <inner-text>$i18n{pinKeyboard6}</inner-text> | 216 <inner-text>$i18n{pinKeyboard6}</inner-text> |
214 <paper-ripple> | 217 <paper-ripple> |
215 </paper-button> | 218 </paper-button> |
216 </div> | 219 </div> |
217 <div class="row keyboard"> | 220 <div class="row keyboard"> |
218 <paper-button class="digit-button" on-tap="onNumberTap_" value="7" | 221 <paper-button class="digit-button" on-tap="onNumberTap_" value="7" |
219 noink> | 222 noink> |
220 <inner-text>$i18n{pinKeyboard7}</inner-text> | 223 <inner-text>$i18n{pinKeyboard7}</inner-text> |
221 <paper-ripple> | 224 <paper-ripple> |
222 </paper-button> | 225 </paper-button> |
223 <paper-button class="digit-button" on-tap="onNumberTap_" value="8" | 226 <paper-button class="digit-button" on-tap="onNumberTap_" value="8" |
224 noink> | 227 noink> |
225 <inner-text>$i18n{pinKeyboard8}</inner-text> | 228 <inner-text>$i18n{pinKeyboard8}</inner-text> |
226 <paper-ripple> | 229 <paper-ripple> |
227 </paper-button> | 230 </paper-button> |
228 <paper-button class="digit-button" on-tap="onNumberTap_" value="9" | 231 <paper-button class="digit-button" on-tap="onNumberTap_" value="9" |
229 noink> | 232 noink> |
230 <inner-text>$i18n{pinKeyboard9}</inner-text> | 233 <inner-text>$i18n{pinKeyboard9}</inner-text> |
231 <paper-ripple> | 234 <paper-ripple> |
232 </paper-button> | 235 </paper-button> |
233 </div> | 236 </div> |
234 <div class="row keyboard bottom-row"> | 237 <div class="row keyboard bottom-row"> |
235 <div class="digit-button"></div> | 238 <div class="digit-button"></div> |
236 <paper-button class="digit-button" on-tap="onNumberTap_" value="0" | 239 <paper-button class="digit-button" on-tap="onNumberTap_" value="0" |
237 noink> | 240 noink> |
238 <inner-text>$i18n{pinKeyboard0}</inner-text> | 241 <inner-text>$i18n{pinKeyboard0}</inner-text> |
239 <paper-ripple> | 242 <paper-ripple> |
240 </paper-button> | 243 </paper-button> |
241 <div class="backspace-button-container"> | 244 <div class="backspace-button-container"> |
242 <paper-icon-button class="digit-button backspace-button" | 245 <paper-icon-button class="digit-button backspace-button" |
243 has-content$="[[hasInput_(value)]]" | 246 has-content$="[[hasInput_(value)]]" |
244 icon="pin-keyboard:backspace" | 247 icon="pin-keyboard:backspace" |
245 on-pointerdown="onBackspacePointerDown_" | 248 on-pointerdown="onBackspacePointerDown_" |
246 on-pointerout="onBackspacePointerOut_" | 249 on-pointerout="onBackspacePointerOut_" |
247 on-pointerup="onBackspacePointerUp_" | 250 on-pointerup="onBackspacePointerUp_" |
248 aria-label="$i18n{pinKeyboardDeleteAccessibleName
}" | 251 aria-label="$i18n{pinKeyboardDeleteAccessibleName}" |
249 noink> | 252 noink> |
250 </paper-icon-button> | 253 </paper-icon-button> |
251 <paper-ripple> | 254 <paper-ripple> |
252 </div> | 255 </div> |
253 </div> | 256 </div> |
254 </div> | 257 </div> |
255 </div> | 258 </div> |
256 </template> | 259 </template> |
257 <script src="pin_keyboard.js"></script> | 260 <script src="pin_keyboard.js"></script> |
258 </dom-module> | 261 </dom-module> |
OLD | NEW |