chrome/browser/resources/print_preview/ui/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/list_property_update_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="../data/destination.html">
<link rel="import" href="destination_list_item.html">
<link rel="import" href="print_preview_vars_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="cr-hidden-style throbber">
      :host {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        user-select: none;
      }

      #list {
        max-height: 100%;
      }

      .throbber-container {
        display: flex;
        margin-inline-start: 14px;
        min-height: var(--destination-item-height);
        padding-inline-end: 16px;
        padding-inline-start: calc(10/13 * 1em);
      }

      .throbber {
        align-self: center;
      }

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

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

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

      @media (prefers-color-scheme: dark) {
        .list-item:-webkit-any(:hover, :focus) {
          background-color: var(--cr-menu-background-focus-color);
        }
      }

      .list-item:focus {
        outline: none;
      }
    </style>
    <div class="no-destinations-message" hidden$="[[hasDestinations_]]">
      $i18n{noDestinationsMessage}
    </div>
    <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 class="throbber-container" hidden$="[[throbberHidden_]]">
      <div class="throbber"></div>
    </div>
  </template>
  <script src="destination_list.js"></script>
</dom-module>