From b64042186fdc30993a22d9ca89b8accb0d5eb28a Mon Sep 17 00:00:00 2001 From: Wendelin Date: Wed, 26 Feb 2025 14:35:53 +0100 Subject: [PATCH] Add spacing card --- src/panels/lovelace/cards/hui-spacing-card.ts | 36 +++++++++++ .../create-element/create-card-element.ts | 2 + .../hui-spacing-card-editor.ts | 61 +++++++++++++++++++ src/panels/lovelace/editor/lovelace-cards.ts | 4 ++ src/translations/en.json | 5 ++ 5 files changed, 108 insertions(+) create mode 100644 src/panels/lovelace/cards/hui-spacing-card.ts create mode 100644 src/panels/lovelace/editor/config-elements/hui-spacing-card-editor.ts diff --git a/src/panels/lovelace/cards/hui-spacing-card.ts b/src/panels/lovelace/cards/hui-spacing-card.ts new file mode 100644 index 0000000000..c544d0cc96 --- /dev/null +++ b/src/panels/lovelace/cards/hui-spacing-card.ts @@ -0,0 +1,36 @@ +import type { PropertyValues } from "lit"; +import { LitElement, html } from "lit"; +import { customElement } from "lit/decorators"; +import "../../../components/ha-card"; +import { hasConfigOrEntityChanged } from "../common/has-changed"; +import type { LovelaceCard, LovelaceCardEditor } from "../types"; + +@customElement("hui-spacing-card") +export class HuiSpacingCard extends LitElement implements LovelaceCard { + public static async getConfigElement(): Promise { + await import("../editor/config-elements/hui-spacing-card-editor"); + return document.createElement("hui-spacing-card-editor"); + } + + protected shouldUpdate(changedProps: PropertyValues): boolean { + return hasConfigOrEntityChanged(this, changedProps); + } + + public getCardSize(): number { + return 1; + } + + public setConfig(): void { + // No config necessary + } + + protected render() { + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-spacing-card": HuiSpacingCard; + } +} diff --git a/src/panels/lovelace/create-element/create-card-element.ts b/src/panels/lovelace/create-element/create-card-element.ts index 64ee2e0c53..fef73795a2 100644 --- a/src/panels/lovelace/create-element/create-card-element.ts +++ b/src/panels/lovelace/create-element/create-card-element.ts @@ -6,6 +6,7 @@ import "../cards/hui-entity-button-card"; import "../cards/hui-glance-card"; import "../cards/hui-grid-card"; import "../cards/hui-light-card"; +import "../cards/hui-spacing-card"; import "../cards/hui-sensor-card"; import "../cards/hui-thermostat-card"; import "../cards/hui-weather-forecast-card"; @@ -89,6 +90,7 @@ const LAZY_LOAD_TYPES = { "statistics-graph": () => import("../cards/hui-statistics-graph-card"), statistic: () => import("../cards/hui-statistic-card"), "vertical-stack": () => import("../cards/hui-vertical-stack-card"), + spacing: () => import("../cards/hui-spacing-card"), }; // This will not return an error card but will throw the error diff --git a/src/panels/lovelace/editor/config-elements/hui-spacing-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-spacing-card-editor.ts new file mode 100644 index 0000000000..2e5c55b857 --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-spacing-card-editor.ts @@ -0,0 +1,61 @@ +import type { CSSResultGroup } from "lit"; +import { html, LitElement, nothing } from "lit"; +import { customElement, property } from "lit/decorators"; +import "../../../../components/ha-form/ha-form"; +import type { HomeAssistant } from "../../../../types"; +import type { LovelaceCardEditor } from "../../types"; +import { configElementStyle } from "./config-elements-style"; +import type { SchemaUnion } from "../../../../components/ha-form/types"; + +const SCHEMA = [ + { + name: "description", + type: "constant", + }, +] as const; + +@customElement("hui-spacing-card-editor") +export class HuiSpacingCardEditor + extends LitElement + implements LovelaceCardEditor +{ + @property({ attribute: false }) public hass?: HomeAssistant; + + public setConfig(): void { + // No config necessary + } + + protected render() { + if (!this.hass) { + return nothing; + } + + return html` + + `; + } + + private _computeLabelCallback = (schema: SchemaUnion) => { + if (schema.name === "description") { + return this.hass!.localize( + "ui.panel.lovelace.editor.card.spacing.no_config_options" + ); + } + return this.hass!.localize( + `ui.panel.lovelace.editor.card.generic.${schema.name}` + ); + }; + + static styles: CSSResultGroup = configElementStyle; +} + +declare global { + interface HTMLElementTagNameMap { + "hui-spacing-card-editor": HuiSpacingCardEditor; + } +} diff --git a/src/panels/lovelace/editor/lovelace-cards.ts b/src/panels/lovelace/editor/lovelace-cards.ts index 2f22e6e3c0..737d290c74 100644 --- a/src/panels/lovelace/editor/lovelace-cards.ts +++ b/src/panels/lovelace/editor/lovelace-cards.ts @@ -129,4 +129,8 @@ export const coreCards: Card[] = [ type: "heading", showElement: true, }, + { + type: "spacing", + showElement: false, + }, ]; diff --git a/src/translations/en.json b/src/translations/en.json index c3f9671b40..100ab0130f 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -7213,6 +7213,11 @@ "daily": "Daily", "hourly": "Hourly", "twice_daily": "Twice daily" + }, + "spacing": { + "name": "Spacing", + "description": "Add custom spacing between cards.", + "no_config_options": "This card has no config options, use the Layout tab to set the size." } }, "elements": {