Add display type option

home-assistant · Jul 17, 2024 · 96beb9b · 96beb9b
1 parent 6323e11
commit 96beb9b
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 15 deletions.
diff --git a/src/panels/lovelace/badges/hui-entity-badge.ts b/src/panels/lovelace/badges/hui-entity-badge.ts
@@ -21,6 +21,12 @@ import { hasAction } from "../common/has-action";
 import { LovelaceBadge, LovelaceBadgeEditor } from "../types";
 import { EntityBadgeConfig } from "./types";
 
+export const DISPLAY_TYPES = ["minimal", "standard", "complete"] as const;
+
+export type DisplayType = (typeof DISPLAY_TYPES)[number];
+
+export const DEFAULT_DISPLAY_TYPE: DisplayType = "standard";
+
 @customElement("hui-entity-badge")
 export class HuiEntityBadge extends LitElement implements LovelaceBadge {
   public static async getConfigElement(): Promise<LovelaceBadgeEditor> {
@@ -125,10 +131,16 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
       </state-display>
     `;
 
+    const name = this._config.name || stateObj.attributes.friendly_name;
+
+    const displayType = this._config.display_type;
+
     return html`
       <div
         style=${styleMap(style)}
-        class="badge ${classMap({ active })}"
+        class="badge ${classMap({
+          active,
+        })}"
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config!.hold_action),
@@ -143,7 +155,16 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
           .stateObj=${stateObj}
           .icon=${this._config.icon}
         ></ha-state-icon>
-        ${stateDisplay}
+        ${displayType !== "minimal"
+          ? html`
+              <span class="content">
+                ${displayType === "complete"
+                  ? html`<span class="name">${name}</span>`
+                  : nothing}
+                <span class="state">${stateDisplay}</span>
+              </span>
+            `
+          : nothing}
       </div>
     `;
   }
@@ -168,7 +189,7 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
         align-items: center;
         gap: 8px;
         height: 36px;
-        padding: 6px 16px 6px 12px;
+        padding: 6px 8px;
         box-sizing: border-box;
         width: auto;
         border-radius: 18px;
@@ -181,17 +202,35 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
         );
         --mdc-icon-size: 18px;
         cursor: pointer;
-        color: var(--primary-text-color);
         text-align: center;
         font-family: Roboto;
-        font-size: 14px;
+      }
+      .badge.active {
+        --badge-color: var(--primary-color);
+      }
+      .content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-right: 4px;
+        margin-inline-end: 4px;
+        margin-inline-start: initial;
+      }
+      .name {
+        font-size: 10px;
         font-style: normal;
         font-weight: 500;
-        line-height: 20px;
+        line-height: 10px;
         letter-spacing: 0.1px;
+        color: var(--secondary-text-color);
       }
-      .badge.active {
-        --badge-color: var(--primary-color);
+      .state {
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 16px;
+        letter-spacing: 0.1px;
+        color: var(--primary-text-color);
       }
       ha-state-icon {
         color: var(--badge-color);

diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts
@@ -79,12 +79,11 @@ export class HuiViewBadges extends LitElement {
               @drag-start=${this._dragStart}
               @drag-end=${this._dragEnd}
               group="badge"
-              draggable-selector=".badge"
+              draggable-selector="[data-sortable]"
               .path=${[this.viewIndex]}
               .rollback=${false}
               .options=${BADGE_SORTABLE_OPTIONS}
               invert-swap
-              no-style
             >
               <div class="badges">
                 ${repeat(
@@ -94,6 +93,7 @@ export class HuiViewBadges extends LitElement {
                     ${editMode
                       ? html`
                           <hui-badge-edit-mode
+                            data-sortable
                             .hass=${this.hass}
                             .lovelace=${this.lovelace}
                             .path=${[this.viewIndex, idx]}

