jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 10:59:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Automation editor: overflow changes and style fixes (#26744)

Browse Source 
* Fix for width also for blueprint editor

* Fix overflow menus

* Fix option icons

* Fix iOS bottom sheet flickering and drag handle

* Fix mobile padding

* Fix padding in sidebar

* Fix overflow placement

* Add new a11y sort

* Remove overflow in rows

* Fix a11y select row

* Revert "Fix a11y select row"

This reverts commit 54260c4a37.

* Fix option padding on blueprint

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
Wendelin
2025-08-28 18:42:45 +02:00
committed by GitHub
parent cf8d36b1f3
commit 25f25243bd
20 changed files with 783 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/ha-automation-row.ts
View File

@@ -1,7 +1,7 @@
import { mdiChevronUp } from "@mdi/js"; import { mdiChevronUp } from "@mdi/js";
import type { TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import "./ha-icon-button"; import "./ha-icon-button";
@@ -16,12 +16,18 @@ export class HaAutomationRow extends LitElement {
@property({ type: Boolean, reflect: true }) @property({ type: Boolean, reflect: true })
public selected = false; public selected = false;
@property({ type: Boolean, reflect: true, attribute: "sort-selected" })
public sortSelected = false;
@property({ type: Boolean, reflect: true }) @property({ type: Boolean, reflect: true })
public disabled = false; public disabled = false;
@property({ type: Boolean, reflect: true, attribute: "building-block" }) @property({ type: Boolean, reflect: true, attribute: "building-block" })
public buildingBlock = false; public buildingBlock = false;
@query(".row")
private _rowElement?: HTMLDivElement;
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<div <div
@@ -66,15 +72,40 @@ export class HaAutomationRow extends LitElement {
if (ev.defaultPrevented) { if (ev.defaultPrevented) {
return; return;
} }
if (ev.key !== "Enter" && ev.key !== " ") {
if (
ev.key !== "Enter" &&
ev.key !== " " &&
!(
(this.sortSelected || ev.altKey) &&
(ev.key === "ArrowUp" || ev.key === "ArrowDown")
)
) {
return; return;
} }
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
if (ev.key === "ArrowUp" || ev.key === "ArrowDown") {
if (ev.key === "ArrowUp") {
fireEvent(this, "move-up");
return;
}
fireEvent(this, "move-down");
return;
}
if (this.sortSelected && (ev.key === "Enter" || ev.key === " ")) {
fireEvent(this, "stop-sort-selection");
return;
}
this.click(); this.click();
} }
public focus() {
requestAnimationFrame(() => this._rowElement?.focus());
}
static styles = css` static styles = css`
:host { :host {
display: block; display: block;
@@ -134,6 +165,11 @@ export class HaAutomationRow extends LitElement {
overflow-wrap: anywhere; overflow-wrap: anywhere;
margin: 0 12px; margin: 0 12px;
} }
:host([sort-selected]) .row {
box-shadow:
0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
}
`; `;
} }
@@ -144,5 +180,6 @@ declare global {
interface HASSDomEvents { interface HASSDomEvents {
"toggle-collapsed": undefined; "toggle-collapsed": undefined;
"stop-sort-selection": undefined;
} }
} }

1
src/components/ha-bottom-sheet.ts
View File

