mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Fix automation picker overflow menu for keyboard (#21048)
* Fix automation picker overflow menu for keyboard * some updates from review * typing * no removeEventListener * updates from review
This commit is contained in:
parent
97c4cf9391
commit
e332364ec0
@ -1,9 +1,11 @@
|
||||
import { MdMenuItem } from "@material/web/menu/menu-item";
|
||||
import { css } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
|
||||
@customElement("ha-menu-item")
|
||||
export class HaMenuItem extends MdMenuItem {
|
||||
@property({ attribute: false }) clickAction?: (item?: HTMLElement) => void;
|
||||
|
||||
static override styles = [
|
||||
...super.styles,
|
||||
css`
|
||||
|
@ -1,9 +1,30 @@
|
||||
import { MdMenu } from "@material/web/menu/menu";
|
||||
import type { CloseMenuEvent } from "@material/web/menu/menu";
|
||||
import {
|
||||
CloseReason,
|
||||
KeydownCloseKey,
|
||||
} from "@material/web/menu/internal/controllers/shared";
|
||||
import { css } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import type { HaMenuItem } from "./ha-menu-item";
|
||||
|
||||
@customElement("ha-menu")
|
||||
export class HaMenu extends MdMenu {
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.addEventListener("close-menu", this._handleCloseMenu);
|
||||
}
|
||||
|
||||
private _handleCloseMenu(ev: CloseMenuEvent) {
|
||||
if (
|
||||
ev.detail.reason.kind === CloseReason.KEYDOWN &&
|
||||
ev.detail.reason.key === KeydownCloseKey.ESCAPE
|
||||
) {
|
||||
return;
|
||||
}
|
||||
(ev.detail.initiator as HaMenuItem).clickAction?.(ev.detail.initiator);
|
||||
}
|
||||
|
||||
static override styles = [
|
||||
...super.styles,
|
||||
css`
|
||||
@ -18,4 +39,8 @@ declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-menu": HaMenu;
|
||||
}
|
||||
|
||||
interface HTMLElementEventMap {
|
||||
"close-menu": CloseMenuEvent;
|
||||
}
|
||||
}
|
||||
|
@ -68,6 +68,7 @@ import "../../../components/ha-icon-overflow-menu";
|
||||
import "../../../components/ha-menu";
|
||||
import type { HaMenu } from "../../../components/ha-menu";
|
||||
import "../../../components/ha-menu-item";
|
||||
import type { HaMenuItem } from "../../../components/ha-menu-item";
|
||||
import "../../../components/ha-sub-menu";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { createAreaRegistryEntry } from "../../../data/area_registry";
|
||||
@ -826,7 +827,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
</ha-fab>
|
||||
</hass-tabs-subpage-data-table>
|
||||
<ha-menu id="overflow-menu" positioning="fixed">
|
||||
<ha-menu-item @click=${this._showInfo}>
|
||||
<ha-menu-item .clickAction=${this._showInfo}>
|
||||
<ha-svg-icon
|
||||
.path=${mdiInformationOutline}
|
||||
slot="start"
|
||||
@ -836,7 +837,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
</div>
|
||||
</ha-menu-item>
|
||||
|
||||
<ha-menu-item @click=${this._showSettings}>
|
||||
<ha-menu-item .clickAction=${this._showSettings}>
|
||||
<ha-svg-icon .path=${mdiCog} slot="start"></ha-svg-icon>
|
||||
<div slot="headline">
|
||||
${this.hass.localize(
|
||||
@ -844,7 +845,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
)}
|
||||
</div>
|
||||
</ha-menu-item>
|
||||
<ha-menu-item @click=${this._editCategory}>
|
||||
<ha-menu-item .clickAction=${this._editCategory}>
|
||||
<ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>
|
||||
<div slot="headline">
|
||||
${this.hass.localize(
|
||||
@ -852,13 +853,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
)}
|
||||
</div>
|
||||
</ha-menu-item>
|
||||
<ha-menu-item @click=${this._runActions}>
|
||||
<ha-menu-item .clickAction=${this._runActions}>
|
||||
<ha-svg-icon .path=${mdiPlay} slot="start"></ha-svg-icon>
|
||||
<div slot="headline">
|
||||
${this.hass.localize("ui.panel.config.automation.editor.run")}
|
||||
</div>
|
||||
</ha-menu-item>
|
||||
<ha-menu-item @click=${this._showTrace}>
|
||||
<ha-menu-item .clickAction=${this._showTrace}>
|
||||
<ha-svg-icon .path=${mdiTransitConnection} slot="start"></ha-svg-icon>
|
||||
<div slot="headline">
|
||||
${this.hass.localize(
|
||||
@ -867,13 +868,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
</div>
|
||||
</ha-menu-item>
|
||||
<md-divider role="separator" tabindex="-1"></md-divider>
|
||||
<ha-menu-item @click=${this._duplicate}>
|
||||
<ha-menu-item .clickAction=${this._duplicate}>
|
||||
<ha-svg-icon .path=${mdiContentDuplicate} slot="start"></ha-svg-icon>
|
||||
<div slot="headline">
|
||||
${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
|
||||
</div>
|
||||
</ha-menu-item>
|
||||
<ha-menu-item @click=${this._toggle}>
|
||||
<ha-menu-item .clickAction=${this._toggle}>
|
||||
<ha-svg-icon
|
||||
.path=${
|
||||
this._overflowAutomation?.state === "off"
|
||||
@ -892,7 +893,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
}
|
||||
</div>
|
||||
</ha-menu-item>
|
||||
<ha-menu-item @click=${this._deleteConfirm} class="warning">
|
||||
<ha-menu-item .clickAction=${this._deleteConfirm} class="warning">
|
||||
<ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
|
||||
<div slot="headline">
|
||||
${this.hass.localize("ui.panel.config.automation.picker.delete")}
|
||||
@ -1055,28 +1056,32 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
this._applyFilters();
|
||||
}
|
||||
|
||||
private _showInfo(ev) {
|
||||
const automation = ev.currentTarget.parentElement.anchorElement.automation;
|
||||
private _showInfo = (item: HaMenuItem) => {
|
||||
const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
|
||||
.automation;
|
||||
fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
|
||||
}
|
||||
};
|
||||
|
||||
private _showSettings(ev) {
|
||||
const automation = ev.currentTarget.parentElement.anchorElement.automation;
|
||||
private _showSettings = (item: HaMenuItem) => {
|
||||
const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
|
||||
.automation;
|
||||
|
||||
fireEvent(this, "hass-more-info", {
|
||||
entityId: automation.entity_id,
|
||||
view: "settings",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
private _runActions(ev) {
|
||||
const automation = ev.currentTarget.parentElement.anchorElement.automation;
|
||||
private _runActions = (item: HaMenuItem) => {
|
||||
const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
|
||||
.automation;
|
||||
|
||||
triggerAutomationActions(this.hass, automation.entity_id);
|
||||
}
|
||||
};
|
||||
|
||||
private _editCategory(ev) {
|
||||
const automation = ev.currentTarget.parentElement.anchorElement.automation;
|
||||
private _editCategory = (item: HaMenuItem) => {
|
||||
const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
|
||||
.automation;
|
||||
|
||||
const entityReg = this._entityReg.find(
|
||||
(reg) => reg.entity_id === automation.entity_id
|
||||
@ -1096,10 +1101,11 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
scope: "automation",
|
||||
entityReg,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
private _showTrace(ev) {
|
||||
const automation = ev.currentTarget.parentElement.anchorElement.automation;
|
||||
private _showTrace = (item: HaMenuItem) => {
|
||||
const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
|
||||
.automation;
|
||||
|
||||
if (!automation.attributes.id) {
|
||||
showAlertDialog(this, {
|
||||
@ -1112,19 +1118,21 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
navigate(
|
||||
`/config/automation/trace/${encodeURIComponent(automation.attributes.id)}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
private async _toggle(ev): Promise<void> {
|
||||
const automation = ev.currentTarget.parentElement.anchorElement.automation;
|
||||
private _toggle = async (item: HaMenuItem): Promise<void> => {
|
||||
const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
|
||||
.automation;
|
||||
|
||||
const service = automation.state === "off" ? "turn_on" : "turn_off";
|
||||
await this.hass.callService("automation", service, {
|
||||
entity_id: automation.entity_id,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
private async _deleteConfirm(ev) {
|
||||
const automation = ev.currentTarget.parentElement.anchorElement.automation;
|
||||
private _deleteConfirm = async (item: HaMenuItem) => {
|
||||
const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
|
||||
.automation;
|
||||
|
||||
showConfirmationDialog(this, {
|
||||
title: this.hass.localize(
|
||||
@ -1139,7 +1147,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
confirm: () => this._delete(automation),
|
||||
destructive: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
private async _delete(automation) {
|
||||
try {
|
||||
@ -1159,8 +1167,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
}
|
||||
}
|
||||
|
||||
private async _duplicate(ev) {
|
||||
const automation = ev.currentTarget.parentElement.anchorElement.automation;
|
||||
private _duplicate = async (item: HaMenuItem) => {
|
||||
const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
|
||||
.automation;
|
||||
|
||||
try {
|
||||
const config = await fetchAutomationFileConfig(
|
||||
@ -1184,7 +1193,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
private _showHelp() {
|
||||
showAlertDialog(this, {
|
||||
|
Loading…
x
Reference in New Issue
Block a user