github.com/GoogleCloudPlatform/testgrid@v0.0.174/web/src/testgrid-grid-cell.ts (about)

     1  import { LitElement, html, css } from "lit";
     2  import { customElement, property } from "lit/decorators.js";
     3  
     4  @customElement('testgrid-grid-cell')
     5  export class TestgridGridCell extends LitElement{
     6      // Styling for status attribute corresponds to test_status.proto enum.
     7      static styles = css`
     8      :host {
     9        min-width: 80px;
    10        width: 80px;
    11        min-height: 22px;
    12        max-height: 22px;
    13        color: #000;
    14        background-color: #ccc;
    15        text-align: center;
    16        font-family: Roboto, Verdana, sans-serif;
    17        font-weight: bold;
    18        display: flex;
    19        justify-content: center;
    20        align-content: center;
    21        flex-direction: column;
    22        box-sizing: border-box;
    23        font-size: 12px;
    24      }
    25  
    26      :host([status="NO_RESULT"]) {
    27          background-color: transparent;
    28      }
    29  
    30      :host([status="PASS"]), :host([status="PASS_WITH_ERRORS"]) {
    31          background-color: #4d7;
    32          color: #273;
    33      }
    34  
    35      :host([status="PASS_WITH_SKIPS"]), :host([status="BUILD_PASSED"]) {
    36          background-color: #bfd;
    37          color: #465;
    38      }
    39  
    40      :host([status="RUNNING"]), :host([status="CATEGORIZED_ABORT"]), :host([status="UNKNOWN"]), :host([status="CANCEL"]), :host([status="BLOCKED"]) {
    41          background-color: #ccd;
    42          color: #446;
    43      }
    44  
    45      :host([status="TIMED_OUT"]), :host([status="CATEGORIZED_FAIL"]), :host([status="FAIL"]), :host([status="FLAKY"]) {
    46          background-color: #a24;
    47          color: #fdd;
    48      }
    49  
    50      :host([status="BUILD_FAIL"]) {
    51          background-color: #111;
    52          color: #ddd;
    53      }
    54  
    55      :host([status="FLAKY"]) {
    56          background-color: #63a;
    57          color: #dcf;
    58      }
    59    `;
    60  
    61      @property({reflect: true, attribute: 'status'}) status: String;
    62      @property() icon: String;
    63  
    64      render(){
    65          return html`${this.icon}`;
    66      }
    67  }