jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add an image fit mode to hui-image and picture-entity-card (#17959)

Browse Source
This commit is contained in:
karwosts 2023-09-26 14:08:56 -07:00 committed by GitHub
parent c3b41afb68
commit 6b31c07459
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -152,6 +152,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
.cameraView=${this._config.camera_view} .cameraView=${this._config.camera_view}
.entity=${this._config.entity} .entity=${this._config.entity}
.aspectRatio=${this._config.aspect_ratio} .aspectRatio=${this._config.aspect_ratio}
.fitMode=${this._config.fit_mode}
@action=${this._handleAction} @action=${this._handleAction}
.actionHandler=${actionHandler({ .actionHandler=${actionHandler({
hasHold: hasAction(this._config!.hold_action), hasHold: hasAction(this._config!.hold_action),

11
src/panels/lovelace/components/hui-image.ts
View File

@ -60,6 +60,8 @@ export class HuiImage extends LitElement {
@property() public darkModeFilter?: string; @property() public darkModeFilter?: string;
@property() public fitMode?: "cover" | "contain" | "fill";
@state() private _imageVisible? = false; @state() private _imageVisible? = false;
@state() private _loadState?: LoadState; @state() private _loadState?: LoadState;
@ -211,6 +213,8 @@ export class HuiImage extends LitElement {
})} })}
class="container ${classMap({ class="container ${classMap({
ratio: useRatio || this._lastImageHeight === undefined, ratio: useRatio || this._lastImageHeight === undefined,
contain: this.fitMode === "contain",
fill: this.fitMode === "fill",
})}" })}"
> >
${this.cameraImage && this.cameraView === "live" ${this.cameraImage && this.cameraView === "live"
@ -417,6 +421,13 @@ export class HuiImage extends LitElement {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
.ratio.fill {
background-size: 100% 100%;
}
.ratio.contain {
background-size: contain;
background-repeat: no-repeat;
}
.ratio img, .ratio img,
.ratio div { .ratio div {

1
src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
View File

@ -25,6 +25,7 @@ const cardConfigStruct = assign(
show_name: optional(boolean()), show_name: optional(boolean()),
show_state: optional(boolean()), show_state: optional(boolean()),
theme: optional(string()), theme: optional(string()),
fit_mode: optional(string()),
}) })
); );