Adjust row height in grid (#21311)

* Set row height to 56px * Adjust padding and sizes * Adjust margin * Fix pointer-events * Fix image size * Clean code
home-assistant · Jul 15, 2024 · f70126e · f70126e
1 parent f87296d
commit f70126e
Show file tree

Hide file tree

Showing 34 changed files with 760 additions and 997 deletions.
diff --git a/src/components/ha-grid-size-picker.ts b/src/components/ha-grid-size-picker.ts
@@ -20,7 +20,7 @@ export class HaGridSizeEditor extends LitElement {
 
   @property({ attribute: false }) public value?: GridSizeValue;
 
-  @property({ attribute: false }) public rows = 6;
+  @property({ attribute: false }) public rows = 8;
 
   @property({ attribute: false }) public columns = 4;
 
@@ -205,7 +205,7 @@ export class HaGridSizeEditor extends LitElement {
       .preview {
         position: relative;
         grid-area: preview;
-        aspect-ratio: 1 / 1;
+        aspect-ratio: 1 / 1.2;
       }
       .preview > div {
         position: absolute;

diff --git a/src/components/tile/ha-tile-icon.ts b/src/components/tile/ha-tile-icon.ts
@@ -17,7 +17,7 @@ export class HaTileIcon extends LitElement {
     return css`
       :host {
         --tile-icon-color: var(--disabled-color);
-        --mdc-icon-size: 24px;
+        --mdc-icon-size: 22px;
       }
       .shape::before {
         content: "";
@@ -32,9 +32,9 @@ export class HaTileIcon extends LitElement {
       }
       .shape {
         position: relative;
-        width: 40px;
-        height: 40px;
-        border-radius: 20px;
+        width: 36px;
+        height: 36px;
+        border-radius: 18px;
         display: flex;
         align-items: center;
         justify-content: center;

diff --git a/src/components/tile/ha-tile-image.ts b/src/components/tile/ha-tile-image.ts
@@ -25,9 +25,9 @@ export class HaTileImage extends LitElement {
     return css`
       .image {
         position: relative;
-        width: 40px;
-        height: 40px;
-        border-radius: 20px;
+        width: 36px;
+        height: 36px;
+        border-radius: 18px;
         display: flex;
         flex: none;
         align-items: center;

diff --git a/src/components/tile/ha-tile-info.ts b/src/components/tile/ha-tile-info.ts
@@ -33,7 +33,7 @@ export class HaTileInfo extends LitElement {
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
-        min-height: 40px;
+        height: 36px;
       }
       span {
         text-overflow: ellipsis;

diff --git a/src/panels/lovelace/card-features/common/card-feature-styles.ts b/src/panels/lovelace/card-features/common/card-feature-styles.ts
@@ -0,0 +1,30 @@
+import { css } from "lit";
+
+export const cardFeatureStyles = css`
+  ha-control-select-menu {
+    box-sizing: border-box;
+    --control-select-menu-height: var(--feature-height);
+    --control-select-menu-border-radius: var(--feature-border-radius);
+    line-height: 1.2;
+    display: block;
+    width: 100%;
+  }
+  ha-control-select {
+    --control-select-color: var(--feature-color);
+    --control-select-padding: 0;
+    --control-select-thickness: var(--feature-height);
+    --control-select-border-radius: var(--feature-border-radius);
+    --control-select-button-border-radius: var(--feature-border-radius);
+  }
+  ha-control-button-group {
+    --control-button-group-spacing: var(--feature-button-spacing);
+    --control-button-group-thickness: var(--feature-height);
+  }
+  ha-control-slider {
+    --control-slider-color: var(--feature-color);
+    --control-slider-background: var(--feature-color);
+    --control-slider-background-opacity: 0.2;
+    --control-slider-thickness: var(--feature-height);
+    --control-slider-border-radius: var(--feature-border-radius);
+  }
+`;
diff --git a/src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
@@ -1,6 +1,6 @@
 import { mdiShieldOff } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
@@ -21,6 +21,7 @@ import {
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
 import { AlarmModesCardFeatureConfig } from "./types";
 
@@ -135,44 +136,26 @@ class HuiAlarmModeCardFeature
     }
 
     return html`
-      <div class="container">
-        <ha-control-select
-          .options=${options}
-          .value=${this._currentMode}
-          @value-changed=${this._valueChanged}
-          hide-label
-          .ariaLabel=${this.hass.localize(
-            "ui.card.alarm_control_panel.modes_label"
-          )}
-          style=${styleMap({
-            "--control-select-color": color,
-            "--modes-count": options.length.toString(),
-          })}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-        >
-        </ha-control-select>
-      </div>
+      <ha-control-select
+        .options=${options}
+        .value=${this._currentMode}
+        @value-changed=${this._valueChanged}
+        hide-label
+        .ariaLabel=${this.hass.localize(
+          "ui.card.alarm_control_panel.modes_label"
+        )}
+        style=${styleMap({
+          "--control-select-color": color,
+          "--modes-count": options.length.toString(),
+        })}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+      >
+      </ha-control-select>
     `;
   }
 
   static get styles() {
-    return css`
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
   }
 }
 

diff --git a/src/panels/lovelace/card-features/hui-card-feature.ts b/src/panels/lovelace/card-features/hui-card-feature.ts
@@ -0,0 +1,51 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { LitElement, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { HomeAssistant } from "../../../types";
+import type { HuiErrorCard } from "../cards/hui-error-card";
+import { createCardFeatureElement } from "../create-element/create-card-feature-element";
+import type { LovelaceCardFeature } from "../types";
+import type { LovelaceCardFeatureConfig } from "./types";
+
+@customElement("hui-card-feature")
+export class HuiCardFeature extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: HassEntity;
+
+  @property({ attribute: false }) public feature?: LovelaceCardFeatureConfig;
+
+  @property({ attribute: false }) public color?: string;
+
+  private _element?: LovelaceCardFeature | HuiErrorCard;
+
+  private _getFeatureElement(feature: LovelaceCardFeatureConfig) {
+    if (!this._element) {
+      this._element = createCardFeatureElement(feature);
+      return this._element;
+    }
+
+    return this._element;
+  }
+
+  protected render() {
+    if (!this.feature) {
+      return nothing;
+    }
+
+    const element = this._getFeatureElement(this.feature);
+
+    if (this.hass) {
+      element.hass = this.hass;
+      (element as LovelaceCardFeature).stateObj = this.stateObj;
+      (element as LovelaceCardFeature).color = this.color;
+    }
+    return html`${element}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-feature": HuiCardFeature;
+  }
+}
diff --git a/src/panels/lovelace/card-features/hui-card-features.ts b/src/panels/lovelace/card-features/hui-card-features.ts
@@ -1,17 +1,8 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import {
-  CSSResultGroup,
-  LitElement,
-  TemplateResult,
-  css,
-  html,
-  nothing,
-} from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
-import type { HuiErrorCard } from "../cards/hui-error-card";
-import { createCardFeatureElement } from "../create-element/create-card-feature-element";
-import type { LovelaceCardFeature } from "../types";
+import "./hui-card-feature";
 import type { LovelaceCardFeatureConfig } from "./types";
 
 @customElement("hui-card-features")
@@ -24,53 +15,48 @@ export class HuiCardFeatures extends LitElement {
 
   @property({ attribute: false }) public color?: string;
 
-  private _featuresElements = new WeakMap<
-    LovelaceCardFeatureConfig,
-    LovelaceCardFeature | HuiErrorCard
-  >();
-
-  private _getFeatureElement(feature: LovelaceCardFeatureConfig) {
-    if (!this._featuresElements.has(feature)) {
-      const element = createCardFeatureElement(feature);
-      this._featuresElements.set(feature, element);
-      return element;
-    }
-
-    return this._featuresElements.get(feature)!;
-  }
-
-  private renderFeature(
-    featureConf: LovelaceCardFeatureConfig,
-    stateObj: HassEntity
-  ): TemplateResult {
-    const element = this._getFeatureElement(featureConf);
-
-    if (this.hass) {
-      element.hass = this.hass;
-      (element as LovelaceCardFeature).stateObj = stateObj;
-      (element as LovelaceCardFeature).color = this.color;
-    }
-
-    return html`${element}`;
-  }
-
   protected render() {
     if (!this.features) {
       return nothing;
     }
     return html`
-      ${this.features.map((featureConf) =>
-        this.renderFeature(featureConf, this.stateObj)
-      )}
+      <div class="container">
+        ${this.features.map(
+          (feature) => html`
+            <hui-card-feature
+              .hass=${this.hass}
+              .stateObj=${this.stateObj}
+              .color=${this.color}
+              .feature=${feature}
+            ></hui-card-feature>
+          `
+        )}
+      </div>
     `;
   }
 
   static get styles(): CSSResultGroup {
     return css`
       :host {
         --feature-color: var(--state-icon-color);
+        --feature-padding: 12px;
+        --feature-height: 42px;
+        --feature-border-radius: 12px;
+        --feature-button-spacing: 12px;
+        position: relative;
+        width: 100%;
+      }
+      .container {
+        position: relative;
         display: flex;
         flex-direction: column;
+        padding: var(--feature-padding);
+        padding-top: 0px;
+        gap: var(--feature-padding);
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        justify-content: space-evenly;
       }
     `;
   }