feat: limit chip display to two for specific layouts in AreaCard

piitaya · Jan 10, 2025 · 2448670 · 2448670
1 parent c7044ed
commit 2448670
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/src/cards/area-card/area-card-editor.ts b/src/cards/area-card/area-card-editor.ts
@@ -20,27 +20,19 @@ import "./area-card-chips-editor";
 
 const SCHEMA: HaFormSchema[] = [
   { name: "area", selector: { area: {} } },
+  { name: "name", selector: { text: {} } },
   {
-    name: "appearance",
-    type: "expandable",
-    flatten: true,
-    //iconPath: mdiPalette,
+    type: "grid",
+    name: "",
     schema: [
-      { name: "name", selector: { text: {} } },
       {
-        type: "grid",
-        name: "",
-        schema: [
-          {
-            name: "icon",
-            selector: { icon: {} },
-          },
-          { name: "icon_color", selector: { mush_color: {} } },
-        ],
+        name: "icon",
+        selector: { icon: {} },
       },
-      { name: "layout", selector: { mush_layout: {} } },
+      { name: "icon_color", selector: { mush_color: {} } },
     ],
   },
+  { name: "layout", selector: { mush_layout: {} } },
 
   {
     name: "interactions",

diff --git a/src/cards/area-card/area-card.ts b/src/cards/area-card/area-card.ts
@@ -121,7 +121,11 @@ export class AreaCard
             ></mushroom-state-info>
           </mushroom-state-item>
           <div class="chip-container action ${layout}" ?rtl=${rtl}>
-            ${this._config.chips.map((chip) => this.renderChip(chip))}
+            ${!["default", undefined].includes(this._config.layout)
+              ? this._config.chips.map((chip) => this.renderChip(chip))
+              : this._config.chips
+                  .slice(0, 2)
+                  .map((chip) => this.renderChip(chip))}
           </div>
         </mushroom-card>
       </ha-card>
@@ -198,6 +202,8 @@ export class AreaCard
           align-items: center;
           justify-content: flex-end;
           padding-right: 0.5rem;
+          margin-top: -4rem;
+          height: 56px;
         }
         .chip-container.layout-horizontal {
           align-items: center;