From 33e0c691c7a6a3bd7e94c753bbae54d80e7799b5 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 25 Oct 2023 00:45:55 +0200 Subject: [PATCH] Use expansion panel for dashboard conditions (#18380) --- .../conditions/ha-card-condition-editor.ts | 266 ++++++++++-------- .../conditions/ha-card-conditions-editor.ts | 74 +++-- 2 files changed, 207 insertions(+), 133 deletions(-) diff --git a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts index d97264de1598..bf1841d22d04 100644 --- a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts +++ b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts @@ -8,10 +8,12 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { handleStructError } from "../../../../common/structs/handle-errors"; import "../../../../components/ha-button-menu"; +import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-icon-button"; import "../../../../components/ha-list-item"; import "../../../../components/ha-svg-icon"; import "../../../../components/ha-yaml-editor"; +import "../../../../components/ha-alert"; import { haStyle } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import { ICON_CONDITION } from "../../common/icon-condition"; @@ -19,7 +21,7 @@ import { Condition, LegacyCondition } from "../../common/validate-condition"; import type { LovelaceConditionEditorConstructor } from "./types"; @customElement("ha-card-condition-editor") -export default class HaCardConditionEditor extends LitElement { +export class HaCardConditionEditor extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) condition!: Condition | LegacyCondition; @@ -39,6 +41,12 @@ export default class HaCardConditionEditor extends LitElement { ) as LovelaceConditionEditorConstructor | undefined; } + public expand() { + this.updateComplete.then(() => { + this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true; + }); + } + protected willUpdate(changedProperties: PropertyValues): void { if (changedProperties.has("condition")) { this._condition = { @@ -75,110 +83,130 @@ export default class HaCardConditionEditor extends LitElement { if (!condition) return nothing; return html` -
- - - ${this.hass.localize( - `ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label` - ) || condition.condition} - - - - - - - ${this.hass.localize("ui.panel.lovelace.editor.edit_card.edit_ui")} - ${!this._yamlMode - ? html` - - ` - : ``} - - - - ${this.hass.localize( - "ui.panel.lovelace.editor.edit_card.edit_yaml" - )} - ${this._yamlMode - ? html` - - ` - : ``} - - -
  • - - - ${this.hass!.localize("ui.common.delete")} + + +

    - - -

    - ${!this._uiAvailable - ? html` - + - ${this._uiWarnings!.length > 0 && - this._uiWarnings![0] !== undefined + + + + + ${this.hass.localize( + "ui.panel.lovelace.editor.edit_card.edit_ui" + )} + ${ + !this._yamlMode + ? html` + + ` + : `` + } + + + + ${this.hass.localize( + "ui.panel.lovelace.editor.edit_card.edit_yaml" + )} + ${ + this._yamlMode + ? html` + + ` + : `` + } + + +
  • + + + ${this.hass!.localize("ui.common.delete")} + + +     + + ${ + !this._uiAvailable + ? html` + + ${this._uiWarnings!.length > 0 && + this._uiWarnings![0] !== undefined + ? html` +
      + ${this._uiWarnings!.map( + (warning) => html`
    • ${warning}
      • ` + )} +
    + ` + : nothing} + ${this.hass.localize( + "ui.errors.config.edit_in_yaml_supported" + )} +     + ` + : nothing + } +
    + ${ + this._yamlMode ? html` -
      - ${this._uiWarnings!.map( - (warning) => html`
    • ${warning}
      • ` - )} -
    + ` - : nothing} - ${this.hass.localize("ui.errors.config.edit_in_yaml_supported")} - - ` - : nothing} -
    - ${this._yamlMode - ? html` - - ` - : html` - ${dynamicElement(`ha-card-condition-${condition.condition}`, { - hass: this.hass, - condition: condition, - })} - `} -
    + : html` + ${dynamicElement( + `ha-card-condition-${condition.condition}`, + { + hass: this.hass, + condition: condition, + } + )} + ` + } +
    + + `; } @@ -212,27 +240,39 @@ export default class HaCardConditionEditor extends LitElement { static styles = [ haStyle, css` - .header { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; + ha-button-menu { + --mdc-theme-text-primary-on-background: var(--primary-text-color); } - .header span { - flex: 1; - font-size: 16px; + + ha-expansion-panel { + --expansion-panel-summary-padding: 0 0 0 8px; + --expansion-panel-content-padding: 0; } - .content { - padding: 12px; + .condition-icon { + display: none; + } + @media (min-width: 870px) { + .condition-icon { + display: inline-block; + color: var(--secondary-text-color); + opacity: 0.9; + margin-right: 8px; + } } - .header .icon { + h3 { + margin: 0; + font-size: inherit; + font-weight: inherit; + } + .content { padding: 12px; } .selected_menu_item { color: var(--primary-color); } - li[role="separator"] { - border-bottom-color: var(--divider-color); + .disabled { + opacity: 0.5; + pointer-events: none; } `, ]; diff --git a/src/panels/lovelace/editor/conditions/ha-card-conditions-editor.ts b/src/panels/lovelace/editor/conditions/ha-card-conditions-editor.ts index de0d8b8a0b5a..f1ec54e28760 100644 --- a/src/panels/lovelace/editor/conditions/ha-card-conditions-editor.ts +++ b/src/panels/lovelace/editor/conditions/ha-card-conditions-editor.ts @@ -1,8 +1,9 @@ import { mdiPlus } from "@mdi/js"; -import { CSSResultGroup, LitElement, css, html } from "lit"; +import { CSSResultGroup, LitElement, PropertyValues, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { stopPropagation } from "../../../../common/dom/stop_propagation"; +import "../../../../components/ha-alert"; import "../../../../components/ha-button"; import "../../../../components/ha-list-item"; import type { HaSelect } from "../../../../components/ha-select"; @@ -11,6 +12,7 @@ import type { HomeAssistant } from "../../../../types"; import { ICON_CONDITION } from "../../common/icon-condition"; import { Condition, LegacyCondition } from "../../common/validate-condition"; import "./ha-card-condition-editor"; +import type { HaCardConditionEditor } from "./ha-card-condition-editor"; import { LovelaceConditionEditorConstructor } from "./types"; import "./types/ha-card-condition-numeric_state"; import "./types/ha-card-condition-screen"; @@ -33,22 +35,54 @@ export class HaCardConditionsEditor extends LitElement { | LegacyCondition )[]; + private _focusLastConditionOnChange = false; + + protected firstUpdated() { + // Expand the condition if there is only one + if (this.conditions.length === 1) { + const row = this.shadowRoot!.querySelector( + "ha-card-condition-editor" + )!; + row.updateComplete.then(() => { + row.expand(); + }); + } + } + + protected updated(changedProperties: PropertyValues) { + if (!changedProperties.has("conditions")) { + return; + } + + if (this._focusLastConditionOnChange) { + this._focusLastConditionOnChange = false; + const row = this.shadowRoot!.querySelector( + "ha-card-condition-editor:last-of-type" + )!; + row.updateComplete.then(() => { + row.expand(); + row.scrollIntoView(); + row.focus(); + }); + } + } + protected render() { return html`
    - ${this.hass!.localize( - "ui.panel.lovelace.editor.condition-editor.explanation" - )} + + ${this.hass!.localize( + "ui.panel.lovelace.editor.condition-editor.explanation" + )} + ${this.conditions.map( (cond, idx) => html` -
    - -
    + ` )}
    @@ -99,6 +133,7 @@ export class HaCardConditionsEditor extends LitElement { ? { ...elClass.defaultConfig } : { condition: condition } ); + this._focusLastConditionOnChange = true; fireEvent(this, "value-changed", { value: conditions }); } @@ -123,15 +158,14 @@ export class HaCardConditionsEditor extends LitElement { mwc-tab-bar { border-bottom: 1px solid var(--divider-color); } - .conditions { - margin-top: 8px; - } - .condition { - margin-top: 8px; - border: 1px solid var(--divider-color); + ha-alert { + display: block; + margin-top: 12px; } - .condition .content { - padding: 12px; + ha-card-condition-editor { + display: block; + margin-top: 12px; + scroll-margin-top: 48px; } ha-button-menu { margin-top: 12px;