Chromium Code Reviews| 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/html/i18n_behavior.html"> | 5 <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
| 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt on.html"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt on.html"> |
| 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html"> | 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html"> |
| 8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/paper-styl es.html"> | 8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/paper-styl es.html"> |
| 9 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h tml"> | 9 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h tml"> |
| 10 | 10 |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 48 | 48 |
| 49 .digit-button.center-button { | 49 .digit-button.center-button { |
| 50 margin: 0 30px; | 50 margin: 0 30px; |
| 51 } | 51 } |
| 52 | 52 |
| 53 .digit-button.submit-button { | 53 .digit-button.submit-button { |
| 54 left: 20px; | 54 left: 20px; |
| 55 position: relative; | 55 position: relative; |
| 56 } | 56 } |
| 57 | 57 |
| 58 .digit-button.submit-button.submit-button-hidden { | |
| 59 display: none; | |
| 60 } | |
| 61 | |
| 58 .digit-button .icon-container { | 62 .digit-button .icon-container { |
| 59 background: var(--paper-grey-400); | 63 background: var(--paper-grey-400); |
| 60 border-radius: 100px; | 64 border-radius: 100px; |
| 61 height: 24px; | 65 height: 24px; |
| 62 margin: auto; | 66 margin: auto; |
| 63 width: 24px; | 67 width: 24px; |
| 64 } | 68 } |
| 65 | 69 |
| 66 .digit-button .icon-container.ready-background { | 70 .digit-button .icon-container.ready-background { |
| 67 background: var(--paper-blue-800); | 71 background: var(--paper-blue-800); |
| (...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 107 box-sizing: border-box; | 111 box-sizing: border-box; |
| 108 font-size: 18px; | 112 font-size: 18px; |
| 109 height: 64px; | 113 height: 64px; |
| 110 left: 20px; | 114 left: 20px; |
| 111 outline: 0; | 115 outline: 0; |
| 112 padding: 28px 3px 12px 3px; | 116 padding: 28px 3px 12px 3px; |
| 113 position: relative; | 117 position: relative; |
| 114 width: 180px; | 118 width: 180px; |
| 115 } | 119 } |
| 116 | 120 |
| 121 #pin-input.submit-button-hidden { | |
| 122 border-bottom: 2px; | |
| 123 border-bottom-style: solid; | |
| 124 text-align: center; | |
| 125 width: 230px; | |
| 126 } | |
| 127 | |
| 117 #pin-input[type=number]::-webkit-inner-spin-button, | 128 #pin-input[type=number]::-webkit-inner-spin-button, |
| 118 #pin-input[type=number]::-webkit-outer-spin-button { | 129 #pin-input[type=number]::-webkit-outer-spin-button { |
| 119 -webkit-appearance: none; | 130 -webkit-appearance: none; |
| 120 margin: 0; | 131 margin: 0; |
| 121 } | 132 } |
| 122 | 133 |
| 123 /* Ensure that all children of paper-button do not consume events. This | 134 /* Ensure that all children of paper-button do not consume events. This |
| 124 * simplifies the event handler code. */ | 135 * simplifies the event handler code. */ |
| 125 paper-button * { | 136 paper-button * { |
| 126 pointer-events: none; | 137 pointer-events: none; |
| 127 } | 138 } |
| 128 </style> | 139 </style> |
| 129 | 140 |
| 130 <div id="root"> | 141 <div id="root"> |
| 131 <div id="container-constrained-width"> | 142 <div id="container-constrained-width"> |
| 132 <div class="row horizontal-center"> | 143 <div class="row horizontal-center"> |
| 133 <input id="pin-input" type="[[computeInputType_(enablePassword)]]" | 144 <input id="pin-input" type="[[computeInputType_(enablePassword)]]" |
| 134 class$="[[computeInputClass_(value)]]" | 145 class$="[[computeInputClass_(value)]] |
| 146 [[computeSubmitHiddenClass_(enableSubmitButton)]]" | |
| 135 placeholder="[[computeInputPlaceholder_(enablePassword)]]" | 147 placeholder="[[computeInputPlaceholder_(enablePassword)]]" |
| 136 value="{{value::input}}" | 148 value="{{value::input}}" |
| 137 on-keydown="onInputKeyDown_"></input> | 149 on-keydown="onInputKeyDown_"></input> |
| 138 <paper-button class="digit-button first-row submit-button" | 150 <paper-button class$="digit-button first-row submit-button |
| 151 [[computeSubmitHiddenClass_(enableSubmitButton)] ]" | |
|
jdufault
2016/07/29 19:12:13
Fix wrapping; maybe rename the compute* to get*?
sammiequon
2016/07/29 19:44:49
Done.
| |
| 139 on-tap="firePinSubmitEvent_"> | 152 on-tap="firePinSubmitEvent_"> |
| 140 <div class$="icon-container [[computeSubmitClass_(value)]]"> | 153 <div class$="icon-container [[computeSubmitClass_(value)]]"> |
| 141 <iron-icon class="icon" icon="icons:forward"><iron-icon> | 154 <iron-icon class="icon" icon="icons:forward"><iron-icon> |
| 142 </div> | 155 </div> |
| 143 </paper-button> | 156 </paper-button> |
| 144 </div> | 157 </div> |
| 145 | 158 |
| 146 <div class="row keyboard"> | 159 <div class="row keyboard"> |
| 147 <paper-button class="digit-button" on-tap="onNumberTap_" value="1"> | 160 <paper-button class="digit-button" on-tap="onNumberTap_" value="1"> |
| 148 <inner-text>$i18n{pinKeyboard1}</inner-text> | 161 <inner-text>$i18n{pinKeyboard1}</inner-text> |
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 192 <inner-text class="icon-subheading"> | 205 <inner-text class="icon-subheading"> |
| 193 $i18n{pinKeyboardClear} | 206 $i18n{pinKeyboardClear} |
| 194 </inner-text> | 207 </inner-text> |
| 195 </paper-button> | 208 </paper-button> |
| 196 </div> | 209 </div> |
| 197 </div> | 210 </div> |
| 198 </div> | 211 </div> |
| 199 </template> | 212 </template> |
| 200 <script src="pin_keyboard.js"></script> | 213 <script src="pin_keyboard.js"></script> |
| 201 </dom-module> | 214 </dom-module> |
| OLD | NEW |