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

Allow user to theme all cover states in tile card and more info. (#17898)

Browse Source
This commit is contained in:
Paul Bottein 2023-09-11 18:18:39 +02:00 committed by GitHub
parent 24d401061c
commit d0a60984ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts
View File

@ -35,9 +35,8 @@ export class HaMoreInfoCoverPosition extends LitElement {
} }
protected render(): TemplateResult { protected render(): TemplateResult {
const forcedState = this.stateObj.state === "closed" ? "open" : undefined; const openColor = stateColorCss(this.stateObj, "open");
const color = stateColorCss(this.stateObj);
const color = stateColorCss(this.stateObj, forcedState);
return html` return html`
<ha-control-slider <ha-control-slider
@ -55,6 +54,8 @@ export class HaMoreInfoCoverPosition extends LitElement {
"current_position" "current_position"
)} )}
style=${styleMap({ style=${styleMap({
// Use open color for inactive state to avoid grey slider that looks disabled
"--state-cover-inactive-color": openColor,
"--control-slider-color": color, "--control-slider-color": color,
"--control-slider-background": color, "--control-slider-background": color,
})} })}

7
src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts
View File

@ -72,9 +72,8 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
} }
protected render(): TemplateResult { protected render(): TemplateResult {
const forcedState = this.stateObj.state === "closed" ? "open" : undefined; const openColor = stateColorCss(this.stateObj, "open");
const color = stateColorCss(this.stateObj);
const color = stateColorCss(this.stateObj, forcedState);
return html` return html`
<ha-control-slider <ha-control-slider
@ -91,6 +90,8 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
"current_tilt_position" "current_tilt_position"
)} )}
style=${styleMap({ style=${styleMap({
// Use open color for inactive state to avoid grey slider that looks disabled
"--state-cover-inactive-color": openColor,
"--control-slider-color": color, "--control-slider-color": color,
"--control-slider-background": color, "--control-slider-background": color,
})} })}

6
src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts
View File

@ -64,14 +64,16 @@ class HuiCoverPositionTileFeature
const value = Math.max(Math.round(percentage), 0); const value = Math.max(Math.round(percentage), 0);
const forcedState = this.stateObj.state === "closed" ? "open" : undefined; const openColor = stateColorCss(this.stateObj, "open");
const color = this.color const color = this.color
? computeCssColor(this.color) ? computeCssColor(this.color)
: stateColorCss(this.stateObj, forcedState); : stateColorCss(this.stateObj);
const style = { const style = {
"--color": color, "--color": color,
// Use open color for inactive state to avoid grey slider that looks disabled
"--state-cover-inactive-color": openColor,
}; };
return html` return html`

6
src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts
View File

@ -64,14 +64,16 @@ class HuiCoverTiltPositionTileFeature
const value = Math.max(Math.round(percentage), 0); const value = Math.max(Math.round(percentage), 0);
const forcedState = this.stateObj.state === "closed" ? "open" : undefined; const openColor = stateColorCss(this.stateObj, "open");
const color = this.color const color = this.color
? computeCssColor(this.color) ? computeCssColor(this.color)
: stateColorCss(this.stateObj, forcedState); : stateColorCss(this.stateObj);
const style = { const style = {
"--color": color, "--color": color,
// Use open color for inactive state to avoid grey slider that looks disabled
"--state-cover-inactive-color": openColor,
}; };
return html` return html`