From 0c940be5fb002f7df938055997d2be71d6e50903 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Thu, 14 Oct 2021 15:44:20 +0200 Subject: [PATCH] Consolidate all icon button logic into `` + ensure tooltip (#9230) --- gallery/src/ha-gallery.js | 5 +- hassio/src/addon-store/hassio-addon-store.ts | 12 ++-- .../addon-view/config/hassio-addon-config.ts | 11 +-- .../src/addon-view/info/hassio-addon-info.ts | 4 +- hassio/src/backups/hassio-backups.ts | 28 +++++--- hassio/src/components/hassio-upload-backup.ts | 5 +- .../backup/dialog-hassio-backup-upload.ts | 10 ++- .../dialogs/backup/dialog-hassio-backup.ts | 22 +++--- .../hardware/dialog-hassio-hardware.ts | 12 ++-- .../dialogs/network/dialog-hassio-network.ts | 12 ++-- .../registries/dialog-hassio-registries.ts | 14 ++-- .../dialog-hassio-repositories.ts | 12 ++-- .../update/dialog-supervisor-update.ts | 1 - .../src/ingress-view/hassio-ingress-view.ts | 12 ++-- hassio/src/system/hassio-host-info.ts | 9 ++- src/common/search/search-input.ts | 18 ++--- src/components/data-table/ha-data-table.ts | 4 ++ .../device/ha-area-devices-picker.ts | 20 +++--- src/components/device/ha-device-picker.ts | 2 +- .../entity/ha-entity-attribute-picker.ts | 20 +++--- src/components/entity/ha-entity-picker.ts | 20 +++--- src/components/entity/ha-entity-toggle.ts | 9 +-- src/components/entity/ha-statistic-picker.ts | 3 +- src/components/ha-alert.ts | 13 ++-- src/components/ha-area-picker.ts | 20 +++--- .../ha-button-related-filter-menu.ts | 10 +-- src/components/ha-button-toggle-group.ts | 27 ++++--- src/components/ha-climate-control.js | 15 ++-- src/components/ha-combo-box.ts | 21 +++--- src/components/ha-cover-controls.ts | 14 ++-- src/components/ha-cover-tilt-controls.ts | 13 ++-- src/components/ha-dialog.ts | 12 ++-- src/components/ha-file-upload.ts | 24 ++++--- src/components/ha-form/ha-form-select.ts | 1 - src/components/ha-form/ha-form-string.ts | 22 +++--- src/components/ha-icon-button-arrow-next.ts | 16 ++--- src/components/ha-icon-button-arrow-prev.ts | 10 ++- src/components/ha-icon-button-next.ts | 10 ++- src/components/ha-icon-button-prev.ts | 10 ++- src/components/ha-icon-button.ts | 18 +++-- src/components/ha-menu-button.ts | 12 ++-- src/components/ha-picture-upload.ts | 3 +- src/components/ha-service-control.ts | 11 ++- src/components/ha-sidebar.ts | 35 +++++---- src/components/ha-target-picker.ts | 30 ++++---- src/components/ha-water_heater-control.js | 15 ++-- .../media-player/ha-media-player-browse.ts | 42 +++++------ src/components/trace/hat-script-graph.ts | 25 +++---- src/components/user/ha-users-picker.ts | 18 +++-- .../config-flow/dialog-data-entry-flow.ts | 5 +- .../config-flow/step-flow-pick-handler.ts | 1 + .../more-info/controls/more-info-fan.js | 11 +-- .../more-info/controls/more-info-light.ts | 3 +- .../controls/more-info-media_player.ts | 36 ++++++---- .../more-info/controls/more-info-vacuum.ts | 27 ++++--- src/dialogs/more-info/ha-more-info-dialog.ts | 24 +++---- .../notifications/notification-drawer.js | 1 - src/dialogs/quick-bar/ha-quick-bar.ts | 12 ++-- .../ha-voice-command-dialog.ts | 3 +- src/layouts/hass-tabs-subpage-data-table.ts | 2 + src/panels/calendar/ha-full-calendar.ts | 25 ++++--- src/panels/calendar/ha-panel-calendar.ts | 5 +- .../config/areas/ha-config-area-page.ts | 5 +- .../config/areas/ha-config-areas-dashboard.ts | 5 +- .../action/ha-automation-action-row.ts | 34 ++++----- .../types/ha-automation-action-choose.ts | 12 ++-- .../condition/ha-automation-condition-row.ts | 10 +-- .../config/automation/ha-automation-editor.ts | 9 ++- .../config/automation/ha-automation-picker.ts | 34 +++++---- .../config/automation/ha-automation-trace.ts | 72 +++++++++++-------- .../trigger/ha-automation-trigger-row.ts | 9 ++- .../config/blueprint/ha-blueprint-overview.ts | 33 +++++---- src/panels/config/cloud/alexa/cloud-alexa.ts | 23 +++--- .../cloud-google-assistant.ts | 23 +++--- src/panels/config/cloud/login/cloud-login.js | 8 ++- .../customize/ha-customize-attribute.js | 9 ++- .../config/dashboard/ha-config-dashboard.ts | 1 - .../dialog-device-registry-detail.ts | 2 +- .../config/devices/ha-config-device-page.ts | 48 +++++++------ .../devices/ha-config-devices-dashboard.ts | 11 ++- .../components/ha-energy-battery-settings.ts | 17 +++-- .../components/ha-energy-device-settings.ts | 11 +-- .../components/ha-energy-gas-settings.ts | 21 +++--- .../components/ha-energy-grid-settings.ts | 40 ++++++----- .../components/ha-energy-solar-settings.ts | 15 ++-- src/panels/config/energy/components/styles.ts | 2 +- src/panels/config/energy/ha-config-energy.ts | 1 - .../config/entities/dialog-entity-editor.ts | 17 ++--- .../config/entities/ha-config-entities.ts | 36 +++++----- .../helpers/forms/ha-input_select-form.ts | 7 +- src/panels/config/info/system-health-card.ts | 11 +-- .../integrations/ha-config-integrations.ts | 13 ++-- .../integrations/ha-integration-card.ts | 21 +++--- .../zha/dialog-zha-device-children.ts | 1 + .../zha/zha-cluster-attributes.ts | 4 +- .../zha/zha-cluster-commands.ts | 4 +- .../zha/zha-clusters-data-table.ts | 1 + .../integration-panels/zha/zha-clusters.ts | 4 +- .../zha/zha-device-binding.ts | 4 +- .../zha/zha-device-endpoint-data-table.ts | 1 + .../zha/zha-group-binding.ts | 4 +- .../integration-panels/zha/zha-group-page.ts | 4 +- .../zha/zha-network-visualization-page.ts | 3 +- .../zwave/ha-config-zwave.js | 9 ++- .../integration-panels/zwave/zwave-network.ts | 4 +- .../zwave_js/zwave_js-config-dashboard.ts | 11 +-- .../zwave_js/zwave_js-logs.ts | 14 ++-- .../zwave_js/zwave_js-node-config.ts | 1 - .../config/logs/dialog-system-log-detail.ts | 23 +++--- src/panels/config/logs/error-log-card.ts | 4 +- .../ha-config-lovelace-dashboards.ts | 7 +- src/panels/config/scene/ha-scene-dashboard.ts | 40 +++++------ src/panels/config/scene/ha-scene-editor.ts | 17 +++-- src/panels/config/script/ha-script-editor.ts | 9 ++- src/panels/config/script/ha-script-picker.ts | 47 ++++++------ src/panels/config/script/ha-script-trace.ts | 58 +++++++-------- src/panels/config/tags/ha-config-tags.ts | 38 +++++----- src/panels/config/zone/ha-config-zone.ts | 47 ++++++------ .../service/developer-tools-service.ts | 12 ++-- .../state/developer-tools-state.js | 7 +- src/panels/energy/ha-panel-energy.ts | 2 +- src/panels/history/ha-panel-history.ts | 9 +-- src/panels/logbook/ha-panel-logbook.ts | 10 +-- .../lovelace/cards/hui-humidifier-card.ts | 3 +- src/panels/lovelace/cards/hui-light-card.ts | 19 +++-- src/panels/lovelace/cards/hui-map-card.ts | 13 ++-- .../lovelace/cards/hui-media-control-card.ts | 25 +++---- .../lovelace/cards/hui-picture-glance-card.ts | 8 ++- .../lovelace/cards/hui-thermostat-card.ts | 17 +++-- .../lovelace/components/hui-card-options.ts | 40 +++++------ .../components/hui-energy-period-selector.ts | 45 ++++++------ .../components/hui-input-list-editor.ts | 4 +- .../editor/card-editor/hui-card-picker.ts | 1 + .../card-editor/hui-dialog-edit-card.ts | 7 +- .../card-editor/hui-entity-picker-table.ts | 1 + .../hui-alarm-panel-card-editor.ts | 14 ++-- .../config-elements/hui-stack-card-editor.ts | 30 ++++---- .../hui-header-footer-editor.ts | 32 ++++----- .../lovelace/editor/hui-dialog-save-config.ts | 10 +-- .../editor/hui-entities-card-row-editor.ts | 20 +++--- .../lovelace/editor/hui-sub-element-editor.ts | 11 +-- .../hui-media-player-entity-row.ts | 41 +++++++---- src/panels/lovelace/hui-editor.ts | 4 +- src/panels/lovelace/hui-root.ts | 72 +++++++------------ src/panels/lovelace/views/hui-sidebar-view.ts | 2 +- .../mailbox/ha-dialog-show-audio-message.js | 10 +-- src/panels/map/ha-panel-map.ts | 15 ++-- .../media-browser/ha-panel-media-browser.ts | 1 - .../ha-long-lived-access-tokens-card.ts | 14 ++-- src/panels/profile/ha-refresh-tokens-card.ts | 14 ++-- .../shopping-list/ha-panel-shopping-list.ts | 8 +-- src/translations/en.json | 35 ++++++++- 152 files changed, 1222 insertions(+), 1120 deletions(-) diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js index 9d09da0119..7f53dd717a 100644 --- a/gallery/src/ha-gallery.js +++ b/gallery/src/ha-gallery.js @@ -65,10 +65,11 @@ class HaGallery extends PolymerElement { + > + +
[[_withDefault(_demo, "Home Assistant Gallery")]]
diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index a1dbe3237f..4cc55898a1 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button/mwc-icon-button"; import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical } from "@mdi/js"; @@ -18,7 +17,7 @@ import { navigate } from "../../../src/common/navigate"; import "../../../src/common/search/search-input"; import { extractSearchParam } from "../../../src/common/url/search-params"; import "../../../src/components/ha-button-menu"; -import "../../../src/components/ha-svg-icon"; +import "../../../src/components/ha-icon-button"; import { HassioAddonInfo, HassioAddonRepository, @@ -92,9 +91,11 @@ class HassioAddonStore extends LitElement { slot="toolbar-icon" @action=${this._handleAction} > - - - + ${this.supervisor.localize("store.repositories")} @@ -113,6 +114,7 @@ class HassioAddonStore extends LitElement { : html`
- - - + ${this._yamlMode ? this.supervisor.localize( diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index d1f6da3d08..f37fde8eaf 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -365,9 +365,9 @@ class HassioAddonInfo extends LitElement { diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts index 04cacddc18..e75dc96d2a 100644 --- a/hassio/src/backups/hassio-backups.ts +++ b/hassio/src/backups/hassio-backups.ts @@ -23,7 +23,8 @@ import { } from "../../../src/components/data-table/ha-data-table"; import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-fab"; -import { extractApiErrorMessage } from "../../../src/data/hassio/common"; +import "../../../src/components/ha-icon-button"; +import "../../../src/components/ha-svg-icon"; import { fetchHassioBackups, friendlyFolderName, @@ -31,6 +32,7 @@ import { reloadHassioBackups, removeBackup, } from "../../../src/data/hassio/backup"; +import { extractApiErrorMessage } from "../../../src/data/hassio/common"; import { Supervisor } from "../../../src/data/supervisor/supervisor"; import { showAlertDialog, @@ -40,9 +42,9 @@ import "../../../src/layouts/hass-tabs-subpage-data-table"; import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table"; import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant, Route } from "../../../src/types"; -import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup"; -import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup"; import { showBackupUploadDialog } from "../dialogs/backup/show-dialog-backup-upload"; +import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup"; +import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup"; import { supervisorTabs } from "../hassio-tabs"; import { hassioStyle } from "../resources/hassio-style"; @@ -179,9 +181,11 @@ export class HassioBackups extends LitElement { slot="toolbar-icon" @action=${this._handleAction} > - - - + ${this.supervisor?.localize("common.reload")} @@ -216,13 +220,15 @@ export class HassioBackups extends LitElement { ` : html` - - - + > ${this.supervisor.localize("backup.delete_selected")} @@ -368,7 +374,7 @@ export class HassioBackups extends LitElement { margin-right: -12px; } .header-btns > mwc-button, - .header-btns > mwc-icon-button { + .header-btns > ha-icon-button { margin: 8px; } `, diff --git a/hassio/src/components/hassio-upload-backup.ts b/hassio/src/components/hassio-upload-backup.ts index bbb6f43d7f..70b326bff9 100644 --- a/hassio/src/components/hassio-upload-backup.ts +++ b/hassio/src/components/hassio-upload-backup.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiFolderUpload } from "@mdi/js"; import "@polymer/paper-input/paper-input-container"; import { html, LitElement, TemplateResult } from "lit"; @@ -6,9 +5,8 @@ import { customElement, state } from "lit/decorators"; import { fireEvent } from "../../../src/common/dom/fire_event"; import "../../../src/components/ha-circular-progress"; import "../../../src/components/ha-file-upload"; -import "../../../src/components/ha-svg-icon"; -import { extractApiErrorMessage } from "../../../src/data/hassio/common"; import { HassioBackup, uploadBackup } from "../../../src/data/hassio/backup"; +import { extractApiErrorMessage } from "../../../src/data/hassio/common"; import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box"; import { HomeAssistant } from "../../../src/types"; @@ -31,6 +29,7 @@ export class HassioUploadBackup extends LitElement { public render(): TemplateResult { return html` Upload backup - - - +
${this._backup.name} - - - +
${this._restoringBackup @@ -110,9 +113,11 @@ class HassioBackupDialog @action=${this._handleMenuAction} @closed=${stopPropagation} > - - - + Download Backup Delete Backup ` @@ -126,9 +131,6 @@ class HassioBackupDialog haStyle, haStyleDialog, css` - ha-svg-icon { - color: var(--primary-text-color); - } ha-circular-progress { display: block; text-align: center; diff --git a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts index a8d1481c84..b3e82c46d2 100755 --- a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts +++ b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts @@ -7,6 +7,7 @@ import "../../../../src/common/search/search-input"; import { stringCompare } from "../../../../src/common/string/compare"; import "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-expansion-panel"; +import "../../../../src/components/ha-icon-button"; import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware"; import { dump } from "../../../../src/resources/js-yaml-dump"; import { haStyle, haStyleDialog } from "../../../../src/resources/styles"; @@ -70,10 +71,13 @@ class HassioHardwareDialog extends LitElement {

${this._dialogParams.supervisor.localize("dialog.hardware.title")}

- - - + ${this.supervisor.localize("dialog.network.title")} - - - + ${this._interfaces.length > 1 ? html` - - - + > ` ) @@ -234,7 +232,7 @@ class HassioRegistriesDialog extends LitElement { mwc-button { margin-left: 8px; } - mwc-icon-button { + ha-icon-button { color: var(--error-color); margin: -10px; } diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index 64eb324a20..03f1fc0395 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiDelete } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; @@ -13,7 +12,7 @@ import { caseInsensitiveStringCompare } from "../../../../src/common/string/comp import "../../../../src/components/ha-alert"; import "../../../../src/components/ha-circular-progress"; import { createCloseHeading } from "../../../../src/components/ha-dialog"; -import "../../../../src/components/ha-svg-icon"; +import "../../../../src/components/ha-icon-button"; import { fetchHassioAddonsInfo, HassioAddonRepository, @@ -90,15 +89,14 @@ class HassioRepositoriesDialog extends LitElement {
${repo.maintainer}
${repo.url}
- - - + > ` ) diff --git a/hassio/src/dialogs/update/dialog-supervisor-update.ts b/hassio/src/dialogs/update/dialog-supervisor-update.ts index ca832ff776..cc4f80bb09 100644 --- a/hassio/src/dialogs/update/dialog-supervisor-update.ts +++ b/hassio/src/dialogs/update/dialog-supervisor-update.ts @@ -6,7 +6,6 @@ import "../../../../src/components/ha-alert"; import "../../../../src/components/ha-circular-progress"; import "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-settings-row"; -import "../../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-switch"; import { extractApiErrorMessage, diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts index 91c338a3e5..9deb9bb45a 100644 --- a/hassio/src/ingress-view/hassio-ingress-view.ts +++ b/hassio/src/ingress-view/hassio-ingress-view.ts @@ -12,6 +12,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event"; import { navigate } from "../../../src/common/navigate"; import { extractSearchParam } from "../../../src/common/url/search-params"; import { nextRender } from "../../../src/common/util/render-status"; +import "../../../src/components/ha-icon-button"; import { fetchHassioAddonInfo, HassioAddonDetails, @@ -72,12 +73,11 @@ class HassioIngressView extends LitElement { return html`${this.narrow || this.hass.dockedSidebar === "always_hidden" ? html`
- - - + >
${this._addon.name}
${iframe}` @@ -241,7 +241,7 @@ class HassioIngressView extends LitElement { flex-grow: 1; } - mwc-icon-button { + ha-icon-button { pointer-events: auto; } diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts index 89aab52da9..64b7f90e8f 100644 --- a/hassio/src/system/hassio-host-info.ts +++ b/hassio/src/system/hassio-host-info.ts @@ -9,6 +9,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event"; import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-card"; +import "../../../src/components/ha-icon-button"; import "../../../src/components/ha-settings-row"; import { extractApiErrorMessage, @@ -181,9 +182,11 @@ class HassioHostInfo extends LitElement { : ""} - - - + ${this.filter && html` - - - + .label=${this.hass.localize("ui.common.clear")} + .path=${mdiClose} + > `} `; @@ -90,10 +92,10 @@ class SearchInput extends LitElement { static get styles(): CSSResultGroup { return css` ha-svg-icon, - mwc-icon-button { + ha-icon-button { color: var(--primary-text-color); } - mwc-icon-button { + ha-icon-button { --mdc-icon-button-size: 24px; } ha-svg-icon.prefix { diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 6419406adf..c3c34b80bb 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -30,6 +30,7 @@ import "../ha-checkbox"; import type { HaCheckbox } from "../ha-checkbox"; import "../ha-svg-icon"; import { filterData, sortData } from "./sort-filter"; +import { HomeAssistant } from "../../types"; declare global { // for fire event @@ -93,6 +94,8 @@ export interface SortableColumnContainer { @customElement("ha-data-table") export class HaDataTable extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + @property({ type: Object }) public columns: DataTableColumnContainer = {}; @property({ type: Array }) public data: DataTableRowData[] = []; @@ -232,6 +235,7 @@ export class HaDataTable extends LitElement { ? html`
${this.value - ? html` - - ` + > ` : ""} ${areas.length > 0 ? html` - - - + > ` : ""}
@@ -408,7 +404,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) { .suffix { display: flex; } - mwc-icon-button { + ha-icon-button { --mdc-icon-button-size: 24px; padding: 0px 2px; color: var(--secondary-text-color); diff --git a/src/components/device/ha-device-picker.ts b/src/components/device/ha-device-picker.ts index daf9969af1..3b13c963e1 100644 --- a/src/components/device/ha-device-picker.ts +++ b/src/components/device/ha-device-picker.ts @@ -338,7 +338,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) { static get styles(): CSSResultGroup { return css` - paper-input > mwc-icon-button { + paper-input > ha-icon-button { --mdc-icon-button-size: 24px; padding: 2px; color: var(--secondary-text-color); diff --git a/src/components/entity/ha-entity-attribute-picker.ts b/src/components/entity/ha-entity-attribute-picker.ts index 778a7c991c..a4e45e57ed 100644 --- a/src/components/entity/ha-entity-attribute-picker.ts +++ b/src/components/entity/ha-entity-attribute-picker.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; @@ -18,6 +17,7 @@ import { fireEvent } from "../../common/dom/fire_event"; import { PolymerChangedEvent } from "../../polymer-types"; import { HomeAssistant } from "../../types"; import { formatAttributeName } from "../../util/hass-attributes-util"; +import "../ha-icon-button"; import "../ha-svg-icon"; import "./state-badge"; @@ -114,31 +114,27 @@ class HaEntityAttributePicker extends LitElement {
${this.value ? html` - - - + > ` : ""} - - - + >
@@ -178,7 +174,7 @@ class HaEntityAttributePicker extends LitElement { .suffix { display: flex; } - mwc-icon-button { + ha-icon-button { --mdc-icon-button-size: 24px; padding: 0px 2px; color: var(--secondary-text-color); diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts index 40816b289e..016684e6c2 100644 --- a/src/components/entity/ha-entity-picker.ts +++ b/src/components/entity/ha-entity-picker.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-icon-item"; @@ -21,6 +20,7 @@ import { computeDomain } from "../../common/entity/compute_domain"; import { computeStateName } from "../../common/entity/compute_state_name"; import { PolymerChangedEvent } from "../../polymer-types"; import { HomeAssistant } from "../../types"; +import "../ha-icon-button"; import "../ha-svg-icon"; import "./state-badge"; @@ -267,31 +267,27 @@ export class HaEntityPicker extends LitElement {
${this.value && !this.hideClearIcon ? html` - - - + > ` : ""} - - - + >
@@ -340,7 +336,7 @@ export class HaEntityPicker extends LitElement { .suffix { display: flex; } - mwc-icon-button { + ha-icon-button { --mdc-icon-button-size: 24px; padding: 0px 2px; color: var(--secondary-text-color); diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts index 5a3942d5d3..962af59b92 100644 --- a/src/components/entity/ha-entity-toggle.ts +++ b/src/components/entity/ha-entity-toggle.ts @@ -1,3 +1,4 @@ +import { mdiFlash, mdiFlashOff } from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; import { css, @@ -41,15 +42,15 @@ export class HaEntityToggle extends LitElement { if (this.stateObj.attributes.assumed_state) { return html` mwc-icon-button { + paper-input > ha-icon-button { --mdc-icon-button-size: 24px; padding: 2px; color: var(--secondary-text-color); diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts index ddd3c641e7..25c3975ac6 100644 --- a/src/components/ha-alert.ts +++ b/src/components/ha-alert.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiAlertCircleOutline, mdiAlertOutline, @@ -11,6 +10,7 @@ import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../common/dom/fire_event"; +import "./ha-icon-button"; import "./ha-svg-icon"; const ALERT_ICONS = { @@ -66,12 +66,11 @@ class HaAlert extends LitElement { .label=${this.actionText} >` : this.dismissable - ? html` - - ` + label="Dismiss alert" + .path=${mdiClose} + >` : ""}
@@ -140,7 +139,7 @@ class HaAlert extends LitElement { mwc-button { --mdc-theme-primary: var(--primary-text-color); } - mwc-icon-button { + ha-icon-button { --mdc-icon-button-size: 36px; } .issue-type.info > .icon { diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts index 2b991869b3..b79abb66a4 100644 --- a/src/components/ha-area-picker.ts +++ b/src/components/ha-area-picker.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; @@ -42,6 +41,7 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin"; import { PolymerChangedEvent } from "../polymer-types"; import { HomeAssistant } from "../types"; import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; +import "./ha-icon-button"; import "./ha-svg-icon"; const rowRenderer: ComboBoxLitRenderer = ( @@ -362,28 +362,24 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) { > ${this.value ? html` - - - + > ` : ""} - - - + > `; @@ -457,7 +453,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) { static get styles(): CSSResultGroup { return css` - paper-input > mwc-icon-button { + paper-input > ha-icon-button { --mdc-icon-button-size: 24px; padding: 2px; color: var(--secondary-text-color); diff --git a/src/components/ha-button-related-filter-menu.ts b/src/components/ha-button-related-filter-menu.ts index 02db7f1e20..afbfff1966 100644 --- a/src/components/ha-button-related-filter-menu.ts +++ b/src/components/ha-button-related-filter-menu.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button"; import type { Corner } from "@material/mwc-menu"; import "@material/mwc-menu/mwc-menu-surface"; import { mdiFilterVariant } from "@mdi/js"; @@ -12,7 +11,7 @@ import type { HomeAssistant } from "../types"; import "./device/ha-device-picker"; import "./entity/ha-entity-picker"; import "./ha-area-picker"; -import "./ha-svg-icon"; +import "./ha-icon-button"; declare global { // for fire event @@ -55,9 +54,10 @@ export class HaRelatedFilterButtonMenu extends LitElement { protected render(): TemplateResult { return html` - - - + ${this.buttons.map((button) => button.iconPath - ? html` - - ` + >` : html`[[value]] [[units]]
- + + +
- + + +
`; diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts index 8abeaf24ba..afcd9c8911 100644 --- a/src/components/ha-combo-box.ts +++ b/src/components/ha-combo-box.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; @@ -11,7 +10,7 @@ import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; import { PolymerChangedEvent } from "../polymer-types"; import { HomeAssistant } from "../types"; -import "./ha-svg-icon"; +import "./ha-icon-button"; // eslint-disable-next-line lit/prefer-static-styles const defaultRowRenderer: ComboBoxLitRenderer = (item) => html`
- + + + `; } diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index f81527cce0..b7428354e4 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -7,7 +7,6 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import "../../../components/ha-card"; import "../../../components/ha-icon-next"; import "../../../components/ha-menu-button"; -import "../../../components/ha-svg-icon"; import { CloudStatus } from "../../../data/cloud"; import "../../../layouts/ha-app-layout"; import { haStyle } from "../../../resources/styles"; diff --git a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts index 13f930437c..8ad148eef4 100644 --- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts +++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts @@ -25,7 +25,7 @@ class DialogDeviceRegistryDetail extends LitElement { @state() private _params?: DeviceRegistryDetailDialogParams; - @state() private _areaId?: string | null; + @property() public _areaId?: string | null; @state() private _disabledBy!: string | null; diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index 25206b1ca9..b130d34e91 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -1,3 +1,4 @@ +import { mdiPencil, mdiPlusCircle } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -9,6 +10,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name"; import { stringCompare } from "../../../common/string/compare"; import { slugify } from "../../../common/string/slugify"; import "../../../components/entity/ha-battery-icon"; +import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; import { AreaRegistryEntry } from "../../../data/area_registry"; import { @@ -184,8 +186,11 @@ export class HaConfigDevicePage extends LitElement { ` : "" @@ -216,8 +221,11 @@ export class HaConfigDevicePage extends LitElement { : ""} ` @@ -315,14 +323,14 @@ export class HaConfigDevicePage extends LitElement { ${this._related?.automation?.length @@ -387,20 +395,20 @@ export class HaConfigDevicePage extends LitElement { "ui.panel.config.devices.scene.scenes" )} - + ${ @@ -471,14 +479,14 @@ export class HaConfigDevicePage extends LitElement { ${this._related?.script?.length diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index 97502831d2..c8f12b685f 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -17,6 +17,7 @@ import { } from "../../../components/data-table/ha-data-table"; import "../../../components/entity/ha-battery-icon"; import "../../../components/ha-button-menu"; +import "../../../components/ha-icon-button"; import { AreaRegistryEntry } from "../../../data/area_registry"; import { ConfigEntry } from "../../../data/config_entries"; import { @@ -407,17 +408,13 @@ export class HaConfigDeviceDashboard extends LitElement { ` : html``} - - - + .path=${mdiFilterVariant} + > - - - - - - + + `; })} diff --git a/src/panels/config/energy/components/ha-energy-device-settings.ts b/src/panels/config/energy/components/ha-energy-device-settings.ts index eae9906b36..c805e92abf 100644 --- a/src/panels/config/energy/components/ha-energy-device-settings.ts +++ b/src/panels/config/energy/components/ha-energy-device-settings.ts @@ -6,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import { computeStateName } from "../../../../common/entity/compute_state_name"; import { stateIcon } from "../../../../common/entity/state_icon"; import "../../../../components/ha-card"; +import "../../../../components/ha-icon-button"; import { DeviceConsumptionEnergyPreference, EnergyPreferences, @@ -13,8 +14,8 @@ import { saveEnergyPreferences, } from "../../../../data/energy"; import { - showConfirmationDialog, showAlertDialog, + showConfirmationDialog, } from "../../../../dialogs/generic/show-dialog-box"; import { haStyle } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; @@ -84,9 +85,11 @@ export class EnergyDeviceSettings extends LitElement { ? computeStateName(entityState) : device.stat_consumption} - - - + `; })} diff --git a/src/panels/config/energy/components/ha-energy-gas-settings.ts b/src/panels/config/energy/components/ha-energy-gas-settings.ts index 13ff04c2a7..3f92d1a023 100644 --- a/src/panels/config/energy/components/ha-energy-gas-settings.ts +++ b/src/panels/config/energy/components/ha-energy-gas-settings.ts @@ -5,17 +5,18 @@ import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { computeStateName } from "../../../../common/entity/compute_state_name"; import "../../../../components/ha-card"; +import "../../../../components/ha-icon-button"; import { EnergyPreferences, - saveEnergyPreferences, - GasSourceTypeEnergyPreference, EnergyPreferencesValidation, EnergyValidationIssue, + GasSourceTypeEnergyPreference, getEnergyGasUnitCategory, + saveEnergyPreferences, } from "../../../../data/energy"; import { - showConfirmationDialog, showAlertDialog, + showConfirmationDialog, } from "../../../../dialogs/generic/show-dialog-box"; import { haStyle } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; @@ -92,12 +93,14 @@ export class EnergyGasSettings extends LitElement { ? computeStateName(entityState) : source.stat_energy_from} - - - - - - + + `; })} diff --git a/src/panels/config/energy/components/ha-energy-grid-settings.ts b/src/panels/config/energy/components/ha-energy-grid-settings.ts index 652a7e01f2..d0b3df4e76 100644 --- a/src/panels/config/energy/components/ha-energy-grid-settings.ts +++ b/src/panels/config/energy/components/ha-energy-grid-settings.ts @@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { computeStateName } from "../../../../common/entity/compute_state_name"; import "../../../../components/ha-card"; +import "../../../../components/ha-icon-button"; import { ConfigEntry, deleteConfigEntry, @@ -130,12 +131,14 @@ export class EnergyGridSettings extends LitElement { ? computeStateName(entityState) : flow.stat_energy_from} - - - - - - + + `; })} @@ -167,12 +170,14 @@ export class EnergyGridSettings extends LitElement { ? computeStateName(entityState) : flow.stat_energy_to} - - - - - - + + `; })} @@ -202,13 +207,12 @@ export class EnergyGridSettings extends LitElement { /> ${entry.title} - - - + - - - + ` )} ${this._configEntries?.length === 0 diff --git a/src/panels/config/energy/components/ha-energy-solar-settings.ts b/src/panels/config/energy/components/ha-energy-solar-settings.ts index 9f1bbd3712..eca1055649 100644 --- a/src/panels/config/energy/components/ha-energy-solar-settings.ts +++ b/src/panels/config/energy/components/ha-energy-solar-settings.ts @@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { computeStateName } from "../../../../common/entity/compute_state_name"; import "../../../../components/ha-card"; +import "../../../../components/ha-icon-button"; import { EnergyInfo, EnergyPreferences, @@ -102,14 +103,16 @@ export class EnergySolarSettings extends LitElement { > ${this.info ? html` - - - + ` : ""} - - - + `; })} diff --git a/src/panels/config/energy/components/styles.ts b/src/panels/config/energy/components/styles.ts index 91ef2109cd..5aab3c4dbc 100644 --- a/src/panels/config/energy/components/styles.ts +++ b/src/panels/config/energy/components/styles.ts @@ -31,7 +31,7 @@ export const energyCardStyles = css` .row .content { flex-grow: 1; } - mwc-icon-button { + ha-icon-button { color: var(--secondary-text-color); } `; diff --git a/src/panels/config/energy/ha-config-energy.ts b/src/panels/config/energy/ha-config-energy.ts index 83e1ef20e2..b93c93c749 100644 --- a/src/panels/config/energy/ha-config-energy.ts +++ b/src/panels/config/energy/ha-config-energy.ts @@ -1,6 +1,5 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; -import "../../../components/ha-svg-icon"; import { EnergyPreferencesValidation, getEnergyPreferenceValidation, diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts index 706207f053..74bae4b7cb 100644 --- a/src/panels/config/entities/dialog-entity-editor.ts +++ b/src/panels/config/entities/dialog-entity-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button"; import "@material/mwc-tab"; import "@material/mwc-tab-bar"; import { mdiClose, mdiTune } from "@mdi/js"; @@ -11,8 +10,8 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import "../../../components/ha-dialog"; import "../../../components/ha-header-bar"; +import "../../../components/ha-icon-button"; import "../../../components/ha-related-items"; -import "../../../components/ha-svg-icon"; import { EntityRegistryEntry, ExtEntityRegistryEntry, @@ -82,27 +81,25 @@ export class DialogEntityEditor extends LitElement { >
- - - + > ${stateObj ? computeStateName(stateObj) : entry?.name || entityId} ${stateObj ? html` - - - + > ` : ""} diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 3c26266704..7dfe441b87 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -14,7 +14,7 @@ import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-tooltip/paper-tooltip"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; -import { customElement, property, state, query } from "lit/decorators"; +import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { styleMap } from "lit/directives/style-map"; import memoize from "memoize-one"; @@ -33,6 +33,7 @@ import type { SelectionChangedEvent, } from "../../../components/data-table/ha-data-table"; import "../../../components/ha-button-menu"; +import "../../../components/ha-icon-button"; import "../../../components/ha-svg-icon"; import { AreaRegistryEntry, @@ -540,32 +541,35 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { > ` : html` - + .path=${mdiUndo} + .label=${this.hass.localize("ui.common.enable")} + > ${this.hass.localize( "ui.panel.config.entities.picker.enable_selected.button" )} - + .path=${mdiCancel} + .label=${this.hass.localize("ui.common.disable")} + > ${this.hass.localize( "ui.panel.config.entities.picker.disable_selected.button" )} - + .path=${mdiDelete} + .label=${this.hass.localize("ui.common.remove")} + > ${this.hass.localize( "ui.panel.config.entities.picker.remove_selected.button" @@ -575,17 +579,13 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
` : html` - - - + .path=${mdiFilterVariant} + > mwc-button, - .header-btns > mwc-icon-button { + .header-btns > ha-icon-button { margin: 8px; } ha-button-menu { diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts index 9664e14979..a269c3e938 100644 --- a/src/panels/config/helpers/forms/ha-input_select-form.ts +++ b/src/panels/config/helpers/forms/ha-input_select-form.ts @@ -1,10 +1,11 @@ import "@material/mwc-button/mwc-button"; +import { mdiDelete } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; -import { customElement, property, state, query } from "lit/decorators"; +import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-input"; @@ -89,11 +90,11 @@ class HaInputSelectForm extends LitElement { ${option} ` diff --git a/src/panels/config/info/system-health-card.ts b/src/panels/config/info/system-health-card.ts index 28c139609a..5f825ac37a 100644 --- a/src/panels/config/info/system-health-card.ts +++ b/src/panels/config/info/system-health-card.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-icon-button"; import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; import { mdiContentCopy } from "@mdi/js"; @@ -12,7 +11,7 @@ import { copyToClipboard } from "../../../common/util/copy-clipboard"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; import "../../../components/ha-circular-progress"; -import "../../../components/ha-svg-icon"; +import "../../../components/ha-icon-button"; import { domainToName } from "../../../data/integration"; import { subscribeSystemHealthInfo, @@ -150,9 +149,11 @@ class SystemHealthCard extends LitElement { slot="toolbar-icon" @action=${this._copyInfo} > - - - + ${this.hass.localize("ui.panel.config.info.copy_raw")} diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 55e691d524..51ffe7e2f4 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button"; import { ActionDetail } from "@material/mwc-list"; import "@material/mwc-list/mwc-list-item"; import { mdiFilterVariant, mdiPlus } from "@mdi/js"; @@ -25,6 +24,7 @@ import { nextRender } from "../../../common/util/render-status"; import "../../../components/ha-button-menu"; import "../../../components/ha-checkbox"; import "../../../components/ha-fab"; +import "../../../components/ha-icon-button"; import "../../../components/ha-svg-icon"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { ConfigEntry, getConfigEntries } from "../../../data/config_entries"; @@ -290,13 +290,12 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { slot=${ifDefined(this.narrow ? "toolbar-icon" : undefined)} @action=${this._handleMenuAction} > - - - + ${this.hass.localize( @@ -326,6 +325,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { ? html`
` @@ -291,13 +298,11 @@ export class HaIntegrationCard extends LitElement { : ""} - - - + .label=${this.hass.localize("ui.common.menu")} + .path=${mdiDotsVertical} + > ${this.hass.localize( "ui.panel.config.integrations.config_entry.rename" diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts index 255579d4ad..032ee83778 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts @@ -101,6 +101,7 @@ class DialogZHADeviceChildren extends LitElement { active >` : html` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts index de1a2781c5..d00e672d5f 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts @@ -1,3 +1,4 @@ +import { mdiHelpCircle } from "@mdi/js"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; @@ -72,7 +73,8 @@ export class ZHAClusterCommands extends LitElement { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts index e29bcbe10d..f4f0e5fdbf 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts @@ -76,6 +76,7 @@ export class ZHAClustersDataTable extends LitElement { protected render(): TemplateResult { return html` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts index cc5623422d..024e35db24 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts @@ -1,4 +1,5 @@ import "@material/mwc-button/mwc-button"; +import { mdiHelpCircle } from "@mdi/js"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; @@ -52,7 +53,8 @@ export class ZHADeviceBindingControl extends LitElement { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts index eb2237a716..bebc5826a8 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts @@ -137,6 +137,7 @@ export class ZHADeviceEndpointDataTable extends LitElement { protected render(): TemplateResult { return html` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts index af438db7f3..55909499ac 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts @@ -1,4 +1,5 @@ import "@material/mwc-button"; +import { mdiDelete } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import { customElement, property, state, query } from "lit/decorators"; import { HASSDomEvent } from "../../../../../common/dom/fire_event"; @@ -101,8 +102,9 @@ export class ZHAGroupPage extends LitElement { >
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index 737f504a2f..8403cac13b 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -14,7 +14,6 @@ import "../../../../../components/ha-button-menu"; import "../../../../../components/ha-checkbox"; import type { HaCheckbox } from "../../../../../components/ha-checkbox"; import "../../../../../components/ha-formfield"; -import "../../../../../components/ha-svg-icon"; import { DeviceRegistryEntry } from "../../../../../data/device_registry"; import { fetchDevices, @@ -142,6 +141,7 @@ export class ZHANetworkVisualizationPage extends LitElement { ? html`
${!this.narrow ? html`[[localize('ui.panel.config.zwave.node_management.header')]] - + + +
[[localize('ui.panel.config.zwave.node_management.introduction')]] diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts index 9a346e7551..4e87e96b1b 100644 --- a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts +++ b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts @@ -1,3 +1,4 @@ +import { mdiHelpCircle } from "@mdi/js"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -55,7 +56,8 @@ export class ZwaveNetwork extends LitElement {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts index e24de84726..dbd163508f 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiAlertCircle, mdiCheckCircle, mdiCircle, mdiRefresh } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import "../../../../../components/ha-card"; +import "../../../../../components/ha-icon-button"; import "../../../../../components/ha-icon-next"; import "../../../../../components/ha-svg-icon"; import { getSignedPath } from "../../../../../data/auth"; @@ -83,9 +83,12 @@ class ZWaveJSConfigDashboard extends LitElement { .route=${this.route} .tabs=${configTabs} > - - - +
${this.hass.localize("ui.panel.config.zwave_js.dashboard.header")} diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts index 8df84d6576..42f9c88675 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts @@ -1,9 +1,11 @@ +import { mdiDownload } from "@mdi/js"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-listbox/paper-listbox"; -import { mdiDownload } from "@mdi/js"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultArray, html, LitElement } from "lit"; -import { customElement, property, state, query } from "lit/decorators"; +import { customElement, property, query, state } from "lit/decorators"; +import { capitalizeFirstLetter } from "../../../../../common/string/capitalize-first-letter"; +import "../../../../../components/ha-icon-button"; import { fetchZWaveJSLogConfig, setZWaveJSLogLevel, @@ -16,7 +18,6 @@ import { haStyle } from "../../../../../resources/styles"; import { HomeAssistant, Route } from "../../../../../types"; import { fileDownload } from "../../../../../util/file_download"; import { configTabs } from "./zwave_js-config-router"; -import { capitalizeFirstLetter } from "../../../../../common/string/capitalize-first-letter"; @customElement("zwave_js-logs") class ZWaveJSLogs extends SubscribeMixin(LitElement) { @@ -99,14 +100,13 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) { ` : ""}
- - - + .path=${mdiDownload} + >
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts index 993b3cc7a9..9b2e0a4bdf 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiCheckCircle, mdiCircle, diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts index 074a87eafb..783d7e4627 100644 --- a/src/panels/config/logs/dialog-system-log-detail.ts +++ b/src/panels/config/logs/dialog-system-log-detail.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiClose, mdiContentCopy, mdiPackageVariant } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; @@ -7,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { copyToClipboard } from "../../../common/util/copy-clipboard"; import "../../../components/ha-dialog"; import "../../../components/ha-header-bar"; +import "../../../components/ha-icon-button"; import "../../../components/ha-svg-icon"; import { domainToName, @@ -64,15 +64,18 @@ class DialogSystemLogDetail extends LitElement { const showDocumentation = this._manifest && (this._manifest.is_built_in || - // Custom components with our offical docs should not link to our docs + // Custom components with our official docs should not link to our docs !this._manifest.documentation.includes("://www.home-assistant.io")); return html` - - - + ${this.hass.localize( "ui.panel.config.logs.details", @@ -84,9 +87,13 @@ class DialogSystemLogDetail extends LitElement { >` )} - - - + ${this.isCustomIntegration ? html`
diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index b096fb93ad..bd9c7f9e7d 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -1,4 +1,5 @@ import "@material/mwc-button"; +import { mdiRefresh } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { property, state } from "lit/decorators"; import "../../../components/ha-icon-button"; @@ -17,8 +18,9 @@ class ErrorLogCard extends LitElement { ? html`
${this._errorHTML}
 diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts index cec992c52c..26b0551106 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -1,4 +1,4 @@ -import { mdiPlus } from "@mdi/js"; +import { mdiOpenInNew, mdiPlus } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -149,9 +149,12 @@ export class HaConfigLovelaceDashboards extends LitElement { narrow ? html` ` : html` diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index a3399fc85a..46d40bcaae 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button"; import { mdiHelpCircle, mdiInformationOutline, @@ -19,6 +18,7 @@ import { DataTableColumnContainer } from "../../../components/data-table/ha-data import "../../../components/ha-button-related-filter-menu"; import "../../../components/ha-fab"; import "../../../components/ha-icon"; +import "../../../components/ha-icon-button"; import "../../../components/ha-svg-icon"; import { forwardHaptic } from "../../../data/haptics"; import { activateScene, SceneEntity } from "../../../data/scene"; @@ -72,15 +72,14 @@ class HaSceneDashboard extends LitElement { type: "icon-button", template: (_toggle, scene) => html` - - - + > `, }, icon: { @@ -99,15 +98,14 @@ class HaSceneDashboard extends LitElement { title: "", type: "icon-button", template: (_info, scene) => html` - - - + .path=${mdiInformationOutline} + > `, }, edit: { @@ -121,16 +119,13 @@ class HaSceneDashboard extends LitElement { : undefined )} > - - - + .path=${scene.attributes.id ? mdiPencil : mdiPencilOff} + > ${!scene.attributes.id ? html` @@ -164,9 +159,12 @@ class HaSceneDashboard extends LitElement { @clear-filter=${this._clearFilter} hasFab > - - - + - - + .label=${this.hass.localize("ui.common.menu")} + .path=${mdiDotsVertical} + > ${device.name} - - + .label=${this.hass.localize("ui.common.menu")} + .path=${mdiDotsVertical} + > html` - - - + .path=${mdiPlay} + > `, }, icon: { @@ -128,13 +127,14 @@ class HaScriptPicker extends LitElement { title: "", type: "icon-button", template: (_info, script) => html` - - - + .label=${this.hass.localize( + "ui.panel.config.script.picker.show_info" + )} + .path=${mdiInformationOutline} + > `, }; columns.trace = { @@ -142,13 +142,12 @@ class HaScriptPicker extends LitElement { type: "icon-button", template: (_info, script: any) => html` - - - + .path=${mdiHistory} + > `, }; @@ -157,13 +156,12 @@ class HaScriptPicker extends LitElement { type: "icon-button", template: (_info, script: any) => html` - - - + .path=${mdiPencil} + > `, }; @@ -188,9 +186,12 @@ class HaScriptPicker extends LitElement { @clear-filter=${this._clearFilter} hasFab > - - - + - - - + - - + .path=${mdiDownload} + > `; return html` @@ -120,23 +122,24 @@ export class HaScriptTrace extends LitElement { class="linkButton" href="/config/script/edit/${this.scriptEntityId}" > - - - +
` : ""} ${this._traces && this._traces.length > 0 ? html`
- - - + .path=${mdiRayEndArrow} + > - - - + .path=${mdiRayStartArrow} + >
` : ""} diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts index 09d5096d16..d0c6b780c0 100644 --- a/src/panels/config/tags/ha-config-tags.ts +++ b/src/panels/config/tags/ha-config-tags.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button"; import { mdiCog, mdiContentDuplicate, @@ -12,6 +11,7 @@ import memoizeOne from "memoize-one"; import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table"; import "../../../components/ha-card"; import "../../../components/ha-fab"; +import "../../../components/ha-icon-button"; import "../../../components/ha-relative-time"; import { showAutomationEditor, TagTrigger } from "../../../data/automation"; import { @@ -107,36 +107,33 @@ export class HaConfigTags extends SubscribeMixin(LitElement) { columns.write = { title: "", type: "icon-button", - template: (_write, tag: any) => html` html` - - `, + .label=${this.hass.localize("ui.panel.config.tag.write")} + .path=${mdiContentDuplicate} + >`, }; } columns.automation = { title: "", type: "icon-button", - template: (_automation, tag: any) => html` html` - - `, + .label=${this.hass.localize("ui.panel.config.tag.create_automation")} + .path=${mdiRobot} + >`, }; columns.edit = { title: "", type: "icon-button", - template: (_settings, tag: any) => html` html` - - `, + .label=${this.hass.localize("ui.panel.config.tag.edit")} + .path=${mdiCog} + >`, }; return columns; } @@ -193,9 +190,12 @@ export class HaConfigTags extends SubscribeMixin(LitElement) { .noDataText=${this.hass.localize("ui.panel.config.tag.no_tags")} hasFab > - - - + `; + return html``; } const hass = this.hass; const listBox = @@ -151,15 +151,17 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { .entry=${entry} > - ${entry.name} + ${entry.name} ${!this.narrow ? html` - - - + .path=${mdiPencil} + .label=${hass.localize( + "ui.panel.config.zone.edit_zone" + )} + > ` : ""} @@ -181,7 +183,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { stateObject.entity_id}
- - - + .path=${stateObject.entity_id === "zone.home" && + this.narrow && + this._canEditCore + ? mdiPencil + : mdiPencilOff} + .label=${hass.localize( + "ui.panel.config.zone.edit_zone" + )} + > ${stateObject.entity_id === "zone.home" - ? this.hass.localize( + ? hass.localize( `ui.panel.config.zone.${ this.narrow ? "edit_home_zone_narrow" : "edit_home_zone" }` ) - : this.hass.localize( + : hass.localize( "ui.panel.config.zone.configured_in_yaml" )} @@ -488,10 +490,10 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { overflow: hidden; } ha-icon, - mwc-icon-button:not([disabled]) { + ha-icon-button:not([disabled]) { color: var(--secondary-text-color); } - mwc-icon-button { + ha-icon-button { --mdc-theme-text-disabled-on-light: var(--disabled-text-color); } .empty { @@ -520,6 +522,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { paper-icon-item { padding-top: 4px; padding-bottom: 4px; + cursor: pointer; } .overflow paper-icon-item:last-child { margin-bottom: 80px; diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts index a560d70693..77b85734b9 100644 --- a/src/panels/developer-tools/service/developer-tools-service.ts +++ b/src/panels/developer-tools/service/developer-tools-service.ts @@ -14,6 +14,7 @@ import { HaProgressButton } from "../../../components/buttons/ha-progress-button import "../../../components/entity/ha-entity-picker"; import "../../../components/ha-card"; import "../../../components/ha-expansion-panel"; +import "../../../components/ha-icon-button"; import "../../../components/ha-service-control"; import "../../../components/ha-service-picker"; import "../../../components/ha-yaml-editor"; @@ -185,12 +186,11 @@ class HaPanelDevService extends LitElement { target="_blank" rel="noreferrer" > - - - + ` : ""}
` diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js index 201619bb3b..4d4102227e 100644 --- a/src/panels/developer-tools/state/developer-tools-state.js +++ b/src/panels/developer-tools/state/developer-tools-state.js @@ -16,6 +16,7 @@ import { escapeRegExp } from "../../../common/string/escape_regexp"; import { copyToClipboard } from "../../../common/util/copy-clipboard"; import "../../../components/entity/ha-entity-picker"; import "../../../components/ha-code-editor"; +import "../../../components/ha-icon-button"; import "../../../components/ha-svg-icon"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import { EventsMixin } from "../../../mixins/events-mixin"; @@ -165,11 +166,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) { raised >[[localize('ui.panel.developer-tools.tabs.states.set_state')]] - + path="[[refreshIcon()]]" + >
diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts index 5f825fede5..09673e961f 100644 --- a/src/panels/energy/ha-panel-energy.ts +++ b/src/panels/energy/ha-panel-energy.ts @@ -122,7 +122,7 @@ class PanelEnergy extends LitElement { return [ haStyle, css` - mwc-icon-button { + ha-icon-button { color: var(--text-primary-color); } app-toolbar { diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index c1f7ae5fd6..aa6b043e64 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -18,6 +18,7 @@ import "../../components/entity/ha-entity-picker"; import "../../components/ha-circular-progress"; import "../../components/ha-date-range-picker"; import type { DateRangePickerRanges } from "../../components/ha-date-range-picker"; +import "../../components/ha-icon-button"; import "../../components/ha-menu-button"; import { computeHistory, fetchDate } from "../../data/history"; import "../../layouts/ha-app-layout"; @@ -65,12 +66,12 @@ class HaPanelHistory extends LitElement { .narrow=${this.narrow} >
${this.hass.localize("panel.history")}
- - - + .path=${mdiRefresh} + .label=${this.hass.localize("ui.common.refresh")} + > diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts index 8b7987f8d1..8c8ff39e89 100644 --- a/src/panels/logbook/ha-panel-logbook.ts +++ b/src/panels/logbook/ha-panel-logbook.ts @@ -1,5 +1,4 @@ import { mdiRefresh } from "@mdi/js"; -import "@material/mwc-icon-button"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, html, LitElement, PropertyValues } from "lit"; @@ -20,6 +19,7 @@ import "../../components/entity/ha-entity-picker"; import "../../components/ha-circular-progress"; import "../../components/ha-date-range-picker"; import type { DateRangePickerRanges } from "../../components/ha-date-range-picker"; +import "../../components/ha-icon-button"; import "../../components/ha-menu-button"; import { clearLogbookCache, @@ -82,12 +82,12 @@ export class HaPanelLogbook extends LitElement { .narrow=${this.narrow} >
${this.hass.localize("panel.logbook")}
- - - + > diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts index b1337abf0a..9baf03d160 100644 --- a/src/panels/lovelace/cards/hui-humidifier-card.ts +++ b/src/panels/lovelace/cards/hui-humidifier-card.ts @@ -1,3 +1,4 @@ +import { mdiDotsVertical } from "@mdi/js"; import "@thomasloven/round-slider"; import { HassEntity } from "home-assistant-js-websocket"; import { @@ -158,7 +159,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard { return html` - - - + >
@@ -131,7 +133,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard { "state-on": stateObj.state === "on", "state-unavailable": stateObj.state === UNAVAILABLE, })}" - .icon=${this._config.icon || stateIcon(stateObj)} .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)} style=${styleMap({ filter: this._computeBrightness(stateObj), @@ -143,7 +144,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard { hasDoubleClick: hasAction(this._config!.double_tap_action), })} tabindex="0" - > + > + +
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index d660dae680..9efb669f41 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -137,13 +137,14 @@ class HuiMapCard extends LitElement implements LovelaceCard { .paths=${this._getHistoryPaths(this._config, this._history)} .darkMode=${this._config.dark_mode} > - - - + >
`; @@ -365,7 +366,7 @@ class HuiMapCard extends LitElement implements LovelaceCard { background: inherit; } - mwc-icon-button { + ha-icon-button { position: absolute; top: 75px; left: 3px; diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 7a223f7bb0..7656cb8400 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -1,5 +1,4 @@ -import "@material/mwc-icon-button"; -import { mdiPlayBoxMultiple } from "@mdi/js"; +import { mdiDotsVertical, mdiPlayBoxMultiple } from "@mdi/js"; import "@polymer/paper-progress/paper-progress"; import type { PaperProgressElement } from "@polymer/paper-progress/paper-progress"; import { @@ -23,7 +22,6 @@ import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-card"; import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; -import "../../../components/ha-svg-icon"; import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog"; import { UNAVAILABLE_STATES } from "../../../data/entity"; import { @@ -237,7 +235,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
@@ -271,27 +269,26 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { ${controls!.map( (control) => html` + > + + ` )} ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA) ? html` - + > ` : ""}
@@ -692,7 +689,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { --mdc-icon-size: 40px; } - mwc-icon-button.browse-media { + ha-icon-button.browse-media { position: absolute; right: 4px; --mdc-icon-size: 24px; diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 4a29f5679f..13b5e442ee 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -16,6 +16,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa import { computeStateName } from "../../../common/entity/compute_state_name"; import { stateIcon } from "../../../common/entity/state_icon"; import "../../../components/ha-card"; +import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; import { ActionHandlerEvent } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; @@ -252,13 +253,14 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { class=${classMap({ "state-on": !STATES_OFF.has(stateObj.state), })} - .icon=${entityConf.icon || stateIcon(stateObj)} - title=${`${computeStateName(stateObj)} : ${computeStateDisplay( + .label=${`${computeStateName(stateObj)} : ${computeStateDisplay( this.hass!.localize, stateObj, this.hass!.locale )}`} - > + > + + ${this._config!.show_state !== true && entityConf.show_state !== true ? html`
` : html` diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index d2869a5a4b..dd1b8ae477 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -19,6 +19,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name"; import { formatNumber } from "../../../common/number/format_number"; import "../../../components/ha-card"; import type { HaCard } from "../../../components/ha-card"; +import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; import { ClimateEntity, @@ -233,14 +234,15 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { [mode]: true, })} > - - - + >
@@ -414,10 +416,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { + > + + `; } diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index 63290da1de..aef797e278 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import "@material/mwc-icon-button"; import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js"; @@ -14,6 +13,7 @@ import { import { customElement, property, queryAssignedNodes } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-button-menu"; +import "../../../components/ha-icon-button"; import { saveConfig } from "../../../data/lovelace"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import { HomeAssistant } from "../../../types"; @@ -60,36 +60,34 @@ export class HuiCardOptions extends LitElement { >
- - - - + + > - - - - + .path=${mdiDotsVertical} + > ${this.hass!.localize( "ui.panel.lovelace.editor.edit_card.move" @@ -137,11 +135,11 @@ export class HuiCardOptions extends LitElement { align-items: center; } - mwc-icon-button { + ha-icon-button { color: var(--primary-text-color); } - mwc-icon-button.move-arrow[disabled] { + ha-icon-button.move-arrow[disabled] { color: var(--disabled-text-color); } diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index 95bdb8a060..0ac5bab267 100644 --- a/src/panels/lovelace/components/hui-energy-period-selector.ts +++ b/src/panels/lovelace/components/hui-energy-period-selector.ts @@ -1,21 +1,22 @@ +import "@material/mwc-button/mwc-button"; import { mdiChevronLeft, mdiChevronRight } from "@mdi/js"; import { - endOfToday, addDays, - endOfDay, - startOfToday, - endOfWeek, - endOfMonth, - startOfDay, - startOfWeek, - startOfMonth, addMonths, addWeeks, - startOfYear, addYears, + differenceInDays, + endOfDay, + endOfMonth, + endOfToday, + endOfWeek, endOfYear, isWithinInterval, - differenceInDays, + startOfDay, + startOfMonth, + startOfToday, + startOfWeek, + startOfYear, } from "date-fns"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; @@ -26,14 +27,12 @@ import { formatDateShort, formatDateYear, } from "../../../common/datetime/format_date"; +import { toggleAttribute } from "../../../common/dom/toggle_attribute"; +import "../../../components/ha-button-toggle-group"; +import "../../../components/ha-icon-button"; import { EnergyData, getEnergyDataCollection } from "../../../data/energy"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { HomeAssistant, ToggleButton } from "../../../types"; -import "@material/mwc-icon-button/mwc-icon-button"; -import "../../../components/ha-svg-icon"; -import "@material/mwc-button/mwc-button"; -import "../../../components/ha-button-toggle-group"; -import { toggleAttribute } from "../../../common/dom/toggle_attribute"; @customElement("hui-energy-period-selector") export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { @@ -108,22 +107,20 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { this._endDate || new Date(), this.hass.locale )}`} - - - - + - - + .path=${mdiChevronRight} + > ${this.hass.localize( "ui.panel.lovelace.components.energy_period_selector.today" @@ -264,7 +261,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { --mdc-button-disabled-ink-color: var(--disabled-text-color); --mdc-icon-button-ripple-opacity: 0.2; } - mwc-icon-button { + ha-icon-button { --mdc-icon-button-size: 28px; } ha-button-toggle-group { diff --git a/src/panels/lovelace/components/hui-input-list-editor.ts b/src/panels/lovelace/components/hui-input-list-editor.ts index 5cead88e75..fe53e72c11 100644 --- a/src/panels/lovelace/components/hui-input-list-editor.ts +++ b/src/panels/lovelace/components/hui-input-list-editor.ts @@ -1,3 +1,4 @@ +import { mdiClose } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; @@ -33,9 +34,10 @@ export class HuiInputListEditor extends LitElement { >Clear diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index 882cc7266b..a3c9f8ec85 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -98,6 +98,7 @@ export class HuiCardPicker extends LitElement { return html` - - - + ` : ""} diff --git a/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts b/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts index 3a5791e8e3..b08cdbc539 100644 --- a/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts +++ b/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts @@ -28,6 +28,7 @@ export class HuiEntityPickerTable extends LitElement { protected render(): TemplateResult { return html` - - - + > - - - + > - - - + >
${!this.config?.type ? html` - - - + > ` : html` - - - - + - - + > `}
`; @@ -118,7 +114,7 @@ export class HuiHeaderFooterEditor extends LitElement { align-items: center; } - mwc-icon-button, + ha-icon-button, .header-footer-icon { --mdc-icon-button-size: 36px; color: var(--secondary-text-color); diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts index fe2e6fad39..961f20cd8e 100644 --- a/src/panels/lovelace/editor/hui-dialog-save-config.ts +++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiHelpCircle } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -8,7 +7,7 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl"; import "../../../components/ha-circular-progress"; import "../../../components/ha-dialog"; import "../../../components/ha-formfield"; -import "../../../components/ha-svg-icon"; +import "../../../components/ha-icon-button"; import "../../../components/ha-switch"; import "../../../components/ha-yaml-editor"; import type { LovelaceConfig } from "../../../data/lovelace"; @@ -67,9 +66,10 @@ export class HuiSaveConfig extends LitElement implements HassDialog { rel="noreferrer" dir=${computeRTLDirection(this.hass!)} > - - - + `} >
diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts index 9095c6b1b1..5ea6589448 100644 --- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts +++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button"; import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js"; import { css, @@ -18,6 +17,7 @@ import Sortable, { import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/entity/ha-entity-picker"; import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker"; +import "../../../components/ha-icon-button"; import "../../../components/ha-svg-icon"; import { sortableStyles } from "../../../resources/ha-sortable-style"; import { HomeAssistant } from "../../../types"; @@ -104,26 +104,24 @@ export class HuiEntitiesCardRowEditor extends LitElement { @value-changed=${this._valueChanged} > `} - - - - + - - + >
` ) diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts index e243aee060..eeae816645 100644 --- a/src/panels/lovelace/editor/hui-sub-element-editor.ts +++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts @@ -1,10 +1,9 @@ import "@material/mwc-button"; -import "@material/mwc-icon-button"; import { mdiArrowLeft } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state, query } from "lit/decorators"; import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event"; -import "../../../components/ha-svg-icon"; +import "../../../components/ha-icon-button"; import type { HomeAssistant } from "../../../types"; import type { LovelaceRowConfig } from "../entity-rows/types"; import type { LovelaceHeaderFooterConfig } from "../header-footer/types"; @@ -37,9 +36,11 @@ export class HuiSubElementEditor extends LitElement { return html`
- - - + ${this.hass.localize( `ui.panel.lovelace.editor.sub-element-editor.types.${this.config?.type}` diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts index 4f11a0232b..1b99c687e0 100644 --- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts @@ -1,3 +1,16 @@ +import { + mdiPause, + mdiPlay, + mdiPlayPause, + mdiPower, + mdiSkipNext, + mdiSkipPrevious, + mdiStop, + mdiVolumeHigh, + mdiVolumeMinus, + mdiVolumeOff, + mdiVolumePlus, +} from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; import { css, @@ -102,7 +115,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK) ? html` ` @@ -117,7 +130,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { supportsFeature(stateObj, SUPPORT_PAUSE))) ? html` ` @@ -126,7 +139,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { supportsFeature(stateObj, SUPPORT_NEXT_TRACK) ? html` ` @@ -148,7 +161,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { !UNAVAILABLE_STATES.includes(entityState) ? html` ` @@ -161,7 +174,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { !UNAVAILABLE_STATES.includes(entityState) ? html` ` @@ -177,9 +190,9 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { ${supportsFeature(stateObj, SUPPORT_VOLUME_MUTE) ? html` ` @@ -200,11 +213,11 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS) ? html` ` @@ -238,12 +251,12 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { private _computeControlIcon(stateObj: HassEntity): string { return stateObj.state === "on" - ? "hass:play-pause" + ? mdiPlayPause : stateObj.state !== "playing" - ? "hass:play" + ? mdiPlay : supportsFeature(stateObj, SUPPORT_PAUSE) - ? "hass:pause" - : "hass:stop"; + ? mdiPause + : mdiStop; } private _togglePower(): void { diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index c2c04b095d..235b32f176 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -1,5 +1,6 @@ import { undoDepth } from "@codemirror/history"; import "@material/mwc-button"; +import { mdiClose } from "@mdi/js"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { dump, load } from "js-yaml"; @@ -55,8 +56,9 @@ class LovelaceFullConfigEditor extends LitElement {
${this.hass!.localize( diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 5ab8afac4e..833938d199 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -47,6 +47,7 @@ import { debounce } from "../../common/util/debounce"; import { afterNextRender } from "../../common/util/render-status"; import "../../components/ha-button-menu"; import "../../components/ha-icon"; +import "../../components/ha-icon-button"; import "../../components/ha-icon-button-arrow-next"; import "../../components/ha-icon-button-arrow-prev"; import "../../components/ha-menu-button"; @@ -118,30 +119,24 @@ class HUIRoot extends LitElement { ${this._editMode ? html` - - - + >
${this.config.title || this.hass!.localize("ui.panel.lovelace.editor.header")} - - - + >
- - - + .path=${mdiHelpCircle} + > - - - + .path=${mdiDotsVertical} + > ${__DEMO__ /* No unused entities available in the demo */ ? "" : html` @@ -278,28 +268,23 @@ class HUIRoot extends LitElement { ${!this.narrow && this._conversation(this.hass.config.components) ? html` - - - + > ` : ""} - - - + .path=${mdiDotsVertical} + > ${this.narrow && this._conversation(this.hass.config.components) ? html` @@ -448,9 +433,6 @@ class HUIRoot extends LitElement { ? html` - - + .path=${mdiPlus} + > ` : ""} diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts index f62acd7d7d..165bd8a159 100644 --- a/src/panels/lovelace/views/hui-sidebar-view.ts +++ b/src/panels/lovelace/views/hui-sidebar-view.ts @@ -156,7 +156,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement { element.lovelace = this.lovelace; element.path = [this.index!, idx]; card.editMode = true; - const movePositionButton = document.createElement("mwc-icon-button"); + const movePositionButton = document.createElement("ha-icon-button"); movePositionButton.slot = "buttons"; const moveIcon = document.createElement("ha-svg-icon"); moveIcon.path = diff --git a/src/panels/mailbox/ha-dialog-show-audio-message.js b/src/panels/mailbox/ha-dialog-show-audio-message.js index 3314d8784f..3b999d8f49 100644 --- a/src/panels/mailbox/ha-dialog-show-audio-message.js +++ b/src/panels/mailbox/ha-dialog-show-audio-message.js @@ -4,6 +4,8 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../components/dialog/ha-paper-dialog"; import "../../components/ha-circular-progress"; +import "../../components/ha-icon"; +import "../../components/ha-icon-button"; import LocalizeMixin from "../../mixins/localize-mixin"; import "../../styles/polymer-ha-style-dialog"; @@ -56,11 +58,9 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) { - + + +
diff --git a/src/panels/map/ha-panel-map.ts b/src/panels/map/ha-panel-map.ts index d391668c9d..89b9351473 100644 --- a/src/panels/map/ha-panel-map.ts +++ b/src/panels/map/ha-panel-map.ts @@ -1,16 +1,15 @@ import { mdiPencil } from "@mdi/js"; -import "@material/mwc-icon-button"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import { property } from "lit/decorators"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { navigate } from "../../common/navigate"; -import "../../components/ha-svg-icon"; import "../../components/ha-menu-button"; -import "../../layouts/ha-app-layout"; -import { HomeAssistant } from "../../types"; +import "../../components/ha-icon-button"; import "../../components/map/ha-map"; +import "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; +import { HomeAssistant } from "../../types"; class HaPanelMap extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -30,9 +29,11 @@ class HaPanelMap extends LitElement { >
${this.hass.localize("panel.map")}
${!__DEMO__ && this.hass.user?.is_admin - ? html`` + ? html` ` : ""} diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts index ebf1bfe90c..5b1cc9b0dc 100644 --- a/src/panels/media-browser/ha-panel-media-browser.ts +++ b/src/panels/media-browser/ha-panel-media-browser.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.ts b/src/panels/profile/ha-long-lived-access-tokens-card.ts index dd331c6949..3fe4755b23 100644 --- a/src/panels/profile/ha-long-lived-access-tokens-card.ts +++ b/src/panels/profile/ha-long-lived-access-tokens-card.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiDelete } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; @@ -8,7 +7,7 @@ import { relativeTime } from "../../common/datetime/relative_time"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-card"; import "../../components/ha-settings-row"; -import "../../components/ha-svg-icon"; +import "../../components/ha-icon-button"; import { RefreshToken } from "../../data/refresh_token"; import { showAlertDialog, @@ -72,14 +71,13 @@ class HaLongLivedTokens extends LitElement { relativeTime(new Date(token.created_at), this.hass.locale) )}
- - - + > ` )}
@@ -171,7 +169,7 @@ class HaLongLivedTokens extends LitElement { mwc-button { --mdc-theme-primary: var(--primary-color); } - mwc-icon-button { + ha-icon-button { color: var(--primary-text-color); } `, diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts index 12f801978e..12f08d2bf0 100644 --- a/src/panels/profile/ha-refresh-tokens-card.ts +++ b/src/panels/profile/ha-refresh-tokens-card.ts @@ -1,4 +1,3 @@ -import "@material/mwc-icon-button/mwc-icon-button"; import { mdiDelete } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; @@ -8,7 +7,7 @@ import { relativeTime } from "../../common/datetime/relative_time"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-card"; import "../../components/ha-settings-row"; -import "../../components/ha-svg-icon"; +import "../../components/ha-icon-button"; import { RefreshToken } from "../../data/refresh_token"; import { showAlertDialog, @@ -93,14 +92,13 @@ class HaRefreshTokens extends LitElement { )} ` : ""} - - - + >
` ) @@ -144,7 +142,7 @@ class HaRefreshTokens extends LitElement { ha-settings-row { padding: 0; } - mwc-icon-button { + ha-icon-button { color: var(--primary-text-color); } `, diff --git a/src/panels/shopping-list/ha-panel-shopping-list.ts b/src/panels/shopping-list/ha-panel-shopping-list.ts index f46d52dcd2..a852182225 100644 --- a/src/panels/shopping-list/ha-panel-shopping-list.ts +++ b/src/panels/shopping-list/ha-panel-shopping-list.ts @@ -12,6 +12,7 @@ import { import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; +import "../../components/ha-icon-button"; import "../../components/ha-menu-button"; import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog"; import "../../layouts/ha-app-layout"; @@ -60,14 +61,13 @@ class PanelShoppingList extends LitElement {
${this.hass.localize("panel.shopping_list")}
${this._conversation(this.hass.config.components) ? html` - - - + > ` : ""} diff --git a/src/translations/en.json b/src/translations/en.json index 65c982211e..7b0af74478 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -282,6 +282,7 @@ "enable": "Enable", "disable": "Disable", "close": "Close", + "clear": "Clear", "leave": "Leave", "stay": "Stay", "next": "Next", @@ -294,7 +295,7 @@ "not_now": "Not now", "skip": "Skip", "menu": "Menu", - "overflow_menu": "Overflow menu", + "help": "Help", "successfully_saved": "Successfully saved", "successfully_deleted": "Successfully deleted", "error_required": "Required", @@ -341,6 +342,7 @@ "entity": { "entity-picker": { "entity": "Entity", + "edit": "Edit", "clear": "Clear", "no_match": "No matching entities found", "show_entities": "Show entities" @@ -351,8 +353,10 @@ } }, "target-picker": { + "expand": "Expand", "expand_area_id": "Expand this area into the separate devices and entities that it contains. After expanding, it will not update the devices and entities when the area changes.", "expand_device_id": "Expand this device into the separate entities that it contains. After expanding, it will not update the entities when the device changes.", + "remove": "Remove", "remove_area_id": "Remove area", "remove_device_id": "Remove device", "remove_entity_id": "Remove entity", @@ -895,7 +899,9 @@ "sidebar": { "external_app_configuration": "App Configuration", "sidebar_toggle": "Sidebar Toggle", - "done": "Done" + "done": "Done", + "hide_panel": "Hide panel", + "show_panel": "Show panel" }, "panel": { "my": { @@ -922,6 +928,7 @@ "areas": { "caption": "Areas", "description": "Group devices and entities into areas", + "edit_settings": "Area settings", "data_table": { "area": "Area", "devices": "Devices", @@ -1209,6 +1216,7 @@ }, "info": { "caption": "Info", + "copy_menu": "Copy menu", "copy_raw": "Raw Text", "copy_github": "For GitHub", "description": "Version, system health and links to documentation", @@ -1243,6 +1251,7 @@ "no_issues": "There are no new issues!", "clear": "Clear", "refresh": "Refresh", + "copy": "Copy log entry", "multiple_messages": "message first occurred at {time} and shows up {counter} times", "level": { "critical": "CRITICAL", @@ -1771,6 +1780,13 @@ "ambiguous_entities": "One or more devices have more than one matching entity, please pick the one you want to use.", "unknown_placeholder": "Unknown placeholder" } + }, + "trace": { + "refresh": "[%key:ui::common::refresh%]", + "download_trace": "Download trace", + "edit_automation": "Edit automation", + "older_trace": "Older trace", + "newer_trace": "Newer trace" } }, "blueprint": { @@ -2101,6 +2117,7 @@ "caption": "Devices", "description": "Manage configured devices", "device_info": "Device info", + "edit_settings": "Edit settings", "unnamed_device": "Unnamed device", "unknown_error": "Unknown error", "name": "Name", @@ -2276,6 +2293,7 @@ "no_zones_created_yet": "Looks like you have not created any zones yet.", "create_zone": "Create Zone", "add_zone": "Add Zone", + "edit_zone": "Edit Zone", "confirm_delete": "Are you sure you want to delete this zone?", "configured_in_yaml": "Zones configured via configuration.yaml cannot be edited via the UI.", "edit_home_zone": "The radius of the Home zone can't be edited from the frontend yet. Drag the marker on the map to move the home zone.", @@ -2656,7 +2674,8 @@ "group_name_placeholder": "Group Name", "create_group": "Zigbee Home Automation - Create Group", "create": "Create Group", - "creating_group": "Creating Group" + "creating_group": "Creating Group", + "delete": "Delete Group" }, "visualization": { "header": "Network Visualization", @@ -2925,6 +2944,7 @@ "lovelace": { "cards": { "confirm_delete": "Are you sure you want to delete this card?", + "show_more_info": "Show more information", "actions": { "action_confirmation": "Are you sure you want to run action ''{action}''?", "no_entity_more_info": "No entity provided for more info dialog", @@ -2964,6 +2984,9 @@ "starting": { "description": "Home Assistant is starting, please wait…" }, + "map": { + "reset_focus": "Reset focus" + }, "energy": { "loading": "Loading...", "no_data": "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard.", @@ -3131,6 +3154,8 @@ "delete": "Delete card", "duplicate": "Duplicate card", "move": "Move to view", + "move_up": "Move card up", + "move_down": "Move card down", "move_before": "Move card before", "move_after": "Move card after", "options": "More options", @@ -3471,6 +3496,9 @@ "delete_prompt": "Delete this message?", "delete_button": "Delete" }, + "map": { + "edit_zones": "Edit Zones" + }, "profile": { "current_user": "You are currently logged in as {fullName}.", "is_owner": "You are an owner.", @@ -4119,6 +4147,7 @@ "running_version": "You are currently running version {version}", "save": "[%key:ui::common::save%]", "close": "[%key:ui::common::close%]", + "menu": "[%key:ui::common::menu%]", "show_more": "Show more information about this", "update_available": "{count, plural,\n one {Update}\n other {{count} updates}\n} pending", "update": "Update",