components/proximity_auth/webui/resources/device-list.html

   1 <link href="chrome://resources/polymer/polymer/polymer.html" rel="import">
   2 <link href="chrome://resources/polymer/paper-icon-button/paper-icon-button.html" rel="import">
   3 <link href="chrome://resources/polymer/paper-shadow/paper-shadow.html" rel="import">
   4 <link href="chrome://resources/polymer/core-tooltip/core-tooltip.html" rel="import">
   5 <link href="chrome://resources/polymer/core-icon/core-icon.html" rel="import">
   6 <link href="chrome://resources/polymer/core-icons/device-icons.html" rel="import">
   7 <link href="chrome://resources/polymer/core-icons/hardware-icons.html" rel="import">
   8 <link href="chrome://resources/polymer/core-icons/notification-icons.html" rel="import">
   9
  10 <polymer-element name="device-list" layout vertical>
  11   <template>
  12     <style>
  13       .devices-label {
  14         color: rgb(153, 153, 153);
  15         font-size: 16px;
  16         margin-top: 20px;
  17         padding: 10px 22px;
  18       }
  19
  20       paper-shadow {
  21         background-color: white;
  22       }
  23
  24       .item {
  25         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  26         height: 72px;
  27       }
  28
  29       .name {
  30         margin: 0 8px 2px 0;
  31       }
  32
  33       .public-key {
  34         color: #767676;
  35         font-size: 13px;
  36         height: 16px;
  37         overflow: hidden;
  38         text-overflow: ellipsis;
  39         white-space: nowrap;
  40         width: 300px;
  41       }
  42
  43       .phone-lock {
  44         height: 16px;
  45         width: 16px;
  46       }
  47
  48       .end-icon {
  49         margin: 0 14px;
  50       }
  51
  52       paper-icon-button, core-icon {
  53         opacity: 0.25;
  54       }
  55
  56       paper-icon-button:hover, core-icon:hover {
  57         opacity: 1;
  58       }
  59
  60       .ineligibility-icons {
  61         margin: 0 22px;
  62       }
  63
  64       .ineligibility-icon {
  65         color: orange;
  66         opacity: 0.5;
  67       }
  68
  69       core-tooltip::shadow .core-tooltip {
  70         font-size: 14px;
  71         line-height: 18px;
  72         padding: 8px 16px;
  73       }
  74     </style>
  75
  76     <div class="devices-label">{{label}}</div>
  77
  78     <paper-shadow>
  79       <template repeat="{{device in devices}}">
  80         <div class="item" layout horizontal center>
  81           <paper-icon-button class="end-icon"
  82               icon="hardware:phonelink{{!device.unlockKey ? '-off' : ''}}">
  83           </paper-icon-button>
  84
  85           <div class="info">
  86             <div layout horizontal>
  87               <span class="name">{{device.friendlyDeviceName}}</span>
  88               <core-tooltip position="top">
  89                 <core-icon icon="lock-open" class="phone-lock"
  90                     hidden?="{{!device.remoteState}}">
  91                 </core-icon>
  92                 <div tip>
  93                   <div>
  94                     User Present:
  95                     {{ device.remoteState.userPresent  }}
  96                   </div>
  97                   <div>
  98                     Secure Screen Lock:
  99                     {{ device.remoteState.secureScreenLock }}
 100                   </div>
 101                   <div>
 102                     Trust Agent:
 103                     {{ device.remoteState.trustAgent }}
 104                   </div>
 105                 </div>
 106               </core-tooltip>
 107             </div>
 108             <div class="public-key">{{device.publicKey}}</div>
 109           </div>
 110
 111           <div flex></div>
 112           <div class="ineligibility-icons"
 113               hidden?="{{!device.ineligibilityReasons}}">
 114             <template repeat="{{ reason in device.ineligibilityReasons }}">
 115               <core-tooltip label="{{prettifyReason_(reason)}}" position=top>
 116                 <core-icon icon="{{ getIconForIneligibilityReason_(reason) }}"
 117                     class="ineligibility-icon">
 118                 </core-icon>
 119               </core-tooltip>
 120             </template>
 121           </div>
 122           <paper-icon-button class="end-icon"
 123               hidden?="{{!device.unlockKey}}"
 124               icon="{{ getIconForConnection_(device.connectionStatus) }}">
 125           </paper-icon-button>
 126         </div>
 127       </template>
 128     </paper-shadow>
 129   </template>
 130   <script src="device-list.js"></script>
 131 </polymer-element>