Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Use ha-dropdown for automations/scripts (#28293)

Browse Source 
Co-authored-by: uptimeZERO_ <pavilionsahota@gmail.com>
This commit is contained in:
Wendelin
2025-12-03 14:33:48 +01:00
committed by GitHub
parent 48015ab312
commit 98a1f5ca3a
18 changed files with 1061 additions and 782 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -52,7 +52,7 @@
"@fullcalendar/list": "6.1.19", "@fullcalendar/list": "6.1.19",
"@fullcalendar/luxon3": "6.1.19", "@fullcalendar/luxon3": "6.1.19",
"@fullcalendar/timegrid": "6.1.19", "@fullcalendar/timegrid": "6.1.19",
"@home-assistant/webawesome": "3.0.0-ha.0", "@home-assistant/webawesome": "3.0.0-ha.1",
"@lezer/highlight": "1.2.3", "@lezer/highlight": "1.2.3",
"@lit-labs/motion": "1.0.9", "@lit-labs/motion": "1.0.9",
"@lit-labs/observers": "2.0.6", "@lit-labs/observers": "2.0.6",

151
src/panels/config/automation/action/ha-automation-action-row.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { consume } from "@lit/context"; import { consume } from "@lit/context";
import { import {
mdiAlertCircleCheck, mdiAlertCircleCheck,
@@ -32,11 +33,11 @@ import { copyToClipboard } from "../../../../common/util/copy-clipboard";
import "../../../../components/ha-automation-row"; import "../../../../components/ha-automation-row";
import type { HaAutomationRow } from "../../../../components/ha-automation-row"; import type { HaAutomationRow } from "../../../../components/ha-automation-row";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-dropdown";
import "../../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-divider";
import "../../../../components/ha-md-menu-item";
import "../../../../components/ha-service-icon"; import "../../../../components/ha-service-icon";
import "../../../../components/ha-tooltip"; import "../../../../components/ha-tooltip";
import { import {
@@ -288,15 +289,12 @@ export default class HaAutomationActionRow extends LitElement {
</ha-tooltip>` </ha-tooltip>`
: nothing} : nothing}
<ha-md-button-menu <ha-dropdown
quick
slot="icons" slot="icons"
@click=${preventDefaultStopPropagation} @click=${preventDefaultStopPropagation}
@keydown=${stopPropagation} @keydown=${stopPropagation}
@closed=${stopPropagation} @wa-select=${this._handleDropdownSelect}
positioning="fixed" placement="bottom-end"
anchor-corner="end-end"
menu-corner="start-end"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
@@ -304,30 +302,24 @@ export default class HaAutomationActionRow extends LitElement {
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<ha-md-menu-item .clickAction=${this._runAction}> <ha-dropdown-item value="run">
<ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize("ui.panel.config.automation.editor.actions.run") this.hass.localize("ui.panel.config.automation.editor.actions.run")
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item value="rename" .disabled=${this.disabled}>
.clickAction=${this._renameAction} <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
.disabled=${this.disabled}
>
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename" "ui.panel.config.automation.editor.triggers.rename"
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <wa-divider></wa-divider>
<ha-md-menu-item <ha-dropdown-item value="duplicate" .disabled=${this.disabled}>
.clickAction=${this._duplicateAction}
.disabled=${this.disabled}
>
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${mdiPlusCircleMultipleOutline} .path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon> ></ha-svg-icon>
@@ -336,13 +328,10 @@ export default class HaAutomationActionRow extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item value="copy" .disabled=${this.disabled}>
.clickAction=${this._copyAction} <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
.disabled=${this.disabled}
>
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
@@ -351,7 +340,6 @@ export default class HaAutomationActionRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -362,13 +350,10 @@ export default class HaAutomationActionRow extends LitElement {
<span>C</span> <span>C</span>
</span>` </span>`
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item value="cut" .disabled=${this.disabled}>
.clickAction=${this._cutAction} <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
.disabled=${this.disabled}
>
<ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
@@ -377,7 +362,6 @@ export default class HaAutomationActionRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -388,51 +372,48 @@ export default class HaAutomationActionRow extends LitElement {
<span>X</span> <span>X</span>
</span>` </span>`
)} )}
</ha-md-menu-item> </ha-dropdown-item>
${!this.optionsInSidebar ${!this.optionsInSidebar
? html` ? html`
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._moveUp} value="move_up"
.disabled=${this.disabled || !!this.first} .disabled=${this.disabled || !!this.first}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_up" "ui.panel.config.automation.editor.move_up"
)} )}
<ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon <ha-svg-icon slot="icon" .path=${mdiArrowUp}></ha-svg-icon
></ha-md-menu-item> ></ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._moveDown} value="move_down"
.disabled=${this.disabled || !!this.last} .disabled=${this.disabled || !!this.last}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_down" "ui.panel.config.automation.editor.move_down"
)} )}
<ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon <ha-svg-icon slot="icon" .path=${mdiArrowDown}></ha-svg-icon
></ha-md-menu-item> ></ha-dropdown-item>
` `
: nothing} : nothing}
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._toggleYamlMode} value="toggle_yaml_mode"
.disabled=${!this._uiModeAvailable || !!this._warnings} .disabled=${!this._uiModeAvailable || !!this._warnings}
> >
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <wa-divider></wa-divider>
<ha-md-menu-item <ha-dropdown-item value="disable" .disabled=${this.disabled}>
.clickAction=${this._onDisable}
.disabled=${this.disabled}
>
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${this.action.enabled === false .path=${this.action.enabled === false
? mdiPlayCircleOutline ? mdiPlayCircleOutline
: mdiStopCircleOutline} : mdiStopCircleOutline}
@@ -443,15 +424,15 @@ export default class HaAutomationActionRow extends LitElement {
`ui.panel.config.automation.editor.actions.${this.action.enabled === false ? "enable" : "disable"}` `ui.panel.config.automation.editor.actions.${this.action.enabled === false ? "enable" : "disable"}`
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
class="warning" value="delete"
.clickAction=${this._onDelete} variant="danger"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon <ha-svg-icon
class="warning" class="warning"
slot="start" slot="icon"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
@@ -463,7 +444,6 @@ export default class HaAutomationActionRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -478,8 +458,8 @@ export default class HaAutomationActionRow extends LitElement {
> >
</span>` </span>`
)} )}
</ha-md-menu-item> </ha-dropdown-item>
</ha-md-button-menu> </ha-dropdown>
${!this.optionsInSidebar ${!this.optionsInSidebar
? html`${this._warnings ? html`${this._warnings
@@ -890,6 +870,47 @@ export default class HaAutomationActionRow extends LitElement {
this._automationRowElement?.focus(); this._automationRowElement?.focus();
} }
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "run":
this._runAction();
break;
case "rename":
this._renameAction();
break;
case "duplicate":
this._duplicateAction();
break;
case "copy":
this._copyAction();
break;
case "cut":
this._cutAction();
break;
case "move_up":
this._moveUp();
break;
case "move_down":
this._moveDown();
break;
case "toggle_yaml_mode":
this._toggleYamlMode(ev.target as HTMLElement);
break;
case "disable":
this._onDisable();
break;
case "delete":
this._onDelete();
break;
}
}
static styles = [rowStyles, overflowStyles]; static styles = [rowStyles, overflowStyles];
} }

