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-styles/color.html
"> | 10 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
(...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
112 background-color: white; | 112 background-color: white; |
113 border: 0; | 113 border: 0; |
114 box-sizing: border-box; | 114 box-sizing: border-box; |
115 font-face: Roboto-Regular; | 115 font-face: Roboto-Regular; |
116 font-size: 13px; | 116 font-size: 13px; |
117 height: 43px; | 117 height: 43px; |
118 left: 10px; | 118 left: 10px; |
119 opacity: var(--dark-secondary-opacity); | 119 opacity: var(--dark-secondary-opacity); |
120 outline: 0; | 120 outline: 0; |
121 position: relative; | 121 position: relative; |
122 text-color: #000; | |
123 width: 127px; | 122 width: 127px; |
124 } | 123 } |
125 | 124 |
126 #pin-input[has-content] { | 125 #pin-input[has-content] { |
127 opacity: var(--dark-primary-opacity); | 126 opacity: var(--dark-primary-opacity); |
128 } | 127 } |
129 | 128 |
130 #pin-input[is-input-rtl] { | 129 #pin-input[is-input-rtl] { |
131 direction: rtl; | 130 direction: rtl; |
132 } | 131 } |
133 | 132 |
134 #pin-input[is-invisible] { | 133 #pin-input[is-invisible] { |
135 visiblity: hidden; | 134 visibility: hidden; |
136 } | 135 } |
137 | 136 |
138 :host(:not([enable-submit-button])) #pin-input { | 137 :host(:not([enable-submit-button])) #pin-input { |
139 left: 0; | 138 left: 0; |
140 text-align: center; | 139 text-align: center; |
141 width: 180px; | 140 width: 180px; |
142 } | 141 } |
143 | 142 |
144 hr { | 143 hr { |
145 border: 0; | 144 border: 0; |
(...skipping 28 matching lines...) Expand all Loading... |
174 value="{{value::input}}" | 173 value="{{value::input}}" |
175 on-keydown="onInputKeyDown_" | 174 on-keydown="onInputKeyDown_" |
176 is-invisible$=[[hideInput]]> | 175 is-invisible$=[[hideInput]]> |
177 </input> | 176 </input> |
178 </div> | 177 </div> |
179 <hr> | 178 <hr> |
180 <div class="row keyboard"> | 179 <div class="row keyboard"> |
181 <paper-button class="digit-button" on-tap="onNumberTap_" value="1"> | 180 <paper-button class="digit-button" on-tap="onNumberTap_" value="1"> |
182 <inner-text>$i18n{pinKeyboard1}</inner-text> | 181 <inner-text>$i18n{pinKeyboard1}</inner-text> |
183 </paper-button> | 182 </paper-button> |
184 <paper-button class="digit-button center-button" on-tap="onNumberTap_" | 183 <paper-button class="digit-button" on-tap="onNumberTap_" value="2"> |
185 value="2"> | |
186 <inner-text>$i18n{pinKeyboard2}</inner-text> | 184 <inner-text>$i18n{pinKeyboard2}</inner-text> |
187 </paper-button> | 185 </paper-button> |
188 <paper-button class="digit-button" on-tap="onNumberTap_" value="3"> | 186 <paper-button class="digit-button" on-tap="onNumberTap_" value="3"> |
189 <inner-text>$i18n{pinKeyboard3}</inner-text> | 187 <inner-text>$i18n{pinKeyboard3}</inner-text> |
190 </paper-button> | 188 </paper-button> |
191 </div> | 189 </div> |
192 <div class="row keyboard"> | 190 <div class="row keyboard"> |
193 <paper-button class="digit-button" on-tap="onNumberTap_" value="4"> | 191 <paper-button class="digit-button" on-tap="onNumberTap_" value="4"> |
194 <inner-text>$i18n{pinKeyboard4}</inner-text> | 192 <inner-text>$i18n{pinKeyboard4}</inner-text> |
195 </paper-button> | 193 </paper-button> |
196 <paper-button class="digit-button center-button" on-tap="onNumberTap_" | 194 <paper-button class="digit-button" on-tap="onNumberTap_" value="5"> |
197 value="5"> | |
198 <inner-text>$i18n{pinKeyboard5}</inner-text> | 195 <inner-text>$i18n{pinKeyboard5}</inner-text> |
199 </paper-button> | 196 </paper-button> |
200 <paper-button class="digit-button" on-tap="onNumberTap_" value="6"> | 197 <paper-button class="digit-button" on-tap="onNumberTap_" value="6"> |
201 <inner-text>$i18n{pinKeyboard6}</inner-text> | 198 <inner-text>$i18n{pinKeyboard6}</inner-text> |
202 </paper-button> | 199 </paper-button> |
203 </div> | 200 </div> |
204 <div class="row keyboard"> | 201 <div class="row keyboard"> |
205 <paper-button class="digit-button" on-tap="onNumberTap_" value="7"> | 202 <paper-button class="digit-button" on-tap="onNumberTap_" value="7"> |
206 <inner-text>$i18n{pinKeyboard7}</inner-text> | 203 <inner-text>$i18n{pinKeyboard7}</inner-text> |
207 </paper-button> | 204 </paper-button> |
208 <paper-button class="digit-button center-button" on-tap="onNumberTap_" | 205 <paper-button class="digit-button" on-tap="onNumberTap_" value="8"> |
209 value="8"> | |
210 <inner-text>$i18n{pinKeyboard8}</inner-text> | 206 <inner-text>$i18n{pinKeyboard8}</inner-text> |
211 </paper-button> | 207 </paper-button> |
212 <paper-button class="digit-button" on-tap="onNumberTap_" value="9"> | 208 <paper-button class="digit-button" on-tap="onNumberTap_" value="9"> |
213 <inner-text>$i18n{pinKeyboard9}</inner-text> | 209 <inner-text>$i18n{pinKeyboard9}</inner-text> |
214 </paper-button> | 210 </paper-button> |
215 </div> | 211 </div> |
216 <div class="row keyboard bottom-row"> | 212 <div class="row keyboard bottom-row"> |
217 <div class="digit-button"></div> | 213 <div class="digit-button"></div> |
218 <paper-button class="digit-button" on-tap="onNumberTap_" value="0"> | 214 <paper-button class="digit-button" on-tap="onNumberTap_" value="0"> |
219 <inner-text>$i18n{pinKeyboard0}</inner-text> | 215 <inner-text>$i18n{pinKeyboard0}</inner-text> |
220 </paper-button> | 216 </paper-button> |
221 <paper-icon-button class="digit-button backspace-button" | 217 <paper-icon-button class="digit-button backspace-button" |
222 disabled="[[!hasInput_(value)]]" | 218 disabled="[[!hasInput_(value)]]" |
223 on-tap="onPinClear_" icon="pin-keyboard:backspace"> | 219 on-tap="onPinClear_" icon="pin-keyboard:backspace"> |
224 </paper-icon-button> | 220 </paper-icon-button> |
225 </div> | 221 </div> |
226 </div> | 222 </div> |
227 </div> | 223 </div> |
228 </template> | 224 </template> |
229 <script src="pin_keyboard.js"></script> | 225 <script src="pin_keyboard.js"></script> |
230 </dom-module> | 226 </dom-module> |
OLD | NEW |