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> |
+ |