components/proximity_auth/webui/resources/device-list.html - Issue 1108713002: Add chrome://proximity-auth UI implemented with Polymer.

Side by Side Diff: components/proximity_auth/webui/resources/device-list.html

Issue 1108713002: Add chrome://proximity-auth UI implemented with Polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: use hidden?= Created 5 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
(Empty)
	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="impo rt">

	4 <link href="chrome://resources/polymer/core-tooltip/core-tooltip.html" rel="impo rt">

	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="impo rt">

	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 <paper-icon-button class="end-icon"

	113 hidden?="{{!device.unlockKey}}"

	114 icon="{{ getIconForConnection_(device.connectionStatus) }}">

	115 </paper-icon-button>

	116

	117 <div class="ineligibility-icons"

	118 hidden?="{{!device.ineligibilityReasons}}">

	119 <template repeat="{{ reason in device.ineligibilityReasons }}">

	120 <core-tooltip label="{{prettifyReason_(reason)}}" position=top>

	121 <core-icon icon="{{ getIconForIneligibilityReason_(reason) }}"

	122 class="ineligibility-icon">

	123 </core-icon>

	124 </core-tooltip>

	125 </template>

	126 </div>

	127 </div>

	128 </template>

	129 </paper-shadow>

	130 </template>

	131 <script src="device-list.js"></script>

	132 </polymer-element>

OLD	NEW