chrome/browser/resources/print_preview/new/destination_list.html

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

<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/html/action_link_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/list_property_update_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="../native_layer.html">
<link rel="import" href="../data/destination.html">
<link rel="import" href="destination_list_item.html">
<link rel="import" href="print_preview_shared_css.html">
<link rel="import" href="strings.html">
<link rel="import" href="throbber_css.html">

<dom-module id="print-preview-destination-list">
  <template>
    <style include="print-preview-shared action-link cr-hidden-style throbber">
      :host {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        user-select: none;
      }

      #listContainer {
        flex: 1;
        min-height: 0;
      }

      .title,
      .total {
        color: var(--google-grey-refresh-700);
        font-weight: 500;
      }

      header {
        align-items: center;
        border-bottom: 2px solid var(--google-grey-300);
        display: flex;
        flex: 0;
        margin-top: 2px;
        min-height: calc(20/13 * 1em);
        padding-bottom: 8px;
      }

      :-webkit-any(.action-link, .total) {
        display: inline;
        padding: 0 4px;
      }

      .action-link {
        margin: 0 2px;
      }

      .throbber-container {
        display: inline-block;
        padding-inline-end: 16px;
        padding-inline-start: 8px;
        position: relative;
        vertical-align: middle;
      }

      .throbber {
        vertical-align: middle;
      }

      .no-destinations-message {
        color: #999;
        padding-bottom: 8px;
        padding-inline-start: 18px;
        padding-top: 8px;
      }

      .list-item {
        cursor: default;
        display: flex;
        font-size: calc(12/13 * 1em);
        min-height: 28px;
        padding-bottom: 2px;
        padding-inline-end: 2px;
        padding-inline-start: 14px;
        padding-top: 2px;
      }

      :not(.moving).list-item {
        transition: background-color 150ms;
      }

      .list-item:hover,
      .list-item:focus {
        background-color: rgb(228, 236, 247);
      }

      .list-item:focus {
        outline: none;
      }
    </style>
    <header>
      <span class="title">[[listName]]</span>
      <span class="total" hidden$="[[!showDestinationsTotal_]]">
        [[i18n('destinationCount', matchingDestinations_.length)]]
      </span>
      <a is="action-link" class="action-link" hidden$="[[!hasActionLink]]"
          on-click="onActionLinkClick_">
        $i18n{manage}
      </a>
      <div class="throbber-container" hidden$="[[!loadingDestinations]]">
        <div class="throbber"></div>
      </div>
    </header>
    <div class="no-destinations-message" hidden$="[[hasDestinations_]]">
      $i18n{noDestinationsMessage}
    </div>
    <div id="listContainer">
      <iron-list id="list" items="[[matchingDestinations_]]">
        <template>
          <print-preview-destination-list-item class="list-item"
              search-query="[[searchQuery]]" destination="[[item]]"
              on-click="onDestinationSelected_" on-keydown="onKeydown_"
              tabindex$="[[tabIndex]]">
          </print-preview-destination-list-item>
        </template>
      </iron-list>
    </div>
  </template>
  <script src="destination_list.js"></script>
</dom-module>