diff --git a/src/components/ha-selector/ha-selector-action.ts b/src/components/ha-selector/ha-selector-action.ts index 29c6b92804..b4f437c8b0 100644 --- a/src/components/ha-selector/ha-selector-action.ts +++ b/src/components/ha-selector/ha-selector-action.ts @@ -89,12 +89,12 @@ export class HaActionSelector extends SubscribeMixin(LitElement) { static styles = css` ha-automation-action { display: block; - margin-bottom: 16px; } label { display: block; margin-bottom: 4px; font-weight: var(--ha-font-weight-medium); + color: var(--secondary-text-color); } `; } diff --git a/src/components/ha-selector/ha-selector-condition.ts b/src/components/ha-selector/ha-selector-condition.ts index 9b0814114c..c725edcbd8 100644 --- a/src/components/ha-selector/ha-selector-condition.ts +++ b/src/components/ha-selector/ha-selector-condition.ts @@ -53,6 +53,7 @@ export class HaConditionSelector extends LitElement { display: block; margin-bottom: 4px; font-weight: var(--ha-font-weight-medium); + color: var(--secondary-text-color); } `; } diff --git a/src/data/automation.ts b/src/data/automation.ts index ab9ce124d8..00e69fadff 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -607,6 +607,7 @@ export interface OptionSidebarConfig extends BaseSidebarConfig { close: () => void; rename: () => void; duplicate: () => void; + defaultOption?: boolean; } export interface ScriptFieldSidebarConfig extends BaseSidebarConfig { diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index 193d2519dd..93cae7d8c5 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -24,6 +24,7 @@ import { VIRTUAL_ACTIONS, showAddAutomationElementDialog, } from "../show-add-automation-element-dialog"; +import { automationRowsStyles } from "../styles"; import type HaAutomationActionRow from "./ha-automation-action-row"; import { getAutomationActionType } from "./ha-automation-action-row"; @@ -89,7 +90,7 @@ export default class HaAutomationAction extends LitElement { @item-added=${this._actionAdded} @item-removed=${this._actionRemoved} > -
+
${repeat( this.actions, (action) => this._getKey(action), @@ -335,44 +336,14 @@ export default class HaAutomationAction extends LitElement { }); } - static styles = css` - .actions { - padding: 16px 0 16px 16px; - margin: -16px; - display: flex; - flex-direction: column; - gap: 16px; - } - :host([root]) .actions { - padding-right: 8px; - } - .sortable-ghost { - background: none; - border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); - } - .sortable-drag { - background: none; - } - ha-automation-action-row { - display: block; - scroll-margin-top: 48px; - } - .handle { - padding: 12px; - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - } - .handle ha-svg-icon { - pointer-events: none; - height: 24px; - } - .buttons { - display: flex; - flex-wrap: wrap; - gap: 8px; - order: 1; - } - `; + static styles = [ + automationRowsStyles, + css` + :host([root]) .rows { + padding-right: 8px; + } + `, + ]; } declare global { diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts index 89e961fa03..2a252e68c7 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts @@ -1,15 +1,16 @@ -import { type CSSResultGroup, LitElement, css, html } from "lit"; +import { type CSSResultGroup, LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { ensureArray } from "../../../../../common/array/ensure-array"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-button"; import type { Action, ChooseAction, Option } from "../../../../../data/script"; import { haStyle } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; import "../../option/ha-automation-option"; import type HaAutomationOption from "../../option/ha-automation-option"; +import "../../option/ha-automation-option-row"; +import type HaAutomationOptionRow from "../../option/ha-automation-option-row"; +import { indentStyle } from "../../styles"; import "../ha-automation-action"; -import type HaAutomationAction from "../ha-automation-action"; import type { ActionElement } from "../ha-automation-action-row"; @customElement("ha-automation-action-choose") @@ -28,7 +29,8 @@ export class HaChooseAction extends LitElement implements ActionElement { @query("ha-automation-option") private _optionElement?: HaAutomationOption; - @query("ha-automation-action") private _actionElement?: HaAutomationAction; + @query("ha-automation-option-row") + private _defaultOptionRowElement?: HaAutomationOptionRow; public static get defaultConfig(): ChooseAction { return { choose: [{ conditions: [], sequence: [] }] }; @@ -47,42 +49,29 @@ export class HaChooseAction extends LitElement implements ActionElement { .hass=${this.hass} .narrow=${this.narrow} .optionsInSidebar=${this.indent} + .showDefaultActions=${this._showDefault || !!action.default} + @show-default-actions=${this._addDefault} > ${this._showDefault || action.default ? html` -

- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.default" - )}: -

- + @value-changed=${this._defaultChanged} + > ` - : html` -
- -
- `} + : nothing} `; } - private _addDefault() { + private async _addDefault() { this._showDefault = true; + await this._defaultOptionRowElement?.updateComplete; + this._defaultOptionRowElement?.expand(); } private _optionsChanged(ev: CustomEvent) { @@ -112,20 +101,26 @@ export class HaChooseAction extends LitElement implements ActionElement { public expandAll() { this._optionElement?.expandAll(); - this._actionElement?.expandAll(); + this._defaultOptionRowElement?.expandAll(); } public collapseAll() { this._optionElement?.collapseAll(); - this._actionElement?.collapseAll(); + this._defaultOptionRowElement?.collapseAll(); } static get styles(): CSSResultGroup { return [ haStyle, + indentStyle, css` - .link-button-row { - padding: 14px 14px 0 14px; + ha-automation-option-row { + display: block; + margin-top: 24px; + } + h3 { + font-size: inherit; + font-weight: inherit; } `, ]; diff --git a/src/panels/config/automation/action/types/ha-automation-action-if.ts b/src/panels/config/automation/action/types/ha-automation-action-if.ts index 0443540b0f..61df34db97 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-if.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-if.ts @@ -1,12 +1,6 @@ import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; -import { - customElement, - property, - query, - queryAll, - state, -} from "lit/decorators"; +import { customElement, property, query, queryAll } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-textfield"; import type { Action, IfAction } from "../../../../../data/script"; @@ -30,8 +24,6 @@ export class HaIfAction extends LitElement implements ActionElement { @property({ type: Boolean }) public indent = false; - @state() private _showElse = false; - @query("ha-automation-condition") private _conditionElement?: HaAutomationCondition; @@ -49,11 +41,11 @@ export class HaIfAction extends LitElement implements ActionElement { const action = this.action; return html` -

+

${this.hass.localize( "ui.panel.config.automation.editor.actions.type.if.if" - )}*: -

+ )}: + -

+

${this.hass.localize( "ui.panel.config.automation.editor.actions.type.if.then" - )}*: -

+ )}: + - ${this._showElse || action.else - ? html` -

- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.type.if.else" - )}: -

- - ` - : html`
- -
`} +

+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.if.else" + )}: +

