diff --git a/package.json b/package.json index 313f315a31..8921bffb9a 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "@fullcalendar/list": "6.1.19", "@fullcalendar/luxon3": "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", "@lit-labs/motion": "1.0.9", "@lit-labs/observers": "2.0.6", diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 521e2309ca..3fa3930eee 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { consume } from "@lit/context"; import { mdiAlertCircleCheck, @@ -32,11 +33,11 @@ import { copyToClipboard } from "../../../../common/util/copy-clipboard"; import "../../../../components/ha-automation-row"; import type { HaAutomationRow } from "../../../../components/ha-automation-row"; 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-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-tooltip"; import { @@ -288,15 +289,12 @@ export default class HaAutomationActionRow extends LitElement { ` : nothing} - - - + + ${this._renderOverflowLabel( this.hass.localize("ui.panel.config.automation.editor.actions.run") )} - - - + + + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.triggers.rename" ) )} - - - + + + @@ -336,13 +328,10 @@ export default class HaAutomationActionRow extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" ) )} - + - - + + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.triggers.copy" @@ -351,7 +340,6 @@ export default class HaAutomationActionRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -362,13 +350,10 @@ export default class HaAutomationActionRow extends LitElement { C ` )} - + - - + + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.triggers.cut" @@ -377,7 +362,6 @@ export default class HaAutomationActionRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -388,51 +372,48 @@ export default class HaAutomationActionRow extends LitElement { X ` )} - + ${!this.optionsInSidebar ? html` - ${this.hass.localize( "ui.panel.config.automation.editor.move_up" )} - - + ${this.hass.localize( "ui.panel.config.automation.editor.move_down" )} - + ` : nothing} - - + ${this._renderOverflowLabel( this.hass.localize( `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` ) )} - + - + - + - + @@ -463,7 +444,6 @@ export default class HaAutomationActionRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -478,8 +458,8 @@ export default class HaAutomationActionRow extends LitElement { > ` )} - - + + ${!this.optionsInSidebar ? html`${this._warnings @@ -890,6 +870,47 @@ export default class HaAutomationActionRow extends LitElement { 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]; } diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index fc11c1d73d..513c921dee 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { consume } from "@lit/context"; import { mdiAppleKeyboardCommand, @@ -33,11 +34,11 @@ import "../../../../components/ha-automation-row"; import type { HaAutomationRow } from "../../../../components/ha-automation-row"; import "../../../../components/ha-card"; 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-icon-button"; -import "../../../../components/ha-md-button-menu"; -import "../../../../components/ha-md-divider"; -import "../../../../components/ha-md-menu-item"; import type { AutomationClipboard, Condition, @@ -194,15 +195,12 @@ export default class HaAutomationConditionRow extends LitElement { - - - + + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.conditions.test" ) )} - - - + + + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.conditions.rename" ) )} - + - + - + ${this._renderOverflowLabel( @@ -246,13 +238,10 @@ export default class HaAutomationConditionRow extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" ) )} - + - - + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.triggers.copy" @@ -261,7 +250,6 @@ export default class HaAutomationConditionRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -272,13 +260,10 @@ export default class HaAutomationConditionRow extends LitElement { C ` )} - + - - + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.triggers.cut" @@ -287,7 +272,6 @@ export default class HaAutomationConditionRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -298,48 +282,45 @@ export default class HaAutomationConditionRow extends LitElement { X ` )} - + ${!this.optionsInSidebar ? html` - ${this.hass.localize( "ui.panel.config.automation.editor.move_up" )} - - + ${this.hass.localize( "ui.panel.config.automation.editor.move_down" )} - + ` : nothing} - - + + ${this._renderOverflowLabel( this.hass.localize( `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` ) )} - + - + - + - + ${this._renderOverflowLabel( @@ -369,7 +350,6 @@ export default class HaAutomationConditionRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -384,8 +364,8 @@ export default class HaAutomationConditionRow extends LitElement { > ` )} - - + + ${!this.optionsInSidebar ? html`${this._warnings ? html`) { + 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 { return [ rowStyles, diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index c1076b9c91..08bab76253 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { consume } from "@lit/context"; import { mdiAppleKeyboardCommand, @@ -25,18 +26,20 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; 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 { goBack, navigate } from "../../../common/navigate"; import { promiseTimeout } from "../../../common/util/promise-timeout"; import { afterNextRender } from "../../../common/util/render-status"; 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-fade-in"; import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; -import "../../../components/ha-list-item"; import "../../../components/ha-spinner"; import "../../../components/ha-svg-icon"; import "../../../components/ha-yaml-editor"; @@ -74,7 +77,6 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info import "../../../layouts/hass-subpage"; import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin"; import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin"; -import { UndoRedoController } from "../../../common/controllers/undo-redo-controller"; import { haStyle } from "../../../resources/styles"; import type { Entries, HomeAssistant, Route } from "../../../types"; import { isMac } from "../../../util/is_mac"; @@ -86,10 +88,10 @@ import { type EntityRegistryUpdate, showAutomationSaveDialog, } 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 "./manual-automation-editor"; import type { HaManualAutomationEditor } from "./manual-automation-editor"; -import { showAutomationSaveTimeoutDialog } from "./automation-save-timeout-dialog/show-dialog-automation-save-timeout"; declare global { interface HTMLElementTagNameMap { @@ -292,7 +294,10 @@ export class HaAutomationEditor extends PreventUnsavedMixin( ` : ""} - + ${this._mode === "gui" && this.narrow - ? html` ${this.hass.localize("ui.common.undo")} - - - + + ${this.hass.localize("ui.common.redo")} - - ` + + ` : nothing} - + ${this.hass.localize("ui.panel.config.automation.editor.show_info")} - + - + ${this.hass.localize( "ui.panel.config.automation.picker.show_settings" )} - - + + - + ${this.hass.localize( `ui.panel.config.scene.picker.${this._registryEntry?.categories?.automation ? "edit_category" : "assign_category"}` )} - - + + - + ${this.hass.localize("ui.panel.config.automation.editor.run")} - - + + ${stateObj && this.narrow - ? html` - - ${this.hass.localize( - "ui.panel.config.automation.editor.show_trace" - )} - - - ` + ? html` + ${this.hass.localize( + "ui.panel.config.automation.editor.show_trace" + )} + + ` : nothing} - ${this.hass.localize("ui.panel.config.automation.editor.rename")} - - + + ${!useBlueprint ? html` - @@ -400,18 +379,17 @@ export class HaAutomationEditor extends PreventUnsavedMixin( "ui.panel.config.automation.editor.change_mode" )} - + ` : nothing} - ${this.hass.localize( this._readOnly @@ -419,74 +397,60 @@ export class HaAutomationEditor extends PreventUnsavedMixin( : "ui.panel.config.automation.editor.duplicate" )} - + ${useBlueprint ? html` - ${this.hass.localize( "ui.panel.config.automation.editor.take_control" )} - - + + ` : nothing} - + ${this.hass.localize( `ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}` )} - - + + -
  • + - + ${stateObj?.state === "off" ? 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.picker.delete")} - -
    + +
    ) { + 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 { return [ haStyle, @@ -1301,13 +1322,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin( margin-inline-end: 8px; 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 { margin: 0; } diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts index d8573a3d29..dad1ed4981 100644 --- a/src/panels/config/automation/ha-automation-trace.ts +++ b/src/panels/config/automation/ha-automation-trace.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { mdiDotsVertical, mdiDownload, @@ -15,11 +16,13 @@ import { repeat } from "lit/directives/repeat"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time"; import { fireEvent } from "../../../common/dom/fire_event"; +import { navigate } from "../../../common/navigate"; import { computeRTL } from "../../../common/util/compute_rtl"; 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-list-item"; import "../../../components/trace/ha-trace-blueprint-config"; import "../../../components/trace/ha-trace-config"; import "../../../components/trace/ha-trace-logbook"; @@ -104,9 +107,7 @@ export class HaAutomationTrace extends LitElement { appearance="plain" size="small" class="trace-link" - href="/config/automation/edit/${encodeURIComponent( - stateObj.attributes.id - )}" + @click=${this._navigateToAutomation} slot="toolbar-icon" > ${this.hass.localize( @@ -114,65 +115,50 @@ export class HaAutomationTrace extends LitElement { )} ` - : ""} - + : nothing} + - + ${this.hass.localize("ui.panel.config.automation.editor.show_info")} - + ${stateObj?.attributes.id && this.narrow ? html` - - - ${this.hass.localize( - "ui.panel.config.automation.trace.edit_automation" - )} - - - + + ${this.hass.localize( + "ui.panel.config.automation.trace.edit_automation" + )} + + ` - : ""} + : nothing} -
  • + - + ${this.hass.localize("ui.panel.config.automation.trace.refresh")} - - + + - + ${this.hass.localize( "ui.panel.config.automation.trace.download_trace" )} - - -
    + + +
    ${this._traces && this._traces.length > 0 @@ -520,6 +506,37 @@ export class HaAutomationTrace extends LitElement { 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 { return [ haStyle, diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts index daac11b326..f548ba9bfb 100644 --- a/src/panels/config/automation/option/ha-automation-option-row.ts +++ b/src/panels/config/automation/option/ha-automation-option-row.ts @@ -20,10 +20,11 @@ import { capitalizeFirstLetter } from "../../../../common/string/capitalize-firs import "../../../../components/ha-automation-row"; import type { HaAutomationRow } from "../../../../components/ha-automation-row"; 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-icon-button"; -import "../../../../components/ha-md-button-menu"; -import "../../../../components/ha-md-menu-item"; import "../../../../components/ha-svg-icon"; import type { Condition, @@ -36,6 +37,7 @@ import type { Action, Option } from "../../../../data/script"; import { showPromptDialog } from "../../../../dialogs/generic/show-dialog-box"; import type { HomeAssistant } from "../../../../types"; import { isMac } from "../../../../util/is_mac"; +import { showToast } from "../../../../util/toast"; import "../action/ha-automation-action"; import type HaAutomationAction from "../action/ha-automation-action"; import "../condition/ha-automation-condition"; @@ -46,7 +48,6 @@ import { overflowStyles, rowStyles, } from "../styles"; -import { showToast } from "../../../../util/toast"; @customElement("ha-automation-option-row") export default class HaAutomationOptionRow extends LitElement { @@ -155,15 +156,12 @@ export default class HaAutomationOptionRow extends LitElement { ${this.option ? html` - - - + + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.triggers.rename" ) )} - + - + @@ -197,45 +189,42 @@ export default class HaAutomationOptionRow extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" ) )} - + ${!this.optionsInSidebar ? html` - ${this.hass.localize( "ui.panel.config.automation.editor.move_up" )} - - + ${this.hass.localize( "ui.panel.config.automation.editor.move_down" )} + > ` : nothing} - ${this._renderOverflowLabel( @@ -246,7 +235,6 @@ export default class HaAutomationOptionRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -261,8 +249,8 @@ export default class HaAutomationOptionRow extends LitElement { > ` )} - - + + ` : nothing} ${!this.optionsInSidebar ? this._renderContent() : nothing} @@ -361,6 +349,32 @@ export default class HaAutomationOptionRow extends LitElement { 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 = () => { if (this.option) { fireEvent(this, "value-changed", { @@ -513,9 +527,6 @@ export default class HaAutomationOptionRow extends LitElement { overflowStyles, indentStyle, css` - li[role="separator"] { - border-bottom-color: var(--divider-color); - } h4 { color: var(--ha-color-text-secondary); } diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts index bd9ec94839..0e51350c99 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { mdiAppleKeyboardCommand, mdiContentCopy, @@ -16,8 +17,8 @@ import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import { handleStructError } from "../../../../common/structs/handle-errors"; import type { LocalizeKeys } from "../../../../common/translations/localize"; -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 { ACTION_BUILDING_BLOCKS } from "../../../../data/action"; import type { ActionSidebarConfig } from "../../../../data/automation"; import { domainToName } from "../../../../data/integration"; @@ -116,6 +117,7 @@ export default class HaAutomationSidebarAction extends LitElement { .yamlMode=${this.yamlMode} .warnings=${this._warnings} .narrow=${this.narrow} + @wa-select=${this._handleDropdownSelect} > ${title} - - + +
    ${this.hass.localize("ui.panel.config.automation.editor.actions.run")}
    -
    - + - +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.rename" )}
    -
    - + + + -
    @@ -166,9 +165,9 @@ export default class HaAutomationSidebarAction extends LitElement { )}
    -
    - - + + +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.copy" @@ -178,7 +177,6 @@ export default class HaAutomationSidebarAction extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -190,13 +188,13 @@ export default class HaAutomationSidebarAction extends LitElement { ` : nothing}
    -
    - + - +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.cut" @@ -206,7 +204,6 @@ export default class HaAutomationSidebarAction extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -218,32 +215,29 @@ export default class HaAutomationSidebarAction extends LitElement { ` : nothing}
    -
    - + - +
    ${this.hass.localize( `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` )}
    -
    - + + + -
    @@ -252,14 +246,14 @@ export default class HaAutomationSidebarAction extends LitElement { )}
    -
    - + - +
    ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" @@ -269,7 +263,6 @@ export default class HaAutomationSidebarAction extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -285,7 +278,7 @@ export default class HaAutomationSidebarAction extends LitElement { ` : nothing}
    -
    + ${description && !this.yamlMode ? html`
    ${description}
    ` : keyed( @@ -341,6 +334,41 @@ export default class HaAutomationSidebarAction extends LitElement { 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]; } diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts index 4be78012d7..56c633efdb 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts @@ -3,16 +3,16 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../../common/dom/fire_event"; +import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation"; import { stopPropagation } from "../../../../common/dom/stop_propagation"; import "../../../../components/ha-card"; import "../../../../components/ha-dialog-header"; +import "../../../../components/ha-dropdown"; import "../../../../components/ha-icon-button"; -import "../../../../components/ha-md-button-menu"; -import "../../../../components/ha-md-divider"; +import { ScrollableFadeMixin } from "../../../../mixins/scrollable-fade-mixin"; import { haStyleScrollbar } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import "../ha-automation-editor-warning"; -import { ScrollableFadeMixin } from "../../../../mixins/scrollable-fade-mixin"; export interface SidebarOverflowMenuEntry { clickAction: () => void; @@ -36,6 +36,10 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin( @property({ attribute: false }) public warnings?: string[]; + @property({ attribute: false }) public handleDropdownSelect!: ( + ev: CustomEvent + ) => void; + @property({ type: Boolean }) public narrow = false; @query(".card-content") private _contentElement!: HTMLDivElement; @@ -63,14 +67,10 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin( - - + ${this.warnings @@ -100,11 +100,6 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin( fireEvent(this, "close-sidebar"); } - private _openOverflowMenu(ev: MouseEvent) { - ev.stopPropagation(); - ev.preventDefault(); - } - static get styles() { return [ ...super.styles, diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts index f4920fe39c..afa961c5ad 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { mdiAppleKeyboardCommand, mdiContentCopy, @@ -16,9 +17,11 @@ import { classMap } from "lit/directives/class-map"; import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import { handleStructError } from "../../../../common/structs/handle-errors"; +import "../../../../components/ha-dropdown-item"; +import type { HaDropdownItem } from "../../../../components/ha-dropdown-item"; import type { - LegacyCondition, ConditionSidebarConfig, + LegacyCondition, } from "../../../../data/automation"; import { testCondition } from "../../../../data/automation"; import { @@ -117,6 +120,7 @@ export default class HaAutomationSidebarCondition extends LitElement { .yamlMode=${this.yamlMode} .warnings=${this._warnings} .narrow=${this.narrow} + @wa-select=${this._handleDropdownSelect} > ${title} - - + +
    ${this.hass.localize( "ui.panel.config.automation.editor.conditions.test" )}
    -
    - + - +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.rename" )}
    -
    + - + -
    @@ -168,10 +168,10 @@ export default class HaAutomationSidebarCondition extends LitElement { )}
    -
    + - - + +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.copy" @@ -181,7 +181,6 @@ export default class HaAutomationSidebarCondition extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -193,14 +192,14 @@ export default class HaAutomationSidebarCondition extends LitElement { ` : nothing}
    -
    + - - +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.cut" @@ -210,7 +209,6 @@ export default class HaAutomationSidebarCondition extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -222,32 +220,29 @@ export default class HaAutomationSidebarCondition extends LitElement { ` : nothing}
    -
    - + - +
    ${this.hass.localize( `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` )}
    -
    - + + + -
    @@ -256,14 +251,14 @@ export default class HaAutomationSidebarCondition extends LitElement { )}
    -
    - + - +
    ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" @@ -273,7 +268,6 @@ export default class HaAutomationSidebarCondition extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -289,7 +283,7 @@ export default class HaAutomationSidebarCondition extends LitElement { ` : nothing}
    -
    + ${description && !this.yamlMode ? html`
    ${description}
    ` : keyed( @@ -419,6 +413,41 @@ export default class HaAutomationSidebarCondition extends LitElement { 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 = [ sidebarEditorStyles, overflowStyles, diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts index 9f37a2fe39..caf48b47bd 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { mdiAppleKeyboardCommand, mdiDelete, @@ -6,8 +7,9 @@ import { } from "@mdi/js"; import { html, LitElement, nothing } from "lit"; 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 type { OptionSidebarConfig } from "../../../../data/automation"; import type { HomeAssistant } from "../../../../types"; @@ -50,33 +52,34 @@ export default class HaAutomationSidebarOption extends LitElement { .hass=${this.hass} .isWide=${this.isWide} .narrow=${this.narrow} + @wa-select=${this._handleDropdownSelect} > ${title} ${subtitle} ${this.config.defaultOption ? html`` : html` - - +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.rename" )}
    -
    + -
    @@ -85,19 +88,15 @@ export default class HaAutomationSidebarOption extends LitElement { )}
    -
    - + + - - +
    ${this.hass.localize( "ui.panel.config.automation.editor.actions.type.choose.remove_option" @@ -123,13 +122,33 @@ export default class HaAutomationSidebarOption extends LitElement { ` : nothing}
    -
    + `}
    ${description}
    `; } + 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]; } diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts index 3ae878678a..bd1f7202c8 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts @@ -4,6 +4,8 @@ import { customElement, property, query, state } from "lit/decorators"; import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; 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 { HomeAssistant } from "../../../../types"; import { isMac } from "../../../../util/is_mac"; @@ -62,29 +64,30 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement { .yamlMode=${this.yamlMode} .warnings=${this._warnings} .narrow=${this.narrow} + @wa-select=${this._handleDropdownSelect} > ${title} ${subtitle} - - +
    ${this.hass.localize( `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` )}
    -
    - + - +
    ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" @@ -94,7 +97,6 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -110,7 +112,7 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement { ` : nothing}
    -
    + ${keyed( this.sidebarKey, html`) { + 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; } diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts index ba829b4d8b..32305c6010 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts @@ -3,6 +3,8 @@ import { html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { keyed } from "lit/directives/keyed"; 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 { HomeAssistant } from "../../../../types"; import { isMac } from "../../../../util/is_mac"; @@ -56,28 +58,29 @@ export default class HaAutomationSidebarScriptField extends LitElement { .yamlMode=${this.yamlMode} .warnings=${this._warnings} .narrow=${this.narrow} + @wa-select=${this._handleDropdownSelect} > ${title} - - +
    ${this.hass.localize( `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` )}
    -
    - + - +
    ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" @@ -87,7 +90,6 @@ export default class HaAutomationSidebarScriptField extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -103,7 +105,7 @@ export default class HaAutomationSidebarScriptField extends LitElement { ` : nothing}
    -
    + ${keyed( this.sidebarKey, html`) { + 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]; } diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts index 9e8684b7d4..b2c86c5efe 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { mdiAppleKeyboardCommand, mdiContentCopy, @@ -15,6 +16,8 @@ import { customElement, property, query, state } from "lit/decorators"; import { keyed } from "lit/directives/keyed"; import { fireEvent } from "../../../../common/dom/fire_event"; import { handleStructError } from "../../../../common/structs/handle-errors"; +import "../../../../components/ha-dropdown-item"; +import type { HaDropdownItem } from "../../../../components/ha-dropdown-item"; import type { LegacyTrigger, TriggerSidebarConfig, @@ -99,6 +102,7 @@ export default class HaAutomationSidebarTrigger extends LitElement { .yamlMode=${this.yamlMode} .warnings=${this._warnings} .narrow=${this.narrow} + @wa-select=${this._handleDropdownSelect} > ${title} - - +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.rename" )}
    -
    + ${!this.yamlMode && !("id" in this.config.config) && !this._requestShowId - ? html` - +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.edit_id" )}
    -
    ` + ` : nothing} - + - ${this.hass.localize( "ui.panel.config.automation.editor.triggers.duplicate" )} - + - - + +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.copy" @@ -169,7 +169,6 @@ export default class HaAutomationSidebarTrigger extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -181,14 +180,14 @@ export default class HaAutomationSidebarTrigger extends LitElement { ` : nothing}
    -
    + - - +
    ${this.hass.localize( "ui.panel.config.automation.editor.triggers.cut" @@ -198,7 +197,6 @@ export default class HaAutomationSidebarTrigger extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -210,32 +208,28 @@ export default class HaAutomationSidebarTrigger extends LitElement { ` : nothing}
    -
    - + - +
    ${this.hass.localize( `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}` )}
    -
    - + + -
    @@ -244,14 +238,14 @@ export default class HaAutomationSidebarTrigger extends LitElement { )}
    -
    - + - +
    ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" @@ -261,7 +255,6 @@ export default class HaAutomationSidebarTrigger extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -277,7 +270,7 @@ export default class HaAutomationSidebarTrigger extends LitElement { ` : nothing}
    -
    + ${keyed( this.sidebarKey, html`) { + 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]; } diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 0d9b68a6ed..e341d01053 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { consume } from "@lit/context"; import { mdiAppleKeyboardCommand, @@ -34,11 +35,11 @@ import "../../../../components/ha-alert"; import "../../../../components/ha-automation-row"; import type { HaAutomationRow } from "../../../../components/ha-automation-row"; 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-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 { TRIGGER_ICONS } from "../../../../components/ha-trigger-icon"; import type { @@ -208,41 +209,35 @@ export default class HaAutomationTriggerRow extends LitElement { - - - + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.triggers.rename" ) )} - + - + - + @@ -251,13 +246,10 @@ export default class HaAutomationTriggerRow extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" ) )} - + - - + + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.triggers.copy" @@ -266,7 +258,6 @@ export default class HaAutomationTriggerRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -277,13 +268,10 @@ export default class HaAutomationTriggerRow extends LitElement { C ` )} - + - - + + ${this._renderOverflowLabel( this.hass.localize( "ui.panel.config.automation.editor.triggers.cut" @@ -292,7 +280,6 @@ export default class HaAutomationTriggerRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -303,51 +290,51 @@ export default class HaAutomationTriggerRow extends LitElement { X ` )} - + ${!this.optionsInSidebar ? html` - ${this.hass.localize( "ui.panel.config.automation.editor.move_up" )} - - + ${this.hass.localize( "ui.panel.config.automation.editor.move_down" )} - + ` : nothing} - - + ${this._renderOverflowLabel( this.hass.localize( `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}` ) )} - + - + - - + ${this._renderOverflowLabel( @@ -377,7 +364,6 @@ export default class HaAutomationTriggerRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -392,8 +378,8 @@ export default class HaAutomationTriggerRow extends LitElement { > ` )} - - + + ${!this.optionsInSidebar ? html`${this._warnings ? html`) { + 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 { return [ rowStyles, diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 037d77dac6..4556bf1512 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { consume } from "@lit/context"; import { mdiAppleKeyboardCommand, @@ -23,18 +24,19 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; 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 { goBack, navigate } from "../../../common/navigate"; import { slugify } from "../../../common/string/slugify"; import { promiseTimeout } from "../../../common/util/promise-timeout"; import { afterNextRender } from "../../../common/util/render-status"; 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 { transform } from "../../../common/decorators/transform"; import "../../../components/ha-icon-button"; -import "../../../components/ha-list-item"; import "../../../components/ha-svg-icon"; import "../../../components/ha-yaml-editor"; import { substituteBlueprint } from "../../../data/blueprint"; @@ -65,7 +67,6 @@ import "../../../layouts/hass-subpage"; import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin"; import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; -import { UndoRedoController } from "../../../common/controllers/undo-redo-controller"; import { haStyle } from "../../../resources/styles"; import type { Entries, HomeAssistant, Route } from "../../../types"; 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 type { EntityRegistryUpdate } 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 "./blueprint-script-editor"; import "./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") export class HaScriptEditor extends SubscribeMixin( @@ -241,7 +242,10 @@ export class HaScriptEditor extends SubscribeMixin( ` : ""} - + ${this._mode === "gui" && this.narrow - ? html` ${this.hass.localize("ui.common.undo")} - - - + + ${this.hass.localize("ui.common.redo")} - - ` + + ` : nothing} - + ${this.hass.localize("ui.panel.config.script.editor.show_info")} - + - + ${this.hass.localize( "ui.panel.config.automation.picker.show_settings" )} - - + + - + ${this.hass.localize( `ui.panel.config.scene.picker.${this._registryEntry?.categories?.script ? "edit_category" : "assign_category"}` )} - - + + - + ${this.hass.localize("ui.panel.config.script.picker.run_script")} - - + + ${this.scriptId && this.narrow - ? html` - - - ${this.hass.localize( - "ui.panel.config.script.editor.show_trace" - )} - - - - ` + ? html` + ${this.hass.localize( + "ui.panel.config.automation.editor.show_trace" + )} + + ` : nothing} ${!useBlueprint && !("fields" in this._config) ? html` - ${this.hass.localize( "ui.panel.config.script.editor.field.add_fields" )} - + ` : nothing} - ${this.hass.localize("ui.panel.config.script.editor.rename")} - - + + ${!useBlueprint ? html` - ${this.hass.localize( "ui.panel.config.script.editor.change_mode" )} - + ` : nothing} - ${this.hass.localize( this._readOnly @@ -383,58 +361,48 @@ export class HaScriptEditor extends SubscribeMixin( : "ui.panel.config.script.editor.duplicate" )} - + ${useBlueprint ? html` - ${this.hass.localize( "ui.panel.config.script.editor.take_control" )} - - + + ` : nothing} - + ${this.hass.localize( `ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}` )} - - + + -
  • + - ${this.hass.localize("ui.panel.config.script.picker.delete")} - -
    + +
    ${this._mode === "gui" ? html` @@ -688,9 +656,7 @@ export class HaScriptEditor extends SubscribeMixin( this._dirty = true; } - private async _runScript(ev: CustomEvent) { - ev.stopPropagation(); - + private async _runScript() { if (hasScriptFields(this.hass, this._entityId!)) { showMoreInfoDialog(this, { entityId: this._entityId!, @@ -1155,6 +1121,63 @@ export class HaScriptEditor extends SubscribeMixin( 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 { return [ haStyle, @@ -1245,9 +1268,6 @@ export class HaScriptEditor extends SubscribeMixin( ha-fab.dirty { bottom: calc(16px + var(--safe-area-inset-bottom, 0px)); } - li[role="separator"] { - border-bottom-color: var(--divider-color); - } .header { display: flex; margin: 16px 0; @@ -1261,10 +1281,6 @@ export class HaScriptEditor extends SubscribeMixin( .header a { color: var(--secondary-text-color); } - ha-button-menu a { - text-decoration: none; - color: var(--primary-color); - } ha-tooltip ha-svg-icon { width: 12px; } diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index 1453d12ef4..43220616dd 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -15,18 +15,19 @@ import type { LocalizeKeys } from "../../../common/translations/localize"; import "../../../components/ha-automation-row"; import type { HaAutomationRow } from "../../../components/ha-automation-row"; import "../../../components/ha-card"; -import "../../../components/ha-md-button-menu"; -import "../../../components/ha-md-menu-item"; +import "../../../components/ha-dropdown"; +import "../../../components/ha-dropdown-item"; +import type { HaDropdownItem } from "../../../components/ha-dropdown-item"; import type { ScriptFieldSidebarConfig } from "../../../data/automation"; import type { Field } from "../../../data/script"; import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import { isMac } from "../../../util/is_mac"; +import { showToast } from "../../../util/toast"; import { indentStyle, overflowStyles } from "../automation/styles"; import "./ha-script-field-selector-editor"; import type HaScriptFieldSelectorEditor from "./ha-script-field-selector-editor"; -import { showToast } from "../../../util/toast"; @customElement("ha-script-field-row") export default class HaScriptFieldRow extends LitElement { @@ -79,36 +80,33 @@ export default class HaScriptFieldRow extends LitElement { .highlight=${this.highlight} @delete-row=${this._onDelete} > - - - + +
    ${this.hass.localize( `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}` )}
    -
    - + - +
    ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" @@ -118,7 +116,6 @@ export default class HaScriptFieldRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -134,8 +131,8 @@ export default class HaScriptFieldRow extends LitElement { ` : nothing}
    -
    -
    + +

    ${this.key}

    @@ -170,27 +167,21 @@ export default class HaScriptFieldRow extends LitElement { "ui.panel.config.script.editor.field.selector" )} - - +
    @@ -201,16 +192,13 @@ export default class HaScriptFieldRow extends LitElement { class="shortcut-placeholder ${isMac ? "mac" : ""}" >
    -
    - + - +
    ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" @@ -220,7 +208,6 @@ export default class HaScriptFieldRow extends LitElement { ${isMac ? html`` : this.hass.localize( @@ -236,8 +223,8 @@ export default class HaScriptFieldRow extends LitElement { ` : nothing}
    -
    -
    + + ${typeof this.field.selector === "object" && @@ -420,6 +407,23 @@ export default class HaScriptFieldRow extends LitElement { 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 { return [ haStyle, @@ -477,9 +481,6 @@ export default class HaScriptFieldRow extends LitElement { .selected_menu_item { color: var(--primary-color); } - li[role="separator"] { - border-bottom-color: var(--divider-color); - } .selector-row { padding-top: 12px; padding-bottom: 16px; diff --git a/src/panels/config/script/ha-script-trace.ts b/src/panels/config/script/ha-script-trace.ts index 6d620af034..2e8f667ca6 100644 --- a/src/panels/config/script/ha-script-trace.ts +++ b/src/panels/config/script/ha-script-trace.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { mdiDotsVertical, mdiDownload, @@ -8,17 +9,19 @@ import { mdiRefresh, } from "@mdi/js"; 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 { classMap } from "lit/directives/class-map"; import { repeat } from "lit/directives/repeat"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time"; import { fireEvent } from "../../../common/dom/fire_event"; -import "../../../components/ha-button-menu"; +import { navigate } from "../../../common/navigate"; 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-list-item"; import "../../../components/trace/ha-trace-blueprint-config"; import "../../../components/trace/ha-trace-config"; import "../../../components/trace/ha-trace-logbook"; @@ -104,7 +107,7 @@ export class HaScriptTrace extends LitElement { ? html` @@ -113,64 +116,49 @@ export class HaScriptTrace extends LitElement { )} ` - : ""} + : nothing} - + - + ${this.hass.localize("ui.panel.config.script.editor.show_info")} - + ${this.narrow && this.scriptId - ? html` - - - ${this.hass.localize( - "ui.panel.config.script.trace.edit_script" - )} - - - - ` - : ""} + ? html` + ${this.hass.localize( + "ui.panel.config.script.trace.edit_script" + )} + + ` + : nothing} -
  • + - + ${this.hass.localize("ui.panel.config.automation.trace.refresh")} - - + + - + ${this.hass.localize( "ui.panel.config.automation.trace.download_trace" )} - - -
    + + +
    ${this._traces && this._traces.length > 0 @@ -530,6 +518,35 @@ export class HaScriptTrace extends LitElement { 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 { return [ haStyle, diff --git a/yarn.lock b/yarn.lock index b07a330124..8ad6ecda53 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1940,9 +1940,9 @@ __metadata: languageName: node linkType: hard -"@home-assistant/webawesome@npm:3.0.0-ha.0": - version: 3.0.0-ha.0 - resolution: "@home-assistant/webawesome@npm:3.0.0-ha.0" +"@home-assistant/webawesome@npm:3.0.0-ha.1": + version: 3.0.0-ha.1 + resolution: "@home-assistant/webawesome@npm:3.0.0-ha.1" dependencies: "@ctrl/tinycolor": "npm:4.1.0" "@floating-ui/dom": "npm:^1.6.13" @@ -1953,7 +1953,7 @@ __metadata: lit: "npm:^3.2.1" nanoid: "npm:^5.1.5" qr-creator: "npm:^1.0.0" - checksum: 10/2034d498d5b26bb0573ebc2c9aadd144604bb48c04becbae0c67b16857d8e5d6562626e795974362c3fc41e9b593a9005595d8b5ff434b1569b2d724af13043b + checksum: 10/281f16c2c6c28d95a381de6fca05948a9c67d8184f20844d64ce33dc2caf9e6761d2cf8337b97e7487a71be011ab04f2a021b20b823a20e3c049cc68205de86a languageName: node linkType: hard @@ -9213,7 +9213,7 @@ __metadata: "@fullcalendar/list": "npm:6.1.19" "@fullcalendar/luxon3": "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" "@lit-labs/motion": "npm:1.0.9" "@lit-labs/observers": "npm:2.0.6"