Tweak button rendering to work for HA 2021.11.

This commit is contained in:
Dermot Duffy
2021-10-30 00:47:14 -07:00
parent 8ef3f77ee7
commit a919222d5f
2 changed files with 18 additions and 3 deletions
+17 -3
View File
@@ -1,6 +1,13 @@
import { HassEntity } from 'home-assistant-js-websocket'; import { HassEntity } from 'home-assistant-js-websocket';
import { HomeAssistant, hasAction, stateIcon } from 'custom-card-helpers'; import { HomeAssistant, hasAction, stateIcon } from 'custom-card-helpers';
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS, PropertyValues } from 'lit'; import {
CSSResultGroup,
LitElement,
TemplateResult,
html,
unsafeCSS,
PropertyValues,
} from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js'; import { styleMap } from 'lit/directives/style-map.js';
@@ -60,7 +67,7 @@ export class FrigateCardMenu extends LitElement {
} }
// Extract the entities the menu rendering depends on (if any). // Extract the entities the menu rendering depends on (if any).
const entities: string[] = [] const entities: string[] = [];
for (let i = 0; i < this.buttons.length; i++) { for (let i = 0; i < this.buttons.length; i++) {
const button = this.buttons[i]; const button = this.buttons[i];
if (button.type == 'custom:frigate-card-menu-state-icon') { if (button.type == 'custom:frigate-card-menu-state-icon') {
@@ -101,17 +108,24 @@ export class FrigateCardMenu extends LitElement {
emphasize: emphasize, emphasize: emphasize,
}; };
// TODO: Upon a safe distance from the release of HA 2021.11 these
// attributes can be removed from the <ha-icon-button>.
// - icon (replaced with the embedded <ha-icon>)
// - title (replaced with .label)
return html` <ha-icon-button return html` <ha-icon-button
class="${classMap(classes)}" class="${classMap(classes)}"
style="${styleMap(style)}" style="${styleMap(style)}"
icon=${icon || 'mdi:gesture-tap-button'} icon=${icon || 'mdi:gesture-tap-button'}
.label=${title || ''}
title=${title || ''} title=${title || ''}
@action=${(ev) => this._callAction(ev, button)} @action=${(ev) => this._callAction(ev, button)}
.actionHandler=${actionHandler({ .actionHandler=${actionHandler({
hasHold: hasHold, hasHold: hasHold,
hasDoubleClick: hasDoubleClick, hasDoubleClick: hasDoubleClick,
})} })}
></ha-icon-button>`; >
<ha-icon icon="${icon || 'mdi:gesture-tap-button'}"></ha-icon>
</ha-icon-button>`;
} }
// Render the Frigate menu button. // Render the Frigate menu button.
+1
View File
@@ -7,6 +7,7 @@ ha-icon-button.button {
padding: 0px; padding: 0px;
margin: 3px; margin: 3px;
--mdc-icon-button-size: 40px; --mdc-icon-button-size: 40px;
--ha-icon-display: block;
/* Buttons can always be clicked */ /* Buttons can always be clicked */
pointer-events: auto; pointer-events: auto;
} }