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

Add indent style to automation action, condition, and option editors (#26709)

Browse Source
This commit is contained in:
Wendelin
2025-08-26 18:10:17 +02:00
committed by GitHub
parent 492a73e345
commit d75c84750d
6 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 {

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

@@ -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;

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

@@ -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);

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

@@ -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%
);
}
`;

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

@@ -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);
}
`,
];
}

9
src/panels/config/script/ha-script-field-selector-editor.ts
View File

@@ -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);
}
`,
];