Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-02-15 07:25:54 +00:00
Code Activity

Entity card: allow a reversed order for "value" & "unit" (#29407)

Browse Source 
* allow a reversed order

* formatEntityStateToParts() does not return "order"

* resolving conflicts

* fixed styles
This commit is contained in:
ildar170975
2026-02-11 14:37:41 +03:00
committed by GitHub
parent 16609053ac
commit da4395b8b3
1 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/panels/lovelace/cards/hui-entity-card.ts
View File

@@ -142,6 +142,10 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
}
}
const indexUnit = stateParts.findIndex((part) => part.type === "unit");
const indexValue = stateParts.findIndex((part) => part.type === "value");
const reversedOrder = indexUnit !== -1 && indexUnit < indexValue;
const name = computeLovelaceEntityName(
this.hass,
stateObj,
@@ -190,7 +194,11 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
</div>
</div>
<div class="info">
<span class="value"
<span
class=${classMap({
value: true,
"first-part": !reversedOrder,
})}
>${"attribute" in this._config
? stateObj.attributes[this._config.attribute!] !== undefined
? html`<ha-attribute-value
@@ -202,8 +210,15 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
</ha-attribute-value>`
: this.hass.localize("state.default.unknown")
: stateParts.find((part) => part.type === "value")?.value}</span
>
${unit ? html`<span class="measurement">${unit}</span>` : nothing}
>${unit
? html`<span
class=${classMap({
measurement: true,
"first-part": reversedOrder,
})}
>${unit}</span
>`
: nothing}
</div>
<div
class="footer"
@@ -322,19 +337,21 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
}
.info {
display: flex;
align-items: baseline;
padding: 0px 16px 16px;
margin-top: -4px;
line-height: var(--ha-line-height-condensed);
}
.info > * {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: var(--ha-line-height-condensed);
}
.value {
font-size: var(--ha-font-size-3xl);
margin-right: 4px;
margin-inline-end: 4px;
margin-inline-start: initial;
}
.measurement {
@@ -342,6 +359,13 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
color: var(--secondary-text-color);
}
.first-part {
order: -1; /* ? */
margin-right: 4px;
margin-inline-end: 4px;
margin-inline-start: initial;
}
.with-fixed-footer {
justify-content: flex-start;
}