Show RGB picker when RGB not in state attrs (#736)

* Show RGB picker when RGB not in state attrs

* Use supported_features and hide controls when off
This commit is contained in:
Adam Mills 2017-12-23 00:06:29 -05:00 committed by Paulus Schoutsen
parent 097a8cfdc6
commit f0f1a56537

View File

@ -38,14 +38,14 @@
transition: max-height .5s ease-in; transition: max-height .5s ease-in;
} }
.has-effect_list .effect_list, .has-effect_list.is-on .effect_list,
.has-brightness .brightness, .has-brightness .brightness,
.has-color_temp .color_temp, .has-color_temp.is-on .color_temp,
.has-white_value .white_value { .has-white_value.is-on .white_value {
max-height: 84px; max-height: 84px;
} }
.has-rgb_color ha-color-picker { .has-rgb_color.is-on ha-color-picker {
max-height: 500px; max-height: 500px;
overflow: visible; overflow: visible;
--ha-color-picker-wheel-borderwidth: 5; --ha-color-picker-wheel-borderwidth: 5;
@ -113,6 +113,10 @@
{ {
const FEATURE_CLASS_NAMES = { const FEATURE_CLASS_NAMES = {
1: 'has-brightness', 1: 'has-brightness',
2: 'has-color_temp',
4: 'has-effect_list',
16: 'has-rgb_color',
128: 'has-white_value',
}; };
class MoreInfoLight extends window.hassMixins.EventsMixin(Polymer.Element) { class MoreInfoLight extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'more-info-light'; } static get is() { return 'more-info-light'; }
@ -180,17 +184,9 @@
} }
computeClassNames(stateObj) { computeClassNames(stateObj) {
var classes = [ const classes = [window.hassUtil.featureClassNames(stateObj, FEATURE_CLASS_NAMES)];
window.hassUtil.attributeClassNames(stateObj, ['color_temp', 'white_value', 'effect_list']), if (stateObj && stateObj.state === 'on') {
window.hassUtil.featureClassNames(stateObj, FEATURE_CLASS_NAMES), classes.push('is-on');
];
// Lights that do shades of white can still have an rgb color
// In that case we don't want the color picker to show.
if (stateObj.attributes.supported_features &&
(stateObj.attributes.supported_features & 16) !== 0 &&
stateObj.attributes.rgb_color) {
classes.push('has-rgb_color');
} }
return classes.join(' '); return classes.join(' ');
} }