From 3ac6e6f307a8402f9aa11be4d419a4ea94b96171 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 26 Oct 2022 13:51:58 +0200 Subject: [PATCH] Group fields in tile editor (#14175) * group form into multiple groups * display appearence form as grid * Add translations --- .../config-elements/hui-tile-card-editor.ts | 200 +++++++++++++----- src/translations/en.json | 5 +- 2 files changed, 152 insertions(+), 53 deletions(-) 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 225de47da4..701936440f 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 @@ -1,5 +1,6 @@ +import { mdiGestureTap, mdiPalette } from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; -import { html, LitElement, TemplateResult } from "lit"; +import { css, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { assert, assign, object, optional, string } from "superstruct"; @@ -8,6 +9,7 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import { computeDomain } from "../../../../common/entity/compute_domain"; import { domainIcon } from "../../../../common/entity/domain_icon"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; +import { LocalizeFunc } from "../../../../common/translations/localize"; import "../../../../components/ha-form/ha-form"; import type { SchemaUnion } from "../../../../components/ha-form/types"; import type { HomeAssistant } from "../../../../types"; @@ -42,63 +44,89 @@ export class HuiTileCardEditor this._config = config; } - private _schema = memoizeOne( - (entity: string, icon?: string, entityState?: HassEntity) => + private _mainSchema = [{ name: "entity", selector: { entity: {} } }] as const; + + private _appearanceSchema = memoizeOne( + ( + localize: LocalizeFunc, + entity: string, + icon?: string, + entityState?: HassEntity + ) => [ - { name: "entity", selector: { entity: {} } }, - { name: "name", selector: { text: {} } }, { - name: "icon", - selector: { - icon: { - placeholder: icon || entityState?.attributes.icon, - fallbackPath: - !icon && !entityState?.attributes.icon && entityState - ? domainIcon(computeDomain(entity), entityState) - : undefined, - }, - }, - }, - { - name: "color", - selector: { - select: { - options: [ - { - label: "Default (based on state)", - value: "default", + name: "", + type: "grid", + schema: [ + { name: "name", selector: { text: {} } }, + { + name: "icon", + selector: { + icon: { + placeholder: icon || entityState?.attributes.icon, + fallbackPath: + !icon && !entityState?.attributes.icon && entityState + ? domainIcon(computeDomain(entity), entityState) + : undefined, }, - ...Array.from(THEME_COLORS).map((color) => ({ - label: capitalizeFirstLetter(color), - value: color, - })), - ], + }, }, - }, - }, - { - name: "tap_action", - selector: { - "ui-action": {}, - }, - }, - { - name: "icon_tap_action", - selector: { - "ui-action": {}, - }, + { + name: "color", + selector: { + select: { + options: [ + { + label: localize( + `ui.panel.lovelace.editor.card.tile.default_color` + ), + value: "default", + }, + ...Array.from(THEME_COLORS).map((color) => ({ + label: capitalizeFirstLetter(color), + value: color, + })), + ], + }, + }, + }, + ] as const, }, ] as const ); + private _actionsSchema = [ + { + name: "tap_action", + selector: { + "ui-action": {}, + }, + }, + { + name: "icon_tap_action", + selector: { + "ui-action": {}, + }, + }, + ] as const; + protected render(): TemplateResult { if (!this.hass || !this._config) { return html``; } - const entity = this.hass.states[this._config.entity ?? ""]; + const entity = this.hass.states[this._config.entity ?? ""] as + | HassEntity + | undefined; - const schema = this._schema(this._config.entity, this._config.icon, entity); + const mainSchema = this._mainSchema; + const appareanceSchema = this._appearanceSchema( + this.hass.localize, + this._config.entity, + this._config.icon, + entity + ); + const actionsSchema = this._actionsSchema; const data = { color: "default", @@ -106,13 +134,55 @@ export class HuiTileCardEditor }; return html` - +
+
+ +
+
+ +
+ + ${this.hass!.localize( + `ui.panel.lovelace.editor.card.tile.appearance` + )} +
+
+ +
+ +
+
+ +
+ + ${this.hass!.localize( + `ui.panel.lovelace.editor.card.tile.actions` + )} +
+
+ +
+ +
+
`; } @@ -127,7 +197,10 @@ export class HuiTileCardEditor } private _computeLabelCallback = ( - schema: SchemaUnion> + schema: + | SchemaUnion + | SchemaUnion> + | SchemaUnion ) => { switch (schema.name) { case "color": @@ -141,6 +214,29 @@ export class HuiTileCardEditor ); } }; + + static get styles() { + return css` + .container { + display: flex; + flex-direction: column; + } + .group:not(:last-child) { + margin-bottom: 12px; + } + .content { + padding: 12px; + } + ha-expansion-panel { + --expansion-panel-content-padding: 0; + border: 1px solid var(--divider-color); + border-radius: 6px; + } + ha-svg-icon { + color: var(--secondary-text-color); + } + `; + } } declare global { diff --git a/src/translations/en.json b/src/translations/en.json index 761a3531ad..f7c1ee3f54 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -4137,7 +4137,10 @@ "name": "Tile", "description": "The tile card gives you a quick overview of your entity. The card allow you to toggle the entity, show the more info dialog or custom actions.", "color": "Color", - "icon_tap_action": "Icon tap action" + "icon_tap_action": "Icon tap action", + "actions": "Actions", + "appearance": "Appearance", + "default_color": "Default color (state)" }, "vertical-stack": { "name": "Vertical Stack",