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

Add color temperature value to light more info (#15639)

Browse Source
This commit is contained in:
Paul Bottein 2023-03-01 11:24:01 +01:00 committed by GitHub
parent e3b797e85c
commit 9c703ab469
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts
View File

@ -7,8 +7,8 @@ import {
CSSResultGroup, CSSResultGroup,
html, html,
LitElement, LitElement,
PropertyValues,
nothing, nothing,
PropertyValues,
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../../../../components/ha-button-toggle-group"; import "../../../../components/ha-button-toggle-group";
@ -97,15 +97,19 @@ class MoreInfoViewLightColorPicker extends LitElement {
<div class="content"> <div class="content">
${this._mode === LightColorMode.COLOR_TEMP ${this._mode === LightColorMode.COLOR_TEMP
? html` ? html`
<p class="color-temp-value">
${this._ctSliderValue ? `${this._ctSliderValue} K` : nothing}
</p>
<ha-control-slider <ha-control-slider
vertical vertical
class="color_temp" class="color-temp"
label=${this.hass.localize("ui.card.light.color_temperature")} label=${this.hass.localize("ui.card.light.color_temperature")}
min="1" min="1"
max="100" max="100"
mode="cursor" mode="cursor"
.value=${this._ctSliderValue} .value=${this._ctSliderValue}
@value-changed=${this._ctSliderChanged} @value-changed=${this._ctSliderChanged}
@slider-moved=${this._ctSliderMoved}
.min=${this.stateObj.attributes.min_color_temp_kelvin!} .min=${this.stateObj.attributes.min_color_temp_kelvin!}
.max=${this.stateObj.attributes.max_color_temp_kelvin!} .max=${this.stateObj.attributes.max_color_temp_kelvin!}
> >
@ -114,7 +118,7 @@ class MoreInfoViewLightColorPicker extends LitElement {
: ""} : ""}
${this._mode === "color" ${this._mode === "color"
? html` ? html`
<div class="segmentationContainer"> <div class="segmentation-container">
<ha-color-picker <ha-color-picker
class="color" class="color"
@colorselected=${this._colorPicked} @colorselected=${this._colorPicked}
@ -127,7 +131,7 @@ class MoreInfoViewLightColorPicker extends LitElement {
<ha-icon-button <ha-icon-button
.path=${mdiPalette} .path=${mdiPalette}
@click=${this._segmentClick} @click=${this._segmentClick}
class="segmentationButton" class="segmentation-button"
></ha-icon-button> ></ha-icon-button>
</div> </div>
@ -206,7 +210,11 @@ class MoreInfoViewLightColorPicker extends LitElement {
this._brightnessAdjusted = maxVal; this._brightnessAdjusted = maxVal;
} }
} }
this._ctSliderValue = stateObj.attributes.color_temp_kelvin; this._ctSliderValue =
stateObj.attributes.color_mode === LightColorMode.COLOR_TEMP
? stateObj.attributes.color_temp_kelvin
: undefined;
this._wvSliderValue = this._wvSliderValue =
stateObj.attributes.color_mode === LightColorMode.RGBW stateObj.attributes.color_mode === LightColorMode.RGBW
? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255) ? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
@ -243,7 +251,7 @@ class MoreInfoViewLightColorPicker extends LitElement {
public willUpdate(changedProps: PropertyValues) { public willUpdate(changedProps: PropertyValues) {
super.willUpdate(changedProps); super.willUpdate(changedProps);
if (!changedProps.has("params") || !changedProps.has("hass")) { if (!changedProps.has("params") && !changedProps.has("hass")) {
return; return;
} }
@ -264,10 +272,11 @@ class MoreInfoViewLightColorPicker extends LitElement {
} }
this._modes = modes; this._modes = modes;
this._mode = this._mode = this.stateObj!.attributes.color_mode
this.stateObj!.attributes.color_mode === LightColorMode.COLOR_TEMP ? this.stateObj!.attributes.color_mode === LightColorMode.COLOR_TEMP
? LightColorMode.COLOR_TEMP ? LightColorMode.COLOR_TEMP
: "color"; : "color"
: this._modes[0];
} }
this._updateSliderValues(); this._updateSliderValues();
@ -281,6 +290,16 @@ class MoreInfoViewLightColorPicker extends LitElement {
this._mode = newMode; this._mode = newMode;
} }
private _ctSliderMoved(ev: CustomEvent) {
const ct = ev.detail.value;
if (isNaN(ct)) {
return;
}
this._ctSliderValue = ct;
}
private _ctSliderChanged(ev: CustomEvent) { private _ctSliderChanged(ev: CustomEvent) {
const ct = ev.detail.value; const ct = ev.detail.value;
@ -493,14 +512,14 @@ class MoreInfoViewLightColorPicker extends LitElement {
flex: 1; flex: 1;
} }
.segmentationContainer { .segmentation-container {
position: relative; position: relative;
max-height: 500px; max-height: 500px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.segmentationButton { .segmentation-button {
position: absolute; position: absolute;
top: 5%; top: 5%;
left: 0; left: 0;
@ -524,7 +543,17 @@ class MoreInfoViewLightColorPicker extends LitElement {
width: 100%; width: 100%;
} }
.color_temp { .color-temp-value {
font-style: normal;
font-weight: 500;
font-size: 16px;
height: 24px;
line-height: 24px;
letter-spacing: 0.1px;
margin: 0;
}
.color-temp {
--control-slider-thickness: 100px; --control-slider-thickness: 100px;
--control-slider-border-radius: 24px; --control-slider-border-radius: 24px;
--control-slider-background: -webkit-linear-gradient( --control-slider-background: -webkit-linear-gradient(
@ -534,6 +563,7 @@ class MoreInfoViewLightColorPicker extends LitElement {
rgb(255, 160, 0) 100% rgb(255, 160, 0) 100%
); );
--control-slider-background-opacity: 1; --control-slider-background-opacity: 1;
margin-bottom: 44px;
} }
hr { hr {