Merge pull request #391 from dermotduffy/submenu-state

Fix state_color on submenu items

src/common.ts

@@ -1,6 +1,7 @@
 import { HassEntity, MessageBase } from 'home-assistant-js-websocket';
 import {
   HomeAssistant,
+  computeStateDomain,
   handleActionConfig,
   hasAction,
   stateIcon,
@@ -400,6 +401,13 @@ export function refreshDynamicStateParameters(
   }
   params.title = params.title ?? (state?.attributes?.friendly_name || params.entity);
   params.icon = params.icon ?? stateIcon(state);
+
+  const domain = state ? computeStateDomain(state) : undefined;
+  params.data_domain =
+    params.state_color || (domain === 'light' && params.state_color !== false)
+      ? domain
+      : undefined;
+  params.data_state = computeActiveState(state);
   return params;
 }
 

src/components/menu.ts

@@ -231,9 +231,6 @@ export class FrigateCardMenu extends LitElement {
       button: true,
     };
 
-    const stateObj = stateParameters.entity ? this.hass?.states[stateParameters.entity] : undefined;
-    const domain = stateObj ? computeStateDomain(stateObj) : undefined;
-
     // =====================================================================================
     // For `data-domain` and `data-state`, see: See
     // https://github.com/home-assistant/frontend/blob/dev/src/components/entity/state-badge.ts#L54