@@ -197,6 +197,7 @@ export class HaBottomSheet extends LitElement {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 7; z-index: 7;
padding-bottom: 76px;
} }
.handle-wrapper .handle::after { .handle-wrapper .handle::after {
content: ""; content: "";

17
src/components/ha-md-button-menu.ts
View File

@@ -16,9 +16,23 @@ export class HaMdButtonMenu extends LitElement {
@property() public positioning?: "fixed" | "absolute" | "popover"; @property() public positioning?: "fixed" | "absolute" | "popover";
@property({ attribute: "anchor-corner" }) public anchorCorner:
| "start-start"
| "start-end"
| "end-start"
| "end-end" = "end-start";
@property({ attribute: "menu-corner" }) public menuCorner:
| "start-start"
| "start-end"
| "end-start"
| "end-end" = "start-start";
@property({ type: Boolean, attribute: "has-overflow" }) public hasOverflow = @property({ type: Boolean, attribute: "has-overflow" }) public hasOverflow =
false; false;
@property({ type: Boolean }) public quick = false;
@query("ha-md-menu", true) private _menu!: HaMdMenu; @query("ha-md-menu", true) private _menu!: HaMdMenu;
public get items() { public get items() {
@@ -39,8 +53,11 @@ export class HaMdButtonMenu extends LitElement {
<slot name="trigger" @slotchange=${this._setTriggerAria}></slot> <slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
</div> </div>
<ha-md-menu <ha-md-menu
.quick=${this.quick}
.positioning=${this.positioning} .positioning=${this.positioning}
.hasOverflow=${this.hasOverflow} .hasOverflow=${this.hasOverflow}
.anchorCorner=${this.anchorCorner}
.menuCorner=${this.menuCorner}
@opening=${this._handleOpening} @opening=${this._handleOpening}
@closing=${this._handleClosing} @closing=${this._handleClosing}
> >

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

@@ -53,6 +53,7 @@ export default class HaAutomationActionEditor extends LitElement {
this.disabled || (this.action.enabled === false && !this.yamlMode), this.disabled || (this.action.enabled === false && !this.yamlMode),
yaml: yamlMode, yaml: yamlMode,
indent: this.indent, indent: this.indent,
card: !this.inSidebar,
})} })}
> >
${yamlMode ${yamlMode

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

@@ -26,6 +26,7 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
import { handleStructError } from "../../../../common/structs/handle-errors"; import { handleStructError } from "../../../../common/structs/handle-errors";
import "../../../../components/ha-automation-row"; import "../../../../components/ha-automation-row";
import type { HaAutomationRow } from "../../../../components/ha-automation-row";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
@@ -153,6 +154,9 @@ export default class HaAutomationActionRow extends LitElement {
@property({ type: Boolean, attribute: "sidebar" }) @property({ type: Boolean, attribute: "sidebar" })
public optionsInSidebar = false; public optionsInSidebar = false;
@property({ type: Boolean, attribute: "sort-selected" })
public sortSelected = false;
@storage({ @storage({
key: "automationClipboard", key: "automationClipboard",
state: false, state: false,
@@ -186,6 +190,9 @@ export default class HaAutomationActionRow extends LitElement {
@query("ha-automation-action-editor") @query("ha-automation-action-editor")
private _actionEditor?: HaAutomationActionEditor; private _actionEditor?: HaAutomationActionEditor;
@query("ha-automation-row")
private _automationRowElement?: HaAutomationRow;
protected firstUpdated(changedProperties: PropertyValues): void { protected firstUpdated(changedProperties: PropertyValues): void {
super.firstUpdated(changedProperties); super.firstUpdated(changedProperties);
@@ -254,138 +261,136 @@ export default class HaAutomationActionRow extends LitElement {
<ha-svg-icon .path=${mdiAlertCircleCheck}></ha-svg-icon> <ha-svg-icon .path=${mdiAlertCircleCheck}></ha-svg-icon>
</ha-tooltip>` </ha-tooltip>`
: nothing} : nothing}
${!this.optionsInSidebar
? html`<ha-md-button-menu
quick
slot="icons"
@click=${preventDefaultStopPropagation}
@keydown=${stopPropagation}
@closed=${stopPropagation}
positioning="fixed"
anchor-corner="end-end"
menu-corner="start-end"
>
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-md-button-menu <ha-md-menu-item .clickAction=${this._runAction}>
slot="icons" ${this.hass.localize(
@click=${preventDefaultStopPropagation} "ui.panel.config.automation.editor.actions.run"
@keydown=${stopPropagation} )}
@closed=${stopPropagation} <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
positioning="fixed" </ha-md-menu-item>
> <ha-md-menu-item
<ha-icon-button .clickAction=${this._renameAction}
slot="trigger" .disabled=${this.disabled}
.label=${this.hass.localize("ui.common.menu")} >
.path=${mdiDotsVertical} ${this.hass.localize(
></ha-icon-button> "ui.panel.config.automation.editor.actions.rename"
)}
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-md-menu-item
.clickAction=${this._duplicateAction}
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate"
)}
<ha-svg-icon
slot="start"
.path=${mdiContentDuplicate}
></ha-svg-icon>
</ha-md-menu-item>
${!this.optionsInSidebar <ha-md-menu-item
? html`<ha-md-menu-item .clickAction=${this._runAction}> .clickAction=${this._copyAction}
${this.hass.localize( .disabled=${this.disabled}
"ui.panel.config.automation.editor.actions.run" >
)} ${this.hass.localize(
<ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon> "ui.panel.config.automation.editor.triggers.copy"
</ha-md-menu-item> )}
<ha-md-menu-item <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
.clickAction=${this._renameAction} </ha-md-menu-item>
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.rename"
)}
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-md-menu-item
.clickAction=${this._duplicateAction}
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate"
)}
<ha-svg-icon
slot="start"
.path=${mdiContentDuplicate}
></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._copyAction} .clickAction=${this._cutAction}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.cut"
)} )}
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
</ha-md-menu-item> </ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._cutAction} .clickAction=${this._moveUp}
.disabled=${this.disabled} .disabled=${this.disabled || !!this.first}
> >
${this.hass.localize( ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
"ui.panel.config.automation.editor.triggers.cut" <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
)} ></ha-md-menu-item>
<ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
</ha-md-menu-item>`
: nothing}
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._moveUp} .clickAction=${this._moveDown}
.disabled=${this.disabled || !!this.first} .disabled=${this.disabled || !!this.last}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_up")} ${this.hass.localize(
<ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon "ui.panel.config.automation.editor.move_down"
></ha-md-menu-item> )}
<ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
></ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._moveDown} .clickAction=${this._toggleYamlMode}
.disabled=${this.disabled || !!this.last} .disabled=${!this._uiModeAvailable || !!this._warnings}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_down")} ${this.hass.localize(
<ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
></ha-md-menu-item> )}
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
</ha-md-menu-item>
${!this.optionsInSidebar <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
? html`<ha-md-menu-item
.clickAction=${this._toggleYamlMode}
.disabled=${!this._uiModeAvailable || !!this._warnings}
>
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
)}
<ha-svg-icon
slot="start"
.path=${mdiPlaylistEdit}
></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <ha-md-menu-item
.clickAction=${this._onDisable}
<ha-md-menu-item .disabled=${this.disabled}
.clickAction=${this._onDisable} >
.disabled=${this.disabled} ${this.action.enabled === false
> ? this.hass.localize(
${this.action.enabled === false "ui.panel.config.automation.editor.actions.enable"
? this.hass.localize( )
"ui.panel.config.automation.editor.actions.enable" : this.hass.localize(
) "ui.panel.config.automation.editor.actions.disable"
: this.hass.localize( )}
"ui.panel.config.automation.editor.actions.disable" <ha-svg-icon
)} slot="start"
<ha-svg-icon .path=${this.action.enabled === false
slot="start" ? mdiPlayCircleOutline
.path=${this.action.enabled === false : mdiStopCircleOutline}
? mdiPlayCircleOutline ></ha-svg-icon>
: mdiStopCircleOutline} </ha-md-menu-item>
></ha-svg-icon> <ha-md-menu-item
</ha-md-menu-item> class="warning"
<ha-md-menu-item .clickAction=${this._onDelete}
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
<ha-svg-icon
class="warning" class="warning"
.clickAction=${this._onDelete} slot="start"
.disabled=${this.disabled} .path=${mdiDelete}
> ></ha-svg-icon>
${this.hass.localize( </ha-md-menu-item>
"ui.panel.config.automation.editor.actions.delete" </ha-md-button-menu>`
)} : nothing}
<ha-svg-icon
class="warning"
slot="start"
.path=${mdiDelete}
></ha-svg-icon>
</ha-md-menu-item>`
: nothing}
</ha-md-button-menu>
${!this.optionsInSidebar ${!this.optionsInSidebar
? html`${this._warnings ? html`${this._warnings
? html`<ha-automation-editor-warning ? html`<ha-automation-editor-warning
@@ -447,6 +452,7 @@ export default class HaAutomationActionRow extends LitElement {
...ACTION_BUILDING_BLOCKS, ...ACTION_BUILDING_BLOCKS,
...ACTION_COMBINED_BLOCKS, ...ACTION_COMBINED_BLOCKS,
].includes(blockType!)} ].includes(blockType!)}
.sortSelected=${this.sortSelected}
>${this._renderRow()}</ha-automation-row >${this._renderRow()}</ha-automation-row
>` >`
: html` : html`
@@ -697,9 +703,11 @@ export default class HaAutomationActionRow extends LitElement {
this._collapsed = false; this._collapsed = false;
if (this.narrow) { if (this.narrow) {
this.scrollIntoView({ requestAnimationFrame(() => {
block: "start", this.scrollIntoView({
behavior: "smooth", block: "start",
behavior: "smooth",
});
}); });
} }
} }
@@ -751,6 +759,10 @@ export default class HaAutomationActionRow extends LitElement {
return this._selected; return this._selected;
} }
public focus() {
this._automationRowElement?.focus();
}
static styles = rowStyles; static styles = rowStyles;
} }

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

