go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/generic_libs/components/pin_toggle.ts (about)

     1  // Copyright 2021 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  import { MobxLitElement } from '@adobe/lit-mobx';
    16  import { css, html } from 'lit';
    17  import { customElement } from 'lit/decorators.js';
    18  import { classMap } from 'lit/directives/class-map.js';
    19  import { makeObservable, observable } from 'mobx';
    20  
    21  /**
    22   * An icon that indicates whether the item is pinned.
    23   */
    24  @customElement('milo-pin-toggle')
    25  export class PinToggleElement extends MobxLitElement {
    26    @observable.ref pinned = false;
    27  
    28    constructor() {
    29      super();
    30      makeObservable(this);
    31    }
    32  
    33    protected render() {
    34      /* eslint-disable max-len */
    35      return html`
    36        <svg
    37          class=${classMap({ pinned: this.pinned })}
    38          xmlns="http://www.w3.org/2000/svg"
    39          viewBox="2 ${this.pinned ? -4 : 2} 20 20"
    40        >
    41          <path
    42            id="pin"
    43            d="M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z"
    44          />
    45          <path id="floor" d="M3,16h18v-1h-18z" />
    46        </svg>
    47      `;
    48      /* eslint-enable max-len */
    49    }
    50  
    51    static styles = css`
    52      :host {
    53        cursor: pointer;
    54        display: inline-block;
    55        vertical-align: text-bottom;
    56        width: 16px;
    57        height: 16px;
    58        border-radius: 2px;
    59        padding: 2px;
    60      }
    61      :host(:hover) {
    62        background-color: silver;
    63      }
    64  
    65      #floor {
    66        opacity: 0;
    67      }
    68      .pinned > #floor {
    69        opacity: 1;
    70      }
    71    `;
    72  }