mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 14:56:37 +00:00
Hide alert toggle when idle in more-info (#17563)
This commit is contained in:
parent
917b7bd1dd
commit
6dff2f691e
@ -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",
|
||||
|
87
src/state-summary/state-card-alert.ts
Executable file
87
src/state-summary/state-card-alert.ts
Executable 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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
@ -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";
|
||||
|
Loading…
x
Reference in New Issue
Block a user