153
src/panels/config/automation/condition/ha-automation-condition-row.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { consume } from "@lit/context"; import { consume } from "@lit/context";
import { import {
mdiAppleKeyboardCommand, mdiAppleKeyboardCommand,
@@ -33,11 +34,11 @@ import "../../../../components/ha-automation-row";
import type { HaAutomationRow } from "../../../../components/ha-automation-row"; import type { HaAutomationRow } from "../../../../components/ha-automation-row";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-condition-icon"; import "../../../../components/ha-condition-icon";
import "../../../../components/ha-dropdown";
import "../../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-divider";
import "../../../../components/ha-md-menu-item";
import type { import type {
AutomationClipboard, AutomationClipboard,
Condition, Condition,
@@ -194,15 +195,12 @@ export default class HaAutomationConditionRow extends LitElement {
<slot name="icons" slot="icons"></slot> <slot name="icons" slot="icons"></slot>
<ha-md-button-menu <ha-dropdown
quick
slot="icons" slot="icons"
@click=${preventDefaultStopPropagation} @click=${preventDefaultStopPropagation}
@keydown=${stopPropagation} @keydown=${stopPropagation}
@closed=${stopPropagation} @wa-select=${this._handleDropdownSelect}
positioning="fixed" placement="bottom-end"
anchor-corner="end-end"
menu-corner="start-end"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
@@ -211,34 +209,28 @@ export default class HaAutomationConditionRow extends LitElement {
> >
</ha-icon-button> </ha-icon-button>
<ha-md-menu-item .clickAction=${this._testCondition}> <ha-dropdown-item value="test">
<ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiFlask}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.conditions.test" "ui.panel.config.automation.editor.conditions.test"
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item value="rename" .disabled=${this.disabled}>
.clickAction=${this._renameCondition} <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
.disabled=${this.disabled}
>
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.conditions.rename" "ui.panel.config.automation.editor.conditions.rename"
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <wa-divider></wa-divider>
<ha-md-menu-item <ha-dropdown-item value="duplicate" .disabled=${this.disabled}>
.clickAction=${this._duplicateCondition}
.disabled=${this.disabled}
>
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${mdiPlusCircleMultipleOutline} .path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon> ></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
@@ -246,13 +238,10 @@ export default class HaAutomationConditionRow extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item value="copy" .disabled=${this.disabled}>
.clickAction=${this._copyCondition} <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon
.disabled=${this.disabled}
>
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon
>${this._renderOverflowLabel( >${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
@@ -261,7 +250,6 @@ export default class HaAutomationConditionRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -272,13 +260,10 @@ export default class HaAutomationConditionRow extends LitElement {
<span>C</span> <span>C</span>
</span>` </span>`
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item value="cut" .disabled=${this.disabled}>
.clickAction=${this._cutCondition} <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon
.disabled=${this.disabled}
>
<ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon
>${this._renderOverflowLabel( >${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
@@ -287,7 +272,6 @@ export default class HaAutomationConditionRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -298,48 +282,45 @@ export default class HaAutomationConditionRow extends LitElement {
<span>X</span> <span>X</span>
</span>` </span>`
)} )}
</ha-md-menu-item> </ha-dropdown-item>
${!this.optionsInSidebar ${!this.optionsInSidebar
? html` ? html`
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._moveUp} value="move_up"
.disabled=${this.disabled || this.first} .disabled=${this.disabled || !!this.first}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_up" "ui.panel.config.automation.editor.move_up"
)} )}
<ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon <ha-svg-icon slot="icon" .path=${mdiArrowUp}></ha-svg-icon
></ha-md-menu-item> ></ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._moveDown} value="move_down"
.disabled=${this.disabled || this.last} .disabled=${this.disabled || !!this.last}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_down" "ui.panel.config.automation.editor.move_down"
)} )}
<ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon <ha-svg-icon slot="icon" .path=${mdiArrowDown}></ha-svg-icon
></ha-md-menu-item> ></ha-dropdown-item>
` `
: nothing} : nothing}
<ha-md-menu-item .clickAction=${this._toggleYamlMode}> <ha-dropdown-item value="toggle_yaml_mode">
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <wa-divider></wa-divider>
<ha-md-menu-item <ha-dropdown-item value="disable" .disabled=${this.disabled}>
.clickAction=${this._onDisable}
.disabled=${this.disabled}
>
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${this.condition.enabled === false .path=${this.condition.enabled === false
? mdiPlayCircleOutline ? mdiPlayCircleOutline
: mdiStopCircleOutline} : mdiStopCircleOutline}
@@ -350,15 +331,15 @@ export default class HaAutomationConditionRow extends LitElement {
`ui.panel.config.automation.editor.actions.${this.condition.enabled === false ? "enable" : "disable"}` `ui.panel.config.automation.editor.actions.${this.condition.enabled === false ? "enable" : "disable"}`
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
class="warning" variant="danger"
.clickAction=${this._onDelete} value="delete"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon <ha-svg-icon
class="warning" class="warning"
slot="start" slot="icon"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
@@ -369,7 +350,6 @@ export default class HaAutomationConditionRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -384,8 +364,8 @@ export default class HaAutomationConditionRow extends LitElement {
> >
</span>` </span>`
)} )}
</ha-md-menu-item> </ha-dropdown-item>
</ha-md-button-menu> </ha-dropdown>
${!this.optionsInSidebar ${!this.optionsInSidebar
? html`${this._warnings ? html`${this._warnings
? html`<ha-automation-editor-warning ? html`<ha-automation-editor-warning
@@ -837,6 +817,47 @@ export default class HaAutomationConditionRow extends LitElement {
this._automationRowElement?.focus(); this._automationRowElement?.focus();
} }
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "test":
this._testCondition();
break;
case "rename":
this._renameCondition();
break;
case "duplicate":
this._duplicateCondition();
break;
case "copy":
this._copyCondition();
break;
case "cut":
this._cutCondition();
break;
case "move_up":
this._moveUp();
break;
case "move_down":
this._moveDown();
break;
case "toggle_yaml_mode":
this._toggleYamlMode(ev.target as HTMLElement);
break;
case "disable":
this._onDisable();
break;
case "delete":
this._onDelete();
break;
}
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
rowStyles, rowStyles,

236
src/panels/config/automation/ha-automation-editor.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { consume } from "@lit/context"; import { consume } from "@lit/context";
import { import {
mdiAppleKeyboardCommand, mdiAppleKeyboardCommand,
@@ -25,18 +26,20 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
import { transform } from "../../../common/decorators/transform"; import { transform } from "../../../common/decorators/transform";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { goBack, navigate } from "../../../common/navigate"; import { goBack, navigate } from "../../../common/navigate";
import { promiseTimeout } from "../../../common/util/promise-timeout"; import { promiseTimeout } from "../../../common/util/promise-timeout";
import { afterNextRender } from "../../../common/util/render-status"; import { afterNextRender } from "../../../common/util/render-status";
import "../../../components/ha-button"; import "../../../components/ha-button";
import "../../../components/ha-button-menu"; import "../../../components/ha-dropdown";
import "../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
import "../../../components/ha-fab"; import "../../../components/ha-fab";
import "../../../components/ha-fade-in"; import "../../../components/ha-fade-in";
import "../../../components/ha-icon"; import "../../../components/ha-icon";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import "../../../components/ha-spinner"; import "../../../components/ha-spinner";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-yaml-editor"; import "../../../components/ha-yaml-editor";
@@ -74,7 +77,6 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
import "../../../layouts/hass-subpage"; import "../../../layouts/hass-subpage";
import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin"; import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin"; import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
import { haStyle } from "../../../resources/styles"; import { haStyle } from "../../../resources/styles";
import type { Entries, HomeAssistant, Route } from "../../../types"; import type { Entries, HomeAssistant, Route } from "../../../types";
import { isMac } from "../../../util/is_mac"; import { isMac } from "../../../util/is_mac";
@@ -86,10 +88,10 @@ import {
type EntityRegistryUpdate, type EntityRegistryUpdate,
showAutomationSaveDialog, showAutomationSaveDialog,
} from "./automation-save-dialog/show-dialog-automation-save"; } from "./automation-save-dialog/show-dialog-automation-save";
import { showAutomationSaveTimeoutDialog } from "./automation-save-timeout-dialog/show-dialog-automation-save-timeout";
import "./blueprint-automation-editor"; import "./blueprint-automation-editor";
import "./manual-automation-editor"; import "./manual-automation-editor";
import type { HaManualAutomationEditor } from "./manual-automation-editor"; import type { HaManualAutomationEditor } from "./manual-automation-editor";
import { showAutomationSaveTimeoutDialog } from "./automation-save-timeout-dialog/show-dialog-automation-save-timeout";
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@@ -292,7 +294,10 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
</ha-button> </ha-button>
` `
: ""} : ""}
<ha-button-menu slot="toolbar-icon"> <ha-dropdown
slot="toolbar-icon"
@wa-select=${this._handleDropdownSelect}
>
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
@@ -300,99 +305,73 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
></ha-icon-button> ></ha-icon-button>
${this._mode === "gui" && this.narrow ${this._mode === "gui" && this.narrow
? html`<ha-list-item ? html`<ha-dropdown-item
graphic="icon" value="undo"
@click=${this._undo}
.disabled=${!this._undoRedoController.canUndo} .disabled=${!this._undoRedoController.canUndo}
> >
${this.hass.localize("ui.common.undo")} ${this.hass.localize("ui.common.undo")}
<ha-svg-icon slot="graphic" .path=${mdiUndo}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiUndo}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item
graphic="icon" value="redo"
@click=${this._redo}
.disabled=${!this._undoRedoController.canRedo} .disabled=${!this._undoRedoController.canRedo}
> >
${this.hass.localize("ui.common.redo")} ${this.hass.localize("ui.common.redo")}
<ha-svg-icon slot="graphic" .path=${mdiRedo}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRedo}></ha-svg-icon>
</ha-list-item>` </ha-dropdown-item>`
: nothing} : nothing}
<ha-list-item <ha-dropdown-item .disabled=${!stateObj} value="info">
graphic="icon"
.disabled=${!stateObj}
@click=${this._showInfo}
>
${this.hass.localize("ui.panel.config.automation.editor.show_info")} ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="icon"
.path=${mdiInformationOutline} .path=${mdiInformationOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item .disabled=${!stateObj} value="settings">
graphic="icon"
.disabled=${!stateObj}
@click=${this._showSettings}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.picker.show_settings" "ui.panel.config.automation.picker.show_settings"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiCog}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item .disabled=${!stateObj} value="category">
graphic="icon"
.disabled=${!stateObj}
@click=${this._editCategory}
>
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.scene.picker.${this._registryEntry?.categories?.automation ? "edit_category" : "assign_category"}` `ui.panel.config.scene.picker.${this._registryEntry?.categories?.automation ? "edit_category" : "assign_category"}`
)} )}
<ha-svg-icon slot="graphic" .path=${mdiTag}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item .disabled=${!stateObj} value="run">
graphic="icon"
.disabled=${!stateObj}
@click=${this._runActions}
>
${this.hass.localize("ui.panel.config.automation.editor.run")} ${this.hass.localize("ui.panel.config.automation.editor.run")}
<ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
${stateObj && this.narrow ${stateObj && this.narrow
? html`<a ? html`<ha-dropdown-item value="trace">
href="/config/automation/trace/${encodeURIComponent( ${this.hass.localize(
this._config.id! "ui.panel.config.automation.editor.show_trace"
)}" )}
> <ha-svg-icon
<ha-list-item graphic="icon"> slot="icon"
${this.hass.localize( .path=${mdiTransitConnection}
"ui.panel.config.automation.editor.show_trace" ></ha-svg-icon>
)} </ha-dropdown-item>`
<ha-svg-icon
slot="graphic"
.path=${mdiTransitConnection}
></ha-svg-icon>
</ha-list-item>
</a>`
: nothing} : nothing}
<ha-list-item <ha-dropdown-item
graphic="icon" value="rename"
@click=${this._promptAutomationAlias}
.disabled=${this._readOnly || .disabled=${this._readOnly ||
!this.automationId || !this.automationId ||
this._mode === "yaml"} this._mode === "yaml"}
> >
${this.hass.localize("ui.panel.config.automation.editor.rename")} ${this.hass.localize("ui.panel.config.automation.editor.rename")}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
${!useBlueprint ${!useBlueprint
? html` ? html`
<ha-list-item <ha-dropdown-item
graphic="icon"
@click=${this._promptAutomationMode} @click=${this._promptAutomationMode}
.disabled=${this._readOnly || this._mode === "yaml"} .disabled=${this._readOnly || this._mode === "yaml"}
> >
@@ -400,18 +379,17 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
"ui.panel.config.automation.editor.change_mode" "ui.panel.config.automation.editor.change_mode"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="icon"
.path=${mdiDebugStepOver} .path=${mdiDebugStepOver}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
` `
: nothing} : nothing}
<ha-list-item <ha-dropdown-item
.disabled=${this._blueprintConfig || .disabled=${!!this._blueprintConfig ||
(!this._readOnly && !this.automationId)} (!this._readOnly && !this.automationId)}
graphic="icon" value="duplicate"
@click=${this._duplicate}
> >
${this.hass.localize( ${this.hass.localize(
this._readOnly this._readOnly
@@ -419,74 +397,60 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
: "ui.panel.config.automation.editor.duplicate" : "ui.panel.config.automation.editor.duplicate"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="icon"
.path=${mdiPlusCircleMultipleOutline} .path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
${useBlueprint ${useBlueprint
? html` ? html`
<ha-list-item <ha-dropdown-item
graphic="icon" value="take_control"
@click=${this._takeControl}
.disabled=${this._readOnly} .disabled=${this._readOnly}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.take_control" "ui.panel.config.automation.editor.take_control"
)} )}
<ha-svg-icon <ha-svg-icon slot="icon" .path=${mdiFileEdit}></ha-svg-icon>
slot="graphic" </ha-dropdown-item>
.path=${mdiFileEdit}
></ha-svg-icon>
</ha-list-item>
` `
: nothing} : nothing}
<ha-list-item <ha-dropdown-item value="toggle_yaml_mode">
graphic="icon"
@click=${this._mode === "gui"
? this._switchYamlMode
: this._switchUiMode}
>
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}`
)} )}
<ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<li divider role="separator"></li> <wa-divider></wa-divider>
<ha-list-item <ha-dropdown-item .disabled=${!stateObj} value="disable">
graphic="icon"
.disabled=${!stateObj}
@click=${this._toggle}
>
${stateObj?.state === "off" ${stateObj?.state === "off"
? this.hass.localize("ui.panel.config.automation.editor.enable") ? this.hass.localize("ui.panel.config.automation.editor.enable")
: this.hass.localize("ui.panel.config.automation.editor.disable")} : this.hass.localize("ui.panel.config.automation.editor.disable")}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="icon"
.path=${stateObj?.state === "off" .path=${stateObj?.state === "off"
? mdiPlayCircleOutline ? mdiPlayCircleOutline
: mdiStopCircleOutline} : mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item
.disabled=${!this.automationId} .disabled=${!this.automationId}
class=${classMap({ warning: Boolean(this.automationId) })} .variant=${this.automationId ? "danger" : "default"}
graphic="icon" value="delete"
@click=${this._deleteConfirm}
> >
${this.hass.localize("ui.panel.config.automation.picker.delete")} ${this.hass.localize("ui.panel.config.automation.picker.delete")}
<ha-svg-icon <ha-svg-icon
class=${classMap({ warning: Boolean(this.automationId) })} class=${classMap({ warning: Boolean(this.automationId) })}
slot="graphic" slot="icon"
.path=${mdiDelete} .path=${mdiDelete}
> >
</ha-svg-icon> </ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
</ha-button-menu> </ha-dropdown>
<div <div
class=${this._mode === "yaml" ? "yaml-mode" : ""} class=${this._mode === "yaml" ? "yaml-mode" : ""}
@subscribe-automation-config=${this._subscribeAutomationConfig} @subscribe-automation-config=${this._subscribeAutomationConfig}
@@ -1249,6 +1213,63 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
this._undoRedoController.redo(); this._undoRedoController.redo();
} }
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "undo":
this._undo();
break;
case "redo":
this._redo();
break;
case "info":
this._showInfo();
break;
case "settings":
this._showSettings();
break;
case "category":
this._editCategory();
break;
case "run":
this._runActions();
break;
case "rename":
this._promptAutomationAlias();
break;
case "change_mode":
this._promptAutomationMode();
break;
case "duplicate":
this._duplicate();
break;
case "take_control":
this._takeControl();
break;
case "toggle_yaml_mode":
if (this._mode === "gui") {
this._switchYamlMode();
break;
}
this._switchUiMode();
break;
case "disable":
this._toggle();
break;
case "delete":
this._deleteConfirm();
break;
case "trace":
this._showTrace();
break;
}
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle, haStyle,
@@ -1301,13 +1322,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
margin-inline-end: 8px; margin-inline-end: 8px;
margin-inline-start: initial; margin-inline-start: initial;
} }
li[role="separator"] {
border-bottom-color: var(--divider-color);
}
ha-button-menu a {
text-decoration: none;
color: var(--primary-color);
}
h1 { h1 {
margin: 0; margin: 0;
} }

