blob: 870f10dd87bb5f87577e92c859c34eee74912ee3 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="../settings_shared_css.html">
<dom-module id="bluetooth-device-list-item">
<template>
<style include="settings-shared">
.name[connected] {
font-weight: 500;
}
.state[connected] {
color: var(--google-green-500);
}
</style>
<div class="list-item">
<iron-icon id="deviceIcon" icon="[[getDeviceIcon_(device)]]">
</iron-icon>
<div class="middle">
<div class="name" connected$="[[device.connected]]">
[[getDeviceName_(device)]]
</div>
<div class="state secondary" connected$="[[device.connected]]"
hidden$="[[!hasConnectionStatusText_(device)]]">
[[getConnectionStatusText_(device)]]
</div>
</div>
<span hidden$="[[!device.connecting]]">$i18n{bluetoothConnecting}</span>
<div hidden$="[[!device.paired]]">
<paper-icon-button-light class="icon-more-vert">
<button on-click="onMenuButtonTap_" tabindex$="[[tabindex]]"
title="$i18n{moreActions}" on-keydown="ignoreEnterKey_">
</button>
</paper-icon-button-light>
<cr-action-menu id="dotsMenu">
<button slot="item" class="dropdown-item"
on-click="onConnectActionTap_">
[[getConnectActionText_(device.connected)]]
</button>
<button slot="item" class="dropdown-item" on-click="onRemoveTap_">
$i18n{bluetoothRemove}
</button>
</cr-action-menu>
</div>
</div>
</template>
<script src="bluetooth_device_list_item.js"></script>
</dom-module>