diff --git a/src/panels/lovelace/badges/types.ts b/src/panels/lovelace/badges/types.ts
@@ -29,8 +29,10 @@ export interface StateLabelBadgeConfig extends LovelaceBadgeConfig {
 export interface EntityBadgeConfig extends LovelaceBadgeConfig {
   type: "entity";
   entity?: string;
+  name?: string;
   icon?: string;
   color?: string;
+  display_type?: "minimal" | "standard" | "complete";
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;

diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-badge-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-badge-editor.ts
@@ -6,6 +6,8 @@ import {
   array,
   assert,
   assign,
+  boolean,
+  enums,
   object,
   optional,
   string,
@@ -19,6 +21,10 @@ import type {
   SchemaUnion,
 } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
+import {
+  DEFAULT_DISPLAY_TYPE,
+  DISPLAY_TYPES,
+} from "../../badges/hui-entity-badge";
 import { EntityBadgeConfig } from "../../badges/types";
 import type { LovelaceBadgeEditor } from "../../types";
 import "../hui-sub-element-editor";
@@ -31,9 +37,12 @@ const badgeConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
+    name: optional(string()),
     icon: optional(string()),
     state_content: optional(union([string(), array(string())])),
     color: optional(string()),
+    display_type: optional(enums(DISPLAY_TYPES)),
+    show_entity_picture: optional(boolean()),
     tap_action: optional(actionConfigStruct),
   })
 );
@@ -62,10 +71,30 @@ export class HuiEntityBadgeEditor
           iconPath: mdiPalette,
           title: localize(`ui.panel.lovelace.editor.badge.entity.appearance`),
           schema: [
+            {
+              name: "display_type",
+              selector: {
+                select: {
+                  mode: "dropdown",
+                  options: DISPLAY_TYPES.map((type) => ({
+                    value: type,
+                    label: localize(
+                      `ui.panel.lovelace.editor.badge.entity.display_type_options.${type}`
+                    ),
+                  })),
+                },
+              },
+            },
             {
               name: "",
               type: "grid",
               schema: [
+                {
+                  name: "name",
+                  selector: {
+                    text: {},
+                  },
+                },
                 {
                   name: "icon",
                   selector: {
@@ -79,6 +108,12 @@ export class HuiEntityBadgeEditor
                     ui_color: { default_color: true },
                   },
                 },
+                {
+                  name: "show_entity_picture",
+                  selector: {
+                    boolean: {},
+                  },
+                },
               ],
             },
 
@@ -119,7 +154,11 @@ export class HuiEntityBadgeEditor
 
     const schema = this._schema(this.hass!.localize);
 
-    const data = this._config;
+    const data = { ...this._config };
+
+    if (!data.display_type) {
+      data.display_type = DEFAULT_DISPLAY_TYPE;
+    }
 
     return html`
       <ha-form
@@ -148,6 +187,10 @@ export class HuiEntityBadgeEditor
       delete config.state_content;
     }
 
+    if (config.display_type === "standard") {
+      delete config.display_type;
+    }
+
     fireEvent(this, "config-changed", { config });
   }
 
@@ -157,6 +200,8 @@ export class HuiEntityBadgeEditor
     switch (schema.name) {
       case "color":
       case "state_content":
+      case "display_type":
+      case "show_entity_picture":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.badge.entity.${schema.name}`
         );

diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
@@ -336,7 +336,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
       hui-view-badges {
         display: block;
-        margin: 16px 32px;
+        margin: 16px 8px;
         text-align: center;
       }
     `;

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -6001,7 +6001,6 @@
               "icon_tap_action": "Icon tap behavior",
               "actions": "Actions",
               "appearance": "Appearance",
-              "default_color": "Default color (state)",
               "show_entity_picture": "Show entity picture",
               "vertical": "Vertical",
               "hide_state": "Hide state",
@@ -6033,8 +6032,14 @@
               "color": "Color",
               "actions": "Actions",
               "appearance": "Appearance",
-              "default_color": "Default color (state)",
-              "state_content": "State content"
+              "show_entity_picture": "Show entity picture",
+              "state_content": "State content",
+              "display_type": "Display type",
+              "display_type_options": {
+                "minimal": "Minimal (icon only)",
+                "standard": "Standard (icon and state)",
+                "complete": "Complete (icon, name and state)"
+              }
             }
           },
           "features": {