Use icon in area card if there is no image (#19933)

This commit is contained in:
Paul Bottein 2024-03-04 15:31:07 +01:00 committed by GitHub
parent b9a7a7c422
commit b99072d986
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -418,15 +418,24 @@ export class HuiAreaCard
})} })}
> >
${area.picture || cameraEntityId ${area.picture || cameraEntityId
? html`<hui-image ? html`
.config=${this._config} <hui-image
.hass=${this.hass} .config=${this._config}
.image=${area.picture ? area.picture : undefined} .hass=${this.hass}
.cameraImage=${cameraEntityId} .image=${area.picture ? area.picture : undefined}
.cameraView=${this._config.camera_view} .cameraImage=${cameraEntityId}
.aspectRatio=${this._config.aspect_ratio || DEFAULT_ASPECT_RATIO} .cameraView=${this._config.camera_view}
></hui-image>` .aspectRatio=${this._config.aspect_ratio ||
: ""} DEFAULT_ASPECT_RATIO}
></hui-image>
`
: area.icon
? html`
<div class="icon-container">
<ha-icon icon=${area.icon}></ha-icon>
</div>
`
: nothing}
<div <div
class="container ${classMap({ class="container ${classMap({
@ -559,6 +568,22 @@ export class HuiAreaCard
opacity: 0.12; opacity: 0.12;
} }
.icon-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.icon-container ha-icon {
--mdc-icon-size: 60px;
color: var(--sidebar-selected-icon-color);
}
.sensors { .sensors {
color: #e3e3e3; color: #e3e3e3;
font-size: 16px; font-size: 16px;