mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 16:26:43 +00:00
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:
parent
34b7929165
commit
bbaf23e049
@ -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;
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user