feat : add title card (#39)

* add title card * add theme customization * improve documentation
piitaya · Feb 6, 2022 · 6c02dc0 · 6c02dc0
1 parent d2209d8
commit 6c02dc0
Show file tree

Hide file tree

Showing 18 changed files with 425 additions and 12 deletions.
diff --git a/.hass_dev/lovelace-mushroom-showcase.yaml b/.hass_dev/lovelace-mushroom-showcase.yaml
@@ -7,4 +7,5 @@ views:
   - !include views/fan-view.yaml
   - !include views/template-view.yaml
   - !include views/entity-view.yaml
-  - !include views/chips-view.yaml
+  - !include views/chips-view.yaml
+  - !include views/title-view.yaml
diff --git a/.hass_dev/views/template-view.yaml b/.hass_dev/views/template-view.yaml
@@ -1,6 +1,4 @@
-
-
-title: Switch
+title: Template
 icon: mdi:card-text
 cards:
   - type: grid

diff --git a/.hass_dev/views/title-view.yaml b/.hass_dev/views/title-view.yaml
@@ -0,0 +1,17 @@
+title: Title
+icon: mdi:format-title
+cards:
+  - type: vertical-stack
+    cards:
+      - type: custom:mushroom-title-card
+        title: Hello, {{user}}
+        subtitle: How are you?
+      - type: custom:mushroom-title-card
+        title: Number of entities
+        subtitle: |
+          {{ states | count }} entities
+      - type: custom:mushroom-title-card
+        title: Title only
+      - type: custom:mushroom-title-card
+        subtitle: Subtitle only
+
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Mushroom mission is to propose easy to use components to build your [Home Assist
 -   🌈 Based on Material UI colors
 -   🌓 Light and dark theme support
 -   🎨 Optional theme customization
--   🌎 Internationalization 
+-   🌎 Internationalization
 
 The goal of Mushroom is not to provide custom card for deep customization. You can use the excellent [UI Lovelace Minimalist][ui-lovelace-minimalist] and [Button card][button-card] plugins for this.
 
@@ -74,6 +74,7 @@ Different cards are available for differents entities :
 -   🙋 [Person card](docs/cards/person.md)
 -   🛠 [Template card](docs/cards/template.md)
 -   🔔 [Chips card](docs/cards/chips.md)
+-   ✏️ [Title card](docs/cards/title.md)
 
 Some cards are on the todo list :
 
@@ -91,8 +92,18 @@ Mushroom:
     # HA variables
     ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
     ha-card-border-radius: 12px
-    # Mushroom custom variables
+    # Mushroom layout
     mush-spacing: 12px
+    # Mushroom title styles
+    mush-title-padding: 12px
+    mush-title-spacing: 12px
+    mush-title-font-size: 24px
+    mush-title-font-size: normal
+    mush-title-line-height: 1.2
+    mush-subtitle-font-size: 16px
+    mush-subtitle-font-weight: normal
+    mush-subtitle-line-height: 1.2
+    # Mushroom colors
     mush-rgb-red: 244, 67, 54
     mush-rgb-pink: 233, 30, 99
     mush-rgb-purple: 156, 39, 176
@@ -183,4 +194,3 @@ The design is inspired by [7ahang’s work][7ahang] on Behance and [Ui Lovelace
 [button-card]: https://github.com/custom-cards/button-card
 [7ahang]: https://www.behance.net/gallery/88433905/Redesign-Smart-Home
 [release-url]: https://github.com/piitaya/lovelace-mushroom/releases
-
diff --git a/docs/cards/title.md b/docs/cards/title.md
@@ -0,0 +1,18 @@
+# Title card
+
+![Title light](../images/title-light.png)
+![Title dark](../images/title-dark.png)
+
+## Description
+
+A Title block to separate sections of cards
+
+## Configuration variables
+
+All the options are available in the lovelace editor but you can use `yaml` if you want.
+
+| Name        | Type            | Default  | Description                                                                                                                         |
+| :---------- | :-------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------- |
+| `title`     | string          | Optional | Title to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/).                             |
+| `subtitle`  | string          | Optional | Subtitle to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/).                          |
+| `entity_id` | `string` `list` | Optional | Only reacts to the state changes of these entities. This can be used if the automatic analysis fails to find all relevant entities. |
diff --git a/docs/images/title-dark.png b/docs/images/title-dark.png
diff --git a/docs/images/title-light.png b/docs/images/title-light.png
diff --git a/src/cards/chips-card/chips/template-chip-editor.ts b/src/cards/chips-card/chips/template-chip-editor.ts
@@ -1,7 +1,7 @@
 import { fireEvent, HomeAssistant } from "custom-card-helpers";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import setupCustomLocalize from "../../../localize";
+import setupCustomlocalize from "../../../localize";
 import { configElementStyle } from "../../../utils/editor-styles";
 import { TemplateChipConfig } from "../../../utils/lovelace/chip/types";
 import { EditorTarget } from "../../../utils/lovelace/editor/types";
@@ -25,7 +25,7 @@ export class EntityChipEditor extends LitElement implements LovelaceChipEditor {
             return html``;
         }
 
-        const customLocalize = setupCustomLocalize(this.hass);
+        const customLocalize = setupCustomlocalize(this.hass);
 
         return html`
             <div class="card-config">

diff --git a/src/cards/template-card/template-card-editor.ts b/src/cards/template-card/template-card-editor.ts
@@ -7,7 +7,7 @@ import {
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { assert } from "superstruct";
-import setupcustomLocalize from "../../localize";
+import setupCustomlocalize from "../../localize";
 import { configElementStyle } from "../../utils/editor-styles";
 import { EditorTarget } from "../../utils/lovelace/editor/types";
 import { TEMPLATE_CARD_EDITOR_NAME } from "./const";
@@ -38,7 +38,7 @@ export class TemplateCardEditor
         }
 
         const dir = computeRTLDirection(this.hass);
-        const customLocalize = setupcustomLocalize(this.hass);
+        const customLocalize = setupCustomlocalize(this.hass);
 
         return html`
             <div class="card-config">

diff --git a/src/cards/title-card/const.ts b/src/cards/title-card/const.ts
@@ -0,0 +1,4 @@
+import { PREFIX_NAME } from "../../const";
+
+export const TITLE_CARD_NAME = `${PREFIX_NAME}-title-card`;
+export const TITLE_CARD_EDITOR_NAME = `${TITLE_CARD_NAME}-editor`;
diff --git a/src/cards/title-card/title-card-config.ts b/src/cards/title-card/title-card-config.ts
@@ -0,0 +1,16 @@
+import { LovelaceCardConfig } from "custom-card-helpers";
+import { assign, object, optional, string } from "superstruct";
+import { baseLovelaceCardConfig } from "../../utils/editor-styles";
+
+export interface TitleCardConfig extends LovelaceCardConfig {
+    title?: string;
+    subtitle?: string;
+}
+
+export const titleCardConfigStruct = assign(
+    baseLovelaceCardConfig,
+    object({
+        title: optional(string()),
+        subtitle: optional(string()),
+    })
+);
diff --git a/src/cards/title-card/title-card-editor.ts b/src/cards/title-card/title-card-editor.ts
@@ -0,0 +1,102 @@
+import {
+    fireEvent,
+    HomeAssistant,
+    LovelaceCardEditor,
+} from "custom-card-helpers";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { assert } from "superstruct";
+import setupCustomlocalize from "../../localize";
+import { configElementStyle } from "../../utils/editor-styles";
+import { EditorTarget } from "../../utils/lovelace/editor/types";
+import { TITLE_CARD_EDITOR_NAME } from "./const";
+import { TitleCardConfig, titleCardConfigStruct } from "./title-card-config";
+
+@customElement(TITLE_CARD_EDITOR_NAME)
+export class TitleCardEditor extends LitElement implements LovelaceCardEditor {
+    @property({ attribute: false }) public hass?: HomeAssistant;
+
+    @state() private _config?: TitleCardConfig;
+
+    public setConfig(config: TitleCardConfig): void {
+        assert(config, titleCardConfigStruct);
+        this._config = config;
+    }
+
+    protected render(): TemplateResult {
+        if (!this.hass || !this._config) {
+            return html``;
+        }
+
+        const customLocalize = setupCustomlocalize(this.hass);
+
+        return html`
+            <div class="card-config">
+                <paper-textarea
+                    .label="${customLocalize(
+                        "editor.card.title.title"
+                    )} (${this.hass.localize(
+                        "ui.panel.lovelace.editor.card.config.optional"
+                    )})"
+                    .value=${this._config.title}
+                    .configValue=${"title"}
+                    @keydown=${this._ignoreKeydown}
+                    @value-changed=${this._valueChanged}
+                    autocapitalize="none"
+                    autocomplete="off"
+                    spellcheck="false"
+                ></paper-textarea>
+                <paper-textarea
+                    .label="${customLocalize(
+                        "editor.card.title.subtitle"
+                    )} (${this.hass.localize(
+                        "ui.panel.lovelace.editor.card.config.optional"
+                    )})"
+                    .value=${this._config.subtitle}
+                    .configValue=${"subtitle"}
+                    @keydown=${this._ignoreKeydown}
+                    @value-changed=${this._valueChanged}
+                    autocapitalize="none"
+                    autocomplete="off"
+                    spellcheck="false"
+                ></paper-textarea>
+            </div>
+        `;
+    }
+
+    private _ignoreKeydown(ev: KeyboardEvent) {
+        // Stop keyboard events from the paper-textarea from propagating to avoid accidentally closing the dialog when the user presses Enter.
+        ev.stopPropagation();
+    }
+
+    private _valueChanged(ev: CustomEvent): void {
+        if (!this._config || !this.hass) {
+            return;
+        }
+        const target = ev.target! as EditorTarget;
+        const value =
+            target.checked !== undefined ? target.checked : ev.detail.value;
+
+        if (this[`_${target.configValue}`] === value) {
+            return;
+        }
+
+        let newConfig;
+        if (target.configValue) {
+            if (!value) {
+                newConfig = { ...this._config };
+                delete newConfig[target.configValue!];
+            } else {
+                newConfig = {
+                    ...this._config,
+                    [target.configValue!]: value,
+                };
+            }
+        }
+        fireEvent(this, "config-changed", { config: newConfig });
+    }
+
+    static get styles(): CSSResultGroup {
+        return configElementStyle;
+    }
+}