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 113 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
124 } | 124 } |
125 | 125 |
126 #pin-input[has-content] { | 126 #pin-input[has-content] { |
127 opacity: var(--dark-primary-opacity); | 127 opacity: var(--dark-primary-opacity); |
128 } | 128 } |
129 | 129 |
130 #pin-input[is-input-rtl] { | 130 #pin-input[is-input-rtl] { |
131 direction: rtl; | 131 direction: rtl; |
132 } | 132 } |
133 | 133 |
134 #pin-input[is-invisible] { | |
135 visiblity: hidden; | |
136 } | |
137 | |
134 :host(:not([enable-submit-button])) #pin-input { | 138 :host(:not([enable-submit-button])) #pin-input { |
135 left: 0; | 139 left: 0; |
136 text-align: center; | 140 text-align: center; |
137 width: 180px; | 141 width: 180px; |
138 } | 142 } |
139 | 143 |
140 hr { | 144 hr { |
141 border: 0; | 145 border: 0; |
142 border-bottom: 1px solid #000; | 146 border-bottom: 1px solid #000; |
143 left: 10px; | 147 left: 10px; |
144 margin: 0; | 148 margin: 0; |
145 opacity: 0.14; | 149 opacity: 0.14; |
146 position: relative; | 150 position: relative; |
147 width: 160px; | 151 width: 160px; |
148 } | 152 } |
149 | 153 |
150 #pin-input[type=number]::-webkit-inner-spin-button, | 154 #pin-input[type=number]::-webkit-inner-spin-button, |
151 #pin-input[type=number]::-webkit-outer-spin-button { | 155 #pin-input[type=number]::-webkit-outer-spin-button { |
152 -webkit-appearance: none; | 156 -webkit-appearance: none; |
153 margin: 0; | 157 margin: 0; |
154 } | 158 } |
155 | 159 |
156 /* Ensure that all children of paper-button do not consume events. This | 160 /* Ensure that all children of paper-button do not consume events. This |
157 * simplifies the event handler code. */ | 161 * simplifies the event handler code. */ |
158 paper-button * { | 162 paper-button * { |
159 pointer-events: none; | 163 pointer-events: none; |
160 } | 164 } |
161 </style> | 165 </style> |
162 | 166 |
163 <div id="root"> | 167 <div id="root" on-keypress="onKeyPress_" on-keydown="onKeyDown_"> |
164 <div id="container-constrained-width"> | 168 <div id="container-constrained-width"> |
165 <div class="row"> | 169 <div class="row first-row"> |
166 <input id="pin-input" type="[[getInputType_(enablePassword)]]" | 170 <input id="pin-input" type="[[getInputType_(enablePassword)]]" |
167 is-input-rtl$="[[isInputRtl_(value)]]" | 171 is-input-rtl$="[[isInputRtl_(value)]]" |
168 has-content$="[[hasInput_(value)]]" | 172 has-content$="[[hasInput_(value)]]" |
169 placeholder="[[getInputPlaceholder_(enablePassword)]]" | 173 placeholder="[[getInputPlaceholder_(enablePassword)]]" |
170 value="{{value::input}}" | 174 value="{{value::input}}" |
171 on-keydown="onInputKeyDown_"> | 175 on-keydown="onInputKeyDown_" |
176 is-invisible$=[[hideInput]]> | |
172 </input> | 177 </input> |
173 <paper-icon-button icon="pin-keyboard:arrow-forward" | |
174 class="digit-button submit-button" | |
175 disabled="[[!hasInput_(value)]]" | |
176 hidden="[[!enableSubmitButton]]" | |
177 on-tap="firePinSubmitEvent_"> | |
178 </paper-icon-button> | |
179 </div> | 178 </div> |
180 <hr> | 179 <hr> |
181 <div class="row keyboard top-row"> | 180 <div class="row keyboard"> |
182 <paper-button class="digit-button" on-tap="onNumberTap_" value="1"> | 181 <paper-button class="digit-button" on-tap="onNumberTap_" value="1"> |
183 <inner-text>$i18n{pinKeyboard1}</inner-text> | 182 <inner-text>$i18n{pinKeyboard1}</inner-text> |
184 </paper-button> | 183 </paper-button> |
185 <paper-button class="digit-button" on-tap="onNumberTap_" value="2"> | 184 <paper-button class="digit-button center-button" on-tap="onNumberTap_" |
jdufault
2016/08/29 23:58:38
Are these accidental rebase changes?
sammiequon
2016/08/30 01:24:56
Yes rebased from last weeks cl.
| |
185 value="2"> | |
186 <inner-text>$i18n{pinKeyboard2}</inner-text> | 186 <inner-text>$i18n{pinKeyboard2}</inner-text> |
187 </paper-button> | 187 </paper-button> |
188 <paper-button class="digit-button" on-tap="onNumberTap_" value="3"> | 188 <paper-button class="digit-button" on-tap="onNumberTap_" value="3"> |
189 <inner-text>$i18n{pinKeyboard3}</inner-text> | 189 <inner-text>$i18n{pinKeyboard3}</inner-text> |
190 </paper-button> | 190 </paper-button> |
191 </div> | 191 </div> |
192 <div class="row keyboard"> | 192 <div class="row keyboard"> |
193 <paper-button class="digit-button" on-tap="onNumberTap_" value="4"> | 193 <paper-button class="digit-button" on-tap="onNumberTap_" value="4"> |
194 <inner-text>$i18n{pinKeyboard4}</inner-text> | 194 <inner-text>$i18n{pinKeyboard4}</inner-text> |
195 </paper-button> | 195 </paper-button> |
196 <paper-button class="digit-button" on-tap="onNumberTap_" value="5"> | 196 <paper-button class="digit-button center-button" on-tap="onNumberTap_" |
197 value="5"> | |
197 <inner-text>$i18n{pinKeyboard5}</inner-text> | 198 <inner-text>$i18n{pinKeyboard5}</inner-text> |
198 </paper-button> | 199 </paper-button> |
199 <paper-button class="digit-button" on-tap="onNumberTap_" value="6"> | 200 <paper-button class="digit-button" on-tap="onNumberTap_" value="6"> |
200 <inner-text>$i18n{pinKeyboard6}</inner-text> | 201 <inner-text>$i18n{pinKeyboard6}</inner-text> |
201 </paper-button> | 202 </paper-button> |
202 </div> | 203 </div> |
203 <div class="row keyboard"> | 204 <div class="row keyboard"> |
204 <paper-button class="digit-button" on-tap="onNumberTap_" value="7"> | 205 <paper-button class="digit-button" on-tap="onNumberTap_" value="7"> |
205 <inner-text>$i18n{pinKeyboard7}</inner-text> | 206 <inner-text>$i18n{pinKeyboard7}</inner-text> |
206 </paper-button> | 207 </paper-button> |
207 <paper-button class="digit-button" on-tap="onNumberTap_" value="8"> | 208 <paper-button class="digit-button center-button" on-tap="onNumberTap_" |
209 value="8"> | |
208 <inner-text>$i18n{pinKeyboard8}</inner-text> | 210 <inner-text>$i18n{pinKeyboard8}</inner-text> |
209 </paper-button> | 211 </paper-button> |
210 <paper-button class="digit-button" on-tap="onNumberTap_" value="9"> | 212 <paper-button class="digit-button" on-tap="onNumberTap_" value="9"> |
211 <inner-text>$i18n{pinKeyboard9}</inner-text> | 213 <inner-text>$i18n{pinKeyboard9}</inner-text> |
212 </paper-button> | 214 </paper-button> |
213 </div> | 215 </div> |
214 <div class="row keyboard bottom-row"> | 216 <div class="row keyboard bottom-row"> |
215 <div class="digit-button"></div> | 217 <div class="digit-button"></div> |
216 <paper-button class="digit-button" on-tap="onNumberTap_" value="0"> | 218 <paper-button class="digit-button" on-tap="onNumberTap_" value="0"> |
217 <inner-text>$i18n{pinKeyboard0}</inner-text> | 219 <inner-text>$i18n{pinKeyboard0}</inner-text> |
218 </paper-button> | 220 </paper-button> |
219 <paper-icon-button class="digit-button backspace-button" | 221 <paper-icon-button class="digit-button backspace-button" |
220 disabled="[[!hasInput_(value)]]" | 222 disabled="[[!hasInput_(value)]]" |
221 on-tap="onPinClear_" icon="pin-keyboard:backspace"> | 223 on-tap="onPinClear_" icon="pin-keyboard:backspace"> |
222 </paper-icon-button> | 224 </paper-icon-button> |
223 </div> | 225 </div> |
224 </div> | 226 </div> |
225 </div> | 227 </div> |
226 </template> | 228 </template> |
227 <script src="pin_keyboard.js"></script> | 229 <script src="pin_keyboard.js"></script> |
228 </dom-module> | 230 </dom-module> |
OLD | NEW |