static_src/elements/issue-list/mr-grid-page/mr-grid-tile.js

// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {LitElement, html, css} from 'lit-element';
import {issueRefToUrl, issueToIssueRef} from 'shared/convertersV0.js';
import '../../framework/mr-star/mr-issue-star.js';

/**
 * Element for rendering a single tile in the grid view.
 */
export class MrGridTile extends LitElement {
  /** @override */
  render() {
    return html`
      <div class="tile-header">
        <mr-issue-star
          .issueRef=${this.issueRef}
        ></mr-issue-star>
        <a class="issue-id" href=${issueRefToUrl(this.issue, this.queryParams)}>
          ${this.issue.localId}
        </a>
        <div class="status">
          ${this.issue.statusRef ? this.issue.statusRef.status : ''}
        </div>
      </div>
      <div class="summary">
        ${this.issue.summary || ''}
      </div>
    `;
  }

  /** @override */
  static get properties() {
    return {
      issue: {type: Object},
      issueRef: {type: Object},
      queryParams: {type: Object},
    };
  };

  /** @override */
  constructor() {
    super();
    this.issue = {};
    this.queryParams = '';
  };

  /** @override */
  update(changedProperties) {
    if (changedProperties.has('issue')) {
      this.issueRef = issueToIssueRef(this.issue);
    }
    super.update(changedProperties);
  }

  /** @override */
  static get styles() {
    return css`
      :host {
        display: block;
        border: 2px solid var(--chops-gray-200);
        border-radius: 6px;
        padding: 1px;
        margin: 3px;
        background: var(--chops-white);
        width: 10em;
        height: 5em;
        float: left;
        table-layout: fixed;
        overflow: hidden;
      }
      :host(:hover) {
        border-color: var(--chops-blue-100);
      }
      .tile-header {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 0.1em;
      }
      mr-issue-star {
        --mr-star-size: 16px;
      }
      a.issue-id {
        font-weight: 500;
        text-decoration: none;
        display: inline-block;
        padding-left: .25em;
        color: var(--chops-blue-700);
      }
      .status {
        display: inline-block;
        font-size: 90%;
        max-width: 30%;
        white-space: nowrap;
        padding-left: 4px;
      }
      .summary {
        height: 3.7em;
        font-size: 90%;
        line-height: 94%;
        padding: .05px .25em .05px .25em;
        position: relative;
      }
      a:hover {
        text-decoration: underline;
      }
    `;
  };
};

customElements.define('mr-grid-tile', MrGridTile);