mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 02:46:38 +00:00
Add effects selector in light more info (#156)
* Add effects selector in light more info * Fix incorrect indentation
This commit is contained in:
parent
c22586de8d
commit
9184aaf33f
@ -9,7 +9,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<style is="custom-style" include="iron-flex"></style>
|
<style is="custom-style" include="iron-flex"></style>
|
||||||
<style>
|
<style>
|
||||||
.brightness, .color_temp, .white_value {
|
.effect_list {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.effect_list, .brightness, .color_temp, .white_value {
|
||||||
max-height: 0px;
|
max-height: 0px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: max-height .5s ease-in;
|
transition: max-height .5s ease-in;
|
||||||
@ -24,6 +28,7 @@
|
|||||||
transition: max-height .2s ease-in;
|
transition: max-height .2s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.has-effect_list .effect_list,
|
||||||
.has-brightness .brightness,
|
.has-brightness .brightness,
|
||||||
.has-color_temp .color_temp,
|
.has-color_temp .color_temp,
|
||||||
.has-white_value .white_value {
|
.has-white_value .white_value {
|
||||||
@ -37,6 +42,17 @@
|
|||||||
|
|
||||||
<div class$='[[computeClassNames(stateObj)]]'>
|
<div class$='[[computeClassNames(stateObj)]]'>
|
||||||
|
|
||||||
|
<div class='effect_list'>
|
||||||
|
<paper-dropdown-menu label-float label='Effect'>
|
||||||
|
<paper-menu class="dropdown-content" selected="{{effectIndex}}">
|
||||||
|
<template is='dom-repeat'
|
||||||
|
items='[[stateObj.attributes.effect_list]]'>
|
||||||
|
<paper-item>[[item]]</paper-item>
|
||||||
|
</template>
|
||||||
|
</paper-menu>
|
||||||
|
</paper-dropdown-menu>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class='brightness'>
|
<div class='brightness'>
|
||||||
<ha-labeled-slider
|
<ha-labeled-slider
|
||||||
caption='Brightness' icon='mdi:brightness-5' max='255'
|
caption='Brightness' icon='mdi:brightness-5' max='255'
|
||||||
@ -79,6 +95,12 @@ Polymer({
|
|||||||
observer: 'stateObjChanged',
|
observer: 'stateObjChanged',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
effectIndex: {
|
||||||
|
type: Number,
|
||||||
|
value: -1,
|
||||||
|
observer: 'effectChanged',
|
||||||
|
},
|
||||||
|
|
||||||
brightnessSliderValue: {
|
brightnessSliderValue: {
|
||||||
type: Number,
|
type: Number,
|
||||||
value: 0,
|
value: 0,
|
||||||
@ -100,6 +122,13 @@ Polymer({
|
|||||||
this.brightnessSliderValue = newVal.attributes.brightness;
|
this.brightnessSliderValue = newVal.attributes.brightness;
|
||||||
this.ctSliderValue = newVal.attributes.color_temp;
|
this.ctSliderValue = newVal.attributes.color_temp;
|
||||||
this.wvSliderValue = newVal.attributes.white_value;
|
this.wvSliderValue = newVal.attributes.white_value;
|
||||||
|
|
||||||
|
if (newVal.attributes.effect_list) {
|
||||||
|
this.effectIndex = newVal.attributes.effect_list.indexOf(
|
||||||
|
newVal.attributes.effect);
|
||||||
|
} else {
|
||||||
|
this.effectIndex = -1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.async(function () {
|
this.async(function () {
|
||||||
@ -109,7 +138,22 @@ Polymer({
|
|||||||
|
|
||||||
computeClassNames: function (stateObj) {
|
computeClassNames: function (stateObj) {
|
||||||
return window.hassUtil.attributeClassNames(
|
return window.hassUtil.attributeClassNames(
|
||||||
stateObj, ['brightness', 'rgb_color', 'color_temp', 'white_value']);
|
stateObj, ['brightness', 'rgb_color', 'color_temp', 'white_value',
|
||||||
|
'effect_list']);
|
||||||
|
},
|
||||||
|
|
||||||
|
effectChanged: function (effectIndex) {
|
||||||
|
var effectInput;
|
||||||
|
// Selected Option will transition to '' before transitioning to new value
|
||||||
|
if (effectIndex === '' || effectIndex === -1) return;
|
||||||
|
|
||||||
|
effectInput = this.stateObj.attributes.effect_list[effectIndex];
|
||||||
|
if (effectInput === this.stateObj.attributes.effect) return;
|
||||||
|
|
||||||
|
this.hass.serviceActions.callService('light', 'turn_on', {
|
||||||
|
entity_id: this.stateObj.entityId,
|
||||||
|
effect: effectInput,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
brightnessSliderChanged: function (ev) {
|
brightnessSliderChanged: function (ev) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user