| 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 |