chrome/browser/resources/settings/chromeos/ambient_mode_page/ambient_mode_page.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="ambient_mode_browser_proxy.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
<link rel="import" href="constants.html">
<link rel="import" href="topic_source_list.html">
<link rel="import" href="../deep_linking_behavior.html">
<link rel="import" href="../os_route.html">
<link rel="import" href="../../router.html">
<link rel="import" href="../../prefs/prefs.html">
<link rel="import" href="../../prefs/prefs_behavior.html">
<link rel="import" href="../../controls/settings_radio_group.html">
<link rel="import" href="../../controls/settings_toggle_button.html">
<link rel="import" href="../../settings_shared_css.html">

<dom-module id="settings-ambient-mode-page">
  <template>
    <style include="cr-shared-style settings-shared iron-flex">
      #ambientModeEnable {
        border-bottom: var(--cr-separator-line);
        border-top: var(--cr-separator-line);
      }

      #pageDescription {
        padding-inline-end: var(--cr-section-padding);
        padding-inline-start: var(--cr-section-padding);
        padding-top: 0;
      }

      #topicSourceListDiv {
        border-bottom: var(--cr-separator-line);
      }

      /* Set padding on children instead of the container itself to ensure that
       * separator lines can fill the entire width of the page. */
      #topicSourceListDiv > *,
      #weatherDiv > * {
        /* Padded to the right to allow space for a ripple */
        padding-inline-end: calc(var(--cr-section-padding) -
            var(--cr-icon-ripple-padding));
        padding-inline-start: var(--cr-section-padding);
      }

      #weatherTitle {
        padding-bottom: 16px;
        padding-top: 16px;
      }

      .list-item {
        padding-inline-start: var(--cr-section-padding);
      }

      paper-spinner-lite {
        display: block;
        height: 28px;
        margin: 100px auto;
        width: 28px;
      }
    </style>
    <h2 id="pageDescription">
      $i18n{ambientModePageDescription}
    </h2>

    <settings-toggle-button id="ambientModeEnable"
        class="primary-toggle"
        pref="{{prefs.settings.ambient_mode.enabled}}"
        label="[[getAmbientModeOnOffLabel_(
            prefs.settings.ambient_mode.enabled.value)]]"
        deep-link-focus-id$="[[Setting.kAmbientModeOnOff]]">
    </settings-toggle-button>

    <paper-spinner-lite active='[[!showSettings_]]' hidden='[[showSettings_]]'>
    </paper-spinner-lite>

    <template is="dom-if" if="[[showSettings_]]">
      <div id="topicSourceListDiv" class="layout vertical flex"
          aria-hidden="[[disableSettings_]]">
        <topic-source-list topic-sources="[[topicSources_]]"
            selected-topic-source="[[selectedTopicSource_]]"
            has-google-photos-albums="[[hasGooglePhotosAlbums_]]"
            disabled='[[disableSettings_]]'>
        </topic-source-list>
      </div>
      <div id="weatherDiv" class="layout vertical flex"
          aria-hidden="[[disableSettings_]]">
        <h2 id="weatherTitle" aria-hidden="true">
          $i18n{ambientModeWeatherTitle}
        </h2>
        <div class="list-frame">
          <cr-radio-group
              id="ambientTemperatureUnit"
              selected="{{selectedTemperatureUnit_}}"
              disabled$='[[disableSettings_]]'
              aria-labelledby="weatherTitle">
            <cr-radio-button
                name="[[AmbientModeTemperatureUnit_.FAHRENHEIT]]"
                class="list-item underbar"
                label="$i18n{ambientModeTemperatureUnitFahrenheit}">
            </cr-radio-button>
            <cr-radio-button
                name="[[AmbientModeTemperatureUnit_.CELSIUS]]"
                class="list-item"
                label="$i18n{ambientModeTemperatureUnitCelsius}">
            </cr-radio-button>
          </cr-radio-group>
        </div>
      </div>
    </template>
  </template>
  <script src="ambient_mode_page.js"></script>
</dom-module>