103
src/panels/config/automation/ha-automation-trace.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { import {
mdiDotsVertical, mdiDotsVertical,
mdiDownload, mdiDownload,
@@ -15,11 +16,13 @@ import { repeat } from "lit/directives/repeat";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time"; import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { navigate } from "../../../common/navigate";
import { computeRTL } from "../../../common/util/compute_rtl"; import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/ha-button"; import "../../../components/ha-button";
import "../../../components/ha-button-menu"; import "../../../components/ha-dropdown";
import "../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import "../../../components/trace/ha-trace-blueprint-config"; import "../../../components/trace/ha-trace-blueprint-config";
import "../../../components/trace/ha-trace-config"; import "../../../components/trace/ha-trace-config";
import "../../../components/trace/ha-trace-logbook"; import "../../../components/trace/ha-trace-logbook";
@@ -104,9 +107,7 @@ export class HaAutomationTrace extends LitElement {
appearance="plain" appearance="plain"
size="small" size="small"
class="trace-link" class="trace-link"
href="/config/automation/edit/${encodeURIComponent( @click=${this._navigateToAutomation}
stateObj.attributes.id
)}"
slot="toolbar-icon" slot="toolbar-icon"
> >
${this.hass.localize( ${this.hass.localize(
@@ -114,65 +115,50 @@ export class HaAutomationTrace extends LitElement {
)} )}
</ha-button> </ha-button>
` `
: ""} : nothing}
<ha-button-menu slot="toolbar-icon"> <ha-dropdown
slot="toolbar-icon"
@wa-select=${this._handleDropdownSelect}
>
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<ha-list-item <ha-dropdown-item .disabled=${!stateObj} value="show_info">
graphic="icon"
.disabled=${!stateObj}
@click=${this._showInfo}
>
${this.hass.localize("ui.panel.config.automation.editor.show_info")} ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="icon"
.path=${mdiInformationOutline} .path=${mdiInformationOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
${stateObj?.attributes.id && this.narrow ${stateObj?.attributes.id && this.narrow
? html` ? html`
<a <ha-dropdown-item value="edit_automation">
class="trace-link" ${this.hass.localize(
href="/config/automation/edit/${encodeURIComponent( "ui.panel.config.automation.trace.edit_automation"
stateObj.attributes.id )}
)}" <ha-svg-icon slot="icon" .path=${mdiPencil}></ha-svg-icon>
> </ha-dropdown-item>
<ha-list-item graphic="icon">
${this.hass.localize(
"ui.panel.config.automation.trace.edit_automation"
)}
<ha-svg-icon
slot="graphic"
.path=${mdiPencil}
></ha-svg-icon>
</ha-list-item>
</a>
` `
: ""} : nothing}
<li divider role="separator"></li> <wa-divider></wa-divider>
<ha-list-item graphic="icon" @click=${this._refreshTraces}> <ha-dropdown-item value="refresh">
${this.hass.localize("ui.panel.config.automation.trace.refresh")} ${this.hass.localize("ui.panel.config.automation.trace.refresh")}
<ha-svg-icon slot="graphic" .path=${mdiRefresh}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRefresh}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item .disabled=${!this._trace} value="download_trace">
graphic="icon"
.disabled=${!this._trace}
@click=${this._downloadTrace}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.trace.download_trace" "ui.panel.config.automation.trace.download_trace"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
</ha-button-menu> </ha-dropdown>
<div class="toolbar"> <div class="toolbar">
${this._traces && this._traces.length > 0 ${this._traces && this._traces.length > 0
@@ -520,6 +506,37 @@ export class HaAutomationTrace extends LitElement {
fireEvent(this, "hass-more-info", { entityId: this._entityId }); fireEvent(this, "hass-more-info", { entityId: this._entityId });
} }
private _navigateToAutomation() {
if (this._entityId && this.hass.states[this._entityId]) {
navigate(
`/config/automation/edit/${encodeURIComponent(this.hass.states[this._entityId].attributes.id)}`
);
}
}
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "show_info":
this._showInfo();
break;
case "refresh":
this._refreshTraces();
break;
case "download_trace":
this._downloadTrace();
break;
case "edit_automation":
this._navigateToAutomation();
break;
}
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle, haStyle,

95
src/panels/config/automation/option/ha-automation-option-row.ts
View File

