ui/webui/resources/cr_components/chromeos/network/network_list_item.html

<link rel="import" href="../../../html/polymer.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/paper-spinner/paper-spinner-lite.html">
<link rel="import" href="../../../cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="../../../cr_elements/icons.html">
<link rel="import" href="../../../cr_elements/policy/cr_policy_indicator.html">
<link rel="import" href="../../../cr_elements/shared_style_css.html">
<link rel="import" href="../../../cr_elements/shared_vars_css.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="../../../html/cr/ui/focus_row_behavior.html">
<link rel="import" href="cr_policy_network_behavior_mojo.html">
<link rel="import" href="network_icon.html">
<link rel="import" href="network_list_types.html">
<link rel="import" href="mojo_interface_provider.html">
<link rel="import" href="onc_mojo.html">

<dom-module id="network-list-item">
  <template>
    <style include="cr-shared-style iron-flex">
      :host {
        display: inline-flex;
        outline: none;
      }

      #divOuter {
        height: var(--cr-network-row-height, 48px);
        overflow: auto;
        padding-bottom: var(--cr-network-row-padding-bottom, 0);
        padding-inline-end: var(--cr-icon-ripple-padding);
        padding-top: var(--cr-network-row-padding-bottom, 0);
      }

      :host([is-e-sim-pending-profile_]) #divText {
        opacity: 0.4;
      }

      :host(:not([is-e-sim-pending-profile_])) #divIcon {
        height: 24px;
        width: 24px;
      }

      :host([is-e-sim-pending-profile_]) #divIcon {
        height: 20px;
        opacity: 0.4;
        width: 20px;
      }

      #divDetail {
        display: flex;
        flex: 1 0 auto;
        flex-direction: row;
      }

      #divText {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        justify-content: center;
        margin-inline-start: 20px;
      }

      #networkStateText {
        font-size: inherit;
      }

      #networkStateText[active] {
        color: var(--google-green-500);
      }

      cr-policy-indicator {
        padding: 0 var(--cr-controlled-by-spacing);
      }

      #wrapper {
        height: 100%;
      }

      cr-button iron-icon {
        --iron-icon-fill-color: #1A73E8;
        margin-inline-end: 8px;
      }

      paper-spinner-lite {
        height: 20px;
        margin-inline-end: 16px;
        width: 20px;
      }
    </style>
    <div id="wrapper" focus-row-container
         class="layout horizontal center flex">
      <div id="divOuter"
           class="layout horizontal center flex"
           actionable
           focus-row-control
           selectable
           aria-label$="[[rowLabel]]"
           aria-live="[[getLiveStatus_(isFocused)]]"
           role="button"
           focus-type="rowWrapper"
           on-keydown="onKeydown_"
           on-click="onSelected_">
        <template is="dom-if" if="[[networkState]]">
          <network-icon is-list-item
              show-technology-badge="[[showTechnologyBadge]]"
              network-state="[[networkState]]">
          </network-icon>
        </template>
        <template is="dom-if" if="[[item.polymerIcon]]">
          <iron-icon id="divIcon" icon="[[item.polymerIcon]]"></iron-icon>
        </template>
        <div id="divText" class="layout horizontal flex">
          <div id="networkName" aria-hidden="true">
            [[getItemName_(item)]]
          </div>
          <div id="subtitle"
              hidden$="[[!isSubtitleVisible_(subtitle_)]]"
              aria-hidden="true">
            [[getSubtitle(subtitle_)]]
          </div>
          <div id="networkStateText"
              class="cr-secondary-text"
              hidden$="[[!isStateTextVisible_(networkState)]]"
              active$="[[isStateTextActive_(networkState,
                           activationUnavailable)]]">
            [[getNetworkStateText_(networkState, activationUnavailable)]]
          </div>
        </div>
        <template is="dom-if" if="[[isPolicySource(networkState.source)]]">
          <cr-policy-indicator indicator-type="[[getIndicatorTypeForSource(
              networkState.source)]]">
          </cr-policy-indicator>
        </template>
        <template is="dom-if" if="[[isSubpageButtonVisible_(networkState, showButtons)]]" restamp>
          <div>
            <cr-icon-button class="subpage-arrow"
                id="subpage-button"
                on-click="onSubpageArrowClick_"
                tabindex$="[[tabindex]]"
                aria-label$="[[buttonLabel]]"
                focus-row-control
                focus-type="subpageButton">
            </cr-icon-button>
          </div>
        </template>
        <template is="dom-if" if="[[isESimPendingProfile_]]" restamp>
          <cr-button id="installButton"
              aria-label$="[[getItemName_(item)]], $i18n{networkListItemDownload}"
              on-click="onInstallButtonClick_">
            <iron-icon icon="network:download"></iron-icon>
            $i18n{networkListItemDownload}
          </cr-button>
        </template>
        <template is="dom-if" if="[[isESimInstallingProfile_(item, item.customItemType)]]" restamp>
          <paper-spinner-lite active></paper-spinner-lite>
          $i18n{networkListItemAddingProfile}
        </template>
      </div>
    </div>
  </template>
  <script src="network_list_item.js"></script>
</dom-module>