diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index 502df07cc5..8187435bc6 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -1,4 +1,4 @@ -import type { ActionDetail } from "@material/mwc-list"; +import "@home-assistant/webawesome/dist/components/divider/divider"; import { mdiDelete, mdiDotsVertical, @@ -24,10 +24,11 @@ import { type AreasFloorHierarchy, } from "../../../common/areas/areas-floor-hierarchy"; import { formatListWithAnds } from "../../../common/string/format-list"; +import "../../../components/ha-dropdown"; +import "../../../components/ha-dropdown-item"; import "../../../components/ha-fab"; import "../../../components/ha-floor-icon"; import "../../../components/ha-icon-button"; -import "../../../components/ha-list-item"; import "../../../components/ha-sortable"; import type { HaSortableOptions } from "../../../components/ha-sortable"; import "../../../components/ha-svg-icon"; @@ -195,44 +196,45 @@ export class HaConfigAreasDashboard extends LitElement { ${floor.name}
- - ${this.hass.localize( "ui.panel.config.areas.picker.reorder" - )} -
  • - + ${this.hass.localize( "ui.panel.config.areas.picker.floor.edit_floor" - )} - ${this.hass.localize( "ui.panel.config.areas.picker.floor.delete_floor" - )} -
    +
    - - ${this.hass.localize( "ui.panel.config.areas.picker.reorder" - )} - +
    ) { + private _handleFloorAction(ev: CustomEvent<{ item: { value: string } }>) { const floor = (ev.currentTarget as any).floor; - switch (ev.detail.index) { - case 0: + const action = ev.detail.item.value; + switch (action) { + case "reorder": this._showReorderDialog(); break; - case 1: + case "edit": this._editFloor(floor); break; - case 2: + case "delete": this._deleteFloor(floor); break; } } - private _handleUnassignedAreasAction(ev: CustomEvent) { - if (ev.detail.index === 0) { + private _handleUnassignedAreasAction( + ev: CustomEvent<{ item: { value: string } }> + ) { + const action = ev.detail.item.value; + if (action === "reorder") { this._showReorderDialog(); } } diff --git a/src/panels/config/backup/ha-config-backup-details.ts b/src/panels/config/backup/ha-config-backup-details.ts index 490f8f831b..93abd297d0 100644 --- a/src/panels/config/backup/ha-config-backup-details.ts +++ b/src/panels/config/backup/ha-config-backup-details.ts @@ -1,4 +1,3 @@ -import type { ActionDetail } from "@material/mwc-list"; import { mdiDelete, mdiDotsVertical, @@ -14,11 +13,11 @@ import { computeDomain } from "../../../common/entity/compute_domain"; import { navigate } from "../../../common/navigate"; import "../../../components/ha-alert"; import "../../../components/ha-button"; -import "../../../components/ha-button-menu"; import "../../../components/ha-card"; +import "../../../components/ha-dropdown"; +import "../../../components/ha-dropdown-item"; import "../../../components/ha-fade-in"; import "../../../components/ha-icon-button"; -import "../../../components/ha-list-item"; import "../../../components/ha-md-list"; import "../../../components/ha-md-list-item"; import "../../../components/ha-spinner"; @@ -114,21 +113,21 @@ class HaConfigBackupDetails extends LitElement { .header=${this._backup?.name || this.hass.localize("ui.panel.config.backup.details.header")} > - + - - + + ${this.hass.localize("ui.common.download")} - - - + + + ${this.hass.localize("ui.common.delete")} - - + +
    ${this._error && html`${this._error}`} @@ -252,9 +251,9 @@ class HaConfigBackupDetails extends LitElement { ${ success ? html` - @@ -265,16 +264,16 @@ class HaConfigBackupDetails extends LitElement { )} .path=${mdiDotsVertical} > - + ${this.hass.localize( "ui.panel.config.backup.details.locations.download" )} - - + + ` : nothing } @@ -312,18 +311,19 @@ class HaConfigBackupDetails extends LitElement { } } - private _handleAction(ev: CustomEvent) { - switch (ev.detail.index) { - case 0: + private _handleAction(ev: CustomEvent<{ item: { value: string } }>) { + const action = ev.detail.item.value; + switch (action) { + case "download": this._downloadBackup(); break; - case 1: + case "delete": this._deleteBackup(); break; } } - private _handleAgentAction(ev: CustomEvent) { + private _handleAgentAction(ev: CustomEvent<{ item: { value: string } }>) { const button = ev.currentTarget; const agentId = (button as any).agent; this._downloadBackup(agentId); diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 0d49a2d2d1..62c1d967d0 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -1,4 +1,3 @@ -import type { ActionDetail } from "@material/mwc-list"; import { mdiCloudLock, mdiDotsVertical, @@ -13,11 +12,11 @@ import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import "../../../components/chips/ha-assist-chip"; -import "../../../components/ha-button-menu"; import "../../../components/ha-card"; +import "../../../components/ha-dropdown"; +import "../../../components/ha-dropdown-item"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; -import "../../../components/ha-list-item"; import "../../../components/ha-menu-button"; import "../../../components/ha-svg-icon"; import "../../../components/ha-tip"; @@ -226,25 +225,25 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) { .path=${mdiMagnify} @click=${this._showQuickBar} > - + - + ${this.hass.localize("ui.panel.config.updates.check_updates")} - - + + - + ${this.hass.localize( "ui.panel.config.system_dashboard.restart_homeassistant" )} - - - + + + ) { - switch (ev.detail.index) { - case 0: + private async _handleMenuAction( + ev: CustomEvent<{ item: { value: string } }> + ) { + const action = ev.detail.item.value; + switch (action) { + case "check-updates": checkForEntityUpdates(this, this.hass); break; - case 1: + case "restart": showRestartDialog(this); break; } diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts index 86fbd405fd..10d3c4246c 100644 --- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts +++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts @@ -1,4 +1,3 @@ -import type { ActionDetail } from "@material/mwc-list"; import { mdiFilterVariant, mdiPlus } from "@mdi/js"; import type { IFuseOptions } from "fuse.js"; import Fuse from "fuse.js"; @@ -18,9 +17,9 @@ import { caseInsensitiveStringCompare } from "../../../common/string/compare"; import { extractSearchParam } from "../../../common/url/search-params"; import { nextRender } from "../../../common/util/render-status"; import "../../../components/ha-button"; -import "../../../components/ha-button-menu"; -import "../../../components/ha-check-list-item"; import "../../../components/ha-checkbox"; +import "../../../components/ha-dropdown"; +import "../../../components/ha-dropdown-item"; import "../../../components/ha-fab"; import "../../../components/ha-icon-button"; import "../../../components/ha-svg-icon"; @@ -408,24 +407,32 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( ${!this._showDisabled && this.narrow && disabledConfigEntries.length ? html`${disabledConfigEntries.length}` : ""} - + - + ${this.hass.localize( "ui.panel.config.integrations.ignore.show_ignored" )} - - + + ${this.hass.localize( "ui.panel.config.integrations.disable.show_disabled" )} - - + +
    ${this.narrow ? html` @@ -768,12 +775,13 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( }); } - private _handleMenuAction(ev: CustomEvent) { - switch (ev.detail.index) { - case 0: + private _handleMenuAction(ev: CustomEvent<{ item: { value: string } }>) { + const action = ev.detail.item.value; + switch (action) { + case "show-ignored": this._showIgnored = !this._showIgnored; break; - case 1: + case "show-disabled": this._toggleShowDisabled(); break; } @@ -979,7 +987,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( :host([narrow]) hass-tabs-subpage { --main-title-margin: 0; } - ha-button-menu { + ha-dropdown { margin-left: 8px; margin-inline-start: 8px; margin-inline-end: initial; @@ -1077,7 +1085,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( margin-inline-start: 16px; margin-inline-end: initial; } - ha-button-menu { + ha-dropdown ha-icon-button { color: var(--primary-text-color); } `, diff --git a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts b/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts index 934cb86618..0abb80d3d7 100644 --- a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts +++ b/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts @@ -1,4 +1,3 @@ -import type { ActionDetail } from "@material/mwc-list"; import { mdiCellphoneKey, mdiDeleteOutline, @@ -14,9 +13,9 @@ import { isComponentLoaded } from "../../../../../common/config/is_component_loa import { stringCompare } from "../../../../../common/string/compare"; import { extractSearchParam } from "../../../../../common/url/search-params"; import "../../../../../components/ha-button"; -import "../../../../../components/ha-button-menu"; import "../../../../../components/ha-card"; -import "../../../../../components/ha-list-item"; +import "../../../../../components/ha-dropdown"; +import "../../../../../components/ha-dropdown-item"; import { getSignedPath } from "../../../../../data/auth"; import { getConfigEntryDiagnosticsDownloadUrl } from "../../../../../data/diagnostics"; import type { OTBRInfo, OTBRInfoDict } from "../../../../../data/otbr"; @@ -76,10 +75,11 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { return html` - + - + ${this.hass.localize( "ui.panel.config.integrations.config_entry.download_diagnostics" )} - + - ${this.hass.localize( "ui.panel.config.thread.add_dataset_from_tlv" - )} - ${this.hass.localize( "ui.panel.config.thread.add_open_thread_border_router" - )} - +

    ${this.hass.localize("ui.panel.config.thread.my_network")}

    ${networks.preferred @@ -242,12 +242,12 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { )} >` : ""} - ${showDefaultRouter - ? html` + ? html` ${isDefaultRouter ? this.hass.localize( "ui.panel.config.thread.default_router" @@ -265,28 +268,28 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { : this.hass.localize( "ui.panel.config.thread.set_default_router" )} - ` + ` : ""} ${otbr - ? html` + ? html` ${this.hass.localize( "ui.panel.config.thread.reset_border_router" - )} - + ${this.hass.localize( "ui.panel.config.thread.change_channel" - )} ${network.dataset?.preferred ? "" - : html` + : html` ${this.hass.localize( "ui.panel.config.thread.add_to_my_network" )} - `}` + `}` : ""} - ` + ` : ""} `; })}` @@ -480,24 +483,22 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { }); } - private _handleRouterAction(ev: CustomEvent) { + private _handleRouterAction(ev: CustomEvent<{ item: { value: string } }>) { const network = (ev.currentTarget as any).network as ThreadNetwork; const router = (ev.currentTarget as any).router as ThreadRouter; const otbr = (ev.currentTarget as any).otbr as OTBRInfo; - const index = network.dataset - ? Number(ev.detail.index) - : Number(ev.detail.index) + 1; - switch (index) { - case 0: + const action = ev.detail.item.value; + switch (action) { + case "set-default": this._setPreferredBorderAgent(network.dataset!, router); break; - case 1: + case "reset-router": this._resetBorderRouter(otbr); break; - case 2: + case "change-channel": this._changeChannel(otbr); break; - case 3: + case "add-to-network": this._setDataset(otbr); break; } @@ -713,7 +714,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { ha-svg-icon[slot="meta"] { width: 24px; } - ha-button-menu a { + ha-dropdown a { text-decoration: none; } .routers { diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index a6d41123d5..a8c1080af2 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -1,6 +1,6 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { consume } from "@lit/context"; -import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { mdiCog, mdiContentDuplicate, @@ -32,13 +32,13 @@ import "../../../components/entity/ha-entities-picker"; import "../../../components/ha-alert"; import "../../../components/ha-area-picker"; import "../../../components/ha-button"; -import "../../../components/ha-button-menu"; import "../../../components/ha-card"; +import "../../../components/ha-dropdown"; +import "../../../components/ha-dropdown-item"; import "../../../components/ha-fab"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-picker"; import "../../../components/ha-list"; -import "../../../components/ha-list-item"; import "../../../components/ha-svg-icon"; import "../../../components/ha-textfield"; import { fullEntitiesContext } from "../../../data/context"; @@ -227,9 +227,9 @@ export class HaSceneEditor extends PreventUnsavedMixin( ? computeStateName(this._scene) : this.hass.localize("ui.panel.config.scene.editor.default_name")} > - - ${this.hass.localize("ui.panel.config.scene.picker.apply")} - - - + + + ${this.hass.localize("ui.panel.config.scene.picker.show_info")} - - + + ${this.hass.localize( "ui.panel.config.automation.picker.show_settings" )} - - + + - + ${this.hass.localize( `ui.panel.config.scene.picker.${this._getCategory(this._entityRegistryEntries, this._scene?.entity_id) ? "edit_category" : "assign_category"}` )} - - + + - + ${this.hass.localize( `ui.panel.config.automation.editor.edit_${this._mode !== "yaml" ? "yaml" : "ui"}` )} - - + + -
  • + - + ${this.hass.localize( "ui.panel.config.scene.picker.duplicate_scene" )} - - + + - ${this.hass.localize("ui.panel.config.scene.picker.delete_scene")} - -
    + + ${this._errors ? html`
    ${this._errors}
    ` : ""} ${this._mode === "yaml" ? this._renderYamlMode() : this._renderUiMode()} ) { - switch (ev.detail.index) { - case 0: + private async _handleMenuAction( + ev: CustomEvent<{ item: { value: string } }> + ) { + const action = ev.detail.item.value; + switch (action) { + case "apply": activateScene(this.hass, this._scene!.entity_id); break; - case 1: + case "show-info": fireEvent(this, "hass-more-info", { entityId: this._scene!.entity_id }); break; - case 2: + case "show-settings": showMoreInfoDialog(this, { entityId: this._scene!.entity_id, view: "settings", }); break; - case 3: + case "edit-category": this._editCategory(this._scene!); break; - case 4: + case "toggle-yaml": if (this._mode === "yaml") { this._initEntities(this._config!); this._exitYamlMode(); @@ -677,10 +677,10 @@ export class HaSceneEditor extends PreventUnsavedMixin( this._enterYamlMode(); } break; - case 5: + case "duplicate": this._duplicate(); break; - case 6: + case "delete": this._deleteTapped(); break; } @@ -1289,9 +1289,6 @@ export class HaSceneEditor extends PreventUnsavedMixin( justify-content: center; align-items: center; } - li[role="separator"] { - border-bottom-color: var(--divider-color); - } ha-list-item.entity { padding-right: 28px; } diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index e7259784c5..70cdd2724a 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -1,12 +1,11 @@ -import type { ActionDetail } from "@material/mwc-list"; import { mdiDotsVertical } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { navigate } from "../../common/navigate"; -import "../../components/ha-button-menu"; +import "../../components/ha-dropdown"; +import "../../components/ha-dropdown-item"; import "../../components/ha-icon-button"; -import "../../components/ha-list-item"; import "../../components/ha-menu-button"; import "../../components/ha-tab-group"; import "../../components/ha-tab-group-tab"; @@ -40,16 +39,16 @@ class PanelDeveloperTools extends LitElement {
    ${this.hass.localize("panel.developer_tools")}
    - + - + ${this.hass.localize("ui.panel.developer-tools.tabs.debug.title")} - - + +
    @@ -122,11 +121,12 @@ class PanelDeveloperTools extends LitElement { } } - private async _handleMenuAction(ev: CustomEvent) { - switch (ev.detail.index) { - case 0: - navigate(`/developer-tools/debug`); - break; + private async _handleMenuAction( + ev: CustomEvent<{ item: { value: string } }> + ) { + const action = ev.detail.item.value; + if (action === "debug") { + navigate(`/developer-tools/debug`); } } diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index 12d5f32bae..066bfe23fd 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -1,4 +1,3 @@ -import type { ActionDetail } from "@material/mwc-list"; import { mdiDotsVertical, mdiDownload, @@ -27,11 +26,11 @@ import { import { MIN_TIME_BETWEEN_UPDATES } from "../../components/chart/ha-chart-base"; import "../../components/chart/state-history-charts"; import type { StateHistoryCharts } from "../../components/chart/state-history-charts"; -import "../../components/ha-button-menu"; import "../../components/ha-date-range-picker"; +import "../../components/ha-dropdown"; +import "../../components/ha-dropdown-item"; import "../../components/ha-icon-button"; import "../../components/ha-icon-button-arrow-prev"; -import "../../components/ha-list-item"; import "../../components/ha-menu-button"; import "../../components/ha-spinner"; import "../../components/ha-target-picker"; @@ -148,23 +147,23 @@ class HaPanelHistory extends LitElement { > ` : ""} - + - + ${this.hass.localize("ui.panel.history.download_data")} - - + + - + ${this.hass.localize("ui.panel.history.add_card")} - - - + + +
    @@ -477,12 +476,15 @@ class HaPanelHistory extends LitElement { navigate(`/history?${createSearchParam(params)}`, { replace: true }); } - private async _handleMenuAction(ev: CustomEvent) { - switch (ev.detail.index) { - case 0: + private async _handleMenuAction( + ev: CustomEvent<{ item: { value: string } }> + ) { + const action = ev.detail.item.value; + switch (action) { + case "download": this._downloadHistory(); break; - case 1: + case "add-card": this._suggestCard(); break; }