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