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

   1 <link rel="import" href="chrome://oobe/custom_elements.html">
   2 <link rel="import" href="chrome://resources/polymer/core-animated-pages/core-animated-pages.html">
   3 <link rel="import" href="chrome://resources/polymer/core-iconset-svg/core-iconset-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.html">
   7 <link rel="import" href="chrome://resources/polymer/paper-progress/paper-progress.html">
   8 <link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
   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         {{'helpBtn' | i18n}}
 105       </paper-button>
 106     </template>
 107
 108     <template id="progress">
 109       <indeterminate-progress runnerColor="#0f9d58" backgroundColor="#87ceac"
 110           runnerPortion="23"></indeterminate-progress>
 111     </template>
 112
 113     <paper-shadow z="1" fit>
 114     <core-animated-pages transitions="cross-fade-all hero-transition"
 115         selected="{{C.page}}" fit>
 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 on-tap="{{userActed}}" action="chooseDevice"
 128             disabled?="{{C.controlsDisabled}}">
 129          {{'connectBtn' | i18n}}
 130         </paper-button>
 131       </controller-pairing-page>
 132
 133       <controller-pairing-page name="device-not-found">
 134         <div class="title">{{'troubleConnectingTitle' | i18n}}</div>
 135         <div>{{'connectingAdvice' | i18n}}</div>
 136         <paper-button on-tap="{{userActed}}" action="repeatDiscovery">
 137           {{'adviceGotItBtn' | i18n}}
 138         </paper-button>
 139       </controller-pairing-page>
 140
 141       <controller-pairing-page name="establishing-connection" class="split">
 142         <div class="title">{{'selectTitle' | i18n}}</div>
 143         <pairing-device-list devices="{{C.devices}}"
 144             selected="{{selectedDevice}}" connecting></pairing-device-list>
 145         <template bind ref="help-button"></template>
 146         <paper-button disabled>{{'connecting' | i18n}}</paper-button>
 147       </controller-pairing-page>
 148
 149       <controller-pairing-page name="establishing-connection-error">
 150         <!-- TODO(dzhioev): Strings TBD. http://crbug.com/423740 -->
 151         <div class="title">Unable to connect to {{selectedDevice}}</div>
 152         <paper-button on-tap="{{userActed}}" action="repeatDiscovery">
 153           Repeat discovery
 154         </paper-button>
 155       </controller-pairing-page>
 156
 157       <controller-pairing-page name="code-confirmation" class="split">
 158         <div class="title">{{'confirmationTitle' | i18n}}</div>
 159         <div>{{'confirmationQuestion' | i18n}}</div>
 160         <div id="code">{{C.code}}</div>
 161         <paper-button on-tap="{{userActed}}" action="rejectCode"
 162             disabled?="{{C.controlsDisabled}}">
 163           {{'rejectCodeBtn' | i18n}}
 164         </paper-button>
 165         <paper-button on-tap="{{userActed}}" action="acceptCode"
 166             disabled?="{{C.controlsDisabled}}">
 167           {{'acceptCodeBtn' | i18n}}
 168         </paper-button>
 169       </controller-pairing-page>
 170
 171       <controller-pairing-page name="host-update" class="split">
 172         <div class="title">{{'updateTitle' | i18n}}</div>
 173         <div>{{'updateText' | i18n}}</div>
 174         <template bind ref="progress"></template>
 175       </controller-pairing-page>
 176
 177       <controller-pairing-page name="host-connection-lost" class="split">
 178         <div class="title">{{'connectionLostTitle' | i18n}}</div>
 179         <div>{{'connectionLostText' | i18n}}</div>
 180         <template bind ref="progress"></template>
 181       </controller-pairing-page>
 182
 183       <controller-pairing-page name="enrollment-introduction" class="split">
 184         <div class="title">{{'enrollTitle' | i18n}}</div>
 185         <p>{{'enrollText1' | i18n}}</p>
 186         <p><strong>{{'enrollText2' | i18n}}</strong></p>
 187         <paper-button on-click="{{userActed}}" action="proceedToAuthentication"
 188             disabled?="{{C.controlsDisabled}}">
 189           {{'continueBtn' | i18n}}
 190         </paper-button>
 191       </controller-pairing-page>
 192
 193       <controller-pairing-page name="authentication" class="split">
 194         <div class="title">{{'enrollTitle' | i18n}}</div>
 195         <iframe id="gaiaFrame" frameBorder="0" scrolling="no" class="gaia-frame"
 196             flex self-center></iframe>
 197       </controller-pairing-page>
 198
 199       <controller-pairing-page name="host-enrollment" class="progress">
 200         <!-- 'enrollmentTitle' contains <strong> tag. -->
 201         <html-echo class="title"
 202             content="{{['enrollmentInProgress', C.enrollmentDomain] | i18n}}">
 203         </html-echo>
 204       </controller-pairing-page>
 205
 206       <controller-pairing-page name="host-enrollment-error" class="progress">
 207         <div class="title">{{'enrollmentErrorTitle' | i18n}}</div>
 208         <div>{{'enrollmentErrorHostRestarts' | i18n}}</div>
 209       </controller-pairing-page>
 210
 211       <controller-pairing-page name="pairing-done" class="big-font">
 212         <div class="title">{{'successTitle' | i18n}}</div>
 213         <div>{{['successText', selectedDevice] | i18n}}</div>
 214         <paper-button on-click="{{userActed}}" action="startSession"
 215             disabled?="{{C.controlsDisabled}}">
 216           {{'continueToHangoutsBtn' | i18n}}
 217         </paper-button>
 218       </controller-pairing-page>
 219     </core-animated-pages>
 220     </paper-shadow>
 221   </template>
 222 </polymer-element>