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 |