@@ -247,12 +244,8 @@ export class FrigateCardMenu extends LitElement {
     //   (`data-state`). This looks up a CSS style in `menu.scss`.
 
     return html` <ha-icon-button
-      data-domain=${ifDefined(
+      data-domain=${ifDefined(stateParameters.data_domain)}
-        stateParameters.state_color || (domain === "light" && stateParameters.state_color !== false)
+      data-state=${ifDefined(stateParameters.data_state)}
-          ? domain
-          : undefined
-      )}
-      data-state=${stateObj ? computeActiveState(stateObj) : ""}
       class="${classMap(classes)}"
       style="${styleMap(stateParameters.style || {})}"
       .actionHandler=${actionHandler({

src/components/submenu.ts

@@ -1,11 +1,12 @@
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators';
-import { HomeAssistant } from 'custom-card-helpers';
+import { computeActiveState, frigateCardHasAction, refreshDynamicStateParameters } from '../common.js';
+import { computeStateDomain, HomeAssistant } from 'custom-card-helpers';
+import { ifDefined } from 'lit/directives/if-defined';
 import { styleMap } from 'lit/directives/style-map';
 
 import { ExtendedHomeAssistant, MenuSubmenu, MenuSubmenuItem } from '../types.js';
 import { actionHandler } from '../action-handler-directive.js';
-import { frigateCardHasAction, refreshDynamicStateParameters } from '../common.js';
 
 import submenuStyle from '../scss/submenu.scss';
 import type { Corner } from "@material/mwc-menu";
@@ -46,6 +47,8 @@ export class FrigateCardSubmenu extends LitElement {
         ${stateParameters.title || ''}
         ${stateParameters.icon
           ? html` <ha-icon
+              data-domain=${ifDefined(stateParameters.data_domain)}
+              data-state=${ifDefined(stateParameters.data_state)}
               style="${styleMap(stateParameters.style || {})}"
               slot="graphic"
               icon="${stateParameters.icon}"

src/scss/button.scss

@@ -8,67 +8,12 @@ ha-icon-button.button {
   /* Buttons can always be clicked */
   pointer-events: auto;
   opacity: 0.9;
-
 }
+
 // =====================================================================================
 // From: https://github.com/home-assistant/frontend/blob/dev/src/common/style/icon_color_css.ts
-// Modified for `ha-icon-button` instead of `ha-state-icon`.
+// Modified version for ha-icon and ha-icon-button.
 // =====================================================================================
-ha-icon-button[data-domain="alert"][data-state="on"],
-ha-icon-button[data-domain="automation"][data-state="on"],
-ha-icon-button[data-domain="binary_sensor"][data-state="on"],
-ha-icon-button[data-domain="calendar"][data-state="on"],
-ha-icon-button[data-domain="camera"][data-state="streaming"],
-ha-icon-button[data-domain="cover"][data-state="open"],
-ha-icon-button[data-domain="fan"][data-state="on"],
-ha-icon-button[data-domain="humidifier"][data-state="on"],
-ha-icon-button[data-domain="light"][data-state="on"],
-ha-icon-button[data-domain="input_boolean"][data-state="on"],
-ha-icon-button[data-domain="lock"][data-state="unlocked"],
-ha-icon-button[data-domain="media_player"][data-state="on"],
-ha-icon-button[data-domain="media_player"][data-state="paused"],
-ha-icon-button[data-domain="media_player"][data-state="playing"],
-ha-icon-button[data-domain="script"][data-state="on"],
-ha-icon-button[data-domain="sun"][data-state="above_horizon"],
-ha-icon-button[data-domain="switch"][data-state="on"],
-ha-icon-button[data-domain="timer"][data-state="active"],
-ha-icon-button[data-domain="vacuum"][data-state="cleaning"],
-ha-icon-button[data-domain="group"][data-state="on"],
-ha-icon-button[data-domain="group"][data-state="home"],
-ha-icon-button[data-domain="group"][data-state="open"],
-ha-icon-button[data-domain="group"][data-state="locked"],
-ha-icon-button[data-domain="group"][data-state="problem"] {
-  color: var(--paper-item-icon-active-color, #fdd835);
-}
-
-ha-icon-button[data-domain="climate"][data-state="cooling"] {
-  color: var(--cool-color, var(--state-climate-cool-color));
-}
-
-ha-icon-button[data-domain="climate"][data-state="heating"] {
-  color: var(--heat-color, var(--state-climate-heat-color));
-}
-
-ha-icon-button[data-domain="climate"][data-state="drying"] {
-  color: var(--dry-color, var(--state-climate-dry-color));
-}
-
-ha-icon-button[data-domain="alarm_control_panel"] {
-  color: var(--alarm-color-armed, var(--label-badge-red));
-}
-ha-icon-button[data-domain="alarm_control_panel"][data-state="disarmed"] {
-  color: var(--alarm-color-disarmed, var(--label-badge-green));
-}
-ha-icon-button[data-domain="alarm_control_panel"][data-state="pending"],
-ha-icon-button[data-domain="alarm_control_panel"][data-state="arming"] {
-  color: var(--alarm-color-pending, var(--label-badge-yellow));
-  animation: pulse 1s infinite;
-}
-ha-icon-button[data-domain="alarm_control_panel"][data-state="triggered"] {
-  color: var(--alarm-color-triggered, var(--label-badge-red));
-  animation: pulse 1s infinite;
-}
-
 @keyframes pulse {
   0% {
     opacity: 1;
@@ -81,12 +26,72 @@ ha-icon-button[data-domain="alarm_control_panel"][data-state="triggered"] {
   }
 }
 
-ha-icon-button[data-domain="plant"][data-state="problem"],
+@mixin state-icon($element) {
-ha-icon-button[data-domain="zwave"][data-state="dead"] {
+  #{$element}[data-domain="alert"][data-state="on"],
-  color: var(--state-icon-error-color);
+  #{$element}[data-domain="automation"][data-state="on"],
+  #{$element}[data-domain="binary_sensor"][data-state="on"],
+  #{$element}[data-domain="calendar"][data-state="on"],
+  #{$element}[data-domain="camera"][data-state="streaming"],
+  #{$element}[data-domain="cover"][data-state="open"],
+  #{$element}[data-domain="fan"][data-state="on"],
+  #{$element}[data-domain="humidifier"][data-state="on"],
+  #{$element}[data-domain="light"][data-state="on"],
+  #{$element}[data-domain="input_boolean"][data-state="on"],
+  #{$element}[data-domain="lock"][data-state="unlocked"],
+  #{$element}[data-domain="media_player"][data-state="on"],
+  #{$element}[data-domain="media_player"][data-state="paused"],
+  #{$element}[data-domain="media_player"][data-state="playing"],
+  #{$element}[data-domain="script"][data-state="on"],
+  #{$element}[data-domain="sun"][data-state="above_horizon"],
+  #{$element}[data-domain="switch"][data-state="on"],
+  #{$element}[data-domain="timer"][data-state="active"],
+  #{$element}[data-domain="vacuum"][data-state="cleaning"],
+  #{$element}[data-domain="group"][data-state="on"],
+  #{$element}[data-domain="group"][data-state="home"],
+  #{$element}[data-domain="group"][data-state="open"],
+  #{$element}[data-domain="group"][data-state="locked"],
+  #{$element}[data-domain="group"][data-state="problem"] {
+    color: var(--paper-item-icon-active-color, #fdd835);
+  }
+
+  #{$element}[data-domain="climate"][data-state="cooling"] {
+    color: var(--cool-color, var(--state-climate-cool-color));
+  }
+
+  #{$element}[data-domain="climate"][data-state="heating"] {
+    color: var(--heat-color, var(--state-climate-heat-color));
+  }
+
+  #{$element}[data-domain="climate"][data-state="drying"] {
+    color: var(--dry-color, var(--state-climate-dry-color));
+  }
+
+  #{$element}[data-domain="alarm_control_panel"] {
+    color: var(--alarm-color-armed, var(--label-badge-red));
+  }
+  #{$element}[data-domain="alarm_control_panel"][data-state="disarmed"] {
+    color: var(--alarm-color-disarmed, var(--label-badge-green));
+  }
+  #{$element}[data-domain="alarm_control_panel"][data-state="pending"],
+  #{$element}[data-domain="alarm_control_panel"][data-state="arming"] {
+    color: var(--alarm-color-pending, var(--label-badge-yellow));
+    animation: pulse 1s infinite;
+  }
+  #{$element}[data-domain="alarm_control_panel"][data-state="triggered"] {
+    color: var(--alarm-color-triggered, var(--label-badge-red));
+    animation: pulse 1s infinite;
+  }
+
+  #{$element}[data-domain="plant"][data-state="problem"],
+  #{$element}[data-domain="zwave"][data-state="dead"] {
+    color: var(--state-icon-error-color);
+  }
+
+  /* Color the icon if unavailable */
+  #{$element}[data-state="unavailable"] {
+    color: var(--state-unavailable-color);
+  }
 }
 
-/* Color the icon if unavailable */
+@include state-icon("ha-icon");
-ha-icon-button[data-state="unavailable"] {
+@include state-icon("ha-icon-button");
-  color: var(--state-unavailable-color);
-}

src/types.ts

@@ -842,6 +842,8 @@ export interface StateParameters {
   title?: string | null;
   state_color?: boolean;
   style?: StyleInfo;
+  data_domain?: string;
+  data_state?: string;
 }
 
 export interface FrigateCardMediaPlayer {