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

Use new select component for effect for more info light (#17542)

Browse Source
This commit is contained in:
Paul Bottein 2023-08-14 09:29:58 +02:00 committed by GitHub
parent 134d1978f8
commit 25b4d91d72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/dialogs/more-info/controls/more-info-fan.ts
View File

@ -11,7 +11,6 @@ import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { stateActive } from "../../../common/entity/state_active";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes";
import "../../../components/ha-control-select-menu";
import "../../../components/ha-list-item";
import "../../../components/ha-outlined-icon-button";

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

@ -8,35 +8,30 @@ import {
mdiPower,
} from "@mdi/js";
import {
css,
CSSResultGroup,
html,
LitElement,
nothing,
PropertyValues,
css,
html,
nothing,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import {
computeAttributeNameDisplay,
computeAttributeValueDisplay,
} from "../../../common/entity/compute_attribute_display";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
import "../../../components/ha-attributes";
import "../../../components/ha-button-menu";
import "../../../components/ha-control-select-menu";
import "../../../components/ha-icon-button-group";
import "../../../components/ha-icon-button-toggle";
import "../../../components/ha-outlined-button";
import "../../../components/ha-select";
import "../../../components/ha-list-item";
import { UNAVAILABLE } from "../../../data/entity";
import { ExtEntityRegistryEntry } from "../../../data/entity_registry";
import { forwardHaptic } from "../../../data/haptics";
import {
formatTempColor,
LightColorMode,
LightEntity,
LightEntityFeature,
formatTempColor,
lightSupportsBrightness,
lightSupportsColor,
lightSupportsColorMode,
@ -287,64 +282,46 @@ class MoreInfoLight extends LitElement {
: nothing}
`
: nothing}
${supportsEffects && this.stateObj.attributes.effect_list
? html`
<ha-button-menu
@action=${this._handleEffectButton}
@closed=${stopPropagation}
fixed
.disabled=${this.stateObj.state === UNAVAILABLE}
>
<ha-outlined-button
slot="trigger"
.disabled=${this.stateObj.state === UNAVAILABLE}
>
<ha-svg-icon slot="icon" path=${mdiCreation}></ha-svg-icon>
${this._effect
? computeAttributeValueDisplay(
this.hass.localize,
this.stateObj!,
this.hass.locale,
this.hass.config,
this.hass.entities,
"effect",
this._effect
)
: computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this.hass.entities,
"effect"
)}
</ha-outlined-button>
${this.stateObj.attributes.effect_list.map(
(effect: string) => html`
<ha-list-item
.value=${effect}
.activated=${this.stateObj!.attributes.effect === effect}
>
${computeAttributeValueDisplay(
this.hass.localize,
this.stateObj!,
this.hass.locale,
this.hass.config,
this.hass.entities,
"effect",
effect
)}
</ha-list-item>
`
)}
</ha-button-menu>
`
: nothing}
</div>
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
extra-filters="brightness,color_temp,color_temp_kelvin,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,min_color_temp_kelvin,max_color_temp_kelvin,entity_id,supported_color_modes,color_mode"
></ha-attributes>
<div>
<div class="secondary-controls">
<div class="secondary-controls-scroll">
${supportsEffects && this.stateObj.attributes.effect_list
? html`
<ha-control-select-menu
.label=${this.hass.formatEntityAttributeName(
this.stateObj,
"effect"
)}
.value=${this.stateObj.attributes.effect}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleEffect}
@closed=${stopPropagation}
>
<ha-svg-icon slot="icon" .path=${mdiCreation}></ha-svg-icon>
${this.stateObj.attributes.effect_list?.map(
(mode) => html`
<ha-list-item .value=${mode}>
${this.hass.formatEntityAttributeValue(
this.stateObj!,
"effect",
mode
)}
</ha-list-item>
`
)}
</ha-control-select-menu>
`
: nothing}
</div>
</div>
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
extra-filters="brightness,color_temp,color_temp_kelvin,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,min_color_temp_kelvin,max_color_temp_kelvin,entity_id,supported_color_modes,color_mode"
></ha-attributes>
</div>
`;
}
@ -363,12 +340,8 @@ class MoreInfoLight extends LitElement {
});
};
private _handleEffectButton(ev) {
ev.stopPropagation();
ev.preventDefault();
const index = ev.detail.index;
const newVal = this.stateObj!.attributes.effect_list![index];
private _handleEffect(ev) {
const newVal = ev.target.value;
const oldVal = this._effect;
if (!newVal || oldVal === newVal) return;