chrome/browser/resources/chromeos/emulator/battery_settings.html

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
<link rel="import" href="icons.html">
<link rel="import" href="shared_styles.html">

<dom-module id="battery-settings">
  <template>
    <!-- TODO(michaelpg): Wrap the line below to fit within the 80-char limit.
         See https://github.com/Polymer/polymer/pull/3668. -->
    <style include="device-emulator-shared-styles iron-flex iron-flex-alignment iron-positioning">
    </style>
    <div class="layout vertical">
      <div class="element-label">
        <paper-icon-button icon="device-emulator:battery-charging-full">
        </paper-icon-button>
        Power
      </div>
      <label>
        <span class="form-label">Battery state</span>
        <paper-radio-group selected="{{batteryState}}">
          <template is="dom-repeat" items="[[batteryStateOptions]]">
            <paper-radio-button name="[[item]]">[[item]]</paper-radio-button>
          </template>
        </paper-radio-group>
      </label>
      <iron-collapse opened="[[isBatteryPresent(batteryState)]]">
        <div class="layout vertical">
          <paper-input label="Battery percentage" value="[[batteryPercent]]"
              on-change="onBatteryPercentChange" type="number">
          </paper-input>
  
          <paper-input label="Seconds until empty" value="[[timeUntilEmpty]]"
              on-change="onTimeUntilEmptyChange" type="number">
          </paper-input>

          <paper-input label="Seconds until full" value="[[timeUntilFull]]"
              on-change="onTimeUntilFullChange" type="number">
          </paper-input>
        </div>
      </iron-collapse>

      <table class="devices-table">
        <tbody>
          <tr class="table-section-header">
            <td>Power sources</td>
            <td class="centered-cell-label">Connected</td>
            <td class="centered-cell-label">Role</td>
            <td class="centered-cell-label">Amps</td>
          </tr>
          <template is="dom-repeat" items="{{powerSourceOptions}}">
            <tr>
              <td class="alias-cell">[[item.name]]</td>
              <td class="control-cell">
                <paper-checkbox checked="{{item.connected}}"></paper-checkbox>
              </td>
              <td class="control-cell">
                <paper-button on-tap="onSetAsSourceTap"
                    hidden$="[[!isDualRole(item)]]"
                    raised="[[!isSelectedSource(item, selectedPowerSourceId)]]"
                    disabled="[[!canBecomeSource(
                        item, selectedPowerSourceId, powerSourceOptions.*)]]">
                  Set as source
                </paper-button>
                <div hidden$="[[isDualRole(item)]]">Source</div>
              </td>
              <td class="control-cell">
                <paper-dropdown-menu class="device-class-group"
                    disabled="[[!item.variablePower]]">
                  <paper-listbox selected="{{item.power}}"
                      class="dropdown-content" attr-for-selected="data-value">
                    <paper-item data-value="high">High</paper-item>
                    <paper-item data-value="low">Low</paper-item>
                  </paper-listbox>
                </paper-dropdown-menu>
              </td>
          </template>
        </tbody>
      </table>
    </div>
  </template>
  <script src="battery_settings.js"></script>
</dom-module>