Renamed to color_temp, fixed css

This commit is contained in:
Tom Duijf 2015-10-28 22:34:39 +00:00
parent 83eb223169
commit f86f52134c
2 changed files with 22 additions and 12 deletions

View File

@ -13,6 +13,14 @@
transition: max-height .5s ease-in; transition: max-height .5s ease-in;
} }
.color_temp {
margin-bottom: 8px;
max-height: 0px;
overflow: hidden;
transition: max-height .5s ease-in;
}
ha-color-picker { ha-color-picker {
display: block; display: block;
width: 350px; width: 350px;
@ -27,6 +35,10 @@
max-height: 40px; max-height: 40px;
} }
.has-color_temp .color_temp {
max-height: 40px;
}
.has-xy_color ha-color-picker { .has-xy_color ha-color-picker {
max-height: 500px; max-height: 500px;
} }
@ -40,15 +52,13 @@
on-change='brightnessSliderChanged' class='flex'> on-change='brightnessSliderChanged' class='flex'>
</paper-slider> </paper-slider>
</div> </div>
<template is="dom-if" if="{{ctSliderValue}}"> <div class='color_temp center horizontal layout'>
<div class='brightness center horizontal layout'> <div>Color temperature</div>
<div>Color temperature</div> <paper-slider min="154" max="500"
<paper-slider min="154" max="500" id='color_temp' value='{{ctSliderValue}}'
id='ct' value='{{ctSliderValue}}' on-change='ctSliderChanged' class='flex'>
on-change='ctSliderChanged' class='flex'> </paper-slider>
</paper-slider> </div>
</div>
</template>
<ha-color-picker on-colorselected='colorPicked' width='350' height='200'> <ha-color-picker on-colorselected='colorPicked' width='350' height='200'>
</ha-color-picker> </ha-color-picker>

View File

@ -5,7 +5,7 @@ import attributeClassNames from '../util/attribute-class-names';
require('../components/ha-color-picker'); require('../components/ha-color-picker');
const ATTRIBUTE_CLASSES = ['brightness', 'xy_color', 'ct_color']; const ATTRIBUTE_CLASSES = ['brightness', 'xy_color', 'color_temp'];
export default new Polymer({ export default new Polymer({
is: 'more-info-light', is: 'more-info-light',
@ -30,7 +30,7 @@ export default new Polymer({
stateObjChanged(newVal) { stateObjChanged(newVal) {
if (newVal && newVal.state === 'on') { if (newVal && newVal.state === 'on') {
this.brightnessSliderValue = newVal.attributes.brightness; this.brightnessSliderValue = newVal.attributes.brightness;
this.ctSliderValue = newVal.attributes.ct_color; this.ctSliderValue = newVal.attributes.color_temp;
} }
this.async(() => this.fire('iron-resize'), 500); this.async(() => this.fire('iron-resize'), 500);
@ -62,7 +62,7 @@ export default new Polymer({
serviceActions.callService('light', 'turn_on', { serviceActions.callService('light', 'turn_on', {
entity_id: this.stateObj.entityId, entity_id: this.stateObj.entityId,
ct_color: ct, color_temp: ct,
}); });
}, },