Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1600)

Unified Diff: chrome/browser/resources/chromeos/login/controller-pairing-screen.html

Issue 1179323005: Polymer upgraded to 1.0 in login flow. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@polymer_pre_migration
Patch Set: Comments addressed. Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>
+

Powered by Google App Engine
This is Rietveld 408576698