Redesign mode buttons for humidifier more-info (#17530)

src/components/ha-control-select-menu.ts

@@ -0,0 +1,255 @@
+import { Ripple } from "@material/mwc-ripple";
+import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
+import { SelectBase } from "@material/mwc-select/mwc-select-base";
+import { css, html, nothing } from "lit";
+import {
+  customElement,
+  eventOptions,
+  query,
+  queryAsync,
+  state,
+} from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { debounce } from "../common/util/debounce";
+import { nextRender } from "../common/util/render-status";
+
+@customElement("ha-control-select-menu")
+export class HaControlSelectMenu extends SelectBase {
+  @query(".select") protected mdcRoot!: HTMLElement;
+
+  @query(".select-anchor") protected anchorElement!: HTMLDivElement | null;
+
+  @queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>;
+
+  @state() private _shouldRenderRipple = false;
+
+  public override render() {
+    const classes = {
+      "select-disabled": this.disabled,
+      "select-required": this.required,
+      "select-invalid": !this.isUiValid,
+      "select-no-value": !this.selectedText,
+    };
+
+    const labelledby = this.label ? "label" : undefined;
+
+    return html`
+      <div class="select ${classMap(classes)}">
+        <input
+          class="formElement"
+          .name=${this.name}
+          .value=${this.value}
+          hidden
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+        />
+        <!-- @ts-ignore -->
+        <div
+          class="select-anchor"
+          aria-autocomplete="none"
+          role="combobox"
+          aria-expanded=${this.menuOpen}
+          aria-invalid=${!this.isUiValid}
+          aria-haspopup="listbox"
+          aria-labelledby=${ifDefined(labelledby)}
+          aria-required=${this.required}
+          @click=${this.onClick}
+          @focus=${this.onFocus}
+          @blur=${this.onBlur}
+          @keydown=${this.onKeydown}
+          @mousedown=${this.handleRippleActivate}
+          @mouseup=${this.handleRippleDeactivate}
+          @mouseenter=${this.handleRippleMouseEnter}
+          @mouseleave=${this.handleRippleMouseLeave}
+          @touchstart=${this.handleRippleActivate}
+          @touchend=${this.handleRippleDeactivate}
+          @touchcancel=${this.handleRippleDeactivate}
+        >
+          <div class="icon">
+            <slot name="icon"></slot>
+          </div>
+          <div class="content">
+            <p id="label" class="label">${this.label}</p>
+            ${this.selectedText
+              ? html`<p class="value">${this.selectedText}</p>`
+              : nothing}
+          </div>
+          ${this._shouldRenderRipple && !this.disabled
+            ? html` <mwc-ripple></mwc-ripple> `
+            : nothing}
+        </div>
+        ${this.renderMenu()}
+      </div>
+    `;
+  }
+
+  protected onFocus() {
+    this.handleRippleFocus();
+    super.onFocus();
+  }
+
+  protected onBlur() {
+    this.handleRippleBlur();
+    super.onBlur();
+  }
+
+  private _rippleHandlers: RippleHandlers = new RippleHandlers(() => {
+    this._shouldRenderRipple = true;
+    return this._ripple;
+  });
+
+  @eventOptions({ passive: true })
+  private handleRippleActivate(evt?: Event) {
+    this._rippleHandlers.startPress(evt);
+  }
+
+  private handleRippleDeactivate() {
+    this._rippleHandlers.endPress();
+  }
+
+  private handleRippleMouseEnter() {
+    this._rippleHandlers.startHover();
+  }
+
+  private handleRippleMouseLeave() {
+    this._rippleHandlers.endHover();
+  }
+
+  private handleRippleFocus() {
+    this._rippleHandlers.startFocus();
+  }
+
+  private handleRippleBlur() {
+    this._rippleHandlers.endFocus();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("translations-updated", this._translationsUpdated);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener(
+      "translations-updated",
+      this._translationsUpdated
+    );
+  }
+
+  private _translationsUpdated = debounce(async () => {
+    await nextRender();
+    this.layoutOptions();
+  }, 500);
+
+  static override styles = [
+    css`
+      :host {
+        display: inline-block;
+        --control-select-menu-text-color: var(--primary-text-color);
+        --control-select-menu-background-color: var(--disabled-color);
+        --control-select-menu-background-opacity: 0.2;
+        --control-select-menu-border-radius: 16px;
+        --control-select-menu-min-width: 120px;
+        --control-select-menu-max-width: 200px;
+        --control-select-menu-width: 100%;
+        --mdc-icon-size: 24px;
+        color: var(--primary-text-color);
+        -webkit-tap-highlight-color: transparent;
+      }
+      .select-anchor {
+        color: var(--control-select-menu-text-color);
+        height: 56px;
+        padding: 8px 12px;
+        overflow: hidden;
+        position: relative;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-radius: var(--control-select-menu-border-radius);
+        box-sizing: border-box;
+        outline: none;
+        overflow: hidden;
+        background: none;
+        --mdc-ripple-color: var(--control-select-menu-background-color);
+        /* For safari border-radius overflow */
+        z-index: 0;
+        font-size: inherit;
+        transition: color 180ms ease-in-out;
+        color: var(--control-text-icon-color);
+        gap: 12px;
+        min-width: var(--control-select-menu-min-width);
+        max-width: var(--control-select-menu-max-width);
+        width: var(--control-select-menu-width);
+        user-select: none;
+      }
+      .content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .content p {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        min-width: 0;
+        width: 100%;
+        margin: auto;
+      }
+
+      .label {
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+        letter-spacing: 0.4px;
+      }
+
+      .select-no-value .label {
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.5px;
+      }
+
+      .value {
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        letter-spacing: 0.5px;
+      }
+
+      .select-anchor::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: var(--control-select-menu-background-color);
+        transition:
+          background-color 180ms ease-in-out,
+          opacity 180ms ease-in-out;
+        opacity: var(--control-select-menu-background-opacity);
+      }
+
+      mwc-menu {
+        --mdc-shape-medium: 8px;
+      }
+      mwc-list {
+        --mdc-list-vertical-padding: 0;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-control-select-menu": HaControlSelectMenu;
+  }
+}

src/dialogs/more-info/components/ha-more-info-control-style.ts

@@ -22,6 +22,35 @@ export const moreInfoControlStyle = css`
     margin-bottom: 24px;
   }
 
+  .secondary-controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+  .secondary-controls-scroll {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 12px;
+    margin: auto;
+    overflow: auto;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+    margin: 0 -24px;
+    padding: 0 24px;
+  }
+  .secondary-controls-scroll::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Don't use scroll on device without touch support  */
+  @media (hover: hover) {
+    .secondary-controls-scroll {
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+  }
+
   .buttons {
     display: flex;
     align-items: center;

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -1,3 +1,4 @@
+import { mdiCircleMedium, mdiPower, mdiTuneVariant } from "@mdi/js";
 import {
   CSSResultGroup,
   LitElement,
@@ -7,7 +8,6 @@ import {
   nothing,
 } from "lit";
 import { property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import {
@@ -18,7 +18,9 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { formatNumber } from "../../../common/number/format_number";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
+import "../../../components/ha-control-select-menu";
 import {
+  HUMIDIFIER_MODE_ICONS,
   HumidifierEntity,
   HumidifierEntityFeature,
 } from "../../../data/humidifier";
@@ -58,100 +60,111 @@ class MoreInfoHumidifier extends LitElement {
     const currentHumidity = this.stateObj.attributes.current_humidity;
 
     return html`
-      ${currentHumidity
+      <div class="current">
-        ? html`<div class="current">
+        ${currentHumidity != null
-            ${currentHumidity != null
+          ? html`
-              ? html`
+              <div>
-                  <div>
+                <p class="label">
-                    <p class="label">
+                  ${computeAttributeNameDisplay(
-                      ${computeAttributeNameDisplay(
+                    this.hass.localize,
-                        this.hass.localize,
+                    this.stateObj,
-                        this.stateObj,
+                    this.hass.entities,
-                        this.hass.entities,
+                    "current_humidity"
-                        "current_humidity"
+                  )}
-                      )}
+                </p>
-                    </p>
+                <p class="value">
-                    <p class="value">
+                  ${formatNumber(
-                      ${formatNumber(
+                    currentHumidity,
-                        currentHumidity,
+                    this.hass.locale
-                        this.hass.locale
+                  )}${blankBeforePercent(this.hass.locale)}%
-                      )}${blankBeforePercent(this.hass.locale)}%
+                </p>
-                    </p>
+              </div>
-                  </div>
+            `
-                `
+          : nothing}
-              : nothing}
+      </div>
-          </div>`
+
-        : nothing}
       <div class="controls">
         <ha-more-info-humidifier-humidity
           .hass=${this.hass}
           .stateObj=${this.stateObj}
         ></ha-more-info-humidifier-humidity>
       </div>
-      <div
-        class=${classMap({
-          "has-modes": supportModes,
-        })}
-      >
-        <ha-select
-          .label=${this.hass.localize("ui.card.humidifier.state")}
-          .value=${this.stateObj.state}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._handleStateChanged}
-          @closed=${stopPropagation}
-        >
-          <mwc-list-item value="off">
-            ${computeStateDisplay(
-              this.hass.localize,
-              this.stateObj,
-              this.hass.locale,
-              this.hass.config,
-              this.hass.entities,
-              "off"
-            )}
-          </mwc-list-item>
-          <mwc-list-item value="on">
-            ${computeStateDisplay(
-              this.hass.localize,
-              this.stateObj,
-              this.hass.locale,
-              this.hass.config,
-              this.hass.entities,
-              "on"
-            )}
-          </mwc-list-item>
-        </ha-select>
 
-        ${supportModes
+      <div class="secondary-controls">
-          ? html`
+        <div class="secondary-controls-scroll">
-              <ha-select
+          <ha-control-select-menu
-                .label=${hass.localize("ui.card.humidifier.mode")}
+            .label=${this.hass.localize("ui.card.humidifier.state")}
-                .value=${stateObj.attributes.mode}
+            .value=${this.stateObj.state}
-                fixedMenuPosition
+            fixedMenuPosition
-                naturalMenuWidth
+            naturalMenuWidth
-                @selected=${this._handleModeChanged}
+            @selected=${this._handleStateChanged}
-                @action=${this._handleModeChanged}
+            @closed=${stopPropagation}
-                @closed=${stopPropagation}
+          >
-              >
+            <ha-svg-icon slot="icon" .path=${mdiPower}></ha-svg-icon>
-                ${stateObj.attributes.available_modes!.map(
+            <mwc-list-item value="off">
-                  (mode) => html`
+              ${computeStateDisplay(
-                    <mwc-list-item .value=${mode}>
+                this.hass.localize,
-                      ${computeAttributeValueDisplay(
+                this.stateObj,
-                        hass.localize,
+                this.hass.locale,
-                        stateObj!,
+                this.hass.config,
-                        hass.locale,
+                this.hass.entities,
-                        hass.config,
+                "off"
-                        hass.entities,
+              )}
-                        "mode",
+            </mwc-list-item>
-                        mode
+            <mwc-list-item value="on">
-                      )}
+              ${computeStateDisplay(
-                    </mwc-list-item>
+                this.hass.localize,
-                  `
+                this.stateObj,
-                )}
+                this.hass.locale,
-              </ha-select>
+                this.hass.config,
-            `
+                this.hass.entities,
-          : nothing}
+                "on"
+              )}
+            </mwc-list-item>
+          </ha-control-select-menu>
+
+          ${supportModes
+            ? html`
+                <ha-control-select-menu
+                  .label=${hass.localize("ui.card.humidifier.mode")}
+                  .value=${stateObj.attributes.mode}
+                  fixedMenuPosition
+                  naturalMenuWidth
+                  @selected=${this._handleModeChanged}
+                  @action=${this._handleModeChanged}
+                  @closed=${stopPropagation}
+                >
+                  <ha-svg-icon
+                    slot="icon"
+                    .path=${stateObj.attributes.mode
+                      ? HUMIDIFIER_MODE_ICONS[stateObj.attributes.mode] ||
+                        mdiCircleMedium
+                      : mdiTuneVariant}
+                  ></ha-svg-icon>
+                  ${stateObj.attributes.available_modes!.map(
+                    (mode) => html`
+                      <ha-list-item .value=${mode} graphic="icon">
+                        <ha-svg-icon
+                          slot="graphic"
+                          .path=${HUMIDIFIER_MODE_ICONS[mode] ||
+                          mdiCircleMedium}
+                        ></ha-svg-icon>
+                        ${computeAttributeValueDisplay(
+                          hass.localize,
+                          stateObj!,
+                          hass.locale,
+                          hass.config,
+                          hass.entities,
+                          "mode",
+                          mode
+                        )}
+                      </ha-list-item>
+                    `
+                  )}
+                </ha-control-select-menu>
+              `
+            : nothing}
+        </div>
       </div>
     `;
   }
@@ -243,7 +256,6 @@ class MoreInfoHumidifier extends LitElement {
         :host {
           color: var(--primary-text-color);
         }
-
         .current {
           display: flex;
           flex-direction: row;
@@ -277,11 +289,6 @@ class MoreInfoHumidifier extends LitElement {
           font-weight: 500;
           line-height: 28px;
         }
-
-        ha-select {
-          width: 100%;
-          margin-top: 8px;
-        }
       `,
     ];
   }