@@ -20,10 +20,11 @@ import { capitalizeFirstLetter } from "../../../../common/string/capitalize-firs
import "../../../../components/ha-automation-row"; import "../../../../components/ha-automation-row";
import type { HaAutomationRow } from "../../../../components/ha-automation-row"; import type { HaAutomationRow } from "../../../../components/ha-automation-row";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-dropdown";
import "../../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-menu-item";
import "../../../../components/ha-svg-icon"; import "../../../../components/ha-svg-icon";
import type { import type {
Condition, Condition,
@@ -36,6 +37,7 @@ import type { Action, Option } from "../../../../data/script";
import { showPromptDialog } from "../../../../dialogs/generic/show-dialog-box"; import { showPromptDialog } from "../../../../dialogs/generic/show-dialog-box";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
import { isMac } from "../../../../util/is_mac"; import { isMac } from "../../../../util/is_mac";
import { showToast } from "../../../../util/toast";
import "../action/ha-automation-action"; import "../action/ha-automation-action";
import type HaAutomationAction from "../action/ha-automation-action"; import type HaAutomationAction from "../action/ha-automation-action";
import "../condition/ha-automation-condition"; import "../condition/ha-automation-condition";
@@ -46,7 +48,6 @@ import {
overflowStyles, overflowStyles,
rowStyles, rowStyles,
} from "../styles"; } from "../styles";
import { showToast } from "../../../../util/toast";
@customElement("ha-automation-option-row") @customElement("ha-automation-option-row")
export default class HaAutomationOptionRow extends LitElement { export default class HaAutomationOptionRow extends LitElement {
@@ -155,15 +156,12 @@ export default class HaAutomationOptionRow extends LitElement {
${this.option ${this.option
? html` ? html`
<ha-md-button-menu <ha-dropdown
quick
slot="icons" slot="icons"
@click=${preventDefaultStopPropagation} @click=${preventDefaultStopPropagation}
@closed=${stopPropagation}
@keydown=${stopPropagation} @keydown=${stopPropagation}
positioning="fixed" @wa-select=${this._handleDropdownSelect}
anchor-corner="end-end" placement="bottom-end"
menu-corner="start-end"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
@@ -171,24 +169,18 @@ export default class HaAutomationOptionRow extends LitElement {
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<ha-md-menu-item <ha-dropdown-item value="rename" .disabled=${this.disabled}>
@click=${this._renameOption} <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
.disabled=${this.disabled}
>
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename" "ui.panel.config.automation.editor.triggers.rename"
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item value="duplicate" .disabled=${this.disabled}>
@click=${this._duplicateOption}
.disabled=${this.disabled}
>
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${mdiPlusCircleMultipleOutline} .path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon> ></ha-svg-icon>
@@ -197,45 +189,42 @@ export default class HaAutomationOptionRow extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
${!this.optionsInSidebar ${!this.optionsInSidebar
? html` ? html`
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._moveUp} value="move_up"
.disabled=${this.disabled || !!this.first} .disabled=${this.disabled || !!this.first}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_up" "ui.panel.config.automation.editor.move_up"
)} )}
<ha-svg-icon <ha-svg-icon slot="icon" .path=${mdiArrowUp}></ha-svg-icon
slot="start" ></ha-dropdown-item>
.path=${mdiArrowUp} <ha-dropdown-item
></ha-svg-icon value="move_down"
></ha-md-menu-item>
<ha-md-menu-item
.clickAction=${this._moveDown}
.disabled=${this.disabled || !!this.last} .disabled=${this.disabled || !!this.last}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_down" "ui.panel.config.automation.editor.move_down"
)} )}
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${mdiArrowDown} .path=${mdiArrowDown}
></ha-svg-icon ></ha-svg-icon
></ha-md-menu-item> ></ha-dropdown-item>
` `
: nothing} : nothing}
<ha-md-menu-item <ha-dropdown-item
@click=${this._removeOption} value="delete"
class="warning" variant="danger"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon <ha-svg-icon
class="warning" class="warning"
slot="start" slot="icon"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
@@ -246,7 +235,6 @@ export default class HaAutomationOptionRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -261,8 +249,8 @@ export default class HaAutomationOptionRow extends LitElement {
> >
</span>` </span>`
)} )}
</ha-md-menu-item> </ha-dropdown-item>
</ha-md-button-menu> </ha-dropdown>
` `
: nothing} : nothing}
${!this.optionsInSidebar ? this._renderContent() : nothing} ${!this.optionsInSidebar ? this._renderContent() : nothing}
@@ -361,6 +349,32 @@ export default class HaAutomationOptionRow extends LitElement {
fireEvent(this, "move-down"); fireEvent(this, "move-down");
} }
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "rename":
this._renameOption();
break;
case "delete":
this._removeOption();
break;
case "duplicate":
this._duplicateOption();
break;
case "move_up":
this._moveUp();
break;
case "move_down":
this._moveDown();
break;
}
}
private _removeOption = () => { private _removeOption = () => {
if (this.option) { if (this.option) {
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
@@ -513,9 +527,6 @@ export default class HaAutomationOptionRow extends LitElement {
overflowStyles, overflowStyles,
indentStyle, indentStyle,
css` css`
li[role="separator"] {
border-bottom-color: var(--divider-color);
}
h4 { h4 {
color: var(--ha-color-text-secondary); color: var(--ha-color-text-secondary);
} }

120
src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { import {
mdiAppleKeyboardCommand, mdiAppleKeyboardCommand,
mdiContentCopy, mdiContentCopy,
@@ -16,8 +17,8 @@ import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors"; import { handleStructError } from "../../../../common/structs/handle-errors";
import type { LocalizeKeys } from "../../../../common/translations/localize"; import type { LocalizeKeys } from "../../../../common/translations/localize";
import "../../../../components/ha-md-divider"; import "../../../../components/ha-dropdown-item";
import "../../../../components/ha-md-menu-item"; import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
import { ACTION_BUILDING_BLOCKS } from "../../../../data/action"; import { ACTION_BUILDING_BLOCKS } from "../../../../data/action";
import type { ActionSidebarConfig } from "../../../../data/automation"; import type { ActionSidebarConfig } from "../../../../data/automation";
import { domainToName } from "../../../../data/integration"; import { domainToName } from "../../../../data/integration";
@@ -116,6 +117,7 @@ export default class HaAutomationSidebarAction extends LitElement {
.yamlMode=${this.yamlMode} .yamlMode=${this.yamlMode}
.warnings=${this._warnings} .warnings=${this._warnings}
.narrow=${this.narrow} .narrow=${this.narrow}
@wa-select=${this._handleDropdownSelect}
> >
<span slot="title">${title}</span> <span slot="title">${title}</span>
<span slot="subtitle" <span slot="subtitle"
@@ -126,38 +128,35 @@ export default class HaAutomationSidebarAction extends LitElement {
: ""}</span : ""}</span
> >
<ha-md-menu-item slot="menu-items" .clickAction=${this.config.run}> <ha-dropdown-item slot="menu-items" value="run">
<ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize("ui.panel.config.automation.editor.actions.run")} ${this.hass.localize("ui.panel.config.automation.editor.actions.run")}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.rename} value="rename"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename" "ui.panel.config.automation.editor.triggers.rename"
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider
<wa-divider slot="menu-items"></wa-divider>
<ha-dropdown-item
slot="menu-items" slot="menu-items"
role="separator" value="duplicate"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.duplicate}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${mdiPlusCircleMultipleOutline} .path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon> ></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
@@ -166,9 +165,9 @@ export default class HaAutomationSidebarAction extends LitElement {
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item slot="menu-items" .clickAction=${this.config.copy}> <ha-dropdown-item slot="menu-items" value="copy">
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
@@ -178,7 +177,6 @@ export default class HaAutomationSidebarAction extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -190,13 +188,13 @@ export default class HaAutomationSidebarAction extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.cut} value="cut"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
@@ -206,7 +204,6 @@ export default class HaAutomationSidebarAction extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -218,32 +215,29 @@ export default class HaAutomationSidebarAction extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this._toggleYamlMode} value="toggle_yaml_mode"
.disabled=${!this.config.uiSupported || !!this._warnings} .disabled=${!this.config.uiSupported || !!this._warnings}
> >
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider
<wa-divider slot="menu-items"></wa-divider>
<ha-dropdown-item
slot="menu-items" slot="menu-items"
role="separator" value="disable"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.disable}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline} .path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
@@ -252,14 +246,14 @@ export default class HaAutomationSidebarAction extends LitElement {
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.delete} value="delete"
variant="danger"
.disabled=${this.disabled} .disabled=${this.disabled}
class="warning"
> >
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete" "ui.panel.config.automation.editor.actions.delete"
@@ -269,7 +263,6 @@ export default class HaAutomationSidebarAction extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -285,7 +278,7 @@ export default class HaAutomationSidebarAction extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
${description && !this.yamlMode ${description && !this.yamlMode
? html`<div class="description">${description}</div>` ? html`<div class="description">${description}</div>`
: keyed( : keyed(
@@ -341,6 +334,41 @@ export default class HaAutomationSidebarAction extends LitElement {
fireEvent(this, "toggle-yaml-mode"); fireEvent(this, "toggle-yaml-mode");
}; };
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "rename":
this.config.rename();
break;
case "run":
this.config.run();
break;
case "duplicate":
this.config.duplicate();
break;
case "copy":
this.config.copy();
break;
case "cut":
this.config.cut();
break;
case "toggle_yaml_mode":
this._toggleYamlMode();
break;
case "disable":
this.config.disable();
break;
case "delete":
this.config.delete();
break;
}
}
static styles = [sidebarEditorStyles, overflowStyles]; static styles = [sidebarEditorStyles, overflowStyles];
} }

27
src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts
View File

