Add new design to humidifier card (#18711)

home-assistant · Nov 22, 2023 · 9163b9c · 9163b9c
1 parent 61717e1
commit 9163b9c
Show file tree

Hide file tree

Showing 12 changed files with 349 additions and 362 deletions.
diff --git a/src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts b/src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts
@@ -1,4 +1,3 @@
-import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";

diff --git a/src/dialogs/more-info/components/ha-more-info-control-circular-slider-style.ts b/src/dialogs/more-info/components/ha-more-info-control-circular-slider-style.ts
@@ -93,7 +93,6 @@ export const moreInfoControlCircularSliderStyle = css`
       font-size: 32px;
     }
     .info {
-      margin-top: 12px;
       font-size: 14px;
       gap: 2px;
       --mdc-icon-size: 14px;

diff --git a/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts b/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts
@@ -1,4 +1,4 @@
-import { mdiMinus, mdiPlus } from "@mdi/js";
+import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
@@ -100,13 +100,9 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
 
     return html`
       <p class="label">
-        ${action && ["drying", "humidifying"].includes(action)
-          ? this.hass.localize("ui.card.humidifier.target_label", {
-              action: actionLabel,
-            })
-          : action && action !== "off" && action !== "idle"
-            ? actionLabel
-            : this.hass.localize("ui.card.humidifier.target")}
+        ${action && action !== "off" && action !== "idle"
+          ? actionLabel
+          : this.hass.localize("ui.card.humidifier.target")}
       </p>
     `;
   }
@@ -118,7 +114,7 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
 
     return html`
       <p class="label">
-        ${this.hass.localize("ui.card.humidifier.currently")}
+        <ha-svg-icon .path=${mdiWaterPercent}></ha-svg-icon>
         <span>
           ${this.hass.formatEntityAttributeValue(
             this.stateObj,