Add lovelace bg opacity preview (#24387)

* Add lovelace bg opacity preview

* Add yaml preview

* Simplify logic with css var

* Clean up

* Remove important

* Add opacity default to 100
This commit is contained in:
Wendelin 2025-02-25 16:21:32 +01:00 committed by GitHub
parent 34b7929165
commit bbaf23e049
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 2 deletions

View File

@ -250,6 +250,11 @@ export class HaPictureUpload extends LitElement {
max-height: 200px; max-height: 200px;
margin-bottom: 4px; margin-bottom: 4px;
border-radius: var(--file-upload-image-border-radius); border-radius: var(--file-upload-image-border-radius);
transition: opacity 0.3s;
opacity: var(--picture-opacity, 1);
}
img:hover {
opacity: 1;
} }
`, `,
]; ];

View File

@ -35,6 +35,14 @@ export class HaBackgroundSelector extends LitElement {
<div> <div>
${this.yamlBackground ${this.yamlBackground
? html` ? html`
<div class="value">
<img
src=${this.value}
alt=${this.hass.localize(
"ui.components.picture-upload.current_image_alt"
)}
/>
</div>
<ha-alert alert-type="info"> <ha-alert alert-type="info">
${this.hass.localize( ${this.hass.localize(
`ui.components.selectors.background.yaml_info` `ui.components.selectors.background.yaml_info`
@ -50,7 +58,7 @@ export class HaBackgroundSelector extends LitElement {
<ha-picture-upload <ha-picture-upload
.hass=${this.hass} .hass=${this.hass}
.value=${this.value?.startsWith(URL_PREFIX) ? this.value : null} .value=${this.value?.startsWith(URL_PREFIX) ? this.value : null}
.original=${this.selector.background?.original} .original=${!!this.selector.background?.original}
.cropOptions=${this.selector.background?.crop} .cropOptions=${this.selector.background?.crop}
select-media select-media
@change=${this._pictureChanged} @change=${this._pictureChanged}
@ -83,6 +91,23 @@ export class HaBackgroundSelector extends LitElement {
white-space: nowrap; white-space: nowrap;
--mdc-theme-primary: var(--primary-color); --mdc-theme-primary: var(--primary-color);
} }
.value {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
img {
max-width: 100%;
max-height: 200px;
margin-bottom: 4px;
border-radius: var(--file-upload-image-border-radius);
transition: opacity 0.3s;
opacity: var(--picture-opacity, 1);
}
img:hover {
opacity: 1;
}
`; `;
} }

View File

@ -38,7 +38,7 @@ export class HuiViewBackgroundEditor extends LitElement {
{ {
name: "opacity", name: "opacity",
selector: { selector: {
number: { min: 1, max: 100, mode: "slider" }, number: { min: 0, max: 100, mode: "slider" },
}, },
}, },
{ {
@ -144,6 +144,7 @@ export class HuiViewBackgroundEditor extends LitElement {
.computeLabel=${this._computeLabelCallback} .computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
.localizeValue=${this._localizeValueCallback} .localizeValue=${this._localizeValueCallback}
style=${`--picture-opacity: ${(background.opacity ?? 100) / 100};`}
></ha-form> ></ha-form>
`; `;
} }
@ -194,6 +195,7 @@ export class HuiViewBackgroundEditor extends LitElement {
static styles = css` static styles = css`
:host { :host {
display: block; display: block;
--file-upload-image-border-radius: 4px;
} }
`; `;
} }