1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100


ash / webui / diagnostics_ui / resources / input_card.html [blame]

<style include="diagnostics-shared">
  :host-context(body.jelly-enabled) .device #deviceIcon {
    --iron-icon-fill-color: var(--cros-icon-color-prominent);
    background-color: var(--cros-sys-highlight_shape);
  }

  :host-context(body.jelly-enabled) .device #tooltipText {
    font: var(--cros-annotation-1-font);
  }

  :host-context(body.jelly-enabled) .device-name,
  :host-context(body.jelly-enabled) .device-description {
    font: var(--cros-body-2-font);
  }

  paper-tooltip {
    --paper-tooltip-background: var(--cros-tooltip-background-color);
    --paper-tooltip-min-width: 0px;
    --paper-tooltip-text-color: var(--cros-tooltip-label-color);
  }

  .device {
    display: flex;
    padding: 12px 20px;
  }

  .device #deviceIcon {
    --iron-icon-fill-color: var(--cros-color-prominent);
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    background-color: var(--cros-highlight-color);
    border-radius: 50%;
    margin-inline-end: 28px;
    padding: 8px;
  }

  .device #infoIcon {
    --iron-icon-fill-color: var(--cros-icon-color-secondary);
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    align-self: center;
    margin-inline-end: 12px;
  }

  .device #tooltipText {
    font-family: var(--diagnostics-roboto-font-family);
    font-weight: var(--diagnostics-regular-font-weight);
  }

  .device #inputDeviceTestButton {
      align-self: center;
  }

  .device-body {
    align-self: center;
    flex-grow: 1;
    line-height: 140%;
  }

  .device-name {
    color: var(--cros-text-color-secondary);
  }

  .device-description {
    color: var(--cros-text-color-primary);
  }
</style>
<diagnostics-card-frame>
  <slot name="title" slot="title"></slot>
  <div slot="contents">
    <dom-repeat items="[[devices]]" as="device">
      <template>
        <div class="device" data-evdev-id$="[[device.id]]">
          <iron-icon icon="[[deviceIcon]]" id="deviceIcon"></iron-icon>
          <div class="device-body">
            <div class="device-description" id="deviceDescription">
              [[getDeviceDescription(device)]]
            </div>
            <div class="device-name" id="deviceName">[[device.name]]</div>
          </div>
          <iron-icon slot="icon" icon="diagnostics:info" id="infoIcon" tabindex="0"
              aria-labelledby="tooltipText" role="img"
              hidden$="[[getDeviceTestability(device, hostDeviceStatus)]]">
          </iron-icon>
          <paper-tooltip for="infoIcon" aria-hidden="true">
            <span id="tooltipText">
              [[getDeviceTestabilityErrorMessage(device, hostDeviceStatus)]]
            </span>
          </paper-tooltip>
          <cr-button id="inputDeviceTestButton"
              on-click="handleTestButtonClick"
              aria-labelledby="inputDeviceTestButton deviceDescription"
              disabled="[[!getDeviceTestability(device, hostDeviceStatus)]]">
            [[i18n('inputDeviceTest')]]
          </cr-button>
        </div>
      </template>
    </dom-repeat>
  </div>
</diagnostics-card-frame>