+ `; } - private _addElse() { - this._showElse = true; - } - private _ifChanged(ev: CustomEvent) { ev.stopPropagation(); const value = ev.detail.value as Condition[]; @@ -134,7 +108,6 @@ export class HaIfAction extends LitElement implements ActionElement { private _elseChanged(ev: CustomEvent) { ev.stopPropagation(); - this._showElse = true; const elseAction = ev.detail.value as Action[]; const newValue: IfAction = { ...this.action, @@ -160,8 +133,12 @@ export class HaIfAction extends LitElement implements ActionElement { return [ haStyle, css` - .link-button-row { - padding: 14px; + h4 { + color: var(--secondary-text-color); + margin-bottom: 8px; + } + h4:first-child { + margin-top: 0; } `, ]; diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts index 038ff82129..5fbeb8ac5b 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts @@ -133,6 +133,7 @@ export default class HaAutomationConditionEditor extends LitElement { margin-right: 0; padding: 0; border-left: none; + border-bottom: none; } `, ]; diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index 50c14d6117..337bcf3889 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -1,7 +1,7 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; import type { PropertyValues } from "lit"; -import { LitElement, css, html, nothing } from "lit"; +import { css, html, LitElement, nothing } from "lit"; import { customElement, property, queryAll, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import { storage } from "../../../../common/decorators/storage"; @@ -22,6 +22,7 @@ import { PASTE_VALUE, showAddAutomationElementDialog, } from "../show-add-automation-element-dialog"; +import { automationRowsStyles } from "../styles"; import "./ha-automation-condition-row"; import type HaAutomationConditionRow from "./ha-automation-condition-row"; @@ -151,7 +152,7 @@ export default class HaAutomationCondition extends LitElement { @item-added=${this._conditionAdded} @item-removed=${this._conditionRemoved} > -
+
${repeat( this.conditions.filter((c) => typeof c === "object"), (condition) => this._getKey(condition), @@ -354,44 +355,14 @@ export default class HaAutomationCondition extends LitElement { }); } - static styles = css` - .conditions { - padding: 16px 0 16px 16px; - margin: -16px; - display: flex; - flex-direction: column; - gap: 16px; - } - :host([root]) .conditions { - padding-right: 8px; - } - .sortable-ghost { - background: none; - border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); - } - .sortable-drag { - background: none; - } - ha-automation-condition-row { - display: block; - scroll-margin-top: 48px; - } - .handle { - padding: 12px; - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - } - .handle ha-svg-icon { - pointer-events: none; - height: 24px; - } - .buttons { - display: flex; - flex-wrap: wrap; - gap: 8px; - order: 1; - } - `; + static styles = [ + automationRowsStyles, + css` + :host([root]) .rows { + padding-right: 8px; + } + `, + ]; } declare global { diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index 36b5188740..360a2b9600 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -50,7 +50,7 @@ import "./condition/ha-automation-condition"; import type HaAutomationCondition from "./condition/ha-automation-condition"; import "./ha-automation-sidebar"; import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace"; -import { saveFabStyles } from "./styles"; +import { manualEditorStyles, saveFabStyles } from "./styles"; import "./trigger/ha-automation-trigger"; const baseConfigStruct = object({ @@ -266,7 +266,12 @@ export class HaManualAutomationEditor extends LitElement { protected render() { return html` -
+
${this._renderContent()}
(this.option.conditions); + const conditions = ensureArray(this.option!.conditions); if (!conditions || conditions.length === 0) { return this.hass.localize( "ui.panel.config.automation.editor.actions.type.choose.no_conditions" @@ -109,89 +111,102 @@ export default class HaAutomationOptionRow extends LitElement { private _renderRow() { return html`

- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.option", - { number: this.index + 1 } - )}: - ${this.option.alias || (this._expanded ? "" : this._getDescription())} + ${this.option + ? `${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.option", + { number: this.index + 1 } + )}: ${this.option.alias || (this._expanded ? "" : this._getDescription())}` + : this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.default" + )}

- - - - ${!this.optionsInSidebar - ? html` - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.rename" - )} - - - - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.duplicate" - )} - - - ` - : nothing} - - - ${this.hass.localize("ui.panel.config.automation.editor.move_up")} - - - - - ${this.hass.localize("ui.panel.config.automation.editor.move_down")} - - - - ${!this.optionsInSidebar - ? html` - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.remove_option" - )} - - ` - : nothing} - + + ${!this.optionsInSidebar + ? html` + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.rename" + )} + + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + + + ` + : nothing} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.move_up" + )} + + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.move_down" + )} + + + + ${!this.optionsInSidebar + ? html` + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.remove_option" + )} + + ` + : nothing} + + ` + : nothing} ${!this.optionsInSidebar ? this._renderContent() : nothing} `; } @@ -202,29 +217,39 @@ export default class HaAutomationOptionRow extends LitElement { "card-content": true, indent: this.optionsInSidebar, selected: this._selected, - hidden: this._collapsed, + hidden: this.optionsInSidebar && this._collapsed, })} > -

- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.conditions" - )}: -

