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

Add lovelace bg opacity preview (#24387)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ha-picture-upload.ts
View File

@ -250,6 +250,11 @@ export class HaPictureUpload extends LitElement {
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;
}
`,
];

27
src/components/ha-selector/ha-selector-background.ts
View File

@ -35,6 +35,14 @@ export class HaBackgroundSelector extends LitElement {
<div>
${this.yamlBackground
? 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">
${this.hass.localize(
`ui.components.selectors.background.yaml_info`
@ -50,7 +58,7 @@ export class HaBackgroundSelector extends LitElement {
<ha-picture-upload
.hass=${this.hass}
.value=${this.value?.startsWith(URL_PREFIX) ? this.value : null}
.original=${this.selector.background?.original}
.original=${!!this.selector.background?.original}
.cropOptions=${this.selector.background?.crop}
select-media
@change=${this._pictureChanged}
@ -83,6 +91,23 @@ export class HaBackgroundSelector extends LitElement {
white-space: nowrap;
--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;
}
`;
}

4
src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts
View File

@ -38,7 +38,7 @@ export class HuiViewBackgroundEditor extends LitElement {
{
name: "opacity",
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}
@value-changed=${this._valueChanged}
.localizeValue=${this._localizeValueCallback}
style=${`--picture-opacity: ${(background.opacity ?? 100) / 100};`}
></ha-form>
`;
}
@ -194,6 +195,7 @@ export class HuiViewBackgroundEditor extends LitElement {
static styles = css`
:host {
display: block;
--file-upload-image-border-radius: 4px;
}
`;
}