Tweak button rendering to work for HA 2021.11.
This commit is contained in:
+17
-3
@@ -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.
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user