jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 02:36:37 +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"> <div class="what">
${computeStateDisplay(
this.hass!.localize,
stateObj,
this.hass.locale,
this.hass.config,
this.hass.entities
)}
</div>
<div class="when">
${isUnavailableState(stateObj.state) ${isUnavailableState(stateObj.state)
? computeStateDisplay( ? ``
this.hass!.localize,
stateObj,
this.hass.locale,
this.hass.config,
this.hass.entities
)
: computeAttributeValueDisplay( : computeAttributeValueDisplay(
this.hass!.localize, this.hass!.localize,
stateObj, stateObj,
@ -86,18 +89,6 @@ class HuiEventEntityRow extends LitElement implements LovelaceRow {
"event_type" "event_type"
)} )}
</div> </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> </div>
</hui-generic-entity-row> </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 { 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 { customElement, property } from "lit/decorators";
import "../components/entity/ha-entity-toggle"; import "../components/entity/ha-entity-toggle";
import "../components/entity/state-info"; import "../components/entity/state-info";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
import { isUnavailableState } from "../data/entity";
import { computeAttributeValueDisplay } from "../common/entity/compute_attribute_display"; import { computeAttributeValueDisplay } from "../common/entity/compute_attribute_display";
import { computeStateDisplay } from "../common/entity/compute_state_display"; import { computeStateDisplay } from "../common/entity/compute_state_display";
import { haStyle } from "../resources/styles"; import { haStyle } from "../resources/styles";
@ -25,30 +24,45 @@ export class StateCardEvent extends LitElement {
.stateObj=${this.stateObj} .stateObj=${this.stateObj}
.inDialog=${this.inDialog} .inDialog=${this.inDialog}
></state-info> ></state-info>
<div class="event_type"> <div class="container">
${isUnavailableState(this.stateObj.state) <div class="event_type">
? computeStateDisplay( ${computeStateDisplay(
this.hass!.localize, this.hass!.localize,
this.stateObj, this.stateObj,
this.hass.locale, this.hass.locale,
this.hass.config, this.hass.config,
this.hass.entities this.hass.entities
) )}
: computeAttributeValueDisplay( </div>
this.hass!.localize, <div class="event_data">
this.stateObj, ${computeAttributeValueDisplay(
this.hass.locale, this.hass!.localize,
this.hass.config, this.stateObj,
this.hass.entities, this.hass.locale,
"event_type" this.hass.config,
)} this.hass.entities,
"event_type"
)}
</div>
</div> </div>
</div> </div>
`; `;
} }
static get styles(): CSSResultGroup { 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);
}
`,
];
} }
} }