mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-09 18:36:35 +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>
|
||||
<style is="custom-style" include="iron-flex"></style>
|
||||
<style>
|
||||
.brightness, .color_temp, .white_value {
|
||||
.effect_list {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.effect_list, .brightness, .color_temp, .white_value {
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
transition: max-height .5s ease-in;
|
||||
@ -24,6 +28,7 @@
|
||||
transition: max-height .2s ease-in;
|
||||
}
|
||||
|
||||
.has-effect_list .effect_list,
|
||||
.has-brightness .brightness,
|
||||
.has-color_temp .color_temp,
|
||||
.has-white_value .white_value {
|
||||
@ -37,6 +42,17 @@
|
||||
|
||||
<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'>
|
||||
<ha-labeled-slider
|
||||
caption='Brightness' icon='mdi:brightness-5' max='255'
|
||||
@ -79,6 +95,12 @@ Polymer({
|
||||
observer: 'stateObjChanged',
|
||||
},
|
||||
|
||||
effectIndex: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
observer: 'effectChanged',
|
||||
},
|
||||
|
||||
brightnessSliderValue: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
@ -100,6 +122,13 @@ Polymer({
|
||||
this.brightnessSliderValue = newVal.attributes.brightness;
|
||||
this.ctSliderValue = newVal.attributes.color_temp;
|
||||
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 () {
|
||||
@ -109,7 +138,22 @@ Polymer({
|
||||
|
||||
computeClassNames: function (stateObj) {
|
||||
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) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user