jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 10:46:35 +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 { ha-control-button {
flex: 1; flex: 1;
width: 100%; width: 100%;
--button-bar-border-radius: 18px; --control-button-border-radius: 18px;
} }
ha-control-button.active { ha-control-button.active {
--button-bar-icon-color: white; --control-button-icon-color: white;
--button-bar-background-color: var(--color); --control-button-background-color: var(--color);
--button-bar-background-opacity: 1; --control-button-background-opacity: 1;
} }
ha-control-button:not(:last-child) { ha-control-button:not(:last-child) {
margin-bottom: 6px; 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} .stateObj=${this.stateObj}
.stateOverride=${stateOverride} .stateOverride=${stateOverride}
></ha-more-info-state-header> ></ha-more-info-state-header>
</ha-more-info-light-toggle> ${supportsBrightness
${ ? html`
supportsBrightness <ha-more-info-light-brightness
? html` .stateObj=${this.stateObj}
<ha-more-info-light-brightness .hass=${this.hass}
.stateObj=${this.stateObj} @slider-moved=${this._brightnessChanged}
.hass=${this.hass} >
@slider-moved=${this._brightnessChanged} </ha-more-info-light-brightness>
> `
</ha-more-info-light-brightness> : html`
` <ha-more-info-toggle
: html` .stateObj=${this.stateObj}
<ha-more-info-toggle .hass=${this.hass}
.stateObj=${this.stateObj} .iconPathOn=${mdiLightbulb}
.hass=${this.hass} .iconPathOff=${mdiLightbulbOff}
.iconPathOn=${mdiLightbulb} ></ha-more-info-toggle>
.iconPathOff=${mdiLightbulbOff} `}
></ha-more-info-toggle> ${supportsColorTemp ||
` supportsColor ||
} supportsEffects ||
${ supportsBrightness
supportsColorTemp || ? html`
supportsColor || <div class="buttons">
supportsEffects || ${supportsBrightness
supportsBrightness ? html`
? html` <md-outlined-icon-button
<div class="buttons"> .disabled=${this.stateObj.state === UNAVAILABLE}
${supportsBrightness .title=${this.hass.localize(
? html` "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 <md-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
slot="trigger"
.title=${this.hass.localize( .title=${this.hass.localize(
"ui.dialogs.more_info_control.light.toggle" "ui.dialogs.more_info_control.light.select_effect"
)} )}
.ariaLabel=${this.hass.localize( .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> </md-outlined-icon-button>
` ${this.stateObj.attributes.effect_list!.map(
: null} (effect: string) => html`
${supportsColorTemp || supportsColor <mwc-list-item
? html` .value=${effect}
<md-outlined-icon-button .activated=${this.stateObj!.attributes.effect ===
.disabled=${this.stateObj.state === UNAVAILABLE} effect}
.title=${this.hass.localize( >
"ui.dialogs.more_info_control.light.change_color" ${effect}
)} </mwc-list-item>
.ariaLabel=${this.hass.localize( `
"ui.dialogs.more_info_control.light.change_color" )}
)} </ha-button-menu>
@click=${this._showLightColorPickerView} `
> : null}
<ha-svg-icon .path=${mdiPalette}></ha-svg-icon> </div>
</md-outlined-icon-button> `
` : null}
: 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
}
<ha-attributes <ha-attributes
.hass=${this.hass} .hass=${this.hass}
.stateObj=${this.stateObj} .stateObj=${this.stateObj}