Hide alert toggle when idle in more-info (#17563)

This commit is contained in:
karwosts 2023-08-15 05:18:35 -07:00 committed by GitHub
parent 917b7bd1dd
commit 6dff2f691e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 89 additions and 0 deletions

View File

@ -176,6 +176,7 @@ export const FIXED_DEVICE_CLASS_ICONS = {
/** Domains that have a state card. */
export const DOMAINS_WITH_CARD = [
"alert",
"button",
"climate",
"cover",

View File

@ -0,0 +1,87 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { computeStateDisplay } from "../common/entity/compute_state_display";
import { computeRTL } from "../common/util/compute_rtl";
import "../components/entity/state-info";
import { haStyle } from "../resources/styles";
import { stateActive } from "../common/entity/state_active";
import type { HomeAssistant } from "../types";
@customElement("state-card-alert")
export class StateCardAlert extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: HassEntity;
@property({ type: Boolean }) public inDialog = false;
// property used only in CSS
@property({ type: Boolean, reflect: true }) public rtl = false;
protected render(): TemplateResult {
return html`
<div class="horizontal justified layout">
<state-info
.hass=${this.hass}
.stateObj=${this.stateObj}
.inDialog=${this.inDialog}
>
</state-info>
<div class="state">
${stateActive(this.stateObj)
? html`<ha-entity-toggle
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-entity-toggle>`
: computeStateDisplay(
this.hass!.localize,
this.stateObj,
this.hass.locale,
this.hass.config,
this.hass.entities
)}
</div>
</div>
`;
}
protected updated(changedProps) {
super.updated(changedProps);
if (!changedProps.has("hass")) {
return;
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.language !== this.hass.language) {
this.rtl = computeRTL(this.hass);
}
}
static get styles(): CSSResultGroup {
return [
haStyle,
css`
state-info {
flex: 1 1 auto;
min-width: 0;
}
.state {
color: var(--primary-text-color);
margin-inline-start: 16px;
margin-inline-end: initial;
text-align: var(--float-end, right);
flex: 0 0 auto;
overflow-wrap: break-word;
display: flex;
align-items: center;
direction: ltr;
}
ha-entity-toggle {
margin: -4px -16px -4px 0;
padding: 4px 16px;
}
`,
];
}
}

View File

@ -2,6 +2,7 @@
import { PolymerElement } from "@polymer/polymer/polymer-element";
import dynamicContentUpdater from "../common/dom/dynamic_content_updater";
import { stateCardType } from "../common/entity/state_card_type";
import "./state-card-alert";
import "./state-card-button";
import "./state-card-climate";
import "./state-card-humidifier";