From d75c84750d7aaaf19ad1f7e65a3f823246fccf6f Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Tue, 26 Aug 2025 18:10:17 +0200 Subject: [PATCH] Add indent style to automation action, condition, and option editors (#26709) --- .../action/ha-automation-action-editor.ts | 4 +-- .../ha-automation-condition-editor.ts | 3 ++- .../option/ha-automation-option-row.ts | 3 ++- src/panels/config/automation/styles.ts | 25 ++++++++++++++----- .../config/script/ha-script-field-row.ts | 14 ++--------- .../script/ha-script-field-selector-editor.ts | 9 ++----- 6 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action-editor.ts b/src/panels/config/automation/action/ha-automation-action-editor.ts index ee352f80a8..926733e5de 100644 --- a/src/panels/config/automation/action/ha-automation-action-editor.ts +++ b/src/panels/config/automation/action/ha-automation-action-editor.ts @@ -9,7 +9,7 @@ import { COLLAPSIBLE_ACTION_ELEMENTS } from "../../../../data/action"; import { migrateAutomationAction, type Action } from "../../../../data/script"; import type { HomeAssistant } from "../../../../types"; import "../ha-automation-editor-warning"; -import { editorStyles } from "../styles"; +import { editorStyles, indentStyle } from "../styles"; import { getAutomationActionType, type ActionElement, @@ -118,7 +118,7 @@ export default class HaAutomationActionEditor extends LitElement { this._collapsibleElement?.collapseAll?.(); } - static styles = editorStyles; + static styles = [editorStyles, indentStyle]; } declare global { 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 88d89b8acc..038ff82129 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts @@ -11,7 +11,7 @@ import { expandConditionWithShorthand } from "../../../../data/automation"; import { COLLAPSIBLE_CONDITION_ELEMENTS } from "../../../../data/condition"; import type { HomeAssistant } from "../../../../types"; import "../ha-automation-editor-warning"; -import { editorStyles } from "../styles"; +import { editorStyles, indentStyle } from "../styles"; import type { ConditionElement } from "./ha-automation-condition-row"; @customElement("ha-automation-condition-editor") @@ -123,6 +123,7 @@ export default class HaAutomationConditionEditor extends LitElement { static styles = [ editorStyles, + indentStyle, css` :host([action]) .card-content { padding: 0; diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts index cafa3cdee1..0be8c91368 100644 --- a/src/panels/config/automation/option/ha-automation-option-row.ts +++ b/src/panels/config/automation/option/ha-automation-option-row.ts @@ -40,7 +40,7 @@ import "../action/ha-automation-action"; import type HaAutomationAction from "../action/ha-automation-action"; import "../condition/ha-automation-condition"; import type HaAutomationCondition from "../condition/ha-automation-condition"; -import { editorStyles, rowStyles } from "../styles"; +import { editorStyles, indentStyle, rowStyles } from "../styles"; @customElement("ha-automation-option-row") export default class HaAutomationOptionRow extends LitElement { @@ -413,6 +413,7 @@ export default class HaAutomationOptionRow extends LitElement { return [ rowStyles, editorStyles, + indentStyle, css` li[role="separator"] { border-bottom-color: var(--divider-color); diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 61f91d3fc0..921bf1681c 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -62,18 +62,31 @@ export const editorStyles = css` border-top: 1px solid var(--divider-color); border-bottom: 1px solid var(--divider-color); } - .card-content.indent { +`; + +export const indentStyle = css` + .card-content.indent, + .selector-row, + :host([indent]) ha-form { margin-left: 12px; - margin-right: -4px; padding: 12px 24px 16px 16px; border-left: 2px solid var(--ha-color-border-neutral-quiet); + border-bottom: 2px solid var(--ha-color-border-neutral-quiet); + border-radius: 0; + border-bottom-left-radius: var(--ha-border-radius-lg); } .card-content.indent.selected, - :host([selected]) .card-content.indent { + :host([selected]) .card-content.indent, + .selector-row.parent-selected, + :host([selected]) ha-form { border-color: var(--primary-color); - background-color: var(--ha-color-fill-primary-quiet-resting); - border-top-right-radius: var(--ha-border-radius-xl); - border-bottom-right-radius: var(--ha-border-radius-xl); + background: var(--ha-color-fill-primary-quiet-resting); + background: linear-gradient( + to right, + var(--ha-color-fill-primary-quiet-resting) 0%, + var(--ha-color-fill-primary-quiet-resting) 80%, + rgba(var(--rgb-primary-color), 0) 100% + ); } `; diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index 63af165a76..4c69022565 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -15,6 +15,7 @@ import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/select import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; +import { indentStyle } from "../automation/styles"; import "./ha-script-field-selector-editor"; import type HaScriptFieldSelectorEditor from "./ha-script-field-selector-editor"; @@ -254,6 +255,7 @@ export default class HaScriptFieldRow extends LitElement { static get styles(): CSSResultGroup { return [ haStyle, + indentStyle, css` ha-button-menu, ha-icon-button { @@ -322,18 +324,6 @@ export default class HaScriptFieldRow extends LitElement { border-color: var(--state-inactive-color); box-shadow: var(--shadow-default), var(--shadow-focus); } - .selector-row { - margin-left: 12px; - padding: 12px 4px 16px 16px; - margin-right: -4px; - border-left: 2px solid var(--ha-color-border-neutral-quiet); - } - .selector-row.parent-selected { - border-color: var(--primary-color); - background-color: var(--ha-color-fill-primary-quiet-resting); - border-top-right-radius: var(--ha-border-radius-xl); - border-bottom-right-radius: var(--ha-border-radius-xl); - } `, ]; } diff --git a/src/panels/config/script/ha-script-field-selector-editor.ts b/src/panels/config/script/ha-script-field-selector-editor.ts index d29ee9829a..e33b64fc09 100644 --- a/src/panels/config/script/ha-script-field-selector-editor.ts +++ b/src/panels/config/script/ha-script-field-selector-editor.ts @@ -16,6 +16,7 @@ import type { Field } from "../../../data/script"; import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; +import { indentStyle } from "../automation/styles"; @customElement("ha-script-field-selector-editor") export default class HaScriptFieldSelectorEditor extends LitElement { @@ -183,19 +184,13 @@ export default class HaScriptFieldSelectorEditor extends LitElement { static get styles(): CSSResultGroup { return [ haStyle, + indentStyle, css` :host([indent]) ha-form { display: block; margin-left: 12px; padding: 12px 20px 16px 16px; margin-right: -4px; - border-left: 2px solid var(--ha-color-border-neutral-quiet); - } - :host([selected]) ha-form { - border-color: var(--primary-color); - background-color: var(--ha-color-fill-primary-quiet-resting); - border-top-right-radius: var(--ha-border-radius-xl); - border-bottom-right-radius: var(--ha-border-radius-xl); } `, ];