From 0cfe7f8d12e06a7876d6bb003cdcf4267e493945 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 24 Feb 2025 15:26:55 +0100 Subject: [PATCH] Tile card editor improvements (#24373) * Add selector support * Feedbacks * Use select box fields in tile card editor --- .../form/tile_content_layout_horizontal.svg | 7 ++ .../tile_content_layout_horizontal_dark.svg | 7 ++ .../form/tile_content_layout_vertical.svg | 7 ++ .../tile_content_layout_vertical_dark.svg | 7 ++ .../form/tile_features_position_bottom.svg | 6 + .../tile_features_position_bottom_dark.svg | 6 + .../form/tile_features_position_inline.svg | 6 + .../tile_features_position_inline_dark.svg | 6 + .../config-elements/hui-tile-card-editor.ts | 104 +++++++++++------- src/translations/en.json | 1 + 10 files changed, 119 insertions(+), 38 deletions(-) create mode 100644 public/static/images/form/tile_content_layout_horizontal.svg create mode 100644 public/static/images/form/tile_content_layout_horizontal_dark.svg create mode 100644 public/static/images/form/tile_content_layout_vertical.svg create mode 100644 public/static/images/form/tile_content_layout_vertical_dark.svg create mode 100644 public/static/images/form/tile_features_position_bottom.svg create mode 100644 public/static/images/form/tile_features_position_bottom_dark.svg create mode 100644 public/static/images/form/tile_features_position_inline.svg create mode 100644 public/static/images/form/tile_features_position_inline_dark.svg diff --git a/public/static/images/form/tile_content_layout_horizontal.svg b/public/static/images/form/tile_content_layout_horizontal.svg new file mode 100644 index 0000000000..24f3580bb8 --- /dev/null +++ b/public/static/images/form/tile_content_layout_horizontal.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/static/images/form/tile_content_layout_horizontal_dark.svg b/public/static/images/form/tile_content_layout_horizontal_dark.svg new file mode 100644 index 0000000000..352c45f4e5 --- /dev/null +++ b/public/static/images/form/tile_content_layout_horizontal_dark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/static/images/form/tile_content_layout_vertical.svg b/public/static/images/form/tile_content_layout_vertical.svg new file mode 100644 index 0000000000..09ed6be017 --- /dev/null +++ b/public/static/images/form/tile_content_layout_vertical.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/static/images/form/tile_content_layout_vertical_dark.svg b/public/static/images/form/tile_content_layout_vertical_dark.svg new file mode 100644 index 0000000000..4877ba3e5b --- /dev/null +++ b/public/static/images/form/tile_content_layout_vertical_dark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/static/images/form/tile_features_position_bottom.svg b/public/static/images/form/tile_features_position_bottom.svg new file mode 100644 index 0000000000..cf60a4e100 --- /dev/null +++ b/public/static/images/form/tile_features_position_bottom.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/form/tile_features_position_bottom_dark.svg b/public/static/images/form/tile_features_position_bottom_dark.svg new file mode 100644 index 0000000000..4984ca7d18 --- /dev/null +++ b/public/static/images/form/tile_features_position_bottom_dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/form/tile_features_position_inline.svg b/public/static/images/form/tile_features_position_inline.svg new file mode 100644 index 0000000000..3fb060af0d --- /dev/null +++ b/public/static/images/form/tile_features_position_inline.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/form/tile_features_position_inline_dark.svg b/public/static/images/form/tile_features_position_inline_dark.svg new file mode 100644 index 0000000000..4a5111a4d1 --- /dev/null +++ b/public/static/images/form/tile_features_position_inline_dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts index e2507047fc..5fb43cda39 100644 --- a/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts @@ -115,7 +115,7 @@ export class HuiTileCardEditor localize: LocalizeFunc, entityId: string | undefined, hideState: boolean, - vertical: boolean, + isDark: boolean, displayActions: AdvancedActions[] = [] ) => [ @@ -175,41 +175,20 @@ export class HuiTileCardEditor ] as const satisfies readonly HaFormSchema[]) : []), { - name: "", - type: "grid", - schema: [ - { - name: "content_layout", - required: true, - selector: { - select: { - mode: "dropdown", - options: ["horizontal", "vertical"].map((value) => ({ - label: localize( - `ui.panel.lovelace.editor.card.tile.content_layout_options.${value}` - ), - value, - })), - }, - }, + name: "content_layout", + required: true, + selector: { + select: { + mode: "box", + options: ["horizontal", "vertical"].map((value) => ({ + label: localize( + `ui.panel.lovelace.editor.card.tile.content_layout_options.${value}` + ), + value, + image: `/static/images/form/tile_content_layout_${value}${isDark ? "_dark" : ""}.svg`, + })), }, - { - name: "features_position", - required: true, - selector: { - select: { - mode: "dropdown", - options: ["bottom", "inline"].map((value) => ({ - label: localize( - `ui.panel.lovelace.editor.card.tile.features_position_options.${value}` - ), - value, - disabled: vertical && value === "inline", - })), - }, - }, - }, - ], + }, }, ], }, @@ -250,6 +229,29 @@ export class HuiTileCardEditor ] as const satisfies readonly HaFormSchema[] ); + private _featuresSchema = memoizeOne( + (localize: LocalizeFunc, vertical: boolean, isDark: boolean) => + [ + { + name: "features_position", + required: true, + selector: { + select: { + mode: "box", + options: ["bottom", "inline"].map((value) => ({ + label: localize( + `ui.panel.lovelace.editor.card.tile.features_position_options.${value}` + ), + value, + image: `/static/images/form/tile_features_position_${value}${isDark ? "_dark" : ""}.svg`, + disabled: vertical && value === "inline", + })), + }, + }, + }, + ] as const satisfies readonly HaFormSchema[] + ); + protected render() { if (!this.hass || !this._config) { return nothing; @@ -262,10 +264,16 @@ export class HuiTileCardEditor this.hass.localize, entityId, this._config.hide_state ?? false, - this._config.vertical ?? false, + this.hass.themes.darkMode, this._displayActions ); + const featuresSchema = this._featuresSchema( + this.hass.localize, + this._config.vertical ?? false, + this.hass.themes.darkMode + ); + const data = { ...this._config, content_layout: this._config.vertical ? "vertical" : "horizontal", @@ -293,6 +301,15 @@ export class HuiTileCardEditor )}
+ > + schema: + | SchemaUnion> + | SchemaUnion> ) => { switch (schema.name) { case "color": @@ -405,13 +424,22 @@ export class HuiTileCardEditor }; private _computeHelperCallback = ( - schema: SchemaUnion> + schema: + | SchemaUnion> + | SchemaUnion> ) => { switch (schema.name) { case "color": return this.hass!.localize( `ui.panel.lovelace.editor.card.tile.${schema.name}_helper` ); + case "features_position": + if (this._config?.vertical) { + return this.hass!.localize( + `ui.panel.lovelace.editor.card.tile.${schema.name}_helper_vertical` + ); + } + return undefined; default: return undefined; } diff --git a/src/translations/en.json b/src/translations/en.json index 382aaf3193..de8d7a6775 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -7158,6 +7158,7 @@ "bottom": "Bottom", "inline": "Inline" }, + "features_position_helper_vertical": "Always displayed at the bottom if the content layout is vertical", "content_layout": "Content layout", "content_layout_options": { "horizontal": "Horizontal",