Chromium Code Reviews| Index: chrome/browser/resources/chromeos/login/controller-pairing-screen.html |
| diff --git a/chrome/browser/resources/chromeos/login/controller-pairing-screen.html b/chrome/browser/resources/chromeos/login/controller-pairing-screen.html |
| index 57e7859f7cd959a70114cd54416ad49bab2db8e8..a31686d188d01d6b6ff9b42360477f70fb62d758 100644 |
| --- a/chrome/browser/resources/chromeos/login/controller-pairing-screen.html |
| +++ b/chrome/browser/resources/chromeos/login/controller-pairing-screen.html |
| @@ -1,11 +1,22 @@ |
| -<link rel="import" href="chrome://resources/polymer/core-animated-pages/core-animated-pages.html"> |
| -<link rel="import" href="chrome://resources/polymer/core-iconset-svg/core-iconset-svg.html"> |
| -<link rel="import" href="chrome://resources/polymer/core-item/core-item.html"> |
| -<link rel="import" href="chrome://resources/polymer/core-selector/core-selector.html"> |
| -<link rel="import" href="chrome://resources/polymer/paper-button/paper-button.html"> |
| -<link rel="import" href="chrome://resources/polymer/paper-progress/paper-progress.html"> |
| -<link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html"> |
| -<link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> |
| +<!-- Copyright 2015 The Chromium Authors. All rights reserved. |
| + Use of this source code is governed by a BSD-style license that can be |
| + found in the LICENSE file. --> |
| + |
| +<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/hero-animation.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-shared-element-animatable-behavior.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-icon-item.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/paper-material/paper-material.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
| <!-- |
| List of devices. |
| @@ -16,33 +27,31 @@ Published properties: |
| * connecting - a binary attribute. If set, the list does not respond to the |
| user actions and a spinner is shown near selected device. |
| --> |
| -<polymer-element name="pairing-device-list" |
| - attributes="devices selected connecting"> |
| +<dom-module name="pairing-device-list"> |
| + <link rel="stylesheet" href="pairing_device_list.css"> |
|
michaelpg
2015/06/22 20:39:24
This imports the stylesheet as a regular styleshee
dzhioev (left Google)
2015/06/22 21:17:44
I know that. However all CSS imports in OOBE are i
michaelpg
2015/06/23 21:46:39
My bad, I remember that now. Thanks!
|
| + |
| + <iron-iconset-svg name="pairing-device-list-icons"> |
| + <svg><defs><g id="circle"> |
| + <circle cx="12" cy="12" r="12"></circle> |
| + </g></defs></svg> |
| + </iron-iconset-svg> |
| + |
| <template> |
| - <link rel="stylesheet" href="pairing_device_list.css"> |
| - |
| - <core-iconset-svg id="icon" iconSize="24"> |
| - <svg><defs><g id="circle"> |
| - <circle cx="12" cy="12" r="12"></circle> |
| - </g></defs></svg> |
| - </core-iconset-svg> |
| - |
| - <core-selector selected="{{selected}}"> |
| - <template repeat="{{device in devices}}"> |
| - <!-- TODO(dzhioev): replace 'core-item' with 'paper-item'. |
| - http://crbug.com/423368 --> |
| - <core-item name="{{device}}" relative> |
| - <core-icon icon="icon:circle" |
| - style="color: {{device | colorByName}}"></core-icon> |
| - <div>{{device}}</div> |
| - <div flex horizontal end-justified layout center> |
| + <iron-selector selected="{{selected}}" attr-for-selected="name"> |
| + <template is="dom-repeat" items="[[devices]]"> |
| + <paper-icon-item name$="[[item]]" class="relative"> |
| + <iron-icon icon="pairing-device-list-icons:circle" item-icon |
| + style$="[[getStyleForDeviceIcon_(item)]]"> |
| + </iron-icon> |
| + <div><span>[[item]]</span></div> |
| + <div class="flex horizontal end-justified layout center"> |
| <div class="throbber"></div> |
| </div> |
| - </core-item> |
| + </paper-icon-item> |
| </template> |
| - </core-selector> |
| + </iron-selector> |
| </template> |
| -</polymer-element> |
| +</dom-module> |
| <!-- |
| Single page of the controller's out-of-box flow. |
| @@ -66,25 +75,25 @@ controller-pairing-page::shadow #top { |
| height: 100px; |
| } |
| --> |
| -<polymer-element name="controller-pairing-page" noscript> |
| - <template> |
| - <link rel="stylesheet" href="controller_pairing_page.css"> |
| +<dom-module name="controller-pairing-page"> |
| + <link rel="stylesheet" href="controller_pairing_page.css"> |
| - <div vertical layout fit> |
| - <div id="top" hero hero-id="top" relative vertical end-justified layout> |
| - <content select=".title"></content> |
| + <template> |
| + <div class="vertical layout fit"> |
| + <div id="top" class="relative vertical end-justified layout"> |
| + <div id="title"> |
| + <content select=".title"></content> |
| + </div> |
| <div id="separator"> |
| - <indeterminate-progress fill runnerColor="white" |
| - backgroundColor="#87ceac" runnerPortion="40"> |
| - </indeterminate-progress> |
| + <paper-progress indeterminate></paper-progress> |
| </div> |
| </div> |
| - <div id="bottom" hero hero-id="bottom" flex vertical layout> |
| - <div flex vertical layout> |
| + <div id="bottom" class="flex vertical layout"> |
| + <div class="flex vertical layout"> |
| <content select=":not(paper-button)"></content> |
| </div> |
| - <div id="controls" horizontal layout center> |
| - <div flex> |
| + <div id="controls" class="horizontal layout center"> |
| + <div class="flex"> |
| <content select="paper-button.help-button"></content> |
| </div> |
| <content select="paper-button"></content> |
| @@ -92,129 +101,162 @@ controller-pairing-page::shadow #top { |
| </div> |
| </div> |
| </template> |
| -</polymer-element> |
| +</dom-module> |
| + |
| +<dom-module name="controller-pairing-screen"> |
| + <link rel="stylesheet" href="oobe_screen_controller_pairing.css"> |
| -<polymer-element name="controller-pairing-screen" extends="oobe-screen"> |
| <template> |
| - <link rel="stylesheet" href="oobe_screen_controller_pairing.css"> |
| - |
| - <template id="help-button"> |
| - <paper-button class="help-button" on-tap="{{helpButtonClicked}}"> |
| - {{'helpBtn' | i18n}} |
| - </paper-button> |
| - </template> |
| - |
| - <template id="progress"> |
| - <indeterminate-progress runnerColor="#0f9d58" backgroundColor="#87ceac" |
| - runnerPortion="23"></indeterminate-progress> |
| - </template> |
| - |
| - <paper-shadow z="1" fit> |
| - <core-animated-pages transitions="cross-fade-all hero-transition" |
| - selected="{{C.page}}" fit> |
| - <controller-pairing-page name="devices-discovery" class="big-font"> |
| - <div class="title">{{'welcomeTitle' | i18n}}</div> |
| - <div>{{'searching' | i18n}}</div> |
| - <template bind ref="help-button"></template> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="device-select" class="split"> |
| - <div class="title">{{'selectTitle' | i18n}}</div> |
| - <pairing-device-list devices="{{C.devices}}" |
| - selected="{{selectedDevice}}"></pairing-device-list> |
| - <template bind ref="help-button"></template> |
| - <paper-button on-tap="{{userActed}}" action="chooseDevice" |
| - disabled?="{{C.controlsDisabled}}"> |
| - {{'connectBtn' | i18n}} |
| - </paper-button> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="device-not-found"> |
| - <div class="title">{{'troubleConnectingTitle' | i18n}}</div> |
| - <div>{{'connectingAdvice' | i18n}}</div> |
| - <paper-button on-tap="{{userActed}}" action="repeatDiscovery"> |
| - {{'adviceGotItBtn' | i18n}} |
| - </paper-button> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="establishing-connection" class="split"> |
| - <div class="title">{{'selectTitle' | i18n}}</div> |
| - <pairing-device-list devices="{{C.devices}}" |
| - selected="{{selectedDevice}}" connecting></pairing-device-list> |
| - <template bind ref="help-button"></template> |
| - <paper-button disabled>{{'connecting' | i18n}}</paper-button> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="establishing-connection-error"> |
| - <!-- TODO(dzhioev): Strings TBD. http://crbug.com/423740 --> |
| - <div class="title">Unable to connect to {{selectedDevice}}</div> |
| - <paper-button on-tap="{{userActed}}" action="repeatDiscovery"> |
| - Repeat discovery |
| - </paper-button> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="code-confirmation" class="split"> |
| - <div class="title">{{'confirmationTitle' | i18n}}</div> |
| - <div>{{'confirmationQuestion' | i18n}}</div> |
| - <div id="code">{{C.code}}</div> |
| - <paper-button on-tap="{{userActed}}" action="rejectCode" |
| - disabled?="{{C.controlsDisabled}}"> |
| - {{'rejectCodeBtn' | i18n}} |
| - </paper-button> |
| - <paper-button on-tap="{{userActed}}" action="acceptCode" |
| - disabled?="{{C.controlsDisabled}}"> |
| - {{'acceptCodeBtn' | i18n}} |
| - </paper-button> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="host-update" class="split"> |
| - <div class="title">{{'updateTitle' | i18n}}</div> |
| - <div>{{'updateText' | i18n}}</div> |
| - <template bind ref="progress"></template> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="host-connection-lost" class="split"> |
| - <div class="title">{{'connectionLostTitle' | i18n}}</div> |
| - <div>{{'connectionLostText' | i18n}}</div> |
| - <template bind ref="progress"></template> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="enrollment-introduction" class="split"> |
| - <div class="title">{{'enrollTitle' | i18n}}</div> |
| - <p>{{'enrollText1' | i18n}}</p> |
| - <p><strong>{{'enrollText2' | i18n}}</strong></p> |
| - <paper-button on-click="{{userActed}}" action="proceedToAuthentication" |
| - disabled?="{{C.controlsDisabled}}"> |
| - {{'continueBtn' | i18n}} |
| - </paper-button> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="authentication" class="split"> |
| - <div class="title">{{'enrollTitle' | i18n}}</div> |
| - <div>Not implemented.</div> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="host-enrollment" class="progress"> |
| - <!-- 'enrollmentTitle' contains <strong> tag. --> |
| - <html-echo class="title" |
| - content="{{['enrollmentInProgress', C.enrollmentDomain] | i18n}}"> |
| - </html-echo> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="host-enrollment-error" class="progress"> |
| - <div class="title">{{'enrollmentErrorTitle' | i18n}}</div> |
| - <div>{{'enrollmentErrorHostRestarts' | i18n}}</div> |
| - </controller-pairing-page> |
| - |
| - <controller-pairing-page name="pairing-done" class="big-font"> |
| - <div class="title">{{'successTitle' | i18n}}</div> |
| - <div>{{['successText', selectedDevice] | i18n}}</div> |
| - <paper-button on-click="{{userActed}}" action="startSession" |
| - disabled?="{{C.controlsDisabled}}"> |
| - {{'continueToHangoutsBtn' | i18n}} |
| - </paper-button> |
| - </controller-pairing-page> |
| - </core-animated-pages> |
| - </paper-shadow> |
| + <paper-material class="fit"> |
| + <neon-animated-pages id="pages" selected="{{C.page}}" |
| + attr-for-selected="name" class="fit"> |
| + <controller-pairing-page name="devices-discovery" class="big-font"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_welcomeTitle"> |
| + </div> |
| + <div i18n-content="login_ControllerPairingScreen_searching"></div> |
| + <paper-button class="help-button" on-tap="helpButtonClicked_" |
| + i18n-content="login_ControllerPairingScreen_helpBtn"> |
| + </paper-button> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="device-select" class="split"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_selectTitle"> |
| + </div> |
| + <pairing-device-list devices="[[C.devices]]" |
| + selected="{{selectedDevice}}"> |
| + </pairing-device-list> |
| + <paper-button class="help-button" on-tap="helpButtonClicked_" |
| + i18n-content="login_ControllerPairingScreen_helpBtn"> |
| + </paper-button> |
| + <paper-button on-tap="userActed" action="chooseDevice" |
| + disabled$="[[C.controlsDisabled]]" |
| + i18n-content="login_ControllerPairingScreen_connectBtn"> |
| + </paper-button> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="device-not-found"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_troubleConnectingTitle"> |
| + </div> |
| + <div i18n-content="login_ControllerPairingScreen_connectingAdvice"> |
| + </div> |
| + <paper-button on-tap="userActed" action="repeatDiscovery" |
| + i18n-content="login_ControllerPairingScreen_adviceGotItBtn"> |
| + </paper-button> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="establishing-connection" class="split"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_selectTitle"> |
| + </div> |
| + <pairing-device-list devices="[[C.devices]]" |
| + selected="{{selectedDevice}}" connecting> |
| + </pairing-device-list> |
| + <paper-button class="help-button" on-tap="helpButtonClicked_" |
| + i18n-content="login_ControllerPairingScreen_helpBtn"> |
| + </paper-button> |
| + <paper-button disabled |
| + i18n-content="login_ControllerPairingScreen_connecting"> |
| + </paper-button> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="establishing-connection-error"> |
| + <!-- TODO(dzhioev): Strings TBD. http://crbug.com/423740 --> |
| + <div class="title"> |
| + Unable to connect to <span>[[selectedDevice]]<span> |
| + </div> |
| + <paper-button on-tap="userActed" action="repeatDiscovery"> |
| + Repeat discovery |
| + </paper-button> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="code-confirmation" class="split"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_confirmationTitle"> |
| + </div> |
| + <div |
| + i18n-content="login_ControllerPairingScreen_confirmationQuestion"> |
| + </div> |
| + <div id="code"><span>[[C.code]]</span></div> |
| + <paper-button on-tap="userActed" action="rejectCode" |
| + disabled$="[[C.controlsDisabled]" |
| + i18n-content="login_ControllerPairingScreen_rejectCodeBtn"> |
| + </paper-button> |
| + <paper-button on-tap="userActed" action="acceptCode" |
| + disabled$="[[C.controlsDisabled]]" |
| + i18n-content="login_ControllerPairingScreen_acceptCodeBtn"> |
| + </paper-button> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="host-update" class="split"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_updateTitle"> |
| + </div> |
| + <div i18n-content="login_ControllerPairingScreen_updateText"></div> |
| + <paper-progress indeterminate></paper-progress> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="host-connection-lost" class="split"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_connectionLostTitle"> |
| + </div> |
| + <div i18n-content="login_ControllerPairingScreen_connectionLostText"> |
| + </div> |
| + <paper-progress indeterminate></paper-progress> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="enrollment-introduction" class="split"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_enrollTitle"> |
| + </div> |
| + <p i18n-content="login_ControllerPairingScreen_enrollText1"></p> |
| + <p> |
| + <strong i18n-content="login_ControllerPairingScreen_enrollText2"> |
| + </strong> |
| + </p> |
| + <paper-button on-tap="userActed" action="proceedToAuthentication" |
| + disabled$="[[C.controlsDisabled]]" |
| + i18n-content="login_ControllerPairingScreen_continueBtn"> |
| + </paper-button> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="authentication" class="split"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_enrollTitle"> |
| + </div> |
| + <div>Not implemented.</div> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="host-enrollment" class="progress"> |
| + <!-- This title contains <strong> tag inside. --> |
| + <html-echo class="title" |
| + content="[[getHostEnrollmentStepTitle_(C.enrollmentDomain)]]"> |
| + </html-echo> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="host-enrollment-error" class="progress"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_enrollmentErrorTitle"> |
| + </div> |
| + <div |
| + i18n-content="login_ControllerPairingScreen_enrollmentErrorHostRestarts"> |
| + </div> |
| + </controller-pairing-page> |
| + |
| + <controller-pairing-page name="pairing-done" class="big-font"> |
| + <div class="title" |
| + i18n-content="login_ControllerPairingScreen_successTitle"> |
| + </div> |
| + <div><span>[[getSuccessMessage_(selectedDevice)]]</div> |
| + <paper-button on-tap="userActed" action="startSession" |
| + disabled$="{{C.controlsDisabled}}" |
| + i18n-content="login_ControllerPairingScreen_continueToHangoutsBtn"> |
| + </paper-button> |
| + </controller-pairing-page> |
| + </neon-animated-pages> |
| + </paper-material> |
| </template> |
| -</polymer-element> |
| +</dom-module> |
| + |