jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Align event state display (#17442)

Browse Source
This commit is contained in:
Bram Kragten 2023-07-31 18:27:35 +02:00 committed by GitHub
parent 4612099e88
commit 2a9ef7d91f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/panels/lovelace/entity-rows/hui-event-entity-row.ts
View File

@ -69,14 +69,17 @@ class HuiEventEntityRow extends LitElement implements LovelaceRow {
})}
>
<div class="what">
${computeStateDisplay(
this.hass!.localize,
stateObj,
this.hass.locale,
this.hass.config,
this.hass.entities
)}
</div>
<div class="when">
${isUnavailableState(stateObj.state)
? computeStateDisplay(
this.hass!.localize,
stateObj,
this.hass.locale,
this.hass.config,
this.hass.entities
)
? ``
: computeAttributeValueDisplay(
this.hass!.localize,
stateObj,
@ -86,18 +89,6 @@ class HuiEventEntityRow extends LitElement implements LovelaceRow {
"event_type"
)}
</div>
<div class="when">
${isUnavailableState(stateObj.state)
? ``
: html`
<hui-timestamp-display
.hass=${this.hass}
.ts=${new Date(stateObj.state)}
.format=${this._config.format}
capitalize
></hui-timestamp-display>
`}
</div>
</div>
</hui-generic-entity-row>
`;

54
src/state-summary/state-card-event.ts
View File

@ -1,10 +1,9 @@
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement } from "lit";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import "../components/entity/ha-entity-toggle";
import "../components/entity/state-info";
import { HomeAssistant } from "../types";
import { isUnavailableState } from "../data/entity";
import { computeAttributeValueDisplay } from "../common/entity/compute_attribute_display";
import { computeStateDisplay } from "../common/entity/compute_state_display";
import { haStyle } from "../resources/styles";
@ -25,30 +24,45 @@ export class StateCardEvent extends LitElement {
.stateObj=${this.stateObj}
.inDialog=${this.inDialog}
></state-info>
<div class="event_type">
${isUnavailableState(this.stateObj.state)
? computeStateDisplay(
this.hass!.localize,
this.stateObj,
this.hass.locale,
this.hass.config,
this.hass.entities
)
: computeAttributeValueDisplay(
this.hass!.localize,
this.stateObj,
this.hass.locale,
this.hass.config,
this.hass.entities,
"event_type"
)}
<div class="container">
<div class="event_type">
${computeStateDisplay(
this.hass!.localize,
this.stateObj,
this.hass.locale,
this.hass.config,
this.hass.entities
)}
</div>
<div class="event_data">
${computeAttributeValueDisplay(
this.hass!.localize,
this.stateObj,
this.hass.locale,
this.hass.config,
this.hass.entities,
"event_type"
)}
</div>
</div>
</div>
`;
}
static get styles(): CSSResultGroup {
return haStyle;
return [
haStyle,
css`
.container {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.event_data {
color: var(--secondary-text-color);
}
`,
];
}
}