Add icons to device action overflow menu (#13455)

* Add icons to device action overflow menu

* Update size of meta icon

* Tweak naming as suggest by Paulus

* Missed on suggestion, also adjusted

* Delete device -> Delete

* View network

* Rename key

* Prettier

Co-authored-by: Zack <zackbarett@hey.com>
This commit is contained in:
Franck Nijhof 2022-08-23 21:13:22 +02:00 committed by GitHub
parent 2475f6bd41
commit fc1481d365
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 94 additions and 26 deletions

View File

@ -1,3 +1,4 @@
import { mdiInformation } from "@mdi/js";
import type { DeviceRegistryEntry } from "../../../../../../data/device_registry";
import type { DeviceAction } from "../../../ha-config-device-page";
import { showMQTTDeviceDebugInfoDialog } from "./show-dialog-mqtt-device-debug-info";
@ -8,6 +9,7 @@ export const getMQTTDeviceActions = (
): DeviceAction[] => [
{
label: "MQTT Info",
icon: mdiInformation,
action: async () => showMQTTDeviceDebugInfoDialog(el, { device }),
},
];

View File

@ -1,3 +1,11 @@
import {
mdiCogRefresh,
mdiDrawPen,
mdiFamilyTree,
mdiFileTree,
mdiGroup,
mdiPlus,
} from "@mdi/js";
import { navigate } from "../../../../../../common/navigate";
import type { DeviceRegistryEntry } from "../../../../../../data/device_registry";
import { fetchZHADevice } from "../../../../../../data/zha";
@ -33,6 +41,7 @@ export const getZHADeviceActions = async (
if (!zhaDevice.active_coordinator) {
actions.push({
label: hass.localize("ui.dialogs.zha_device_info.buttons.reconfigure"),
icon: mdiCogRefresh,
action: () => showZHAReconfigureDeviceDialog(el, { device: zhaDevice }),
});
}
@ -46,12 +55,14 @@ export const getZHADeviceActions = async (
...[
{
label: hass.localize("ui.dialogs.zha_device_info.buttons.add"),
icon: mdiPlus,
action: () => navigate(`/config/zha/add/${zhaDevice!.ieee}`),
},
{
label: hass.localize(
"ui.dialogs.zha_device_info.buttons.device_children"
),
icon: mdiFileTree,
action: () => showZHADeviceChildrenDialog(el, { device: zhaDevice! }),
},
]
@ -64,16 +75,17 @@ export const getZHADeviceActions = async (
label: hass.localize(
"ui.dialogs.zha_device_info.buttons.zigbee_information"
),
icon: mdiDrawPen,
action: () => showZHADeviceZigbeeInfoDialog(el, { device: zhaDevice }),
},
{
label: hass.localize("ui.dialogs.zha_device_info.buttons.clusters"),
icon: mdiGroup,
action: () => showZHAClusterDialog(el, { device: zhaDevice }),
},
{
label: hass.localize(
"ui.dialogs.zha_device_info.buttons.view_in_visualization"
),
label: hass.localize("ui.dialogs.zha_device_info.buttons.view_network"),
icon: mdiFamilyTree,
action: () =>
navigate(`/config/zha/visualization/${zhaDevice!.device_reg_id}`),
},

View File

@ -1,3 +1,11 @@
import {
mdiChatQuestion,
mdiCog,
mdiDeleteForever,
mdiHospitalBox,
mdiInformation,
mdiUpload,
} from "@mdi/js";
import { getConfigEntries } from "../../../../../../data/config_entries";
import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
import {
@ -44,12 +52,14 @@ export const getZwaveDeviceActions = async (
label: hass.localize(
"ui.panel.config.zwave_js.device_info.device_config"
),
icon: mdiCog,
href: `/config/zwave_js/node_config/${device.id}?config_entry=${entryId}`,
},
{
label: hass.localize(
"ui.panel.config.zwave_js.device_info.reinterview_device"
),
icon: mdiChatQuestion,
action: () =>
showZWaveJSReinterviewNodeDialog(el, {
device_id: device.id,
@ -57,6 +67,7 @@ export const getZwaveDeviceActions = async (
},
{
label: hass.localize("ui.panel.config.zwave_js.device_info.heal_node"),
icon: mdiHospitalBox,
action: () =>
showZWaveJSHealNodeDialog(el, {
device,
@ -66,6 +77,7 @@ export const getZwaveDeviceActions = async (
label: hass.localize(
"ui.panel.config.zwave_js.device_info.remove_failed"
),
icon: mdiDeleteForever,
action: () =>
showZWaveJSRemoveFailedNodeDialog(el, {
device_id: device.id,
@ -75,6 +87,7 @@ export const getZwaveDeviceActions = async (
label: hass.localize(
"ui.panel.config.zwave_js.device_info.node_statistics"
),
icon: mdiInformation,
action: () =>
showZWaveJSNodeStatisticsDialog(el, {
device,
@ -97,6 +110,7 @@ export const getZwaveDeviceActions = async (
label: hass.localize(
"ui.panel.config.zwave_js.device_info.update_firmware"
),
icon: mdiUpload,
action: async () => {
if (
isNodeFirmwareUpdateInProgress ||

View File

@ -102,7 +102,7 @@ export class HaDeviceInfoZWaveJS extends SubscribeMixin(LitElement) {
`
: ""}
<div>
${this.hass.localize("ui.panel.config.zwave_js.common.node_id")}:
${this.hass.localize("ui.panel.config.zwave_js.device_info.node_id")}:
${this._node.node_id}
</div>
${!this._node.is_controller_node

View File

@ -1,5 +1,8 @@
import {
mdiCog,
mdiDelete,
mdiDotsVertical,
mdiDownload,
mdiOpenInNew,
mdiPencil,
mdiPlusCircle,
@ -79,6 +82,7 @@ export interface DeviceAction {
href?: string;
action?: (ev: any) => void;
label: string;
icon?: string;
trailingIcon?: string;
classes?: string;
}
@ -714,8 +718,20 @@ export class HaConfigDevicePage extends LitElement {
class=${ifDefined(firstDeviceAction!.classes)}
.action=${firstDeviceAction!.action}
@click=${this._deviceActionClicked}
graphic="icon"
>
${firstDeviceAction!.label}
${firstDeviceAction!.icon
? html`
<ha-svg-icon
class=${ifDefined(
firstDeviceAction!.classes
)}
.path=${firstDeviceAction!.icon}
slot="graphic"
></ha-svg-icon>
`
: ""}
${firstDeviceAction!.trailingIcon
? html`
<ha-svg-icon
@ -747,11 +763,27 @@ export class HaConfigDevicePage extends LitElement {
)}
.action=${deviceAction.action}
@click=${this._deviceActionClicked}
graphic="icon"
.hasMeta=${Boolean(
deviceAction.trailingIcon
)}
>
${deviceAction.label}
${deviceAction.icon
? html`
<ha-svg-icon
class=${ifDefined(
deviceAction.classes
)}
.path=${deviceAction.icon}
slot="graphic"
></ha-svg-icon>
`
: ""}
${deviceAction.trailingIcon
? html`
<ha-svg-icon
slot="meta"
.path=${deviceAction.trailingIcon}
></ha-svg-icon>
`
@ -869,6 +901,7 @@ export class HaConfigDevicePage extends LitElement {
links as { link: string; domain: string }[]
).map((link) => ({
href: link.link,
icon: mdiDownload,
action: (ev) => this._signUrl(ev),
label:
links.length > 1
@ -914,6 +947,7 @@ export class HaConfigDevicePage extends LitElement {
);
},
classes: "warning",
icon: mdiDelete,
label:
buttons.length > 1
? this.hass.localize(
@ -950,10 +984,9 @@ export class HaConfigDevicePage extends LitElement {
if (configurationUrl) {
deviceActions.push({
href: configurationUrl,
icon: mdiCog,
label: this.hass.localize(
`ui.panel.config.devices.open_configuration_url_${
device.entry_type || "device"
}`
"ui.panel.config.devices.open_configuration_url"
),
trailingIcon: mdiOpenInNew,
});
@ -1376,6 +1409,13 @@ export class HaConfigDevicePage extends LitElement {
ha-svg-icon[slot="trailingIcon"] {
display: block;
width: 18px;
height: 18px;
}
ha-svg-icon[slot="meta"] {
width: 18px;
height: 18px;
}
.items {

View File

@ -1006,13 +1006,13 @@
"device_signature": "Zigbee device signature",
"device_children": "Zigbee device children",
"buttons": {
"add": "Add Devices via this device",
"remove": "Remove Device",
"clusters": "Manage Clusters",
"reconfigure": "Reconfigure Device",
"zigbee_information": "Zigbee device signature",
"device_children": "View Children",
"view_in_visualization": "View in Visualization"
"add": "Add devices via this device",
"remove": "Remove",
"clusters": "Manage clusters",
"reconfigure": "Reconfigure",
"zigbee_information": "Zigbee signature",
"device_children": "View children",
"view_network": "View network"
},
"services": {
"reconfigure": "Reconfigure ZHA device (heal device). Use this if you are having issues with the device. If the device in question is a battery powered device please ensure it is awake and accepting commands when you use this service.",
@ -2558,11 +2558,10 @@
"config_entry": "Config entry"
},
"enabled_description": "Disabled devices will not be shown and entities belonging to the device will be disabled and not added to Home Assistant.",
"open_configuration_url_device": "Visit device",
"open_configuration_url_service": "Visit service",
"open_configuration_url": "Visit",
"download_diagnostics": "Download diagnostics",
"download_diagnostics_integration": "Download {integration} diagnostics",
"delete_device": "Delete device",
"delete_device": "Delete",
"delete_device_integration": "Remove {integration} from device",
"type": {
"device_heading": "Device",
@ -3164,18 +3163,19 @@
},
"device_info": {
"zwave_info": "Z-Wave Info",
"node_status": "Device Status",
"node_ready": "Device Ready",
"device_config": "Configure Device",
"reinterview_device": "Re-interview Device",
"heal_node": "Heal Device",
"remove_failed": "Remove Failed Device",
"update_firmware": "Update Device Firmware",
"highest_security": "Highest Security",
"node_id": "ID",
"node_status": "Status",
"node_ready": "Ready",
"device_config": "Configure",
"reinterview_device": "Re-interview",
"heal_node": "Heal",
"remove_failed": "Remove failed",
"update_firmware": "Update",
"highest_security": "Highest security",
"unknown": "Unknown",
"zwave_plus": "Z-Wave Plus",
"zwave_plus_version": "Version {version}",
"node_statistics": "Show Device Statistics"
"node_statistics": "Statistics"
},
"node_statistics": {
"title": "Device Statistics",