From fc1481d365f194de7a8d0c098c83f54fa84e8da3 Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Tue, 23 Aug 2022 21:13:22 +0200 Subject: [PATCH] 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 --- .../mqtt/device-actions.ts | 2 + .../zha/device-actions.ts | 18 ++++++-- .../zwave_js/device-actions.ts | 14 ++++++ .../zwave_js/ha-device-info-zwave_js.ts | 2 +- .../config/devices/ha-config-device-page.ts | 46 +++++++++++++++++-- src/translations/en.json | 38 +++++++-------- 6 files changed, 94 insertions(+), 26 deletions(-) diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/device-actions.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/device-actions.ts index ff3be5d1a9..faa99cf83d 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/device-actions.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/device-actions.ts @@ -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 }), }, ]; diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/device-actions.ts b/src/panels/config/devices/device-detail/integration-elements/zha/device-actions.ts index 5685b053d4..e914e6aead 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zha/device-actions.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zha/device-actions.ts @@ -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}`), }, diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/device-actions.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/device-actions.ts index 5201a4ae89..5687081ecc 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/device-actions.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/device-actions.ts @@ -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 || diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts index 637b895d62..69cd2b88ec 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts @@ -102,7 +102,7 @@ export class HaDeviceInfoZWaveJS extends SubscribeMixin(LitElement) { ` : ""}
- ${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}
${!this._node.is_controller_node diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index 3ccf58df9b..1838e6a411 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -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` + + ` + : ""} ${firstDeviceAction!.trailingIcon ? html` ${deviceAction.label} + ${deviceAction.icon + ? html` + + ` + : ""} ${deviceAction.trailingIcon ? html` ` @@ -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 { diff --git a/src/translations/en.json b/src/translations/en.json index 222b1033f3..5c4342b975 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -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",