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

Fix more info control assumed state color (#15548)

Browse Source
This commit is contained in:
Paul Bottein 2023-02-22 16:59:01 +01:00 committed by GitHub
parent 2bd6d9d202
commit 91493e109e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 89 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/dialogs/more-info/components/ha-more-info-toggle.ts
View File

@ -145,12 +145,12 @@ export class HaMoreInfoToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
--button-bar-border-radius: 18px;
--control-button-border-radius: 18px;
}
ha-control-button.active {
--button-bar-icon-color: white;
--button-bar-background-color: var(--color);
--button-bar-background-opacity: 1;
--control-button-icon-color: white;
--control-button-background-color: var(--color);
--control-button-background-opacity: 1;
}
ha-control-button:not(:last-child) {
margin-bottom: 6px;

175
src/dialogs/more-info/controls/more-info-light.ts
View File

@ -91,104 +91,99 @@ class MoreInfoLight extends LitElement {
.stateObj=${this.stateObj}
.stateOverride=${stateOverride}
></ha-more-info-state-header>
</ha-more-info-light-toggle>
${
supportsBrightness
? html`
<ha-more-info-light-brightness
.stateObj=${this.stateObj}
.hass=${this.hass}
@slider-moved=${this._brightnessChanged}
>
</ha-more-info-light-brightness>
`
: html`
<ha-more-info-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
.iconPathOn=${mdiLightbulb}
.iconPathOff=${mdiLightbulbOff}
></ha-more-info-toggle>
`
}
${
supportsColorTemp ||
supportsColor ||
supportsEffects ||
supportsBrightness
? html`
<div class="buttons">
${supportsBrightness
? html`
${supportsBrightness
? html`
<ha-more-info-light-brightness
.stateObj=${this.stateObj}
.hass=${this.hass}
@slider-moved=${this._brightnessChanged}
>
</ha-more-info-light-brightness>
`
: html`
<ha-more-info-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
.iconPathOn=${mdiLightbulb}
.iconPathOff=${mdiLightbulbOff}
></ha-more-info-toggle>
`}
${supportsColorTemp ||
supportsColor ||
supportsEffects ||
supportsBrightness
? html`
<div class="buttons">
${supportsBrightness
? html`
<md-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE}
.title=${this.hass.localize(
"ui.dialogs.more_info_control.light.toggle"
)}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.light.toggle"
)}
@click=${this._toggle}
>
<ha-svg-icon .path=${mdiPower}></ha-svg-icon>
</md-outlined-icon-button>
`
: null}
${supportsColorTemp || supportsColor
? html`
<md-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE}
.title=${this.hass.localize(
"ui.dialogs.more_info_control.light.change_color"
)}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.light.change_color"
)}
@click=${this._showLightColorPickerView}
>
<ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
</md-outlined-icon-button>
`
: null}
${supportsEffects
? html`
<ha-button-menu
corner="BOTTOM_START"
@action=${this._handleEffectButton}
@closed=${stopPropagation}
fixed
.disabled=${this.stateObj.state === UNAVAILABLE}
>
<md-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE}
slot="trigger"
.title=${this.hass.localize(
"ui.dialogs.more_info_control.light.toggle"
"ui.dialogs.more_info_control.light.select_effect"
)}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.light.toggle"
"ui.dialogs.more_info_control.light.select_effect"
)}
@click=${this._toggle}
>
<ha-svg-icon .path=${mdiPower}></ha-svg-icon>
<ha-svg-icon .path=${mdiCreation}></ha-svg-icon>
</md-outlined-icon-button>
`
: null}
${supportsColorTemp || supportsColor
? html`
<md-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE}
.title=${this.hass.localize(
"ui.dialogs.more_info_control.light.change_color"
)}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.light.change_color"
)}
@click=${this._showLightColorPickerView}
>
<ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
</md-outlined-icon-button>
`
: null}
${supportsEffects
? html`
<ha-button-menu
corner="BOTTOM_START"
@action=${this._handleEffectButton}
@closed=${stopPropagation}
fixed
.disabled=${this.stateObj.state === UNAVAILABLE}
>
<md-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE}
slot="trigger"
.title=${this.hass.localize(
"ui.dialogs.more_info_control.light.select_effect"
)}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.light.select_effect"
)}
>
<ha-svg-icon .path=${mdiCreation}></ha-svg-icon>
</md-outlined-icon-button>
${this.stateObj.attributes.effect_list!.map(
(effect: string) => html`
<mwc-list-item
.value=${effect}
.activated=${this.stateObj!.attributes
.effect === effect}
>
${effect}
</mwc-list-item>
`
)}
</ha-button-menu>
`
: null}
</div>
`
: null
}
${this.stateObj.attributes.effect_list!.map(
(effect: string) => html`
<mwc-list-item
.value=${effect}
.activated=${this.stateObj!.attributes.effect ===
effect}
>
${effect}
</mwc-list-item>
`
)}
</ha-button-menu>
`
: null}
</div>
`
: null}
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}