@@ -48,6 +48,8 @@ export default class HaAutomationAction extends LitElement {
@state() private _showReorder = false; @state() private _showReorder = false;
@state() private _rowSortSelected?: number;
@state() @state()
@storage({ @storage({
key: "automationClipboard", key: "automationClipboard",
@@ -94,7 +96,7 @@ export default class HaAutomationAction extends LitElement {
@item-removed=${this._actionRemoved} @item-removed=${this._actionRemoved}
@item-cloned=${this._actionCloned} @item-cloned=${this._actionCloned}
> >
<div class="rows"> <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
${repeat( ${repeat(
this.actions, this.actions,
(action) => this._getKey(action), (action) => this._getKey(action),
@@ -115,10 +117,20 @@ export default class HaAutomationAction extends LitElement {
.hass=${this.hass} .hass=${this.hass}
?highlight=${this.highlightedActions?.includes(action)} ?highlight=${this.highlightedActions?.includes(action)}
.optionsInSidebar=${this.optionsInSidebar} .optionsInSidebar=${this.optionsInSidebar}
.sortSelected=${this._rowSortSelected === idx}
@stop-sort-selection=${this._stopSortSelection}
> >
${this._showReorder && !this.disabled ${this._showReorder && !this.disabled
? html` ? html`
<div class="handle" slot="icons"> <div
tabindex="0"
class="handle ${this._rowSortSelected === idx
? "active"
: ""}"
slot="icons"
@keydown=${this._handleDragKeydown}
.index=${idx}
>
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
</div> </div>
` `
@@ -264,18 +276,30 @@ export default class HaAutomationAction extends LitElement {
return this._actionKeys.get(action)!; return this._actionKeys.get(action)!;
} }
private _moveUp(ev) { private async _moveUp(ev) {
ev.stopPropagation(); ev.stopPropagation();
const index = (ev.target as any).index; const index = (ev.target as any).index;
const newIndex = index - 1; if (!(ev.target as HaAutomationActionRow).first) {
this._move(index, newIndex); const newIndex = index - 1;
this._move(index, newIndex);
if (this._rowSortSelected === index) {
this._rowSortSelected = newIndex;
}
ev.target.focus();
}
} }
private _moveDown(ev) { private async _moveDown(ev) {
ev.stopPropagation(); ev.stopPropagation();
const index = (ev.target as any).index; const index = (ev.target as any).index;
const newIndex = index + 1; if (!(ev.target as HaAutomationActionRow).last) {
this._move(index, newIndex); const newIndex = index + 1;
this._move(index, newIndex);
if (this._rowSortSelected === index) {
this._rowSortSelected = newIndex;
}
ev.target.focus();
}
} }
private _move(oldIndex: number, newIndex: number) { private _move(oldIndex: number, newIndex: number) {
@@ -371,6 +395,20 @@ export default class HaAutomationAction extends LitElement {
}); });
} }
private _handleDragKeydown(ev: KeyboardEvent) {
if (ev.key === "Enter" || ev.key === " ") {
ev.stopPropagation();
this._rowSortSelected =
this._rowSortSelected === undefined
? (ev.target as any).index
: undefined;
}
}
private _stopSortSelection() {
this._rowSortSelected = undefined;
}
static styles = [ static styles = [
automationRowsStyles, automationRowsStyles,
css` css`

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

@@ -28,6 +28,8 @@ export default class HaAutomationConditionEditor extends LitElement {
@property({ type: Boolean }) public narrow = false; @property({ type: Boolean }) public narrow = false;
@property({ type: Boolean, attribute: "sidebar" }) public inSidebar = false;
@property({ type: Boolean, reflect: true }) public selected = false; @property({ type: Boolean, reflect: true }) public selected = false;
@property({ type: Boolean, attribute: "supported" }) public uiSupported = @property({ type: Boolean, attribute: "supported" }) public uiSupported =
@@ -55,6 +57,7 @@ export default class HaAutomationConditionEditor extends LitElement {
(this.condition.enabled === false && !this.yamlMode), (this.condition.enabled === false && !this.yamlMode),
yaml: yamlMode, yaml: yamlMode,
indent: this.indent, indent: this.indent,
card: !this.inSidebar,
})} })}
> >
${yamlMode ${yamlMode

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

@@ -26,6 +26,7 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
import { handleStructError } from "../../../../common/structs/handle-errors"; import { handleStructError } from "../../../../common/structs/handle-errors";
import "../../../../components/ha-automation-row"; import "../../../../components/ha-automation-row";
import type { HaAutomationRow } from "../../../../components/ha-automation-row";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
@@ -115,6 +116,9 @@ export default class HaAutomationConditionRow extends LitElement {
@property({ type: Boolean }) public narrow = false; @property({ type: Boolean }) public narrow = false;
@property({ type: Boolean, attribute: "sort-selected" })
public sortSelected = false;
@state() private _collapsed = true; @state() private _collapsed = true;
@state() private _warnings?: string[]; @state() private _warnings?: string[];
@@ -145,6 +149,9 @@ export default class HaAutomationConditionRow extends LitElement {
@query("ha-automation-condition-editor") @query("ha-automation-condition-editor")
public conditionEditor?: HaAutomationConditionEditor; public conditionEditor?: HaAutomationConditionEditor;
@query("ha-automation-row")
private _automationRowElement?: HaAutomationRow;
private _renderRow() { private _renderRow() {
return html` return html`
<ha-svg-icon <ha-svg-icon
@@ -160,143 +167,140 @@ export default class HaAutomationConditionRow extends LitElement {
<slot name="icons" slot="icons"></slot> <slot name="icons" slot="icons"></slot>
<ha-md-button-menu ${!this.optionsInSidebar
slot="icons" ? html`<ha-md-button-menu
@click=${preventDefaultStopPropagation} quick
@keydown=${stopPropagation} slot="icons"
@closed=${stopPropagation} @click=${preventDefaultStopPropagation}
positioning="fixed" @keydown=${stopPropagation}
> @closed=${stopPropagation}
<ha-icon-button positioning="fixed"
slot="trigger" anchor-corner="end-end"
.label=${this.hass.localize("ui.common.menu")} menu-corner="start-end"
.path=${mdiDotsVertical} >
> <ha-icon-button
</ha-icon-button> slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
>
</ha-icon-button>
${!this.optionsInSidebar <ha-md-menu-item .clickAction=${this._testCondition}>
? html` ${this.hass.localize(
<ha-md-menu-item .clickAction=${this._testCondition}> "ui.panel.config.automation.editor.conditions.test"
${this.hass.localize( )}
"ui.panel.config.automation.editor.conditions.test" <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
)} </ha-md-menu-item>
<ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon> <ha-md-menu-item
</ha-md-menu-item> .clickAction=${this._renameCondition}
<ha-md-menu-item .disabled=${this.disabled}
.clickAction=${this._renameCondition} >
.disabled=${this.disabled} ${this.hass.localize(
> "ui.panel.config.automation.editor.conditions.rename"
${this.hass.localize( )}
"ui.panel.config.automation.editor.conditions.rename" <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
)} </ha-md-menu-item>
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._duplicateCondition} .clickAction=${this._duplicateCondition}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
)} )}
<ha-svg-icon <ha-svg-icon
slot="start" slot="start"
.path=${mdiContentDuplicate} .path=${mdiContentDuplicate}
></ha-svg-icon> ></ha-svg-icon>
</ha-md-menu-item> </ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._copyCondition} .clickAction=${this._copyCondition}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
)} )}
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
</ha-md-menu-item> </ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._cutCondition} .clickAction=${this._cutCondition}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
)} )}
<ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
</ha-md-menu-item> </ha-md-menu-item>
`
: nothing}
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._moveUp} .clickAction=${this._moveUp}
.disabled=${this.disabled || this.first} .disabled=${this.disabled || this.first}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_up")} ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
<ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
></ha-md-menu-item> ></ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._moveDown} .clickAction=${this._moveDown}
.disabled=${this.disabled || this.last} .disabled=${this.disabled || this.last}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_down")} ${this.hass.localize(
<ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon "ui.panel.config.automation.editor.move_down"
></ha-md-menu-item> )}
<ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
></ha-md-menu-item>
${!this.optionsInSidebar <ha-md-menu-item
? html`<ha-md-menu-item .clickAction=${this._toggleYamlMode}
.clickAction=${this._toggleYamlMode} .disabled=${this._uiSupported(this.condition.condition) ||
.disabled=${this._uiSupported(this.condition.condition) || !!this._warnings}
!!this._warnings} >
> ${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-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
<ha-svg-icon </ha-md-menu-item>
slot="start"
.path=${mdiPlaylistEdit}
></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._onDisable} .clickAction=${this._onDisable}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
${this.condition.enabled === false ${this.condition.enabled === false
? this.hass.localize( ? this.hass.localize(
"ui.panel.config.automation.editor.actions.enable" "ui.panel.config.automation.editor.actions.enable"
) )
: this.hass.localize( : this.hass.localize(
"ui.panel.config.automation.editor.actions.disable" "ui.panel.config.automation.editor.actions.disable"
)} )}
<ha-svg-icon <ha-svg-icon
slot="start" slot="start"
.path=${this.condition.enabled === false .path=${this.condition.enabled === false
? mdiPlayCircleOutline ? mdiPlayCircleOutline
: mdiStopCircleOutline} : mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-md-menu-item> </ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
class="warning"
.clickAction=${this._onDelete}
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
<ha-svg-icon
class="warning" class="warning"
.clickAction=${this._onDelete} slot="start"
.disabled=${this.disabled} .path=${mdiDelete}
> ></ha-svg-icon>
${this.hass.localize( </ha-md-menu-item>
"ui.panel.config.automation.editor.actions.delete" </ha-md-button-menu>`
)} : nothing}
<ha-svg-icon
class="warning"
slot="start"
.path=${mdiDelete}
></ha-svg-icon>
</ha-md-menu-item>`
: nothing}
</ha-md-button-menu>
${!this.optionsInSidebar ${!this.optionsInSidebar
? html`${this._warnings ? html`${this._warnings
? html`<ha-automation-editor-warning ? html`<ha-automation-editor-warning
@@ -356,6 +360,7 @@ export default class HaAutomationConditionRow extends LitElement {
.buildingBlock=${CONDITION_BUILDING_BLOCKS.includes( .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes(
this.condition.condition this.condition.condition
)} )}
.sortSelected=${this.sortSelected}
>${this._renderRow()}</ha-automation-row >${this._renderRow()}</ha-automation-row
>` >`
: html` : html`
@@ -668,9 +673,11 @@ export default class HaAutomationConditionRow extends LitElement {
this._collapsed = false; this._collapsed = false;
if (this.narrow) { if (this.narrow) {
this.scrollIntoView({ requestAnimationFrame(() => {
block: "start", this.scrollIntoView({
behavior: "smooth", block: "start",
behavior: "smooth",
});
}); });
} }
} }
@@ -688,6 +695,10 @@ export default class HaAutomationConditionRow extends LitElement {
return this._selected; return this._selected;
} }
public focus() {
this._automationRowElement?.focus();
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
rowStyles, rowStyles,

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

@@ -46,6 +46,8 @@ export default class HaAutomationCondition extends LitElement {
@state() private _showReorder = false; @state() private _showReorder = false;
@state() private _rowSortSelected?: number;
@state() @state()
@storage({ @storage({
key: "automationClipboard", key: "automationClipboard",
@@ -171,7 +173,7 @@ export default class HaAutomationCondition extends LitElement {
@item-removed=${this._conditionRemoved} @item-removed=${this._conditionRemoved}
@item-cloned=${this._conditionCloned} @item-cloned=${this._conditionCloned}
> >
<div class="rows"> <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
${repeat( ${repeat(
this.conditions.filter((c) => typeof c === "object"), this.conditions.filter((c) => typeof c === "object"),
(condition) => this._getKey(condition), (condition) => this._getKey(condition),
@@ -193,10 +195,20 @@ export default class HaAutomationCondition extends LitElement {
.hass=${this.hass} .hass=${this.hass}
?highlight=${this.highlightedConditions?.includes(cond)} ?highlight=${this.highlightedConditions?.includes(cond)}
.optionsInSidebar=${this.optionsInSidebar} .optionsInSidebar=${this.optionsInSidebar}
.sortSelected=${this._rowSortSelected === idx}
@stop-sort-selection=${this._stopSortSelection}
> >
${this._showReorder && !this.disabled ${this._showReorder && !this.disabled
? html` ? html`
<div class="handle" slot="icons"> <div
tabindex="0"
class="handle ${this._rowSortSelected === idx
? "active"
: ""}"
slot="icons"
@keydown=${this._handleDragKeydown}
.index=${idx}
>
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
</div> </div>
` `
@@ -285,15 +297,27 @@ export default class HaAutomationCondition extends LitElement {
private _moveUp(ev) { private _moveUp(ev) {
ev.stopPropagation(); ev.stopPropagation();
const index = (ev.target as any).index; const index = (ev.target as any).index;
const newIndex = index - 1; if (!(ev.target as HaAutomationConditionRow).first) {
this._move(index, newIndex); const newIndex = index - 1;
this._move(index, newIndex);
if (this._rowSortSelected === index) {
this._rowSortSelected = newIndex;
}
ev.target.focus();
}
} }
private _moveDown(ev) { private _moveDown(ev) {
ev.stopPropagation(); ev.stopPropagation();
const index = (ev.target as any).index; const index = (ev.target as any).index;
const newIndex = index + 1; if (!(ev.target as HaAutomationConditionRow).last) {
this._move(index, newIndex); const newIndex = index + 1;
this._move(index, newIndex);
if (this._rowSortSelected === index) {
this._rowSortSelected = newIndex;
}
ev.target.focus();
}
} }
private _move(oldIndex: number, newIndex: number) { private _move(oldIndex: number, newIndex: number) {
@@ -390,6 +414,20 @@ export default class HaAutomationCondition extends LitElement {
}); });
} }
private _handleDragKeydown(ev: KeyboardEvent) {
if (ev.key === "Enter" || ev.key === " ") {
ev.stopPropagation();
this._rowSortSelected =
this._rowSortSelected === undefined
? (ev.target as any).index
: undefined;
}
}
private _stopSortSelection() {
this._rowSortSelected = undefined;
}
static styles = [ static styles = [
automationRowsStyles, automationRowsStyles,
css` css`

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

@@ -17,6 +17,7 @@ import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_de
import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
import "../../../../components/ha-automation-row"; import "../../../../components/ha-automation-row";
import type { HaAutomationRow } from "../../../../components/ha-automation-row";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
@@ -63,6 +64,9 @@ export default class HaAutomationOptionRow extends LitElement {
@property({ type: Boolean, attribute: "sidebar" }) @property({ type: Boolean, attribute: "sidebar" })
public optionsInSidebar = false; public optionsInSidebar = false;
@property({ type: Boolean, attribute: "sort-selected" })
public sortSelected = false;
@state() private _expanded = false; @state() private _expanded = false;
@state() private _selected = false; @state() private _selected = false;
@@ -79,6 +83,9 @@ export default class HaAutomationOptionRow extends LitElement {
@query("ha-automation-action") @query("ha-automation-action")
private _actionElement?: HaAutomationAction; private _actionElement?: HaAutomationAction;
@query("ha-automation-row")
private _automationRowElement?: HaAutomationRow;
private _expandedChanged(ev) { private _expandedChanged(ev) {
if (ev.currentTarget.id !== "option") { if (ev.currentTarget.id !== "option") {
return; return;
@@ -123,14 +130,17 @@ export default class HaAutomationOptionRow extends LitElement {
<slot name="icons" slot="icons"></slot> <slot name="icons" slot="icons"></slot>
${this.option ${this.option && !this.optionsInSidebar
? html` ? html`
<ha-md-button-menu <ha-md-button-menu
quick
slot="icons" slot="icons"
@click=${preventDefaultStopPropagation} @click=${preventDefaultStopPropagation}
@closed=${stopPropagation} @closed=${stopPropagation}
@keydown=${stopPropagation} @keydown=${stopPropagation}
positioning="fixed" positioning="fixed"
anchor-corner="end-end"
menu-corner="start-end"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
@@ -138,35 +148,28 @@ export default class HaAutomationOptionRow extends LitElement {
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
${!this.optionsInSidebar <ha-md-menu-item
? html` @click=${this._renameOption}
<ha-md-menu-item .disabled=${this.disabled}
@click=${this._renameOption} >
.disabled=${this.disabled} ${this.hass.localize(
> "ui.panel.config.automation.editor.actions.rename"
${this.hass.localize( )}
"ui.panel.config.automation.editor.actions.rename" <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
)} </ha-md-menu-item>
<ha-svg-icon
slot="graphic"
.path=${mdiRenameBox}
></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
@click=${this._duplicateOption} @click=${this._duplicateOption}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="start"
.path=${mdiContentDuplicate} .path=${mdiContentDuplicate}
></ha-svg-icon> ></ha-svg-icon>
</ha-md-menu-item> </ha-md-menu-item>
`
: nothing}
<ha-md-menu-item <ha-md-menu-item
@click=${this._moveUp} @click=${this._moveUp}
@@ -175,7 +178,7 @@ export default class HaAutomationOptionRow extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_up" "ui.panel.config.automation.editor.move_up"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon>
</ha-md-menu-item> </ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
@@ -185,25 +188,23 @@ export default class HaAutomationOptionRow extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.move_down" "ui.panel.config.automation.editor.move_down"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon>
</ha-md-menu-item> </ha-md-menu-item>
${!this.optionsInSidebar <ha-md-menu-item
? html`<ha-md-menu-item @click=${this._removeOption}
@click=${this._removeOption} class="warning"
class="warning" .disabled=${this.disabled}
.disabled=${this.disabled} >
> ${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" )}
)} <ha-svg-icon
<ha-svg-icon class="warning"
class="warning" slot="start"
slot="graphic" .path=${mdiDelete}
.path=${mdiDelete} ></ha-svg-icon>
></ha-svg-icon> </ha-md-menu-item>
</ha-md-menu-item>`
: nothing}
</ha-md-button-menu> </ha-md-button-menu>
` `
: nothing} : nothing}
@@ -215,6 +216,7 @@ export default class HaAutomationOptionRow extends LitElement {
return html`<div return html`<div
class=${classMap({ class=${classMap({
"card-content": true, "card-content": true,
card: !this.optionsInSidebar,
indent: this.optionsInSidebar, indent: this.optionsInSidebar,
selected: this._selected, selected: this._selected,
hidden: this.optionsInSidebar && this._collapsed, hidden: this.optionsInSidebar && this._collapsed,
@@ -271,6 +273,7 @@ export default class HaAutomationOptionRow extends LitElement {
.selected=${this._selected} .selected=${this._selected}
@click=${this._toggleSidebar} @click=${this._toggleSidebar}
@toggle-collapsed=${this._toggleCollapse} @toggle-collapsed=${this._toggleCollapse}
.sortSelected=${this.sortSelected}
>${this._renderRow()}</ha-automation-row >${this._renderRow()}</ha-automation-row
>` >`
: html` : html`
@@ -398,9 +401,11 @@ export default class HaAutomationOptionRow extends LitElement {
this._collapsed = false; this._collapsed = false;
if (this.narrow) { if (this.narrow) {
this.scrollIntoView({ requestAnimationFrame(() => {
block: "start", this.scrollIntoView({
behavior: "smooth", block: "start",
behavior: "smooth",
});
}); });
} }
} }
@@ -442,6 +447,10 @@ export default class HaAutomationOptionRow extends LitElement {
return this._selected; return this._selected;
} }
public focus() {
this._automationRowElement?.focus();
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
rowStyles, rowStyles,

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

@@ -1,7 +1,7 @@
import { mdiDrag, mdiPlus } from "@mdi/js"; import { mdiDrag, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple"; import deepClone from "deep-clone-simple";
import type { PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { LitElement, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, queryAll, state } from "lit/decorators"; import { customElement, property, queryAll, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import { storage } from "../../../../common/decorators/storage"; import { storage } from "../../../../common/decorators/storage";
@@ -37,6 +37,8 @@ export default class HaAutomationOption extends LitElement {
@state() private _showReorder = false; @state() private _showReorder = false;
@state() private _rowSortSelected?: number;
@state() @state()
@storage({ @storage({
key: "automationClipboard", key: "automationClipboard",
@@ -83,7 +85,7 @@ export default class HaAutomationOption extends LitElement {
@item-removed=${this._optionRemoved} @item-removed=${this._optionRemoved}
@item-cloned=${this._optionCloned} @item-cloned=${this._optionCloned}
> >
<div class="rows"> <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
${repeat( ${repeat(
this.options, this.options,
(option) => this._getKey(option), (option) => this._getKey(option),
@@ -102,10 +104,20 @@ export default class HaAutomationOption extends LitElement {
@value-changed=${this._optionChanged} @value-changed=${this._optionChanged}
.hass=${this.hass} .hass=${this.hass}
.optionsInSidebar=${this.optionsInSidebar} .optionsInSidebar=${this.optionsInSidebar}
.sortSelected=${this._rowSortSelected === idx}
@stop-sort-selection=${this._stopSortSelection}
> >
${this._showReorder && !this.disabled ${this._showReorder && !this.disabled
? html` ? html`
<div class="handle" slot="icons"> <div
tabindex="0"
class="handle ${this._rowSortSelected === idx
? "active"
: ""}"
slot="icons"
@keydown=${this._handleDragKeydown}
.index=${idx}
>
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
</div> </div>
` `
@@ -207,15 +219,27 @@ export default class HaAutomationOption extends LitElement {
private _moveUp(ev) { private _moveUp(ev) {
ev.stopPropagation(); ev.stopPropagation();
const index = (ev.target as any).index; const index = (ev.target as any).index;
const newIndex = index - 1; if (!(ev.target as HaAutomationOptionRow).first) {
this._move(index, newIndex); const newIndex = index - 1;
this._move(index, newIndex);
if (this._rowSortSelected === index) {
this._rowSortSelected = newIndex;
}
ev.target.focus();
}
} }
private _moveDown(ev) { private _moveDown(ev) {
ev.stopPropagation(); ev.stopPropagation();
const index = (ev.target as any).index; const index = (ev.target as any).index;
const newIndex = index + 1; if (!(ev.target as HaAutomationOptionRow).last) {
this._move(index, newIndex); const newIndex = index + 1;
this._move(index, newIndex);
if (this._rowSortSelected === index) {
this._rowSortSelected = newIndex;
}
ev.target.focus();
}
} }
private _move(oldIndex: number, newIndex: number) { private _move(oldIndex: number, newIndex: number) {
@@ -304,7 +328,28 @@ export default class HaAutomationOption extends LitElement {
fireEvent(this, "show-default-actions"); fireEvent(this, "show-default-actions");
}; };
static styles = automationRowsStyles; private _handleDragKeydown(ev: KeyboardEvent) {
if (ev.key === "Enter" || ev.key === " ") {
ev.stopPropagation();
this._rowSortSelected =
this._rowSortSelected === undefined
? (ev.target as any).index
: undefined;
}
}
private _stopSortSelection() {
this._rowSortSelected = undefined;
}
static styles = [
automationRowsStyles,
css`
:host([root]) .rows {
padding-right: 8px;
}
`,
];
} }
declare global { declare global {

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

@@ -67,10 +67,13 @@ export default class HaAutomationSidebarCard extends LitElement {
<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-md-button-menu
quick
@click=${this._openOverflowMenu} @click=${this._openOverflowMenu}
@keydown=${stopPropagation} @keydown=${stopPropagation}
@closed=${stopPropagation} @closed=${stopPropagation}
.positioning=${this.narrow ? "absolute" : "fixed"} .positioning=${this.narrow ? "absolute" : "fixed"}
anchor-corner="end-end"
menu-corner="start-end"
> >
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"

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

@@ -182,6 +182,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
@value-changed=${this._valueChangedSidebar} @value-changed=${this._valueChangedSidebar}
.disabled=${this.disabled} .disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable} @ui-mode-not-available=${this._handleUiModeNotAvailable}
sidebar
></ha-automation-condition-editor> `} ></ha-automation-condition-editor> `}
</ha-automation-sidebar-card>`; </ha-automation-sidebar-card>`;
} }

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

@@ -67,7 +67,7 @@ export default class HaAutomationSidebarOption extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="start"
.path=${mdiContentDuplicate} .path=${mdiContentDuplicate}
></ha-svg-icon> ></ha-svg-icon>
</ha-md-menu-item> </ha-md-menu-item>

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

@@ -193,6 +193,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
.yamlMode=${this.yamlMode} .yamlMode=${this.yamlMode}
.disabled=${this.disabled} .disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable} @ui-mode-not-available=${this._handleUiModeNotAvailable}
sidebar
></ha-automation-trigger-editor> ></ha-automation-trigger-editor>
</ha-automation-sidebar-card> </ha-automation-sidebar-card>
`; `;

20
src/panels/config/automation/styles.ts
View File

@@ -54,7 +54,7 @@ export const editorStyles = css`
pointer-events: none; pointer-events: none;
} }
.card-content { .card-content.card {
padding: 16px; padding: 16px;
} }
.card-content.yaml { .card-content.yaml {
@@ -69,7 +69,7 @@ export const indentStyle = css`
.selector-row, .selector-row,
:host([indent]) ha-form { :host([indent]) ha-form {
margin-left: 12px; margin-left: 12px;
padding: 12px 24px 16px 16px; padding: 12px 20px 16px 16px;
border-left: 2px solid var(--ha-color-border-neutral-quiet); border-left: 2px solid var(--ha-color-border-neutral-quiet);
border-bottom: 2px solid var(--ha-color-border-neutral-quiet); border-bottom: 2px solid var(--ha-color-border-neutral-quiet);
border-radius: 0; border-radius: 0;
@@ -168,7 +168,6 @@ export const manualEditorStyles = css`
@media all and (max-width: 870px) { @media all and (max-width: 870px) {
.split-view { .split-view {
gap: 0; gap: 0;
margin-right: -8px;
} }
.sidebar { .sidebar {
height: 0; height: 0;
@@ -197,6 +196,9 @@ export const automationRowsStyles = css`
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
} }
.rows.no-sidebar {
margin-right: 0;
}
.sortable-ghost { .sortable-ghost {
background: none; background: none;
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
@@ -209,9 +211,19 @@ export const automationRowsStyles = css`
scroll-margin-top: 48px; scroll-margin-top: 48px;
} }
.handle { .handle {
padding: 12px; margin: 4px;
padding: 8px;
cursor: move; /* fallback if grab cursor is unsupported */ cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab; cursor: grab;
border-radius: var(--ha-border-radius-pill);
}
.handle:focus {
outline: var(--wa-focus-ring);
background: var(--ha-color-fill-neutral-quiet-resting);
}
.handle.active {
outline: var(--wa-focus-ring);
background: var(--ha-color-fill-neutral-normal-active);
} }
.handle ha-svg-icon { .handle ha-svg-icon {
pointer-events: none; pointer-events: none;

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

@@ -29,6 +29,8 @@ export default class HaAutomationTriggerEditor extends LitElement {
@property({ type: Boolean, attribute: "show-id" }) public showId = false; @property({ type: Boolean, attribute: "show-id" }) public showId = false;
@property({ type: Boolean, attribute: "sidebar" }) public inSidebar = false;
@query("ha-yaml-editor") public yamlEditor?: HaYamlEditor; @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor;
protected render() { protected render() {
@@ -47,6 +49,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
this.trigger.enabled === false && this.trigger.enabled === false &&
!this.yamlMode), !this.yamlMode),
yaml: yamlMode, yaml: yamlMode,
card: !this.inSidebar,
})} })}
> >
${yamlMode ${yamlMode

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

@@ -28,6 +28,7 @@ import { handleStructError } from "../../../../common/structs/handle-errors";
import { debounce } from "../../../../common/util/debounce"; import { debounce } from "../../../../common/util/debounce";
import "../../../../components/ha-alert"; import "../../../../components/ha-alert";
import "../../../../components/ha-automation-row"; import "../../../../components/ha-automation-row";
import type { HaAutomationRow } from "../../../../components/ha-automation-row";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
@@ -115,6 +116,9 @@ export default class HaAutomationTriggerRow extends LitElement {
@property({ type: Boolean, attribute: "sidebar" }) @property({ type: Boolean, attribute: "sidebar" })
public optionsInSidebar = false; public optionsInSidebar = false;
@property({ type: Boolean, attribute: "sort-selected" })
public sortSelected = false;
@state() private _yamlMode = false; @state() private _yamlMode = false;
@state() private _triggered?: Record<string, unknown>; @state() private _triggered?: Record<string, unknown>;
@@ -132,6 +136,9 @@ export default class HaAutomationTriggerRow extends LitElement {
@query("ha-automation-trigger-editor") @query("ha-automation-trigger-editor")
public triggerEditor?: HaAutomationTriggerEditor; public triggerEditor?: HaAutomationTriggerEditor;
@query("ha-automation-row")
private _automationRowElement?: HaAutomationRow;
@storage({ @storage({
key: "automationClipboard", key: "automationClipboard",
state: false, state: false,
@@ -165,145 +172,142 @@ export default class HaAutomationTriggerRow extends LitElement {
<slot name="icons" slot="icons"></slot> <slot name="icons" slot="icons"></slot>
<ha-md-button-menu ${!this.optionsInSidebar
slot="icons" ? html`<ha-md-button-menu
@click=${preventDefaultStopPropagation} quick
@keydown=${stopPropagation} slot="icons"
@closed=${stopPropagation} @click=${preventDefaultStopPropagation}
positioning="fixed" @keydown=${stopPropagation}
> @closed=${stopPropagation}
<ha-icon-button positioning="fixed"
slot="trigger" anchor-corner="end-end"
.label=${this.hass.localize("ui.common.menu")} menu-corner="start-end"
.path=${mdiDotsVertical} >
></ha-icon-button> <ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-md-menu-item
.clickAction=${this._renameTrigger}
.disabled=${this.disabled || type === "list"}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename"
)}
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-md-menu-item>
${!this.optionsInSidebar <ha-md-menu-item
? html`<ha-md-menu-item .clickAction=${this._showTriggerId}
.clickAction=${this._renameTrigger} .disabled=${this.disabled || type === "list"}
.disabled=${this.disabled || type === "list"} >
> ${this.hass.localize(
${this.hass.localize( "ui.panel.config.automation.editor.triggers.edit_id"
"ui.panel.config.automation.editor.triggers.rename" )}
)} <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon> </ha-md-menu-item>
</ha-md-menu-item>
<ha-md-menu-item <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
.clickAction=${this._showTriggerId}
.disabled=${this.disabled || type === "list"}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.edit_id"
)}
<ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <ha-md-menu-item
.clickAction=${this._duplicateTrigger}
.disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.duplicate"
)}
<ha-svg-icon
slot="start"
.path=${mdiContentDuplicate}
></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._duplicateTrigger} .clickAction=${this._copyTrigger}
.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.copy"
)} )}
<ha-svg-icon <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
slot="start" </ha-md-menu-item>
.path=${mdiContentDuplicate}
></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._copyTrigger} .clickAction=${this._cutTrigger}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.cut"
)} )}
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
</ha-md-menu-item> </ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._cutTrigger} .clickAction=${this._moveUp}
.disabled=${this.disabled} .disabled=${this.disabled || this.first}
> >
${this.hass.localize( ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
"ui.panel.config.automation.editor.triggers.cut" <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
)} ></ha-md-menu-item>
<ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
</ha-md-menu-item>`
: nothing}
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._moveUp} .clickAction=${this._moveDown}
.disabled=${this.disabled || this.first} .disabled=${this.disabled || this.last}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_up")} ${this.hass.localize(
<ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon "ui.panel.config.automation.editor.move_down"
></ha-md-menu-item> )}
<ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
></ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.clickAction=${this._moveDown} .clickAction=${this._toggleYamlMode}
.disabled=${this.disabled || this.last} .disabled=${!supported || !!this._warnings}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_down")} ${this.hass.localize(
<ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
></ha-md-menu-item> )}
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
</ha-md-menu-item>
${!this.optionsInSidebar <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
? html`
<ha-md-menu-item
.clickAction=${this._toggleYamlMode}
.disabled=${!supported || !!this._warnings}
>
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
)}
<ha-svg-icon
slot="start"
.path=${mdiPlaylistEdit}
></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <ha-md-menu-item
.clickAction=${this._onDisable}
<ha-md-menu-item .disabled=${this.disabled || type === "list"}
.clickAction=${this._onDisable} >
.disabled=${this.disabled || type === "list"} ${"enabled" in this.trigger && this.trigger.enabled === false
> ? this.hass.localize(
${"enabled" in this.trigger && this.trigger.enabled === false "ui.panel.config.automation.editor.actions.enable"
? this.hass.localize( )
"ui.panel.config.automation.editor.actions.enable" : this.hass.localize(
) "ui.panel.config.automation.editor.actions.disable"
: this.hass.localize( )}
"ui.panel.config.automation.editor.actions.disable" <ha-svg-icon
)} slot="start"
<ha-svg-icon .path=${"enabled" in this.trigger &&
slot="start" this.trigger.enabled === false
.path=${"enabled" in this.trigger && ? mdiPlayCircleOutline
this.trigger.enabled === false : mdiStopCircleOutline}
? mdiPlayCircleOutline ></ha-svg-icon>
: mdiStopCircleOutline} </ha-md-menu-item>
></ha-svg-icon> <ha-md-menu-item
</ha-md-menu-item> .clickAction=${this._onDelete}
<ha-md-menu-item class="warning"
.clickAction=${this._onDelete} .disabled=${this.disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
<ha-svg-icon
class="warning" class="warning"
.disabled=${this.disabled} slot="start"
> .path=${mdiDelete}
${this.hass.localize( ></ha-svg-icon>
"ui.panel.config.automation.editor.actions.delete" </ha-md-menu-item>
)} </ha-md-button-menu>`
<ha-svg-icon : nothing}
class="warning"
slot="start"
.path=${mdiDelete}
></ha-svg-icon>
</ha-md-menu-item>
`
: nothing}
</ha-md-button-menu>
${!this.optionsInSidebar ${!this.optionsInSidebar
? html`${this._warnings ? html`${this._warnings
? html`<ha-automation-editor-warning ? html`<ha-automation-editor-warning
@@ -345,6 +349,7 @@ export default class HaAutomationTriggerRow extends LitElement {
this.trigger.enabled === false} this.trigger.enabled === false}
@click=${this._toggleSidebar} @click=${this._toggleSidebar}
.selected=${this._selected} .selected=${this._selected}
.sortSelected=${this.sortSelected}
>${this._selected >${this._selected
? "selected" ? "selected"
: nothing}${this._renderRow()}</ha-automation-row : nothing}${this._renderRow()}</ha-automation-row
@@ -500,9 +505,11 @@ export default class HaAutomationTriggerRow extends LitElement {
this._selected = true; this._selected = true;
if (this.narrow) { if (this.narrow) {
this.scrollIntoView({ requestAnimationFrame(() => {
block: "start", this.scrollIntoView({
behavior: "smooth", block: "start",
behavior: "smooth",
});
}); });
} }
} }
@@ -670,6 +677,10 @@ export default class HaAutomationTriggerRow extends LitElement {
return this._selected; return this._selected;
} }
public focus() {
this._automationRowElement?.focus();
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
rowStyles, rowStyles,

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

@@ -47,6 +47,8 @@ export default class HaAutomationTrigger extends LitElement {
@state() private _showReorder = false; @state() private _showReorder = false;
@state() private _rowSortSelected?: number;
@state() @state()
@storage({ @storage({
key: "automationClipboard", key: "automationClipboard",
@@ -90,7 +92,7 @@ export default class HaAutomationTrigger extends LitElement {
@item-removed=${this._triggerRemoved} @item-removed=${this._triggerRemoved}
@item-cloned=${this._triggerCloned} @item-cloned=${this._triggerCloned}
> >
<div class="rows"> <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
${repeat( ${repeat(
this.triggers, this.triggers,
(trigger) => this._getKey(trigger), (trigger) => this._getKey(trigger),
@@ -110,10 +112,20 @@ export default class HaAutomationTrigger extends LitElement {
.narrow=${this.narrow} .narrow=${this.narrow}
?highlight=${this.highlightedTriggers?.includes(trg)} ?highlight=${this.highlightedTriggers?.includes(trg)}
.optionsInSidebar=${this.optionsInSidebar} .optionsInSidebar=${this.optionsInSidebar}
.sortSelected=${this._rowSortSelected === idx}
@stop-sort-selection=${this._stopSortSelection}
> >
${this._showReorder && !this.disabled ${this._showReorder && !this.disabled
? html` ? html`
<div class="handle" slot="icons"> <div
tabindex="0"
class="handle ${this._rowSortSelected === idx
? "active"
: ""}"
slot="icons"
@keydown=${this._handleDragKeydown}
.index=${idx}
>
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
</div> </div>
` `
@@ -226,15 +238,27 @@ export default class HaAutomationTrigger extends LitElement {
private _moveUp(ev) { private _moveUp(ev) {
ev.stopPropagation(); ev.stopPropagation();
const index = (ev.target as any).index; const index = (ev.target as any).index;
const newIndex = index - 1; if (!(ev.target as HaAutomationTriggerRow).first) {
this._move(index, newIndex); const newIndex = index - 1;
this._move(index, newIndex);
if (this._rowSortSelected === index) {
this._rowSortSelected = newIndex;
}
ev.target.focus();
}
} }
private _moveDown(ev) { private _moveDown(ev) {
ev.stopPropagation(); ev.stopPropagation();
const index = (ev.target as any).index; const index = (ev.target as any).index;
const newIndex = index + 1; if (!(ev.target as HaAutomationTriggerRow).last) {
this._move(index, newIndex); const newIndex = index + 1;
this._move(index, newIndex);
if (this._rowSortSelected === index) {
this._rowSortSelected = newIndex;
}
ev.target.focus();
}
} }
private _move(oldIndex: number, newIndex: number) { private _move(oldIndex: number, newIndex: number) {
@@ -330,6 +354,20 @@ export default class HaAutomationTrigger extends LitElement {
}); });
} }
private _handleDragKeydown(ev: KeyboardEvent) {
if (ev.key === "Enter" || ev.key === " ") {
ev.stopPropagation();
this._rowSortSelected =
this._rowSortSelected === undefined
? (ev.target as any).index
: undefined;
}
}
private _stopSortSelection() {
this._rowSortSelected = undefined;
}
static styles = [ static styles = [
automationRowsStyles, automationRowsStyles,
css` css`

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

@@ -1,8 +1,11 @@
import { mdiDelete } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } 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 { 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 type { LocalizeKeys } from "../../../common/translations/localize"; import type { LocalizeKeys } from "../../../common/translations/localize";
import "../../../components/ha-automation-row"; import "../../../components/ha-automation-row";
import "../../../components/ha-card"; import "../../../components/ha-card";
@@ -61,6 +64,29 @@ export default class HaScriptFieldRow extends LitElement {
<h3 slot="header">${this.key}</h3> <h3 slot="header">${this.key}</h3>
<slot name="icons" slot="icons"></slot> <slot name="icons" slot="icons"></slot>
<ha-md-button-menu
quick
slot="icons"
@click=${preventDefaultStopPropagation}
@keydown=${stopPropagation}
@closed=${stopPropagation}
positioning="fixed"
anchor-corner="end-end"
menu-corner="start-end"
>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this._onDelete}
.disabled=${this.disabled}
class="warning"
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
</ha-md-menu-item>
</ha-md-button-menu>
</ha-automation-row> </ha-automation-row>
</ha-card> </ha-card>
<div <div
@@ -221,9 +247,11 @@ export default class HaScriptFieldRow extends LitElement {
} satisfies ScriptFieldSidebarConfig); } satisfies ScriptFieldSidebarConfig);
if (this.narrow) { if (this.narrow) {
this.scrollIntoView({ requestAnimationFrame(() => {
block: "start", this.scrollIntoView({
behavior: "smooth", block: "start",
behavior: "smooth",
});
}); });
} }
} }