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

   1 <!-- Copyright 2015 The Chromium Authors. All rights reserved.
   2      Use of this source code is governed by a BSD-style license that can be
   3      found in the LICENSE file. -->
   4
   5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
   6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
   7 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
   8 <link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
   9 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
  10 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html">
  11 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/hero-animation.html">
  12 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html">
  13 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-shared-element-animatable-behavior.html">
  14 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
  15 <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-icon-item.html">
  16 <link rel="import" href="chrome://resources/polymer/v1_0/paper-material/paper-material.html">
  17 <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
  18 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
  19 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
  20
  21 <!--
  22 List of devices.
  23 Published properties:
  24   * devices - array of strings, the model of the list.
  25   * selected - a name of the selected device ('null' if no devices are
  26     selected).
  27   * connecting - a binary attribute. If set, the list does not respond to the
  28     user actions and a spinner is shown near selected device.
  29 -->
  30 <dom-module name="pairing-device-list">
  31   <link rel="stylesheet" href="pairing_device_list.css">
  32
  33   <iron-iconset-svg name="pairing-device-list-icons">
  34     <svg><defs><g id="circle">
  35       <circle cx="12" cy="12" r="12"></circle>
  36     </g></defs></svg>
  37   </iron-iconset-svg>
  38
  39   <template>
  40     <iron-selector selected="{{selected}}" attr-for-selected="name">
  41       <template is="dom-repeat" items="[[devices]]">
  42         <paper-icon-item name$="[[item]]" class="relative">
  43           <iron-icon icon="pairing-device-list-icons:circle" item-icon
  44               style$="[[getStyleForDeviceIcon_(item)]]">
  45           </iron-icon>
  46           <div><span>[[item]]</span></div>
  47           <div class="flex horizontal end-justified layout center">
  48             <div class="throbber"></div>
  49           </div>
  50         </paper-icon-item>
  51       </template>
  52     </iron-selector>
  53   </template>
  54 </dom-module>
  55
  56 <!--
  57 Single page of the controller's out-of-box flow.
  58 The page consists of the top part and the bottom part.
  59 The top part contains a title of the page. Direct successors of the
  60 <controller-pairing-page> having 'title' class will be inserted there.
  61 The bottom part contains controls that are aligned right  (all the successors
  62 that are <paper-button>s) and a content of the page (all the other successors).
  63 Special case is a help button (<paper-button> with 'help' class set) which
  64 is aligned left.
  65 There are several classes that can be used to change the page appearance:
  66   * split - if this class is set, top and bottom parts will have different
  67     colors.
  68   * big-font - if this class is set, slightly bigger font is used on page.
  69   * progress - if this class is set and 'split' is not, progress bar is shown
  70     instead of top and bottom parts separator.
  71
  72 Also height of the top part can be specified in CSS as follows:
  73
  74 controller-pairing-page::shadow #top {
  75   height: 100px;
  76 }
  77 -->
  78 <dom-module name="controller-pairing-page">
  79   <link rel="stylesheet" href="controller_pairing_page.css">
  80
  81   <template>
  82     <div class="vertical layout fit">
  83       <div id="top" class="relative vertical end-justified layout">
  84         <div id="title">
  85           <content select=".title"></content>
  86         </div>
  87         <div id="separator">
  88           <paper-progress indeterminate></paper-progress>
  89         </div>
  90       </div>
  91       <div id="bottom" class="flex vertical layout">
  92         <div class="flex vertical layout">
  93           <content select=":not(paper-button)"></content>
  94         </div>
  95         <div id="controls" class="horizontal layout center">
  96           <div class="flex">
  97             <content select="paper-button.help-button"></content>
  98           </div>
  99           <content select="paper-button"></content>
 100         </div>
 101       </div>
 102     </div>
 103   </template>
 104 </dom-module>
 105
 106 <dom-module name="controller-pairing-screen">
 107   <link rel="stylesheet" href="oobe_screen_controller_pairing.css">
 108
 109   <template>
 110     <paper-material class="fit">
 111       <neon-animated-pages id="pages" selected="{{C.page}}"
 112           attr-for-selected="name" class="fit">
 113         <controller-pairing-page name="devices-discovery" class="big-font">
 114           <div class="title"
 115               i18n-content="login_ControllerPairingScreen_welcomeTitle">
 116           </div>
 117           <div i18n-content="login_ControllerPairingScreen_searching"></div>
 118           <paper-button class="help-button" on-tap="helpButtonClicked_"
 119               i18n-content="login_ControllerPairingScreen_helpBtn">
 120           </paper-button>
 121         </controller-pairing-page>
 122
 123         <controller-pairing-page name="device-select" class="split">
 124           <div class="title"
 125               i18n-content="login_ControllerPairingScreen_selectTitle">
 126           </div>
 127           <pairing-device-list devices="[[C.devices]]"
 128               selected="{{selectedDevice}}">
 129           </pairing-device-list>
 130           <paper-button class="help-button" on-tap="helpButtonClicked_"
 131               i18n-content="login_ControllerPairingScreen_helpBtn">
 132           </paper-button>
 133           <paper-button on-tap="userActed" action="chooseDevice"
 134               disabled$="[[C.controlsDisabled]]"
 135               i18n-content="login_ControllerPairingScreen_connectBtn">
 136           </paper-button>
 137         </controller-pairing-page>
 138
 139         <controller-pairing-page name="device-not-found">
 140           <div class="title"
 141               i18n-content="login_ControllerPairingScreen_troubleConnectingTitle">
 142           </div>
 143           <div i18n-content="login_ControllerPairingScreen_connectingAdvice">
 144           </div>
 145           <paper-button on-tap="userActed" action="repeatDiscovery"
 146               i18n-content="login_ControllerPairingScreen_adviceGotItBtn">
 147           </paper-button>
 148         </controller-pairing-page>
 149
 150         <controller-pairing-page name="establishing-connection" class="split">
 151           <div class="title"
 152               i18n-content="login_ControllerPairingScreen_selectTitle">
 153           </div>
 154           <pairing-device-list devices="[[C.devices]]"
 155               selected="{{selectedDevice}}" connecting>
 156           </pairing-device-list>
 157           <paper-button class="help-button" on-tap="helpButtonClicked_"
 158               i18n-content="login_ControllerPairingScreen_helpBtn">
 159           </paper-button>
 160           <paper-button disabled
 161               i18n-content="login_ControllerPairingScreen_connecting">
 162           </paper-button>
 163         </controller-pairing-page>
 164
 165         <controller-pairing-page name="establishing-connection-error">
 166           <!-- TODO(dzhioev): Strings TBD. http://crbug.com/423740 -->
 167           <div class="title">
 168             Unable to connect to <span>[[selectedDevice]]<span>
 169           </div>
 170           <paper-button on-tap="userActed" action="repeatDiscovery">
 171             Repeat discovery
 172           </paper-button>
 173         </controller-pairing-page>
 174
 175         <controller-pairing-page name="code-confirmation" class="split">
 176           <div class="title"
 177               i18n-content="login_ControllerPairingScreen_confirmationTitle">
 178           </div>
 179           <div
 180               i18n-content="login_ControllerPairingScreen_confirmationQuestion">
 181           </div>
 182           <div id="code"><span>[[C.code]]</span></div>
 183           <paper-button on-tap="userActed" action="rejectCode"
 184               disabled$="[[C.controlsDisabled]"
 185               i18n-content="login_ControllerPairingScreen_rejectCodeBtn">
 186           </paper-button>
 187           <paper-button on-tap="userActed" action="acceptCode"
 188               disabled$="[[C.controlsDisabled]]"
 189               i18n-content="login_ControllerPairingScreen_acceptCodeBtn">
 190           </paper-button>
 191         </controller-pairing-page>
 192
 193         <controller-pairing-page name="host-update" class="split">
 194           <div class="title"
 195               i18n-content="login_ControllerPairingScreen_updateTitle">
 196           </div>
 197           <div i18n-content="login_ControllerPairingScreen_updateText"></div>
 198           <paper-progress indeterminate></paper-progress>
 199         </controller-pairing-page>
 200
 201         <controller-pairing-page name="host-connection-lost" class="split">
 202           <div class="title"
 203               i18n-content="login_ControllerPairingScreen_connectionLostTitle">
 204           </div>
 205           <div i18n-content="login_ControllerPairingScreen_connectionLostText">
 206           </div>
 207           <paper-progress indeterminate></paper-progress>
 208         </controller-pairing-page>
 209
 210         <controller-pairing-page name="enrollment-introduction" class="split">
 211           <div class="title"
 212               i18n-content="login_ControllerPairingScreen_enrollTitle">
 213           </div>
 214           <p i18n-content="login_ControllerPairingScreen_enrollText1"></p>
 215           <p>
 216             <strong i18n-content="login_ControllerPairingScreen_enrollText2">
 217             </strong>
 218           </p>
 219           <paper-button on-tap="userActed" action="proceedToAuthentication"
 220               disabled$="[[C.controlsDisabled]]"
 221               i18n-content="login_ControllerPairingScreen_continueBtn">
 222           </paper-button>
 223         </controller-pairing-page>
 224
 225         <controller-pairing-page name="authentication" class="split">
 226           <div class="title"
 227               i18n-content="login_ControllerPairingScreen_enrollTitle">
 228           </div>
 229           <div>Not implemented.</div>
 230         </controller-pairing-page>
 231
 232         <controller-pairing-page name="host-enrollment" class="progress">
 233           <!-- This title contains <strong> tag inside. -->
 234           <html-echo class="title"
 235               content="[[getHostEnrollmentStepTitle_(C.enrollmentDomain)]]">
 236           </html-echo>
 237         </controller-pairing-page>
 238
 239         <controller-pairing-page name="host-enrollment-error" class="progress">
 240           <div class="title"
 241               i18n-content="login_ControllerPairingScreen_enrollmentErrorTitle">
 242           </div>
 243           <div
 244               i18n-content="login_ControllerPairingScreen_enrollmentErrorHostRestarts">
 245           </div>
 246         </controller-pairing-page>
 247
 248         <controller-pairing-page name="pairing-done" class="big-font">
 249           <div class="title"
 250               i18n-content="login_ControllerPairingScreen_successTitle">
 251           </div>
 252           <div><span>[[getSuccessMessage_(selectedDevice)]]</div>
 253           <paper-button on-tap="userActed" action="startSession"
 254               disabled$="{{C.controlsDisabled}}"
 255               i18n-content="login_ControllerPairingScreen_continueToHangoutsBtn">
 256           </paper-button>
 257         </controller-pairing-page>
 258       </neon-animated-pages>
 259     </paper-material>
 260   </template>
 261 </dom-module>
 262