polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_html.ts

/**
 * @license
 * Copyright (C) 2020 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import {html} from '@polymer/polymer/lib/utils/html-tag';

export const htmlTemplate = html`
  <style include="shared-styles">
    :host {
      display: inline-block;
    }
    .dropdown-trigger {
      text-decoration: none;
      width: 100%;
    }
    .dropdown-content {
      background-color: var(--dropdown-background-color);
      box-shadow: var(--elevation-level-2);
    }
    gr-button {
      vertical-align: top;
      @apply --gr-button;
    }
    gr-avatar {
      height: 2em;
      width: 2em;
      vertical-align: middle;
    }
    gr-button[link]:focus {
      outline: 5px auto -webkit-focus-ring-color;
    }
    ul {
      list-style: none;
    }
    .topContent,
    li {
      border-bottom: 1px solid var(--border-color);
    }
    li:last-of-type {
      border: none;
    }
    li .itemAction {
      cursor: pointer;
      display: block;
      padding: var(--spacing-m) var(--spacing-l);
    }
    li .itemAction {
      @apply --gr-dropdown-item;
    }
    li .itemAction.disabled {
      color: var(--deemphasized-text-color);
      cursor: default;
    }
    li .itemAction:link,
    li .itemAction:visited {
      text-decoration: none;
    }
    li .itemAction:not(.disabled):hover {
      background-color: var(--hover-background-color);
    }
    li:focus,
    li.selected {
      background-color: var(--selection-background-color);
      outline: none;
    }
    li:focus .itemAction,
    li.selected .itemAction {
      background-color: transparent;
    }
    .topContent {
      display: block;
      padding: var(--spacing-m) var(--spacing-l);
      @apply --gr-dropdown-item;
    }
    .bold-text {
      font-weight: var(--font-weight-bold);
    }
  </style>
  <gr-button
    link="[[link]]"
    class="dropdown-trigger"
    id="trigger"
    down-arrow="[[downArrow]]"
    on-click="_dropdownTriggerTapHandler"
  >
    <slot></slot>
  </gr-button>
  <iron-dropdown
    id="dropdown"
    vertical-align="top"
    vertical-offset="[[verticalOffset]]"
    allow-outside-scroll="true"
    horizontal-align="[[horizontalAlign]]"
    on-click="_handleDropdownClick"
  >
    <div class="dropdown-content" slot="dropdown-content">
      <ul>
        <template is="dom-if" if="[[topContent]]">
          <div class="topContent">
            <template
              is="dom-repeat"
              items="[[topContent]]"
              as="item"
              initial-count="75"
            >
              <div
                class$="[[_getClassIfBold(item.bold)]] top-item"
                tabindex="-1"
              >
                [[item.text]]
              </div>
            </template>
          </div>
        </template>
        <template
          is="dom-repeat"
          items="[[items]]"
          as="link"
          initial-count="75"
        >
          <li tabindex="-1">
            <gr-tooltip-content
              has-tooltip="[[_computeHasTooltip(link.tooltip)]]"
              title$="[[link.tooltip]]"
            >
              <span
                class$="itemAction [[_computeDisabledClass(link.id, disabledIds.*)]]"
                data-id$="[[link.id]]"
                on-click="_handleItemTap"
                hidden$="[[link.url]]"
                tabindex="-1"
                >[[link.name]]</span
              >
              <a
                class="itemAction"
                href$="[[_computeLinkURL(link)]]"
                download$="[[_computeIsDownload(link)]]"
                rel$="[[_computeLinkRel(link)]]"
                target$="[[link.target]]"
                hidden$="[[!link.url]]"
                tabindex="-1"
                >[[link.name]]</a
              >
            </gr-tooltip-content>
          </li>
        </template>
      </ul>
    </div>
  </iron-dropdown>
`;