Improve default size in sections (#1498)

piitaya · Aug 13, 2024 · 4a6cf67 · 4a6cf67
1 parent bb8b9ea
commit 4a6cf67
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 13 deletions.
diff --git a/src/shared/card.ts b/src/shared/card.ts
@@ -16,6 +16,10 @@ export class Card extends LitElement {
           "no-info":
             this.appearance?.primary_info === "none" &&
             this.appearance?.secondary_info === "none",
+          "no-content":
+            this.appearance?.primary_info === "none" &&
+            this.appearance?.secondary_info === "none" &&
+            this.appearance?.icon_type === "none",
         })}
       >
         <slot></slot>
@@ -57,9 +61,17 @@ export class Card extends LitElement {
       .container > ::slotted(mushroom-state-item) {
         flex: 1;
       }
-      .container.no-info > ::slotted(mushroom-state-item) {
+      .container.horizontal.no-info > ::slotted(mushroom-state-item) {
         flex: none;
       }
+      .container.no-content > ::slotted(mushroom-state-item) {
+        display: none;
+      }
+      .container.no-content > ::slotted(.actions) {
+        --control-spacing: var(--spacing);
+        --control-height: var(--icon-size);
+        padding: var(--control-spacing) !important;
+      }
     `;
   }
 }
diff --git a/src/utils/base-card.ts b/src/utils/base-card.ts
@@ -85,28 +85,67 @@ export class MushroomBaseCard<
   }
 
   public getLayoutOptions(): LovelaceLayoutOptions {
+    if (!this._config) {
+      return {
+        grid_columns: 2,
+        grid_rows: 1,
+      };
+    }
+
     const options = {
       grid_columns: 2,
-      grid_rows: 1,
+      grid_rows: 0,
     };
-    if (!this._config) return options;
+
     const appearance = computeAppearance(this._config);
+
+    const collapsible_controls =
+      "collapsible_controls" in this._config &&
+      Boolean(this._config.collapsible_controls);
+
+    const hasInfo =
+      appearance.primary_info !== "none" ||
+      appearance.secondary_info !== "none";
+    const hasIcon = appearance.icon_type !== "none";
+    const active = this._stateObj && isActive(this._stateObj);
+
+    const hasControls = this.hasControls && (!collapsible_controls || active);
+
     if (appearance.layout === "vertical") {
-      options.grid_rows += 1;
+      if (hasIcon) {
+        options.grid_rows += 1;
+      }
+      if (hasInfo) {
+        options.grid_rows += 1;
+      }
+      if (hasControls) {
+        options.grid_rows += 1;
+      }
     }
+
     if (appearance.layout === "horizontal") {
+      options.grid_rows = 1;
       options.grid_columns = 4;
     }
-    const collapsible_controls =
-      "collapsible_controls" in this._config &&
-      Boolean(this._config.collapsible_controls);
-    if (
-      appearance?.layout !== "horizontal" &&
-      this.hasControls &&
-      (!collapsible_controls || isActive(this._stateObj!))
-    ) {
-      options.grid_rows += 1;
+
+    if (appearance.layout === "default") {
+      if (hasInfo || hasIcon) {
+        options.grid_rows += 1;
+      }
+      if (hasControls) {
+        options.grid_rows += 1;
+      }
+    }
+
+    // If icon only, set 1x1 for size
+    if (!hasControls && !hasInfo) {
+      options.grid_columns = 1;
+      options.grid_rows = 1;
     }
+
+    // Ensure card has at least 1 row
+    options.grid_rows = Math.max(options.grid_rows, 1);
+
     return options;
   }