- (this.option.conditions)} - .disabled=${this.disabled} - .hass=${this.hass} - .narrow=${this.narrow} - @value-changed=${this._conditionChanged} - .optionsInSidebar=${this.optionsInSidebar} - > -

+ ${this.option + ? html` +

+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.conditions" + )}: +

+ ( + this.option.conditions + )} + .disabled=${this.disabled} + .hass=${this.hass} + .narrow=${this.narrow} + @value-changed=${this._conditionChanged} + .optionsInSidebar=${this.optionsInSidebar} + > + ` + : nothing} +

${this.hass.localize( "ui.panel.config.automation.editor.actions.type.choose.sequence" )}:

@@ -307,7 +332,7 @@ export default class HaAutomationOptionRow extends LitElement { ), inputType: "string", placeholder: capitalizeFirstLetter(this._getDescription()), - defaultValue: this.option.alias, + defaultValue: this.option!.alias, confirmText: this.hass.localize("ui.common.submit"), }); if (alias !== null) { @@ -333,6 +358,9 @@ export default class HaAutomationOptionRow extends LitElement { } private _actionChanged(ev: CustomEvent) { + if (this.defaultActions) { + return; + } ev.stopPropagation(); const actions = ev.detail.value as Action[]; const value = { ...this.option, sequence: actions }; @@ -364,6 +392,7 @@ export default class HaAutomationOptionRow extends LitElement { toggleYamlMode: () => false, // no yaml mode for options delete: this._removeOption, duplicate: this._duplicateOption, + defaultOption: !!this.defaultActions, } satisfies OptionSidebarConfig); this._selected = true; this._collapsed = false; @@ -418,12 +447,14 @@ export default class HaAutomationOptionRow extends LitElement { li[role="separator"] { border-bottom-color: var(--divider-color); } - h4.conditions { - margin-top: 0; + h4 { + color: var(--ha-color-text-secondary); + } + h4 { margin-bottom: 8px; } - h4.actions { - margin-bottom: 8px; + h4.top { + margin-top: 0; } `, ]; diff --git a/src/panels/config/automation/option/ha-automation-option.ts b/src/panels/config/automation/option/ha-automation-option.ts index f989000301..48bc6f0743 100644 --- a/src/panels/config/automation/option/ha-automation-option.ts +++ b/src/panels/config/automation/option/ha-automation-option.ts @@ -1,7 +1,7 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; import type { PropertyValues } from "lit"; -import { LitElement, css, html, nothing } from "lit"; +import { LitElement, html, nothing } from "lit"; import { customElement, property, queryAll, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import { storage } from "../../../../common/decorators/storage"; @@ -14,6 +14,7 @@ import "../../../../components/ha-svg-icon"; import type { AutomationClipboard } from "../../../../data/automation"; import type { Option } from "../../../../data/script"; import type { HomeAssistant } from "../../../../types"; +import { automationRowsStyles } from "../styles"; import "./ha-automation-option-row"; import type HaAutomationOptionRow from "./ha-automation-option-row"; @@ -30,6 +31,9 @@ export default class HaAutomationOption extends LitElement { @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar = false; + @property({ type: Boolean, attribute: "show-default" }) + public showDefaultActions = false; + @state() private _showReorder = false; @state() @@ -75,7 +79,7 @@ export default class HaAutomationOption extends LitElement { @item-added=${this._optionAdded} @item-removed=${this._optionRemoved} > -
+
${repeat( this.options, (option) => this._getKey(option), @@ -117,6 +121,19 @@ export default class HaAutomationOption extends LitElement { "ui.panel.config.automation.editor.actions.type.choose.add_option" )} + ${!this.showDefaultActions + ? html` + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.add_default" + )} + ` + : nothing}
@@ -248,45 +265,19 @@ export default class HaAutomationOption extends LitElement { }); } - static styles = css` - .options { - padding: 16px 0 16px 16px; - margin: -16px; - display: flex; - flex-direction: column; - gap: 16px; - } - .sortable-ghost { - background: none; - border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); - } - .sortable-drag { - background: none; - } - ha-automation-option-row { - display: block; - scroll-margin-top: 48px; - } - .handle { - padding: 12px; - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - } - .handle ha-svg-icon { - pointer-events: none; - height: 24px; - } - .buttons { - display: flex; - flex-wrap: wrap; - gap: 8px; - order: 1; - } - `; + private _showDefaultActions = () => { + fireEvent(this, "show-default-actions"); + }; + + static styles = automationRowsStyles; } declare global { interface HTMLElementTagNameMap { "ha-automation-option": HaAutomationOption; } + + interface HASSDomEvents { + "show-default-actions": undefined; + } } 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 d992fd555b..25f84f19db 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts @@ -9,7 +9,7 @@ import { mdiRenameBox, mdiStopCircleOutline, } from "@mdi/js"; -import { css, html, LitElement } from "lit"; +import { html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { handleStructError } from "../../../../common/structs/handle-errors"; @@ -23,6 +23,7 @@ import type { HomeAssistant } from "../../../../types"; import type HaAutomationConditionEditor from "../action/ha-automation-action-editor"; import { getAutomationActionType } from "../action/ha-automation-action-row"; import { getRepeatType } from "../action/types/ha-automation-action-repeat"; +import { sidebarEditorStyles } from "../styles"; import "../trigger/ha-automation-trigger-editor"; import "./ha-automation-sidebar-card"; @@ -223,14 +224,7 @@ export default class HaAutomationSidebarAction extends LitElement { fireEvent(this, "toggle-yaml-mode"); }; - static styles = css` - .sidebar-editor { - padding-top: 64px; - } - .description { - padding-top: 16px; - } - `; + static styles = sidebarEditorStyles; } declare global { 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 41de374802..b0c41fefdd 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts @@ -9,7 +9,7 @@ import { mdiRenameBox, mdiStopCircleOutline, } from "@mdi/js"; -import { css, html, LitElement } from "lit"; +import { html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { handleStructError } from "../../../../common/structs/handle-errors"; @@ -18,6 +18,7 @@ import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition"; import type { HomeAssistant } from "../../../../types"; import "../condition/ha-automation-condition-editor"; import type HaAutomationConditionEditor from "../condition/ha-automation-condition-editor"; +import { sidebarEditorStyles } from "../styles"; import "./ha-automation-sidebar-card"; @customElement("ha-automation-sidebar-condition") @@ -211,14 +212,7 @@ export default class HaAutomationSidebarCondition extends LitElement { fireEvent(this, "toggle-yaml-mode"); }; - static styles = css` - .sidebar-editor { - padding-top: 64px; - } - .description { - padding-top: 16px; - } - `; + static styles = sidebarEditorStyles; } declare global { 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 271e4e7eb9..b4e7320d04 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts @@ -1,9 +1,10 @@ import { mdiContentDuplicate, mdiDelete, mdiRenameBox } from "@mdi/js"; -import { css, html, LitElement } from "lit"; +import { html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import type { OptionSidebarConfig } from "../../../../data/automation"; import type { HomeAssistant } from "../../../../types"; import type HaAutomationConditionEditor from "../action/ha-automation-action-editor"; +import { sidebarEditorStyles } from "../styles"; import "./ha-automation-sidebar-card"; @customElement("ha-automation-sidebar-option") @@ -29,11 +30,11 @@ export default class HaAutomationSidebarOption extends LitElement { ); const title = this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.option_label" + `ui.panel.config.automation.editor.actions.type.choose.${this.config.defaultOption ? "default_" : ""}option_label` ); const description = this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.option_description" + `ui.panel.config.automation.editor.actions.type.choose.${this.config.defaultOption ? "default_" : ""}option_description` ); return html` ${title} ${subtitle} - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.rename" - )} - - + ${this.config.defaultOption + ? html`` + : html` + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.rename" + )} + + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.remove_option" + )} + + + `} - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.duplicate" - )} - - - - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.remove_option" - )} - -
${description}
`; } - static styles = css` - .sidebar-editor { - padding-top: 64px; - } - .description { - padding-top: 16px; - } - `; + static styles = sidebarEditorStyles; } declare global { 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 f627ccf725..b9bb622d98 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 @@ -1,5 +1,5 @@ import { mdiDelete, mdiPlaylistEdit } from "@mdi/js"; -import { css, html, LitElement } from "lit"; +import { html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import type { LocalizeKeys } from "../../../../common/translations/localize"; @@ -7,6 +7,7 @@ import type { ScriptFieldSidebarConfig } from "../../../../data/automation"; import type { HomeAssistant } from "../../../../types"; import "../../script/ha-script-field-selector-editor"; import type HaAutomationConditionEditor from "../action/ha-automation-action-editor"; +import { sidebarEditorStyles } from "../styles"; import "./ha-automation-sidebar-card"; @customElement("ha-automation-sidebar-script-field-selector") @@ -119,11 +120,7 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement { fireEvent(this, "toggle-yaml-mode"); }; - static styles = css` - .sidebar-editor { - padding-top: 64px; - } - `; + static styles = sidebarEditorStyles; } declare global { 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 074f3a80ae..d316bbb010 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 @@ -1,11 +1,12 @@ import { mdiDelete, mdiPlaylistEdit } from "@mdi/js"; -import { css, html, LitElement } from "lit"; +import { html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import type { ScriptFieldSidebarConfig } from "../../../../data/automation"; import type { HomeAssistant } from "../../../../types"; import "../../script/ha-script-field-editor"; import type HaAutomationConditionEditor from "../action/ha-automation-action-editor"; +import { sidebarEditorStyles } from "../styles"; import "./ha-automation-sidebar-card"; @customElement("ha-automation-sidebar-script-field") @@ -113,11 +114,7 @@ export default class HaAutomationSidebarScriptField extends LitElement { fireEvent(this, "toggle-yaml-mode"); }; - static styles = css` - .sidebar-editor { - padding-top: 64px; - } - `; + static styles = sidebarEditorStyles; } declare global { 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 e481bd18bc..3cf6c617fa 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts @@ -9,13 +9,14 @@ import { mdiRenameBox, mdiStopCircleOutline, } from "@mdi/js"; -import { css, html, LitElement, nothing } from "lit"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { handleStructError } from "../../../../common/structs/handle-errors"; import type { TriggerSidebarConfig } from "../../../../data/automation"; import { isTriggerList } from "../../../../data/trigger"; import type { HomeAssistant } from "../../../../types"; +import { sidebarEditorStyles } from "../styles"; import "../trigger/ha-automation-trigger-editor"; import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor"; import "./ha-automation-sidebar-card"; @@ -227,11 +228,7 @@ export default class HaAutomationSidebarTrigger extends LitElement { this._requestShowId = true; }; - static styles = css` - .sidebar-editor { - padding-top: 64px; - } - `; + static styles = sidebarEditorStyles; } declare global { diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 921bf1681c..667572edf0 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -104,3 +104,133 @@ export const saveFabStyles = css` bottom: 16px; } `; + +export const manualEditorStyles = css` + :host { + display: block; + } + + .split-view { + display: flex; + flex-direction: row; + height: 100%; + position: relative; + gap: 16px; + } + + .split-view.sidebar-hidden { + gap: 0; + } + + .content-wrapper { + position: relative; + flex: 6; + } + + .content { + padding: 32px 16px 64px 0; + height: calc(100vh - 153px); + height: calc(100dvh - 153px); + overflow-y: auto; + overflow-x: hidden; + } + + .sidebar { + padding: 12px 0; + flex: 4; + height: calc(100vh - 81px); + height: calc(100dvh - 81px); + width: 40%; + } + .split-view.sidebar-hidden .sidebar { + border-color: transparent; + border-width: 0; + overflow: hidden; + flex: 0; + visibility: hidden; + } + + .sidebar.overlay { + position: fixed; + bottom: 8px; + right: 8px; + height: calc(100% - 70px); + padding: 0; + z-index: 5; + box-shadow: -8px 0 16px rgba(0, 0, 0, 0.2); + } + + .sidebar.overlay.rtl { + right: unset; + left: 8px; + } + + @media all and (max-width: 870px) { + .split-view { + gap: 0; + margin-right: -8px; + } + .sidebar { + height: 0; + width: 0; + flex: 0; + } + } + + .split-view.sidebar-hidden .sidebar.overlay { + width: 0; + } + .description { + margin: 0; + } + .header a { + color: var(--secondary-text-color); + } +`; + +export const automationRowsStyles = css` + .rows { + padding: 16px 0 16px 16px; + margin: -16px; + margin-right: -20px; + display: flex; + flex-direction: column; + gap: 16px; + } + .sortable-ghost { + background: none; + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); + } + .sortable-drag { + background: none; + } + ha-automation-action-row { + display: block; + scroll-margin-top: 48px; + } + .handle { + padding: 12px; + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + } + .handle ha-svg-icon { + pointer-events: none; + height: 24px; + } + .buttons { + display: flex; + flex-wrap: wrap; + gap: 8px; + order: 1; + } +`; + +export const sidebarEditorStyles = css` + .sidebar-editor { + display: block; + padding-top: 16px; + } + .description { + padding-top: 16px; + } +`; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index 8066bcd1ea..cb4be9026f 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -1,7 +1,7 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; import type { PropertyValues } from "lit"; -import { LitElement, css, html, nothing } from "lit"; +import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import { storage } from "../../../../common/decorators/storage"; @@ -23,6 +23,7 @@ import { PASTE_VALUE, showAddAutomationElementDialog, } from "../show-add-automation-element-dialog"; +import { automationRowsStyles } from "../styles"; import "./ha-automation-trigger-row"; import type HaAutomationTriggerRow from "./ha-automation-trigger-row"; @@ -85,7 +86,7 @@ export default class HaAutomationTrigger extends LitElement { @item-added=${this._triggerAdded} @item-removed=${this._triggerRemoved} > -
+
${repeat( this.triggers, (trigger) => this._getKey(trigger), @@ -195,10 +196,11 @@ export default class HaAutomationTrigger extends LitElement { } public expandAll() { - const rows = this.shadowRoot!.querySelectorAll( - "ha-automation-trigger-row" - )!; - rows.forEach((row) => { + const triggerRows = + this.shadowRoot!.querySelectorAll( + "ha-automation-trigger-row" + )!; + triggerRows.forEach((row) => { row.expand(); }); } @@ -300,44 +302,14 @@ export default class HaAutomationTrigger extends LitElement { }); } - static styles = css` - .triggers { - padding: 16px 0 16px 16px; - margin: -16px; - display: flex; - flex-direction: column; - gap: 16px; - } - :host([root]) .triggers { - padding-right: 8px; - } - .sortable-ghost { - background: none; - border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); - } - .sortable-drag { - background: none; - } - ha-automation-trigger-row { - display: block; - scroll-margin-top: 48px; - } - .handle { - padding: 12px; - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - } - .handle ha-svg-icon { - pointer-events: none; - height: 24px; - } - .buttons { - display: flex; - flex-wrap: wrap; - gap: 8px; - order: 1; - } - `; + static styles = [ + automationRowsStyles, + css` + :host([root]) .rows { + padding-right: 8px; + } + `, + ]; } declare global { diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index 1f610a9807..c699b8f11a 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -39,7 +39,7 @@ import "../automation/action/ha-automation-action"; import type HaAutomationAction from "../automation/action/ha-automation-action"; import "../automation/ha-automation-sidebar"; import { showPasteReplaceDialog } from "../automation/paste-replace-dialog/show-dialog-paste-replace"; -import { saveFabStyles } from "../automation/styles"; +import { manualEditorStyles, saveFabStyles } from "../automation/styles"; import "./ha-script-fields"; import type HaScriptFields from "./ha-script-fields"; @@ -194,7 +194,12 @@ export class HaManualScriptEditor extends LitElement { protected render() { return html` -
+
${this._renderContent()}