chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.html

<link rel="import" href="chrome://oobe/custom_elements.html">
<link rel="import" href="polymer/core-animated-pages/core-animated-pages.html">
<link rel="import" href="polymer/core-iconset-svg/core-iconset-svg.html">
<link rel="import" href="polymer/core-item/core-item.html">
<link rel="import" href="polymer/core-selector/core-selector.html">
<link rel="import" href="polymer/paper-button/paper-button.html">
<link rel="import" href="polymer/paper-progress/paper-progress.html">
<link rel="import" href="polymer/paper-shadow/paper-shadow.html">
<link rel="import" href="polymer/polymer/polymer.html">

<!--
List of devices.
Published properties:
  * devices - array of strings, the model of the list.
  * selected - a name of the selected device ('null' if no devices are
    selected).
  * 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">
  <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>
            <div class="throbber"></div>
          </div>
        </core-item>
      </template>
    </core-selector>
  </template>
</polymer-element>

<!--
Single page of the controller's out-of-box flow.
The page consists of the top part and the bottom part.
The top part contains a title of the page. Direct successors of the
<controller-pairing-page> having 'title' class will be inserted there.
The bottom part contains controls that are aligned right  (all the successors
that are <paper-button>s) and a content of the page (all the other successors).
Special case is a help button (<paper-button> with 'help' class set) which
is aligned left.
There are several classes that can be used to change the page appearance:
  * split - if this class is set, top and bottom parts will have different
    colors.
  * big-font - if this class is set, slightly bigger font is used on page.
  * progress - if this class is set and 'split' is not, progress bar is shown
    instead of top and bottom parts separator.

Also height of the top part can be specified in CSS as follows:

controller-pairing-page::shadow #top {
  height: 100px;
}
-->
<polymer-element name="controller-pairing-page" noscript>
  <template>
    <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>
        <div id="separator">
          <indeterminate-progress fill runnerColor="white"
              backgroundColor="#87ceac" runnerPortion="40">
          </indeterminate-progress>
        </div>
      </div>
      <div id="bottom" hero hero-id="bottom" flex vertical layout>
        <div flex vertical layout>
          <content select=":not(paper-button)"></content>
        </div>
        <div id="controls" horizontal layout center>
          <div flex>
            <content select="paper-button.help-button"></content>
          </div>
          <content select="paper-button"></content>
        </div>
      </div>
    </div>
  </template>
</polymer-element>

<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}}"
          label="{{'helpBtn' | i18n}}"></paper-button>
    </template>

    <template id="progress">
      <indeterminate-progress runnerColor="#0f9d58" backgroundColor="#87ceac"
          runnerPortion="23"></indeterminate-progress>
    </template>

    <paper-shadow z="1"></paper-shadow>

    <core-animated-pages transitions="cross-fade-all hero-transition"
        selected="{{C.page}}">
      <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 label="{{'connectBtn' | i18n}}" on-tap="{{userActed}}"
            action="chooseDevice" disabled?="{{C.controlsDisabled}}">
        </paper-button>
      </controller-pairing-page>

      <controller-pairing-page name="device-not-found">
        <div class="title">{{'troubleConnectingTitle' | i18n}}</div>
        <div>{{'connectingAdvice' | i18n}}</div>
        <paper-button label="{{'adviceGotItBtn' | i18n}}" on-tap="{{userActed}}"
            action="repeatDiscovery">
        </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 label="{{'connecting' | i18n}}" disabled></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"
            label="Repeat discovery"></paper-button>
        </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 label="{{'rejectCodeBtn' | i18n}}" on-tap="{{userActed}}"
            action="rejectCode" disabled?="{{C.controlsDisabled}}">
        </paper-button>
        <paper-button label="{{'acceptCodeBtn' | i18n}}" on-tap="{{userActed}}"
            action="acceptCode" disabled?="{{C.controlsDisabled}}">
        </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 label="{{'continueBtn' | i18n}}" on-click="{{userActed}}"
            action="proceedToAuthentication" disabled?="{{C.controlsDisabled}}">
        </paper-button>
      </controller-pairing-page>

      <controller-pairing-page name="authentication" class="split">
        <div class="title">{{'enrollTitle' | i18n}}</div>
        <iframe id="gaiaFrame" frameBorder="0" scrolling="no" class="gaia-frame"
            flex self-center></iframe>
      </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 label="{{'continueToHangoutsBtn' | i18n}}"
            on-click="{{userActed}}" action="startSession"
            disabled?="{{C.controlsDisabled}}">
        </paper-button>
      </controller-pairing-page>
    </core-animated-pages>
  </template>
</polymer-element>

<div class="step hidden no-logo" id="controller-pairing" hidden>
  <controller-pairing-screen name="ControllerPairingScreen">
  </controller-pairing-screen>
</div>