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

   1 <link href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html" rel="import">
   2 <link href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html" rel="import">
   3 <link href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html" rel="import">
   4 <link href="chrome://resources/polymer/v1_0/iron-icons/hardware-icons.html" rel="import">
   5 <link href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html" rel="import">
   6 <link href="chrome://resources/polymer/v1_0/iron-icons/notification-icons.html" rel="import">
   7 <link href="chrome://resources/polymer/v1_0/paper-button/paper-button.html" rel="import">
   8 <link href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html" rel="import">
   9 <link href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html" rel="import">
  10 <link href="chrome://resources/polymer/v1_0/paper-material/paper-material.html" rel="import">
  11 <link href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html" rel="import">
  12 <link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import">
  13
  14 <dom-module id="device-list">
  15   <style>
  16     .devices-label {
  17       color: rgb(153, 153, 153);
  18       font-size: 16px;
  19       margin-top: 20px;
  20       padding: 10px 22px;
  21     }
  22
  23     paper-material {
  24       background-color: white;
  25     }
  26
  27     .item {
  28       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  29       height: 72px;
  30     }
  31
  32     .name {
  33       margin: 0 8px 2px 0;
  34     }
  35
  36     .public-key {
  37       color: #767676;
  38       font-size: 13px;
  39       height: 16px;
  40       overflow: hidden;
  41       text-overflow: ellipsis;
  42       white-space: nowrap;
  43       width: 300px;
  44     }
  45
  46     .phone-lock {
  47       height: 16px;
  48       width: 16px;
  49       vertical-align: top;
  50     }
  51
  52     .end-icon {
  53       margin: 0 14px;
  54     }
  55
  56     paper-icon-button, iron-icon {
  57       opacity: 0.25;
  58     }
  59
  60     paper-icon-button:hover, iron-icon:hover {
  61       opacity: 1;
  62     }
  63
  64     .ineligibility-icons {
  65       margin: 0 22px;
  66     }
  67
  68     .ineligibility-icon {
  69       color: orange;
  70       opacity: 0.5;
  71     }
  72
  73     iron-tooltip::shadow .iron-tooltip {
  74       font-size: 14px;
  75       line-height: 18px;
  76       padding: 8px 16px;
  77     }
  78
  79     #unlock-key-dialog {
  80       width: 500px;
  81     }
  82
  83     #dialog-text {
  84       color: #7E7E7E;
  85     }
  86
  87     #dialog-buttons {
  88       height: 36px;
  89       display: flex;
  90       flex-direction: row;
  91       justify-content: flex-end;
  92       margin: 8px;
  93       padding: 0px;
  94       color: #377EF3;
  95     }
  96
  97     #dialog-spinner {
  98       width: 20px;
  99       height: 20px;
 100       padding-right: 14px;
 101     }
 102   </style>
 103
 104   <template>
 105     <div class="devices-label">[[label]]</div>
 106
 107     <paper-dialog id="unlock-key-dialog"
 108         no-cancel-on-outside-click="true"
 109         with-backdrop="true"
 110         no-cancel-on-esc-key="true">
 111       <div id="dialog-text">
 112         <span hidden$="[[deviceForDialog_.unlockKey]]">
 113           Make <span>[[deviceForDialog_.friendlyDeviceName]]</span> an unlock
 114           key.
 115         </span>
 116         <span hidden$="[[!deviceForDialog_.unlockKey]]">
 117           Remove <span>[[deviceForDialog_.friendlyDeviceName]]</span> as an
 118           unlock key.
 119         </span>
 120       </div>
 121       <div id="dialog-buttons">
 122         <paper-button dialog-dismiss disabled$="[[toggleUnlockKeyInProgress_]]">
 123           Cancel
 124         </paper-button>
 125         <paper-button id="unlock-key-button" on-click="toggleUnlockKey_"
 126             disabled$="[[toggleUnlockKeyInProgress_]]">
 127           <span hidden$="[[deviceForDialog_.unlockKey]]">
 128             Make Unlock Key
 129           </span>
 130           <span hidden$="[[!deviceForDialog_.unlockKey]]">
 131             Remove Unlock Key
 132           </span>
 133         </paper-button>
 134       </div>
 135     </paper-dialog>
 136
 137     <paper-material>
 138       <template is="dom-repeat" items="[[devices]]">
 139         <div class="item layout horizontal center">
 140           <paper-icon-button class="end-icon"
 141               icon="[[getIconForUnlockKey_(item)]]"
 142               on-click="showUnlockKeyDialog_">
 143           </paper-icon-button>
 144
 145           <div class="info">
 146             <div class="layout horizontal center">
 147               <span class="name">[[item.friendlyDeviceName]]</span>
 148               <core-tooltip position="top" hidden$="[[!item.remoteState]]">
 149                 <iron-icon icon="[[getIconForRemoteState_(item.remoteState)]]"
 150                            class="phone-lock flex"></iron-icon>
 151                 <!--TODO(tengs): Reimplement the tooltip after it is ported to
 152                                  Polymer 1.0-->
 153                 <div hidden>
 154                   <div>
 155                     User Present:
 156                     <span>
 157                       [[getUserPresenceText_(item.remoteState.userPresent)]]
 158                     </span>
 159                   </div>
 160                   <div>
 161                     Secure Screen Lock:
 162                     <span>
 163                       [[getScreenLockText_(item.remoteState.secureScreenLock)]]
 164                     </span>
 165                   </div>
 166                   <div>
 167                     Trust Agent:
 168                     <span>
 169                       [[getTrustAgentText_(item.remoteState.trustAgent)]]
 170                     </span>
 171                   </div>
 172                 </div>
 173               </core-tooltip>
 174             </div>
 175             <div class="public-key">[[item.publicKey]]</div>
 176           </div>
 177
 178           <div class="flex"></div>
 179           <div class="ineligibility-icons"
 180               hidden$="[[!item.ineligibilityReasons]]">
 181             <template is="dom-repeat" items="[[item.ineligibilityReasons]]">
 182               <core-tooltip label="[[prettifyReason_(item)]]" position="top">
 183                 <iron-icon icon="[[getIconForIneligibilityReason_(item)]]")
 184                     class="ineligibility-icon">
 185                 </iron-icon>
 186               </core-tooltip>
 187             </template>
 188           </div>
 189           <paper-icon-button class="end-icon"
 190               bluetooth-address="[[item.bluetoothAddress]]"
 191               on-click="toggleConnection_"
 192               icon="[[getIconForConnection_(item.connectionStatus)]]"
 193               hidden$="{{!item.unlockKey}}">
 194           </paper-icon-button>
 195         </div>
 196       </template>
 197     </paper-material>
 198   </template>
 199   <script src="device-list.js"></script>
 200 </dom-module>