chrome/browser/resources/settings/internet_page/tether_connection_dialog.html

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.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/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="tether-connection-dialog">
  <template>
    <style include="settings-shared iron-flex">
      [slot=title] {
        margin-top: 9px;
      }

      [slot=body] {
        border-top: solid 2px rgba(0, 0, 0, .14);
      }

      [slot=body] > * {
        margin-left: 5px;
      }

      iron-icon {
        --iron-icon-fill-color: #4285F4;
      }

      #host-device-text-container {
        display: flex;
        flex-direction: column;
        margin-left: 18px;
      }

      #availability-title {
        color: black;
        margin-top: 5px;
        opacity: 0.54;
      }

      #host-device-container {
        align-items: center;
        display: flex;
        margin-top: 12px;
        min-height: 46px;
      }

      #tether-explanation,
      #tether-carrier-warning,
      #tether-description-title {
        margin-top: var(--settings-page-vertical-margin);
      }

      #tether-carrier-warning {
        font-weight: 600;
      }

      #tether-description-list {
        padding-left: 16px;
      }

      #host-device-lost-container {
        color: var(--google-red-500);
        font-weight: 500;
      }
    </style>
    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
      <div slot="title">$i18n{tetherConnectionDialogTitle}</div>
      <div slot="body">
        <span id="availability-title">
          $i18n{tetherConnectionAvailableDeviceTitle}
        </span>
        <div id="host-device-container">
          <!-- TODO(hsuregan): Add an a11y label. -->
          <iron-icon icon="[[getSignalStrengthIconName_(networkProperties)]]">
          </iron-icon>
          <div id="host-device-text-container">
            <span id="host-device-text-name">
              [[getDeviceName_(networkProperties)]]
            </span>
            <span id="host-device-text-battery" class="secondary">
              [[getBatteryPercentageString_(networkProperties)]]
            </span>
          </div>
          <div class="flex"></div>
          <div id="host-device-lost-container" hidden$="[[!outOfRange]]">
            <iron-icon icon="settings:alert-device-out-of-range"></iron-icon>
            $i18n{tetherPhoneOutOfRange}
          </div>
        </div>
        <div id="tether-explanation">
          [[getExplanation_(networkProperties)]]
        </div>
        <div id="tether-carrier-warning">
          $i18n{tetherConnectionCarrierWarning}
        </div>
        <div id="tether-description-title">
          [[getDescriptionTitle_(networkProperties)]]
        </div>
        <ul id="tether-description-list">
          <li>$i18n{tetherConnectionDescriptionMobileData}</li>
          <li>[[getBatteryDescription_(networkProperties)]]</li>
          <li hidden$="[[!shouldShowDisconnectFromWifi_(networkProperties)]]">
            $i18n{tetherConnectionDescriptionWiFi}
          </li>
        </ul>
      </div>
      <div slot="button-container">
        <paper-button class="cancel-button" on-tap="onNotNowTap_">
          $i18n{tetherConnectionNotNowButton}
        </paper-button>
        <paper-button id="connectButton" class="action-button"
            on-tap="onConnectTap_" disabled="[[outOfRange]]">
          $i18n{tetherConnectionConnectButton}
        </paper-button>
      </div>
    </dialog>
  </template>
  <script src="tether_connection_dialog.js"></script>
</dom-module>