Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <link rel="import" href="chrome://oobe/custom_elements.html"> | |
| 2 <link rel="import" href="chrome://resources/polymer/core-animated-pages/core-ani mated-pages.html"> | |
| 3 <link rel="import" href="chrome://resources/polymer/core-iconset-svg/core-iconse t-svg.html"> | |
| 4 <link rel="import" href="chrome://resources/polymer/core-item/core-item.html"> | |
| 5 <link rel="import" href="chrome://resources/polymer/core-selector/core-selector. html"> | |
| 6 <link rel="import" href="chrome://resources/polymer/paper-button/paper-button.ht ml"> | |
| 7 <link rel="import" href="chrome://resources/polymer/paper-progress/paper-progres s.html"> | |
| 8 <link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.ht ml"> | |
| 9 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> | |
| 10 | |
| 11 <!-- | |
| 12 List of devices. | |
| 13 Published properties: | |
| 14 * devices - array of strings, the model of the list. | |
| 15 * selected - a name of the selected device ('null' if no devices are | |
| 16 selected). | |
| 17 * connecting - a binary attribute. If set, the list does not respond to the | |
| 18 user actions and a spinner is shown near selected device. | |
| 19 --> | |
| 20 <polymer-element name="pairing-device-list" | |
| 21 attributes="devices selected connecting"> | |
| 22 <template> | |
| 23 <link rel="stylesheet" href="pairing_device_list.css"> | |
| 24 | |
| 25 <core-iconset-svg id="icon" iconSize="24"> | |
| 26 <svg><defs><g id="circle"> | |
| 27 <circle cx="12" cy="12" r="12"></circle> | |
| 28 </g></defs></svg> | |
| 29 </core-iconset-svg> | |
| 30 | |
| 31 <core-selector selected="{{selected}}"> | |
| 32 <template repeat="{{device in devices}}"> | |
| 33 <!-- TODO(dzhioev): replace 'core-item' with 'paper-item'. | |
| 34 http://crbug.com/423368 --> | |
| 35 <core-item name="{{device}}" relative> | |
| 36 <core-icon icon="icon:circle" | |
| 37 style="color: {{device | colorByName}}"></core-icon> | |
| 38 <div>{{device}}</div> | |
| 39 <div flex horizontal end-justified layout center> | |
| 40 <div class="throbber"></div> | |
| 41 </div> | |
| 42 </core-item> | |
| 43 </template> | |
| 44 </core-selector> | |
| 45 </template> | |
| 46 </polymer-element> | |
| 47 | |
| 48 <!-- | |
| 49 Single page of the controller's out-of-box flow. | |
| 50 The page consists of the top part and the bottom part. | |
| 51 The top part contains a title of the page. Direct successors of the | |
| 52 <controller-pairing-page> having 'title' class will be inserted there. | |
| 53 The bottom part contains controls that are aligned right (all the successors | |
| 54 that are <paper-button>s) and a content of the page (all the other successors). | |
| 55 Special case is a help button (<paper-button> with 'help' class set) which | |
| 56 is aligned left. | |
| 57 There are several classes that can be used to change the page appearance: | |
| 58 * split - if this class is set, top and bottom parts will have different | |
| 59 colors. | |
| 60 * big-font - if this class is set, slightly bigger font is used on page. | |
| 61 * progress - if this class is set and 'split' is not, progress bar is shown | |
| 62 instead of top and bottom parts separator. | |
| 63 | |
| 64 Also height of the top part can be specified in CSS as follows: | |
| 65 | |
| 66 controller-pairing-page::shadow #top { | |
| 67 height: 100px; | |
| 68 } | |
| 69 --> | |
| 70 <polymer-element name="controller-pairing-page" noscript> | |
| 71 <template> | |
| 72 <link rel="stylesheet" href="controller_pairing_page.css"> | |
| 73 | |
| 74 <div vertical layout fit> | |
| 75 <div id="top" hero hero-id="top" relative vertical end-justified layout> | |
| 76 <content select=".title"></content> | |
| 77 <div id="separator"> | |
| 78 <indeterminate-progress fill runnerColor="white" | |
| 79 backgroundColor="#87ceac" runnerPortion="40"> | |
| 80 </indeterminate-progress> | |
| 81 </div> | |
| 82 </div> | |
| 83 <div id="bottom" hero hero-id="bottom" flex vertical layout> | |
| 84 <div flex vertical layout> | |
| 85 <content select=":not(paper-button)"></content> | |
| 86 </div> | |
| 87 <div id="controls" horizontal layout center> | |
| 88 <div flex> | |
| 89 <content select="paper-button.help-button"></content> | |
| 90 </div> | |
| 91 <content select="paper-button"></content> | |
| 92 </div> | |
| 93 </div> | |
| 94 </div> | |
| 95 </template> | |
| 96 </polymer-element> | |
| 97 | |
| 98 <polymer-element name="controller-pairing-screen" extends="oobe-screen"> | |
| 99 <template> | |
| 100 <link rel="stylesheet" href="oobe_screen_controller_pairing.css"> | |
| 101 | |
| 102 <template id="help-button"> | |
| 103 <paper-button class="help-button" on-tap="{{helpButtonClicked}}" | |
| 104 label="{{'helpBtn' | i18n}}"></paper-button> | |
| 105 </template> | |
| 106 | |
| 107 <template id="progress"> | |
| 108 <indeterminate-progress runnerColor="#0f9d58" backgroundColor="#87ceac" | |
| 109 runnerPortion="23"></indeterminate-progress> | |
| 110 </template> | |
| 111 | |
| 112 <paper-shadow z="1"></paper-shadow> | |
| 113 | |
| 114 <core-animated-pages transitions="cross-fade-all hero-transition" | |
| 115 selected="{{C.page}}"> | |
| 116 <controller-pairing-page name="devices-discovery" class="big-font"> | |
| 117 <div class="title">{{'welcomeTitle' | i18n}}</div> | |
| 118 <div>{{'searching' | i18n}}</div> | |
| 119 <template bind ref="help-button"></template> | |
| 120 </controller-pairing-page> | |
| 121 | |
| 122 <controller-pairing-page name="device-select" class="split"> | |
| 123 <div class="title">{{'selectTitle' | i18n}}</div> | |
| 124 <pairing-device-list devices="{{C.devices}}" | |
| 125 selected="{{selectedDevice}}"></pairing-device-list> | |
| 126 <template bind ref="help-button"></template> | |
| 127 <paper-button label="{{'connectBtn' | i18n}}" on-tap="{{userActed}}" | |
| 128 action="chooseDevice" disabled?="{{C.controlsDisabled}}"> | |
| 129 </paper-button> | |
| 130 </controller-pairing-page> | |
| 131 | |
| 132 <controller-pairing-page name="device-not-found"> | |
| 133 <div class="title">{{'troubleConnectingTitle' | i18n}}</div> | |
| 134 <div>{{'connectingAdvice' | i18n}}</div> | |
| 135 <paper-button label="{{'adviceGotItBtn' | i18n}}" on-tap="{{userActed}}" | |
| 136 action="repeatDiscovery"> | |
| 137 </paper-button> | |
| 138 </controller-pairing-page> | |
| 139 | |
| 140 <controller-pairing-page name="establishing-connection" class="split"> | |
| 141 <div class="title">{{'selectTitle' | i18n}}</div> | |
| 142 <pairing-device-list devices="{{C.devices}}" | |
| 143 selected="{{selectedDevice}}" connecting></pairing-device-list> | |
| 144 <template bind ref="help-button"></template> | |
| 145 <paper-button label="{{'connecting' | i18n}}" disabled></paper-button> | |
| 146 </controller-pairing-page> | |
| 147 | |
| 148 <controller-pairing-page name="establishing-connection-error"> | |
| 149 <!-- TODO(dzhioev): Strings TBD. http://crbug.com/423740 --> | |
| 150 <div class="title">Unable to connect to {{selectedDevice}}</div> | |
| 151 <paper-button on-tap="{{userActed}}" action="repeatDiscovery" | |
| 152 label="Repeat discovery"></paper-button> | |
| 153 </button> | |
| 154 </controller-pairing-page> | |
| 155 | |
| 156 <controller-pairing-page name="code-confirmation" class="split"> | |
| 157 <div class="title">{{'confirmationTitle' | i18n}}</div> | |
| 158 <div>{{'confirmationQuestion' | i18n}}</div> | |
| 159 <div id="code">{{C.code}}</div> | |
| 160 <paper-button label="{{'rejectCodeBtn' | i18n}}" on-tap="{{userActed}}" | |
| 161 action="rejectCode" disabled?="{{C.controlsDisabled}}"> | |
| 162 </paper-button> | |
| 163 <paper-button label="{{'acceptCodeBtn' | i18n}}" on-tap="{{userActed}}" | |
| 164 action="acceptCode" disabled?="{{C.controlsDisabled}}"> | |
| 165 </paper-button> | |
| 166 </controller-pairing-page> | |
| 167 | |
| 168 <controller-pairing-page name="host-update" class="split"> | |
| 169 <div class="title">{{'updateTitle' | i18n}}</div> | |
| 170 <div>{{'updateText' | i18n}}</div> | |
| 171 <template bind ref="progress"></template> | |
| 172 </controller-pairing-page> | |
| 173 | |
| 174 <controller-pairing-page name="host-connection-lost" class="split"> | |
| 175 <div class="title">{{'connectionLostTitle' | i18n}}</div> | |
| 176 <div>{{'connectionLostText' | i18n}}</div> | |
| 177 <template bind ref="progress"></template> | |
| 178 </controller-pairing-page> | |
| 179 | |
| 180 <controller-pairing-page name="enrollment-introduction" class="split"> | |
| 181 <div class="title">{{'enrollTitle' | i18n}}</div> | |
| 182 <p>{{'enrollText1' | i18n}}</p> | |
| 183 <p><strong>{{'enrollText2' | i18n}}</strong></p> | |
| 184 <paper-button label="{{'continueBtn' | i18n}}" on-click="{{userActed}}" | |
| 185 action="proceedToAuthentication" disabled?="{{C.controlsDisabled}}"> | |
| 186 </paper-button> | |
| 187 </controller-pairing-page> | |
| 188 | |
| 189 <controller-pairing-page name="authentication" class="split"> | |
| 190 <div class="title">{{'enrollTitle' | i18n}}</div> | |
| 191 <iframe id="gaiaFrame" frameBorder="0" scrolling="no" class="gaia-frame" | |
| 192 flex self-center></iframe> | |
| 193 </controller-pairing-page> | |
| 194 | |
| 195 <controller-pairing-page name="host-enrollment" class="progress"> | |
| 196 <!-- 'enrollmentTitle' contains <strong> tag. --> | |
| 197 <html-echo class="title" | |
| 198 content="{{['enrollmentInProgress', C.enrollmentDomain] | i18n}}"> | |
| 199 </html-echo> | |
| 200 </controller-pairing-page> | |
| 201 | |
| 202 <controller-pairing-page name="host-enrollment-error" class="progress"> | |
| 203 <div class="title">{{'enrollmentErrorTitle' | i18n}}</div> | |
| 204 <div>{{'enrollmentErrorHostRestarts' | i18n}}</div> | |
| 205 </controller-pairing-page> | |
| 206 | |
| 207 <controller-pairing-page name="pairing-done" class="big-font"> | |
| 208 <div class="title">{{'successTitle' | i18n}}</div> | |
| 209 <div>{{['successText', selectedDevice] | i18n}}</div> | |
| 210 <paper-button label="{{'continueToHangoutsBtn' | i18n}}" | |
| 211 on-click="{{userActed}}" action="startSession" | |
| 212 disabled?="{{C.controlsDisabled}}"> | |
| 213 </paper-button> | |
| 214 </controller-pairing-page> | |
| 215 </core-animated-pages> | |
| 216 </template> | |
| 217 </polymer-element> | |
| 218 | |
| 219 <div class="step hidden no-logo" id="controller-pairing" hidden> | 1 <div class="step hidden no-logo" id="controller-pairing" hidden> |
| 220 <controller-pairing-screen name="ControllerPairingScreen"> | 2 <controller-pairing-screen name="ControllerPairingScreen"> |
| 221 </controller-pairing-screen> | 3 </controller-pairing-screen> |
| 222 </div> | 4 </div> |
| 223 | 5 |
|
ygorshenin1
2014/12/22 16:48:58
nit: could you please remove blank line #5?
dzhioev (left Google)
2014/12/22 17:48:33
Done.
| |
| OLD | NEW |