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/polymer/v1_0/paper-button/paper-butt on.html"> | 5 <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-icon-button/paper -icon-button.html"> | 6 <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-styles/paper-styl es.html"> | 7 <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/iron-icons/iron-icons.h tml"> | 8 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h tml"> |
| 9 | 9 |
| 10 <dom-module id="pin-keyboard"> | 10 <dom-module id="pin-keyboard"> |
| 11 <template> | 11 <template> |
| 12 <style> | 12 <style> |
| 13 #root { | 13 #root { |
| 14 direction: ltr; | |
| 14 display: flex; | 15 display: flex; |
| 15 } | 16 } |
| 16 | 17 |
| 17 .row { | 18 .row { |
| 18 display: flex; | 19 display: flex; |
| 19 } | 20 } |
| 20 | 21 |
| 21 .row.horizontal-center { | 22 .row.horizontal-center { |
| 22 justify-content: center; | 23 justify-content: center; |
| 23 } | 24 } |
| (...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 96 /* Ensure that all children of paper-button do not consume events. This | 97 /* Ensure that all children of paper-button do not consume events. This |
| 97 * simplifies the event handler code. */ | 98 * simplifies the event handler code. */ |
| 98 paper-button * { | 99 paper-button * { |
| 99 pointer-events: none; | 100 pointer-events: none; |
| 100 } | 101 } |
| 101 </style> | 102 </style> |
| 102 | 103 |
| 103 <div id="root"> | 104 <div id="root"> |
| 104 <div id="container-constrained-width"> | 105 <div id="container-constrained-width"> |
| 105 <div class="row horizontal-center"> | 106 <div class="row horizontal-center"> |
| 106 <input id="pin-input" type="number" placeholder="Enter PIN" | 107 <input id="pin-input" type="number" |
| 107 value="{{value::input}}" | 108 value="{{value::input}}" |
| 109 placeholder="$i18n{pinPlaceholder}" | |
|
jdufault
2016/06/28 18:38:47
Move this up or down a line so that the value/on-k
sammiequon
2016/06/28 20:59:31
Done.
| |
| 108 on-keydown="onInputKeyDown_"></input> | 110 on-keydown="onInputKeyDown_"></input> |
| 109 <div class="digit-button first-row"> | 111 <div class="digit-button first-row"> |
| 110 <paper-button class="digit-button submit-button" | 112 <paper-button class="digit-button submit-button" |
| 111 on-tap="firePinSubmitEvent_"> | 113 on-tap="firePinSubmitEvent_"> |
| 112 <div class="icon-container"> | 114 <div class="icon-container"> |
| 113 <iron-icon class="icon" icon="icons:forward"><iron-icon> | 115 <iron-icon class="icon" icon="icons:forward"><iron-icon> |
| 114 </div> | 116 </div> |
| 115 </paper-button> | 117 </paper-button> |
| 116 </div> | 118 </div> |
| 117 </div> | 119 </div> |
| 118 | 120 |
| 119 <div class="row keyboard"> | 121 <div class="row keyboard"> |
| 120 <paper-button class="digit-button" on-tap="onNumberTap_" value="1"> | 122 <paper-button class="digit-button" on-tap="onNumberTap_" value="1"> |
| 121 <inner-text>1</inner-text> | 123 <inner-text>$i18n{pinKeyboard1}</inner-text> |
| 122 </paper-button> | 124 </paper-button> |
| 123 <paper-button class="digit-button" on-tap="onNumberTap_" value="2"> | 125 <paper-button class="digit-button" on-tap="onNumberTap_" value="2"> |
| 124 <inner-text>2</inner-text> | 126 <inner-text>$i18n{pinKeyboard2}</inner-text> |
| 125 </paper-button> | 127 </paper-button> |
| 126 <paper-button class="digit-button" on-tap="onNumberTap_" value="3"> | 128 <paper-button class="digit-button" on-tap="onNumberTap_" value="3"> |
| 127 <inner-text>3</inner-text> | 129 <inner-text>$i18n{pinKeyboard3}</inner-text> |
| 128 </paper-button> | 130 </paper-button> |
| 129 </div> | 131 </div> |
| 130 <div class="row keyboard"> | 132 <div class="row keyboard"> |
| 131 <paper-button class="digit-button" on-tap="onNumberTap_" value="4"> | 133 <paper-button class="digit-button" on-tap="onNumberTap_" value="4"> |
| 132 <inner-text>4</inner-text> | 134 <inner-text>$i18n{pinKeyboard4}</inner-text> |
| 133 </paper-button> | 135 </paper-button> |
| 134 <paper-button class="digit-button" on-tap="onNumberTap_" value="5"> | 136 <paper-button class="digit-button" on-tap="onNumberTap_" value="5"> |
| 135 <inner-text>5</inner-text> | 137 <inner-text>$i18n{pinKeyboard5}</inner-text> |
| 136 </paper-button> | 138 </paper-button> |
| 137 <paper-button class="digit-button" on-tap="onNumberTap_" value="6"> | 139 <paper-button class="digit-button" on-tap="onNumberTap_" value="6"> |
| 138 <inner-text>6</inner-text> | 140 <inner-text>$i18n{pinKeyboard6}</inner-text> |
| 139 </paper-button> | 141 </paper-button> |
| 140 </div> | 142 </div> |
| 141 <div class="row keyboard"> | 143 <div class="row keyboard"> |
| 142 <paper-button class="digit-button" on-tap="onNumberTap_" value="7"> | 144 <paper-button class="digit-button" on-tap="onNumberTap_" value="7"> |
| 143 <inner-text>7</inner-text> | 145 <inner-text>$i18n{pinKeyboard7}</inner-text> |
| 144 </paper-button> | 146 </paper-button> |
| 145 <paper-button class="digit-button" on-tap="onNumberTap_" value="8"> | 147 <paper-button class="digit-button" on-tap="onNumberTap_" value="8"> |
| 146 <inner-text>8</inner-text> | 148 <inner-text>$i18n{pinKeyboard8}</inner-text> |
| 147 </paper-button> | 149 </paper-button> |
| 148 <paper-button class="digit-button" on-tap="onNumberTap_" value="9"> | 150 <paper-button class="digit-button" on-tap="onNumberTap_" value="9"> |
| 149 <inner-text>9</inner-text> | 151 <inner-text>$i18n{pinKeyboard9}</inner-text> |
| 150 </paper-button> | 152 </paper-button> |
| 151 </div> | 153 </div> |
| 152 <div class="row keyboard"> | 154 <div class="row keyboard"> |
| 153 <div class="digit-button"></div> | 155 <div class="digit-button"></div> |
| 154 <paper-button class="digit-button" on-tap="onNumberTap_" value="0"> | 156 <paper-button class="digit-button" on-tap="onNumberTap_" value="0"> |
| 155 <inner-text>0</inner-text> | 157 <inner-text>$i18n{pinKeyboard0}</inner-text> |
| 156 </paper-button> | 158 </paper-button> |
| 157 <paper-button class="digit-button clear-button" on-tap="onPinClear_"> | 159 <paper-button class="digit-button clear-button" on-tap="onPinClear_"> |
| 158 <div class="icon-container"> | 160 <div class="icon-container"> |
| 159 <iron-icon class="icon" icon="icons:clear"><iron-icon> | 161 <iron-icon class="icon" icon="icons:clear"><iron-icon> |
| 160 </div> | 162 </div> |
| 161 <inner-text class="icon-subheading">Clear</inner-text> | 163 <inner-text class="icon-subheading">$i18n{pinClear}</inner-text> |
| 162 </paper-button> | 164 </paper-button> |
| 163 </div> | 165 </div> |
| 164 </div> | 166 </div> |
| 165 </div> | 167 </div> |
| 166 </template> | 168 </template> |
| 167 <script src="pin_keyboard.js"></script> | 169 <script src="pin_keyboard.js"></script> |
| 168 </dom-module> | 170 </dom-module> |
| OLD | NEW |