@@ -3,16 +3,16 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-header";
import "../../../../components/ha-dropdown";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-button-menu"; import { ScrollableFadeMixin } from "../../../../mixins/scrollable-fade-mixin";
import "../../../../components/ha-md-divider";
import { haStyleScrollbar } from "../../../../resources/styles"; import { haStyleScrollbar } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
import "../ha-automation-editor-warning"; import "../ha-automation-editor-warning";
import { ScrollableFadeMixin } from "../../../../mixins/scrollable-fade-mixin";
export interface SidebarOverflowMenuEntry { export interface SidebarOverflowMenuEntry {
clickAction: () => void; clickAction: () => void;
@@ -36,6 +36,10 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin(
@property({ attribute: false }) public warnings?: string[]; @property({ attribute: false }) public warnings?: string[];
@property({ attribute: false }) public handleDropdownSelect!: (
ev: CustomEvent
) => void;
@property({ type: Boolean }) public narrow = false; @property({ type: Boolean }) public narrow = false;
@query(".card-content") private _contentElement!: HTMLDivElement; @query(".card-content") private _contentElement!: HTMLDivElement;
@@ -63,14 +67,10 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin(
<slot slot="title" name="title"></slot> <slot slot="title" name="title"></slot>
<slot slot="subtitle" name="subtitle"></slot> <slot slot="subtitle" name="subtitle"></slot>
<slot name="overflow-menu" slot="actionItems"> <slot name="overflow-menu" slot="actionItems">
<ha-md-button-menu <ha-dropdown
quick @click=${preventDefaultStopPropagation}
@click=${this._openOverflowMenu}
@keydown=${stopPropagation} @keydown=${stopPropagation}
@closed=${stopPropagation} placement="bottom-end"
.positioning=${this.narrow ? "absolute" : "fixed"}
anchor-corner="end-end"
menu-corner="start-end"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
@@ -78,7 +78,7 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin(
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<slot name="menu-items"></slot> <slot name="menu-items"></slot>
</ha-md-button-menu> </ha-dropdown>
</slot> </slot>
</ha-dialog-header> </ha-dialog-header>
${this.warnings ${this.warnings
@@ -100,11 +100,6 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin(
fireEvent(this, "close-sidebar"); fireEvent(this, "close-sidebar");
} }
private _openOverflowMenu(ev: MouseEvent) {
ev.stopPropagation();
ev.preventDefault();
}
static get styles() { static get styles() {
return [ return [
...super.styles, ...super.styles,

119
src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { import {
mdiAppleKeyboardCommand, mdiAppleKeyboardCommand,
mdiContentCopy, mdiContentCopy,
@@ -16,9 +17,11 @@ import { classMap } from "lit/directives/class-map";
import { keyed } from "lit/directives/keyed"; import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors"; import { handleStructError } from "../../../../common/structs/handle-errors";
import "../../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
import type { import type {
LegacyCondition,
ConditionSidebarConfig, ConditionSidebarConfig,
LegacyCondition,
} from "../../../../data/automation"; } from "../../../../data/automation";
import { testCondition } from "../../../../data/automation"; import { testCondition } from "../../../../data/automation";
import { import {
@@ -117,6 +120,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
.yamlMode=${this.yamlMode} .yamlMode=${this.yamlMode}
.warnings=${this._warnings} .warnings=${this._warnings}
.narrow=${this.narrow} .narrow=${this.narrow}
@wa-select=${this._handleDropdownSelect}
> >
<span slot="title">${title}</span> <span slot="title">${title}</span>
<span slot="subtitle" <span slot="subtitle"
@@ -124,42 +128,38 @@ export default class HaAutomationSidebarCondition extends LitElement {
? ` (${this.hass.localize("ui.panel.config.automation.editor.actions.disabled")})` ? ` (${this.hass.localize("ui.panel.config.automation.editor.actions.disabled")})`
: ""}</span : ""}</span
> >
<ha-md-menu-item slot="menu-items" .clickAction=${this._testCondition}> <ha-dropdown-item slot="menu-items" value="test">
<ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiFlask}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.conditions.test" "ui.panel.config.automation.editor.conditions.test"
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.rename} value="rename"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename" "ui.panel.config.automation.editor.triggers.rename"
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider <wa-divider slot="menu-items"></wa-divider>
slot="menu-items"
role="separator"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.duplicate} value="duplicate"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${mdiPlusCircleMultipleOutline} .path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon> ></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
@@ -168,10 +168,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item slot="menu-items" .clickAction=${this.config.copy}> <ha-dropdown-item slot="menu-items" value="copy">
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
@@ -181,7 +181,6 @@ export default class HaAutomationSidebarCondition extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -193,14 +192,14 @@ export default class HaAutomationSidebarCondition extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.cut} value="cut"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
@@ -210,7 +209,6 @@ export default class HaAutomationSidebarCondition extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -222,32 +220,29 @@ export default class HaAutomationSidebarCondition extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this._toggleYamlMode} value="toggle_yaml_mode"
.disabled=${!this.config.uiSupported || !!this._warnings} .disabled=${!this.config.uiSupported || !!this._warnings}
> >
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider
<wa-divider slot="menu-items"></wa-divider>
<ha-dropdown-item
slot="menu-items" slot="menu-items"
role="separator" value="disable"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.disable}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline} .path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
@@ -256,14 +251,14 @@ export default class HaAutomationSidebarCondition extends LitElement {
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.delete} value="delete"
variant="danger"
.disabled=${this.disabled} .disabled=${this.disabled}
class="warning"
> >
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete" "ui.panel.config.automation.editor.actions.delete"
@@ -273,7 +268,6 @@ export default class HaAutomationSidebarCondition extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -289,7 +283,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
${description && !this.yamlMode ${description && !this.yamlMode
? html`<div class="description">${description}</div>` ? html`<div class="description">${description}</div>`
: keyed( : keyed(
@@ -419,6 +413,41 @@ export default class HaAutomationSidebarCondition extends LitElement {
fireEvent(this, "toggle-yaml-mode"); fireEvent(this, "toggle-yaml-mode");
}; };
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "rename":
this.config.rename();
break;
case "test":
this._testCondition();
break;
case "duplicate":
this.config.duplicate();
break;
case "copy":
this.config.copy();
break;
case "cut":
this.config.cut();
break;
case "toggle_yaml_mode":
this._toggleYamlMode();
break;
case "disable":
this.config.disable();
break;
case "delete":
this.config.delete();
break;
}
}
static styles = [ static styles = [
sidebarEditorStyles, sidebarEditorStyles,
overflowStyles, overflowStyles,

59
src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { import {
mdiAppleKeyboardCommand, mdiAppleKeyboardCommand,
mdiDelete, mdiDelete,
@@ -6,8 +7,9 @@ import {
} from "@mdi/js"; } from "@mdi/js";
import { html, LitElement, nothing } from "lit"; import { html, LitElement, nothing } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import "../../../../components/ha-md-divider";
import "../../../../components/ha-md-menu-item"; import "../../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
import "../../../../components/ha-svg-icon"; import "../../../../components/ha-svg-icon";
import type { OptionSidebarConfig } from "../../../../data/automation"; import type { OptionSidebarConfig } from "../../../../data/automation";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
@@ -50,33 +52,34 @@ export default class HaAutomationSidebarOption extends LitElement {
.hass=${this.hass} .hass=${this.hass}
.isWide=${this.isWide} .isWide=${this.isWide}
.narrow=${this.narrow} .narrow=${this.narrow}
@wa-select=${this._handleDropdownSelect}
> >
<span slot="title">${title}</span> <span slot="title">${title}</span>
<span slot="subtitle">${subtitle}</span> <span slot="subtitle">${subtitle}</span>
${this.config.defaultOption ${this.config.defaultOption
? html`<span slot="overflow-menu"></span>` ? html`<span slot="overflow-menu"></span>`
: html` : html`
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.rename} value="rename"
.disabled=${!!disabled} .disabled=${!!disabled}
> >
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename" "ui.panel.config.automation.editor.triggers.rename"
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
@click=${this.config.duplicate} value="duplicate"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${mdiPlusCircleMultipleOutline} .path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon> ></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
@@ -85,19 +88,15 @@ export default class HaAutomationSidebarOption extends LitElement {
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider <wa-divider slot="menu-items"></wa-divider>
<ha-dropdown-item
slot="menu-items" slot="menu-items"
role="separator" value="delete"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.delete}
.disabled=${this.disabled} .disabled=${this.disabled}
class="warning" variant="danger"
> >
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.choose.remove_option" "ui.panel.config.automation.editor.actions.type.choose.remove_option"
@@ -123,13 +122,33 @@ export default class HaAutomationSidebarOption extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
`} `}
<div class="description">${description}</div> <div class="description">${description}</div>
</ha-automation-sidebar-card>`; </ha-automation-sidebar-card>`;
} }
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "rename":
this.config.rename();
break;
case "duplicate":
this.config.duplicate();
break;
case "delete":
this.config.delete();
break;
}
}
static styles = [sidebarEditorStyles, overflowStyles]; static styles = [sidebarEditorStyles, overflowStyles];
} }

39
src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts
View File

@@ -4,6 +4,8 @@ import { customElement, property, query, state } from "lit/decorators";
import { keyed } from "lit/directives/keyed"; import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import type { LocalizeKeys } from "../../../../common/translations/localize"; import type { LocalizeKeys } from "../../../../common/translations/localize";
import "../../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
import type { ScriptFieldSidebarConfig } from "../../../../data/automation"; import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
import { isMac } from "../../../../util/is_mac"; import { isMac } from "../../../../util/is_mac";
@@ -62,29 +64,30 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
.yamlMode=${this.yamlMode} .yamlMode=${this.yamlMode}
.warnings=${this._warnings} .warnings=${this._warnings}
.narrow=${this.narrow} .narrow=${this.narrow}
@wa-select=${this._handleDropdownSelect}
> >
<span slot="title">${title}</span> <span slot="title">${title}</span>
<span slot="subtitle">${subtitle}</span> <span slot="subtitle">${subtitle}</span>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this._toggleYamlMode} value="toggle_yaml_mode"
.disabled=${!!this._warnings} .disabled=${!!this._warnings}
> >
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.delete} value="delete"
.disabled=${this.disabled} .disabled=${this.disabled}
class="warning" variant="danger"
> >
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete" "ui.panel.config.automation.editor.actions.delete"
@@ -94,7 +97,6 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -110,7 +112,7 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
${keyed( ${keyed(
this.sidebarKey, this.sidebarKey,
html`<ha-script-field-selector-editor html`<ha-script-field-selector-editor
@@ -160,6 +162,23 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
fireEvent(this, "toggle-yaml-mode"); fireEvent(this, "toggle-yaml-mode");
}; };
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "toggle_yaml_mode":
this._toggleYamlMode();
break;
case "delete":
this.config.delete();
break;
}
}
static styles = sidebarEditorStyles; static styles = sidebarEditorStyles;
} }

39
src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts
View File

@@ -3,6 +3,8 @@ import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { keyed } from "lit/directives/keyed"; import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
import type { ScriptFieldSidebarConfig } from "../../../../data/automation"; import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
import { isMac } from "../../../../util/is_mac"; import { isMac } from "../../../../util/is_mac";
@@ -56,28 +58,29 @@ export default class HaAutomationSidebarScriptField extends LitElement {
.yamlMode=${this.yamlMode} .yamlMode=${this.yamlMode}
.warnings=${this._warnings} .warnings=${this._warnings}
.narrow=${this.narrow} .narrow=${this.narrow}
@wa-select=${this._handleDropdownSelect}
> >
<span slot="title">${title}</span> <span slot="title">${title}</span>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this._toggleYamlMode} value="toggle_yaml_mode"
.disabled=${!!this._warnings} .disabled=${!!this._warnings}
> >
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.delete} value="delete"
.disabled=${this.disabled} .disabled=${this.disabled}
class="warning" variant="danger"
> >
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete" "ui.panel.config.automation.editor.actions.delete"
@@ -87,7 +90,6 @@ export default class HaAutomationSidebarScriptField extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -103,7 +105,7 @@ export default class HaAutomationSidebarScriptField extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
${keyed( ${keyed(
this.sidebarKey, this.sidebarKey,
html`<ha-script-field-editor html`<ha-script-field-editor
@@ -154,6 +156,23 @@ export default class HaAutomationSidebarScriptField extends LitElement {
fireEvent(this, "toggle-yaml-mode"); fireEvent(this, "toggle-yaml-mode");
}; };
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "toggle_yaml_mode":
this._toggleYamlMode();
break;
case "delete":
this.config.delete();
break;
}
}
static styles = [sidebarEditorStyles, overflowStyles]; static styles = [sidebarEditorStyles, overflowStyles];
} }

118
src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { import {
mdiAppleKeyboardCommand, mdiAppleKeyboardCommand,
mdiContentCopy, mdiContentCopy,
@@ -15,6 +16,8 @@ import { customElement, property, query, state } from "lit/decorators";
import { keyed } from "lit/directives/keyed"; import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors"; import { handleStructError } from "../../../../common/structs/handle-errors";
import "../../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
import type { import type {
LegacyTrigger, LegacyTrigger,
TriggerSidebarConfig, TriggerSidebarConfig,
@@ -99,6 +102,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
.yamlMode=${this.yamlMode} .yamlMode=${this.yamlMode}
.warnings=${this._warnings} .warnings=${this._warnings}
.narrow=${this.narrow} .narrow=${this.narrow}
@wa-select=${this._handleDropdownSelect}
> >
<span slot="title">${title}</span> <span slot="title">${title}</span>
<span slot="subtitle" <span slot="subtitle"
@@ -106,60 +110,56 @@ export default class HaAutomationSidebarTrigger extends LitElement {
? ` (${this.hass.localize("ui.panel.config.automation.editor.actions.disabled")})` ? ` (${this.hass.localize("ui.panel.config.automation.editor.actions.disabled")})`
: ""}</span : ""}</span
> >
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.rename} value="rename"
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename" "ui.panel.config.automation.editor.triggers.rename"
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
${!this.yamlMode && ${!this.yamlMode &&
!("id" in this.config.config) && !("id" in this.config.config) &&
!this._requestShowId !this._requestShowId
? html`<ha-md-menu-item ? html`<ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this._showTriggerId} value="show_id"
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
<ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiIdentifier}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.edit_id" "ui.panel.config.automation.editor.triggers.edit_id"
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item>` </ha-dropdown-item>`
: nothing} : nothing}
<ha-md-divider <wa-divider slot="menu-items"></wa-divider>
slot="menu-items"
role="separator"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.duplicate} value="duplicate"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.duplicate" "ui.panel.config.automation.editor.triggers.duplicate"
)} )}
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${mdiPlusCircleMultipleOutline} .path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item slot="menu-items" .clickAction=${this.config.copy}> <ha-dropdown-item slot="menu-items" value="copy">
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
@@ -169,7 +169,6 @@ export default class HaAutomationSidebarTrigger extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -181,14 +180,14 @@ export default class HaAutomationSidebarTrigger extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.cut} value="cut"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
@@ -198,7 +197,6 @@ export default class HaAutomationSidebarTrigger extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -210,32 +208,28 @@ export default class HaAutomationSidebarTrigger extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this._toggleYamlMode} value="toggle_yaml_mode"
.disabled=${!this.config.uiSupported || !!this._warnings} .disabled=${!this.config.uiSupported || !!this._warnings}
> >
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider <wa-divider slot="menu-items"></wa-divider>
<ha-dropdown-item
slot="menu-items" slot="menu-items"
role="separator" value="disable"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.disable}
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline} .path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
@@ -244,14 +238,14 @@ export default class HaAutomationSidebarTrigger extends LitElement {
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
slot="menu-items" slot="menu-items"
.clickAction=${this.config.delete} value="delete"
.disabled=${this.disabled} .disabled=${this.disabled}
class="warning" variant="danger"
> >
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete" "ui.panel.config.automation.editor.actions.delete"
@@ -261,7 +255,6 @@ export default class HaAutomationSidebarTrigger extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -277,7 +270,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
${keyed( ${keyed(
this.sidebarKey, this.sidebarKey,
html`<ha-automation-trigger-editor html`<ha-automation-trigger-editor
@@ -335,6 +328,41 @@ export default class HaAutomationSidebarTrigger extends LitElement {
this._requestShowId = true; this._requestShowId = true;
}; };
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "rename":
this.config.rename();
break;
case "show_id":
this._showTriggerId();
break;
case "duplicate":
this.config.duplicate();
break;
case "copy":
this.config.copy();
break;
case "cut":
this.config.cut();
break;
case "toggle_yaml_mode":
this._toggleYamlMode();
break;
case "disable":
this.config.disable();
break;
case "delete":
this.config.delete();
break;
}
}
static styles = [sidebarEditorStyles, overflowStyles]; static styles = [sidebarEditorStyles, overflowStyles];
} }

