Fix area card background and improve grid support (#21259)

This commit is contained in:
Paul Bottein 2024-07-03 13:16:55 +02:00 committed by GitHub
parent 19ee150395
commit 81c796beb4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -412,19 +412,19 @@ export class HuiAreaCard
if (this._config.show_camera && "camera" in entitiesByDomain) { if (this._config.show_camera && "camera" in entitiesByDomain) {
cameraEntityId = entitiesByDomain.camera[0].entity_id; cameraEntityId = entitiesByDomain.camera[0].entity_id;
} }
cameraEntityId = "camera.demo_camera";
const imageClass = area.picture || cameraEntityId; const imageClass = area.picture || cameraEntityId;
const ignoreAspectRatio = imageClass || this.layout === "grid"; const ignoreAspectRatio = this.layout === "grid";
return html` return html`
<ha-card <ha-card
class=${imageClass ? "image" : ""} class=${imageClass ? "image" : ""}
style=${styleMap({ style=${styleMap({
paddingBottom: ignoreAspectRatio paddingBottom:
? "0" ignoreAspectRatio || imageClass
: `${((100 * this._ratio!.h) / this._ratio!.w).toFixed(2)}%`, ? "0"
: `${((100 * this._ratio!.h) / this._ratio!.w).toFixed(2)}%`,
})} })}
> >
${area.picture || cameraEntityId ${area.picture || cameraEntityId
@ -435,8 +435,10 @@ export class HuiAreaCard
.image=${area.picture ? area.picture : undefined} .image=${area.picture ? area.picture : undefined}
.cameraImage=${cameraEntityId} .cameraImage=${cameraEntityId}
.cameraView=${this._config.camera_view} .cameraView=${this._config.camera_view}
.aspectRatio=${this._config.aspect_ratio || .aspectRatio=${ignoreAspectRatio
DEFAULT_ASPECT_RATIO} ? undefined
: this._config.aspect_ratio || DEFAULT_ASPECT_RATIO}
fitMode="cover"
></hui-image> ></hui-image>
` `
: area.icon : area.icon
@ -586,6 +588,10 @@ export class HuiAreaCard
opacity: 0.12; opacity: 0.12;
} }
.image hui-image {
height: 100%;
}
.icon-container { .icon-container {
position: absolute; position: absolute;
top: 0; top: 0;