Only render badge value if there is no icon and no image (#10310)

This commit is contained in:
Philip Allgaier 2021-10-18 01:39:13 +02:00 committed by GitHub
parent 93f64de875
commit f0062b1e67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -69,9 +69,13 @@ export class HaStateLabelBadge extends LitElement {
`; `;
} }
// Rendering priority inside badge:
// 1. Icon directly defined in badge config
// 2. Image directly defined in badge config
// 3. Image taken from entity picture
// 4. Icon determined via entity state
// 5. Value string as fallback
const domain = computeStateDomain(entityState); const domain = computeStateDomain(entityState);
const value = this._computeValue(domain, entityState);
const icon = this.icon ? this.icon : this._computeIcon(domain, entityState); const icon = this.icon ? this.icon : this._computeIcon(domain, entityState);
const image = this.icon const image = this.icon
? "" ? ""
@ -79,6 +83,8 @@ export class HaStateLabelBadge extends LitElement {
? this.image ? this.image
: entityState.attributes.entity_picture_local || : entityState.attributes.entity_picture_local ||
entityState.attributes.entity_picture; entityState.attributes.entity_picture;
const value =
!image && !icon ? this._computeValue(domain, entityState) : undefined;
return html` return html`
<ha-label-badge <ha-label-badge
@ -96,7 +102,7 @@ export class HaStateLabelBadge extends LitElement {
.description=${this.name ?? computeStateName(entityState)} .description=${this.name ?? computeStateName(entityState)}
> >
${!image && icon ? html`<ha-icon .icon=${icon}></ha-icon>` : ""} ${!image && icon ? html`<ha-icon .icon=${icon}></ha-icon>` : ""}
${value && (this.icon || !this.image) ${value && !icon && !image
? html`<span class=${value && value.length > 4 ? "big" : ""} ? html`<span class=${value && value.length > 4 ? "big" : ""}
>${value}</span >${value}</span
>` >`