140
src/panels/config/automation/trigger/ha-automation-trigger-row.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { consume } from "@lit/context"; import { consume } from "@lit/context";
import { import {
mdiAppleKeyboardCommand, mdiAppleKeyboardCommand,
@@ -34,11 +35,11 @@ import "../../../../components/ha-alert";
import "../../../../components/ha-automation-row"; import "../../../../components/ha-automation-row";
import type { HaAutomationRow } from "../../../../components/ha-automation-row"; import type { HaAutomationRow } from "../../../../components/ha-automation-row";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-dropdown";
import "../../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-divider";
import "../../../../components/ha-md-menu-item";
import "../../../../components/ha-svg-icon"; import "../../../../components/ha-svg-icon";
import { TRIGGER_ICONS } from "../../../../components/ha-trigger-icon"; import { TRIGGER_ICONS } from "../../../../components/ha-trigger-icon";
import type { import type {
@@ -208,41 +209,35 @@ export default class HaAutomationTriggerRow extends LitElement {
<slot name="icons" slot="icons"></slot> <slot name="icons" slot="icons"></slot>
<ha-md-button-menu <ha-dropdown
quick
slot="icons" slot="icons"
@click=${preventDefaultStopPropagation} @click=${preventDefaultStopPropagation}
@keydown=${stopPropagation} @keydown=${stopPropagation}
@closed=${stopPropagation} @wa-select=${this._handleDropdownSelect}
positioning="fixed" placement="bottom-end"
anchor-corner="end-end"
menu-corner="start-end"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._renameTrigger} value="rename"
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename" "ui.panel.config.automation.editor.triggers.rename"
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <wa-divider></wa-divider>
<ha-md-menu-item <ha-dropdown-item value="duplicate" .disabled=${this.disabled}>
.clickAction=${this._duplicateTrigger}
.disabled=${this.disabled}
>
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${mdiPlusCircleMultipleOutline} .path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon> ></ha-svg-icon>
@@ -251,13 +246,10 @@ export default class HaAutomationTriggerRow extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item value="copy" .disabled=${this.disabled}>
.clickAction=${this._copyTrigger} <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
.disabled=${this.disabled}
>
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
@@ -266,7 +258,6 @@ export default class HaAutomationTriggerRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -277,13 +268,10 @@ export default class HaAutomationTriggerRow extends LitElement {
<span>C</span> <span>C</span>
</span>` </span>`
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item value="cut" .disabled=${this.disabled}>
.clickAction=${this._cutTrigger} <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
.disabled=${this.disabled}
>
<ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
@@ -292,7 +280,6 @@ export default class HaAutomationTriggerRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -303,51 +290,51 @@ export default class HaAutomationTriggerRow extends LitElement {
<span>X</span> <span>X</span>
</span>` </span>`
)} )}
</ha-md-menu-item> </ha-dropdown-item>
${!this.optionsInSidebar ${!this.optionsInSidebar
? html` ? html`
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._moveUp} value="move_up"
.disabled=${this.disabled || !!this.first} .disabled=${this.disabled || !!this.first}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_up" "ui.panel.config.automation.editor.move_up"
)} )}
<ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon <ha-svg-icon slot="icon" .path=${mdiArrowUp}></ha-svg-icon
></ha-md-menu-item> ></ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._moveDown} value="move_down"
.disabled=${this.disabled || !!this.last} .disabled=${this.disabled || !!this.last}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_down" "ui.panel.config.automation.editor.move_down"
)} )}
<ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon <ha-svg-icon slot="icon" .path=${mdiArrowDown}></ha-svg-icon
></ha-md-menu-item> ></ha-dropdown-item>
` `
: nothing} : nothing}
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._toggleYamlMode} value="toggle_yaml_mode"
.disabled=${!supported || !!this._warnings} .disabled=${!supported || !!this._warnings}
> >
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
this.hass.localize( this.hass.localize(
`ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <wa-divider></wa-divider>
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._onDisable} value="disable"
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${"enabled" in this.trigger && this.trigger.enabled === false .path=${"enabled" in this.trigger && this.trigger.enabled === false
? mdiPlayCircleOutline ? mdiPlayCircleOutline
: mdiStopCircleOutline} : mdiStopCircleOutline}
@@ -358,15 +345,15 @@ export default class HaAutomationTriggerRow extends LitElement {
`ui.panel.config.automation.editor.actions.${"enabled" in this.trigger && this.trigger.enabled === false ? "enable" : "disable"}` `ui.panel.config.automation.editor.actions.${"enabled" in this.trigger && this.trigger.enabled === false ? "enable" : "disable"}`
) )
)} )}
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._onDelete} value="delete"
class="warning" variant="danger"
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon <ha-svg-icon
class="warning" class="warning"
slot="start" slot="icon"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
${this._renderOverflowLabel( ${this._renderOverflowLabel(
@@ -377,7 +364,6 @@ export default class HaAutomationTriggerRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -392,8 +378,8 @@ export default class HaAutomationTriggerRow extends LitElement {
> >
</span>` </span>`
)} )}
</ha-md-menu-item> </ha-dropdown-item>
</ha-md-button-menu> </ha-dropdown>
${!this.optionsInSidebar ${!this.optionsInSidebar
? html`${this._warnings ? html`${this._warnings
? html`<ha-automation-editor-warning ? html`<ha-automation-editor-warning
@@ -804,6 +790,44 @@ export default class HaAutomationTriggerRow extends LitElement {
this._automationRowElement?.focus(); this._automationRowElement?.focus();
} }
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "rename":
this._renameTrigger();
break;
case "duplicate":
this._duplicateTrigger();
break;
case "copy":
this._copyTrigger();
break;
case "cut":
this._cutTrigger();
break;
case "move_up":
this._moveUp();
break;
case "move_down":
this._moveDown();
break;
case "toggle_yaml_mode":
this._toggleYamlMode(ev.target as HTMLElement);
break;
case "disable":
this._onDisable();
break;
case "delete":
this._onDelete();
break;
}
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
rowStyles, rowStyles,

242
src/panels/config/script/ha-script-editor.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { consume } from "@lit/context"; import { consume } from "@lit/context";
import { import {
mdiAppleKeyboardCommand, mdiAppleKeyboardCommand,
@@ -23,18 +24,19 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
import { transform } from "../../../common/decorators/transform";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { goBack, navigate } from "../../../common/navigate"; import { goBack, navigate } from "../../../common/navigate";
import { slugify } from "../../../common/string/slugify"; import { slugify } from "../../../common/string/slugify";
import { promiseTimeout } from "../../../common/util/promise-timeout"; import { promiseTimeout } from "../../../common/util/promise-timeout";
import { afterNextRender } from "../../../common/util/render-status"; import { afterNextRender } from "../../../common/util/render-status";
import "../../../components/ha-button"; import "../../../components/ha-button";
import "../../../components/ha-button-menu"; import "../../../components/ha-dropdown";
import "../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
import "../../../components/ha-fab"; import "../../../components/ha-fab";
import { transform } from "../../../common/decorators/transform";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-yaml-editor"; import "../../../components/ha-yaml-editor";
import { substituteBlueprint } from "../../../data/blueprint"; import { substituteBlueprint } from "../../../data/blueprint";
@@ -65,7 +67,6 @@ import "../../../layouts/hass-subpage";
import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin"; import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin"; import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
import { haStyle } from "../../../resources/styles"; import { haStyle } from "../../../resources/styles";
import type { Entries, HomeAssistant, Route } from "../../../types"; import type { Entries, HomeAssistant, Route } from "../../../types";
import { isMac } from "../../../util/is_mac"; import { isMac } from "../../../util/is_mac";
@@ -73,11 +74,11 @@ import { showToast } from "../../../util/toast";
import { showAutomationModeDialog } from "../automation/automation-mode-dialog/show-dialog-automation-mode"; import { showAutomationModeDialog } from "../automation/automation-mode-dialog/show-dialog-automation-mode";
import type { EntityRegistryUpdate } from "../automation/automation-save-dialog/show-dialog-automation-save"; import type { EntityRegistryUpdate } from "../automation/automation-save-dialog/show-dialog-automation-save";
import { showAutomationSaveDialog } from "../automation/automation-save-dialog/show-dialog-automation-save"; import { showAutomationSaveDialog } from "../automation/automation-save-dialog/show-dialog-automation-save";
import { showAutomationSaveTimeoutDialog } from "../automation/automation-save-timeout-dialog/show-dialog-automation-save-timeout";
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category"; import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
import "./blueprint-script-editor"; import "./blueprint-script-editor";
import "./manual-script-editor"; import "./manual-script-editor";
import type { HaManualScriptEditor } from "./manual-script-editor"; import type { HaManualScriptEditor } from "./manual-script-editor";
import { showAutomationSaveTimeoutDialog } from "../automation/automation-save-timeout-dialog/show-dialog-automation-save-timeout";
@customElement("ha-script-editor") @customElement("ha-script-editor")
export class HaScriptEditor extends SubscribeMixin( export class HaScriptEditor extends SubscribeMixin(
@@ -241,7 +242,10 @@ export class HaScriptEditor extends SubscribeMixin(
</ha-button> </ha-button>
` `
: ""} : ""}
<ha-button-menu slot="toolbar-icon"> <ha-dropdown
slot="toolbar-icon"
@wa-select=${this._handleDropdownSelect}
>
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
@@ -249,133 +253,107 @@ export class HaScriptEditor extends SubscribeMixin(
></ha-icon-button> ></ha-icon-button>
${this._mode === "gui" && this.narrow ${this._mode === "gui" && this.narrow
? html`<ha-list-item ? html`<ha-dropdown-item
graphic="icon" value="undo"
@click=${this._undo}
.disabled=${!this._undoRedoController.canUndo} .disabled=${!this._undoRedoController.canUndo}
> >
${this.hass.localize("ui.common.undo")} ${this.hass.localize("ui.common.undo")}
<ha-svg-icon slot="graphic" .path=${mdiUndo}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiUndo}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item
graphic="icon" value="redo"
@click=${this._redo}
.disabled=${!this._undoRedoController.canRedo} .disabled=${!this._undoRedoController.canRedo}
> >
${this.hass.localize("ui.common.redo")} ${this.hass.localize("ui.common.redo")}
<ha-svg-icon slot="graphic" .path=${mdiRedo}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRedo}></ha-svg-icon>
</ha-list-item>` </ha-dropdown-item>`
: nothing} : nothing}
<ha-list-item <ha-dropdown-item .disabled=${!this.scriptId} value="info">
graphic="icon"
.disabled=${!this.scriptId}
@click=${this._showInfo}
>
${this.hass.localize("ui.panel.config.script.editor.show_info")} ${this.hass.localize("ui.panel.config.script.editor.show_info")}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="icon"
.path=${mdiInformationOutline} .path=${mdiInformationOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item .disabled=${!stateObj} value="settings">
graphic="icon"
.disabled=${!stateObj}
@click=${this._showSettings}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.picker.show_settings" "ui.panel.config.automation.picker.show_settings"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiCog}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item .disabled=${!stateObj} value="category">
graphic="icon"
.disabled=${!stateObj}
@click=${this._editCategory}
>
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.scene.picker.${this._registryEntry?.categories?.script ? "edit_category" : "assign_category"}` `ui.panel.config.scene.picker.${this._registryEntry?.categories?.script ? "edit_category" : "assign_category"}`
)} )}
<ha-svg-icon slot="graphic" .path=${mdiTag}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item .disabled=${!this.scriptId} value="run">
graphic="icon"
.disabled=${!this.scriptId}
@click=${this._runScript}
>
${this.hass.localize("ui.panel.config.script.picker.run_script")} ${this.hass.localize("ui.panel.config.script.picker.run_script")}
<ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
${this.scriptId && this.narrow ${this.scriptId && this.narrow
? html` ? html`<ha-dropdown-item value="trace">
<a href="/config/script/trace/${this.scriptId}"> ${this.hass.localize(
<ha-list-item graphic="icon"> "ui.panel.config.automation.editor.show_trace"
${this.hass.localize( )}
"ui.panel.config.script.editor.show_trace" <ha-svg-icon
)} slot="icon"
<ha-svg-icon .path=${mdiTransitConnection}
slot="graphic" ></ha-svg-icon>
.path=${mdiTransitConnection} </ha-dropdown-item>`
></ha-svg-icon>
</ha-list-item>
</a>
`
: nothing} : nothing}
${!useBlueprint && !("fields" in this._config) ${!useBlueprint && !("fields" in this._config)
? html` ? html`
<ha-list-item <ha-dropdown-item
graphic="icon"
.disabled=${this._readOnly || this._mode === "yaml"} .disabled=${this._readOnly || this._mode === "yaml"}
@click=${this._addFields} value="add_fields"
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.script.editor.field.add_fields" "ui.panel.config.script.editor.field.add_fields"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="icon"
.path=${mdiFormTextbox} .path=${mdiFormTextbox}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
` `
: nothing} : nothing}
<ha-list-item <ha-dropdown-item
graphic="icon" value="rename"
@click=${this._promptScriptAlias}
.disabled=${!this.scriptId || .disabled=${!this.scriptId ||
this._readOnly || this._readOnly ||
this._mode === "yaml"} this._mode === "yaml"}
> >
${this.hass.localize("ui.panel.config.script.editor.rename")} ${this.hass.localize("ui.panel.config.script.editor.rename")}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
${!useBlueprint ${!useBlueprint
? html` ? html`
<ha-list-item <ha-dropdown-item
graphic="icon" value="change_mode"
@click=${this._promptScriptMode}
.disabled=${this._readOnly || this._mode === "yaml"} .disabled=${this._readOnly || this._mode === "yaml"}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.script.editor.change_mode" "ui.panel.config.script.editor.change_mode"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="icon"
.path=${mdiDebugStepOver} .path=${mdiDebugStepOver}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
` `
: nothing} : nothing}
<ha-list-item <ha-dropdown-item
.disabled=${this._blueprintConfig || .disabled=${!!this._blueprintConfig ||
(!this._readOnly && !this.scriptId)} (!this._readOnly && !this.scriptId)}
graphic="icon" value="duplicate"
@click=${this._duplicate}
> >
${this.hass.localize( ${this.hass.localize(
this._readOnly this._readOnly
@@ -383,58 +361,48 @@ export class HaScriptEditor extends SubscribeMixin(
: "ui.panel.config.script.editor.duplicate" : "ui.panel.config.script.editor.duplicate"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="icon"
.path=${mdiPlusCircleMultipleOutline} .path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
${useBlueprint ${useBlueprint
? html` ? html`
<ha-list-item <ha-dropdown-item
graphic="icon" value="take_control"
@click=${this._takeControl}
.disabled=${this._readOnly} .disabled=${this._readOnly}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.script.editor.take_control" "ui.panel.config.script.editor.take_control"
)} )}
<ha-svg-icon <ha-svg-icon slot="icon" .path=${mdiFileEdit}></ha-svg-icon>
slot="graphic" </ha-dropdown-item>
.path=${mdiFileEdit}
></ha-svg-icon>
</ha-list-item>
` `
: nothing} : nothing}
<ha-list-item <ha-dropdown-item value="toggle_yaml_mode">
graphic="icon"
@click=${this._mode === "gui"
? this._switchYamlMode
: this._switchUiMode}
>
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}`
)} )}
<ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<li divider role="separator"></li> <wa-divider></wa-divider>
<ha-list-item <ha-dropdown-item
.disabled=${this._readOnly || !this.scriptId} .disabled=${this._readOnly || !this.scriptId}
class=${classMap({ warning: Boolean(this.scriptId) })} value="delete"
graphic="icon" .variant=${this.scriptId ? "danger" : "default"}
@click=${this._deleteConfirm}
> >
${this.hass.localize("ui.panel.config.script.picker.delete")} ${this.hass.localize("ui.panel.config.script.picker.delete")}
<ha-svg-icon <ha-svg-icon
class=${classMap({ warning: Boolean(this.scriptId) })} class=${classMap({ warning: Boolean(this.scriptId) })}
slot="graphic" slot="icon"
.path=${mdiDelete} .path=${mdiDelete}
> >
</ha-svg-icon> </ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
</ha-button-menu> </ha-dropdown>
<div class=${this._mode === "yaml" ? "yaml-mode" : ""}> <div class=${this._mode === "yaml" ? "yaml-mode" : ""}>
${this._mode === "gui" ${this._mode === "gui"
? html` ? html`
@@ -688,9 +656,7 @@ export class HaScriptEditor extends SubscribeMixin(
this._dirty = true; this._dirty = true;
} }
private async _runScript(ev: CustomEvent) { private async _runScript() {
ev.stopPropagation();
if (hasScriptFields(this.hass, this._entityId!)) { if (hasScriptFields(this.hass, this._entityId!)) {
showMoreInfoDialog(this, { showMoreInfoDialog(this, {
entityId: this._entityId!, entityId: this._entityId!,
@@ -1155,6 +1121,63 @@ export class HaScriptEditor extends SubscribeMixin(
this._undoRedoController.redo(); this._undoRedoController.redo();
} }
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "undo":
this._undo();
break;
case "redo":
this._redo();
break;
case "info":
this._showInfo();
break;
case "settings":
this._showSettings();
break;
case "category":
this._editCategory();
break;
case "run":
this._runScript();
break;
case "add_fields":
this._addFields();
break;
case "rename":
this._promptScriptAlias();
break;
case "change_mode":
this._promptScriptMode();
break;
case "duplicate":
this._duplicate();
break;
case "take_control":
this._takeControl();
break;
case "toggle_yaml_mode":
if (this._mode === "gui") {
this._switchYamlMode();
break;
}
this._switchUiMode();
break;
case "delete":
this._deleteConfirm();
break;
case "trace":
this._showTrace();
break;
}
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle, haStyle,
@@ -1245,9 +1268,6 @@ export class HaScriptEditor extends SubscribeMixin(
ha-fab.dirty { ha-fab.dirty {
bottom: calc(16px + var(--safe-area-inset-bottom, 0px)); bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
} }
li[role="separator"] {
border-bottom-color: var(--divider-color);
}
.header { .header {
display: flex; display: flex;
margin: 16px 0; margin: 16px 0;
@@ -1261,10 +1281,6 @@ export class HaScriptEditor extends SubscribeMixin(
.header a { .header a {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
ha-button-menu a {
text-decoration: none;
color: var(--primary-color);
}
ha-tooltip ha-svg-icon { ha-tooltip ha-svg-icon {
width: 12px; width: 12px;
} }

89
src/panels/config/script/ha-script-field-row.ts
View File

@@ -15,18 +15,19 @@ import type { LocalizeKeys } from "../../../common/translations/localize";
import "../../../components/ha-automation-row"; import "../../../components/ha-automation-row";
import type { HaAutomationRow } from "../../../components/ha-automation-row"; import type { HaAutomationRow } from "../../../components/ha-automation-row";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-md-button-menu"; import "../../../components/ha-dropdown";
import "../../../components/ha-md-menu-item"; import "../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
import type { ScriptFieldSidebarConfig } from "../../../data/automation"; import type { ScriptFieldSidebarConfig } from "../../../data/automation";
import type { Field } from "../../../data/script"; import type { Field } from "../../../data/script";
import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector"; import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
import { haStyle } from "../../../resources/styles"; import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { isMac } from "../../../util/is_mac"; import { isMac } from "../../../util/is_mac";
import { showToast } from "../../../util/toast";
import { indentStyle, overflowStyles } from "../automation/styles"; import { indentStyle, overflowStyles } from "../automation/styles";
import "./ha-script-field-selector-editor"; import "./ha-script-field-selector-editor";
import type HaScriptFieldSelectorEditor from "./ha-script-field-selector-editor"; import type HaScriptFieldSelectorEditor from "./ha-script-field-selector-editor";
import { showToast } from "../../../util/toast";
@customElement("ha-script-field-row") @customElement("ha-script-field-row")
export default class HaScriptFieldRow extends LitElement { export default class HaScriptFieldRow extends LitElement {
@@ -79,36 +80,33 @@ export default class HaScriptFieldRow extends LitElement {
.highlight=${this.highlight} .highlight=${this.highlight}
@delete-row=${this._onDelete} @delete-row=${this._onDelete}
> >
<ha-md-button-menu <ha-dropdown
quick
slot="icons" slot="icons"
@click=${preventDefaultStopPropagation} @click=${preventDefaultStopPropagation}
@keydown=${stopPropagation} @keydown=${stopPropagation}
@closed=${stopPropagation} @wa-select=${this._handleDropdownSelect}
positioning="fixed" placement="bottom-end"
anchor-corner="end-end"
menu-corner="start-end"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<ha-md-menu-item .clickAction=${this._toggleYamlMode}> <ha-dropdown-item value="toggle_yaml_mode">
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
)} )}
<span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span> <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._onDelete} value="delete"
.disabled=${this.disabled} .disabled=${this.disabled}
class="warning" variant="danger"
> >
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete" "ui.panel.config.automation.editor.actions.delete"
@@ -118,7 +116,6 @@ export default class HaScriptFieldRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -134,8 +131,8 @@ export default class HaScriptFieldRow extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
</ha-md-button-menu> </ha-dropdown>
<h3 slot="header">${this.key}</h3> <h3 slot="header">${this.key}</h3>
@@ -170,27 +167,21 @@ export default class HaScriptFieldRow extends LitElement {
"ui.panel.config.script.editor.field.selector" "ui.panel.config.script.editor.field.selector"
)} )}
</h3> </h3>
<ha-md-button-menu <ha-dropdown
quick
slot="icons" slot="icons"
@click=${preventDefaultStopPropagation} @click=${preventDefaultStopPropagation}
@keydown=${stopPropagation} @keydown=${stopPropagation}
@closed=${stopPropagation} @wa-select=${this._handleDropdownSelect}
positioning="fixed" placement="bottom-end"
anchor-corner="end-end"
menu-corner="start-end"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<ha-md-menu-item <ha-dropdown-item value="toggle_yaml_mode" selector-row>
.clickAction=${this._toggleYamlMode}
selector-row
>
<ha-svg-icon <ha-svg-icon
slot="start" slot="icon"
.path=${mdiPlaylistEdit} .path=${mdiPlaylistEdit}
></ha-svg-icon> ></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
@@ -201,16 +192,13 @@ export default class HaScriptFieldRow extends LitElement {
class="shortcut-placeholder ${isMac ? "mac" : ""}" class="shortcut-placeholder ${isMac ? "mac" : ""}"
></span> ></span>
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._onDelete} value="delete"
.disabled=${this.disabled} .disabled=${this.disabled}
class="warning" variant="danger"
> >
<ha-svg-icon <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
slot="start"
.path=${mdiDelete}
></ha-svg-icon>
<div class="overflow-label"> <div class="overflow-label">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete" "ui.panel.config.automation.editor.actions.delete"
@@ -220,7 +208,6 @@ export default class HaScriptFieldRow extends LitElement {
<span <span
>${isMac >${isMac
? html`<ha-svg-icon ? html`<ha-svg-icon
slot="start"
.path=${mdiAppleKeyboardCommand} .path=${mdiAppleKeyboardCommand}
></ha-svg-icon>` ></ha-svg-icon>`
: this.hass.localize( : this.hass.localize(
@@ -236,8 +223,8 @@ export default class HaScriptFieldRow extends LitElement {
</span>` </span>`
: nothing} : nothing}
</div> </div>
</ha-md-menu-item> </ha-dropdown-item>
</ha-md-button-menu> </ha-dropdown>
</ha-automation-row> </ha-automation-row>
</ha-card> </ha-card>
${typeof this.field.selector === "object" && ${typeof this.field.selector === "object" &&
@@ -420,6 +407,23 @@ export default class HaScriptFieldRow extends LitElement {
this._selectorRowElement?.focus(); this._selectorRowElement?.focus();
} }
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "toggle_yaml_mode":
this._toggleYamlMode(ev.target as HTMLElement);
break;
case "delete":
this._onDelete();
break;
}
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle, haStyle,
@@ -477,9 +481,6 @@ export default class HaScriptFieldRow extends LitElement {
.selected_menu_item { .selected_menu_item {
color: var(--primary-color); color: var(--primary-color);
} }
li[role="separator"] {
border-bottom-color: var(--divider-color);
}
.selector-row { .selector-row {
padding-top: 12px; padding-top: 12px;
padding-bottom: 16px; padding-bottom: 16px;

101
src/panels/config/script/ha-script-trace.ts
View File

@@ -1,3 +1,4 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { import {
mdiDotsVertical, mdiDotsVertical,
mdiDownload, mdiDownload,
@@ -8,17 +9,19 @@ import {
mdiRefresh, mdiRefresh,
} from "@mdi/js"; } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time"; import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-button-menu"; import { navigate } from "../../../common/navigate";
import "../../../components/ha-button"; import "../../../components/ha-button";
import "../../../components/ha-dropdown";
import "../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import "../../../components/trace/ha-trace-blueprint-config"; import "../../../components/trace/ha-trace-blueprint-config";
import "../../../components/trace/ha-trace-config"; import "../../../components/trace/ha-trace-config";
import "../../../components/trace/ha-trace-logbook"; import "../../../components/trace/ha-trace-logbook";
@@ -104,7 +107,7 @@ export class HaScriptTrace extends LitElement {
? html` ? html`
<ha-button <ha-button
class="trace-link" class="trace-link"
href="/config/script/edit/${this.scriptId}" @click=${this._navigateToScript}
slot="toolbar-icon" slot="toolbar-icon"
appearance="plain" appearance="plain"
> >
@@ -113,64 +116,49 @@ export class HaScriptTrace extends LitElement {
)} )}
</ha-button> </ha-button>
` `
: ""} : nothing}
<ha-button-menu slot="toolbar-icon"> <ha-dropdown
slot="toolbar-icon"
@wa-select=${this._handleDropdownSelect}
>
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<ha-list-item <ha-dropdown-item .disabled=${!stateObj} value="show_info">
graphic="icon"
.disabled=${!stateObj}
@click=${this._showInfo}
>
${this.hass.localize("ui.panel.config.script.editor.show_info")} ${this.hass.localize("ui.panel.config.script.editor.show_info")}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="icon"
.path=${mdiInformationOutline} .path=${mdiInformationOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
${this.narrow && this.scriptId ${this.narrow && this.scriptId
? html` ? html`<ha-dropdown-item value="edit_script">
<a ${this.hass.localize(
class="trace-link" "ui.panel.config.script.trace.edit_script"
href="/config/script/edit/${this.scriptId}" )}
> <ha-svg-icon slot="icon" .path=${mdiPencil}></ha-svg-icon>
<ha-list-item graphic="icon"> </ha-dropdown-item> `
${this.hass.localize( : nothing}
"ui.panel.config.script.trace.edit_script"
)}
<ha-svg-icon
slot="graphic"
.path=${mdiPencil}
></ha-svg-icon>
</ha-list-item>
</a>
`
: ""}
<li divider role="separator"></li> <wa-divider></wa-divider>
<ha-list-item graphic="icon" @click=${this._refreshTraces}> <ha-dropdown-item value="refresh">
${this.hass.localize("ui.panel.config.automation.trace.refresh")} ${this.hass.localize("ui.panel.config.automation.trace.refresh")}
<ha-svg-icon slot="graphic" .path=${mdiRefresh}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiRefresh}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
<ha-list-item <ha-dropdown-item .disabled=${!this._trace} value="download_trace">
graphic="icon"
.disabled=${!this._trace}
@click=${this._downloadTrace}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.trace.download_trace" "ui.panel.config.automation.trace.download_trace"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
</ha-list-item> </ha-dropdown-item>
</ha-button-menu> </ha-dropdown>
<div class="toolbar"> <div class="toolbar">
${this._traces && this._traces.length > 0 ${this._traces && this._traces.length > 0
@@ -530,6 +518,35 @@ export class HaScriptTrace extends LitElement {
fireEvent(this, "hass-more-info", { entityId: this._entityId }); fireEvent(this, "hass-more-info", { entityId: this._entityId });
} }
private _navigateToScript() {
if (this.scriptId) {
navigate(`/config/script/edit/${this.scriptId}`);
}
}
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
const action = ev.detail?.item?.value;
if (!action) {
return;
}
switch (action) {
case "show_info":
this._showInfo();
break;
case "refresh":
this._refreshTraces();
break;
case "download_trace":
this._downloadTrace();
break;
case "edit_script":
this._navigateToScript();
break;
}
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle, haStyle,

10
yarn.lock
View File

@@ -1940,9 +1940,9 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@home-assistant/webawesome@npm:3.0.0-ha.0": "@home-assistant/webawesome@npm:3.0.0-ha.1":
version: 3.0.0-ha.0 version: 3.0.0-ha.1
resolution: "@home-assistant/webawesome@npm:3.0.0-ha.0" resolution: "@home-assistant/webawesome@npm:3.0.0-ha.1"
dependencies: dependencies:
"@ctrl/tinycolor": "npm:4.1.0" "@ctrl/tinycolor": "npm:4.1.0"
"@floating-ui/dom": "npm:^1.6.13" "@floating-ui/dom": "npm:^1.6.13"
@@ -1953,7 +1953,7 @@ __metadata:
lit: "npm:^3.2.1" lit: "npm:^3.2.1"
nanoid: "npm:^5.1.5" nanoid: "npm:^5.1.5"
qr-creator: "npm:^1.0.0" qr-creator: "npm:^1.0.0"
checksum: 10/2034d498d5b26bb0573ebc2c9aadd144604bb48c04becbae0c67b16857d8e5d6562626e795974362c3fc41e9b593a9005595d8b5ff434b1569b2d724af13043b checksum: 10/281f16c2c6c28d95a381de6fca05948a9c67d8184f20844d64ce33dc2caf9e6761d2cf8337b97e7487a71be011ab04f2a021b20b823a20e3c049cc68205de86a
languageName: node languageName: node
linkType: hard linkType: hard
@@ -9213,7 +9213,7 @@ __metadata:
"@fullcalendar/list": "npm:6.1.19" "@fullcalendar/list": "npm:6.1.19"
"@fullcalendar/luxon3": "npm:6.1.19" "@fullcalendar/luxon3": "npm:6.1.19"
"@fullcalendar/timegrid": "npm:6.1.19" "@fullcalendar/timegrid": "npm:6.1.19"
"@home-assistant/webawesome": "npm:3.0.0-ha.0" "@home-assistant/webawesome": "npm:3.0.0-ha.1"
"@lezer/highlight": "npm:1.2.3" "@lezer/highlight": "npm:1.2.3"
"@lit-labs/motion": "npm:1.0.9" "@lit-labs/motion": "npm:1.0.9"
"@lit-labs/observers": "npm:2.0.6" "@lit-labs/observers": "npm:2.0.6"