mirror of
https://github.com/home-assistant/core.git
synced 2025-07-15 09:17:10 +00:00
Polymer 1.0: Move attribute classnames logic to more info elements
This commit is contained in:
parent
57d5022e3d
commit
b0fdd45205
@ -33,24 +33,13 @@
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: false,
|
value: false,
|
||||||
},
|
},
|
||||||
|
|
||||||
classNames: {
|
|
||||||
type: String,
|
|
||||||
value: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
classNames: '',
|
|
||||||
dialogOpen: false,
|
|
||||||
|
|
||||||
observe: {
|
|
||||||
'stateObj.attributes': 'stateAttributesChanged',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
dialogOpenChanged: function(newVal, oldVal) {
|
dialogOpenChanged: function(newVal, oldVal) {
|
||||||
var moreInfoContainer = this.$.moreInfoContainer;
|
var root = Polymer.dom(this);
|
||||||
|
|
||||||
if (moreInfoContainer.lastChild) {
|
if (root.lastChild) {
|
||||||
moreInfoContainer.lastChild.dialogOpen = newVal;
|
root.lastChild.dialogOpen = newVal;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -82,9 +71,6 @@
|
|||||||
root.lastChild.stateObj = newVal;
|
root.lastChild.stateObj = newVal;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.classNames = Object.keys(newVal.attributes).map(
|
|
||||||
function(key) { return 'has-' + key; }).join(' ');
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
@ -28,16 +28,16 @@
|
|||||||
transition: max-height .5s ease-in .3s;
|
transition: max-height .5s ease-in .3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*:host-context(.has-brightness)*/ .brightness {
|
.has-brightness .brightness {
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*:host-context(.has-xy_color)*/ color-picker {
|
.has-xy_color color-picker {
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class$='[[computeClassNames(stateObj)]]'>
|
||||||
<div class='brightness'>
|
<div class='brightness'>
|
||||||
<div center horizontal layout>
|
<div center horizontal layout>
|
||||||
<div>Brightness</div>
|
<div>Brightness</div>
|
||||||
@ -57,6 +57,8 @@
|
|||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
var serviceActions = window.hass.serviceActions;
|
var serviceActions = window.hass.serviceActions;
|
||||||
|
var uiUtil = window.hass.uiUtil;
|
||||||
|
var ATTRIBUTE_CLASSES = ['brightness', 'xy_color'];
|
||||||
|
|
||||||
Polymer({
|
Polymer({
|
||||||
is: 'more-info-light',
|
is: 'more-info-light',
|
||||||
@ -79,6 +81,10 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computeClassNames: function(stateObj) {
|
||||||
|
return uiUtil.attributeClassNames(stateObj, ATTRIBUTE_CLASSES);
|
||||||
|
},
|
||||||
|
|
||||||
brightnessSliderChanged: function(ev) {
|
brightnessSliderChanged: function(ev) {
|
||||||
var bri = parseInt(ev.target.value);
|
var bri = parseInt(ev.target.value);
|
||||||
|
|
||||||
|
@ -13,25 +13,27 @@
|
|||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*:host-context(.has-away_mode)*/ .away-mode-toggle {
|
.has-away_mode .away-mode-toggle {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class$='[[computeClassNames(stateObj)]]'>
|
||||||
<div>Target Temperature</div>
|
<div>
|
||||||
<paper-slider
|
<div>Target Temperature</div>
|
||||||
min='[[tempMin]]' max='[[tempMax]]'
|
<paper-slider
|
||||||
value='[[targetTemperatureSliderValue]]' pin
|
min='[[tempMin]]' max='[[tempMax]]'
|
||||||
on-change='targetTemperatureSliderChanged'>
|
value='[[targetTemperatureSliderValue]]' pin
|
||||||
</paper-slider>
|
on-change='targetTemperatureSliderChanged'>
|
||||||
</div>
|
</paper-slider>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class='away-mode-toggle'>
|
<div class='away-mode-toggle'>
|
||||||
<div center horizontal layout>
|
<div center horizontal layout>
|
||||||
<div flex>Away Mode</div>
|
<div flex>Away Mode</div>
|
||||||
<paper-toggle-button checked='[[awayToggleChecked]]' on-change='toggleChanged'>
|
<paper-toggle-button checked='[[awayToggleChecked]]' on-change='toggleChanged'>
|
||||||
</paper-toggle-button>
|
</paper-toggle-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -41,6 +43,8 @@
|
|||||||
(function() {
|
(function() {
|
||||||
var constants = window.hass.constants;
|
var constants = window.hass.constants;
|
||||||
var serviceActions = window.hass.serviceActions;
|
var serviceActions = window.hass.serviceActions;
|
||||||
|
var uiUtil = window.hass.uiUtil;
|
||||||
|
var ATTRIBUTE_CLASSES = ['away_mode'];
|
||||||
|
|
||||||
Polymer({
|
Polymer({
|
||||||
is: 'more-info-thermostat',
|
is: 'more-info-thermostat',
|
||||||
@ -81,6 +85,10 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computeClassNames: function(stateObj) {
|
||||||
|
return uiUtil.attributeClassNames(stateObj, ATTRIBUTE_CLASSES);
|
||||||
|
},
|
||||||
|
|
||||||
targetTemperatureSliderChanged: function(ev) {
|
targetTemperatureSliderChanged: function(ev) {
|
||||||
var temp = parseInt(ev.target.value);
|
var temp = parseInt(ev.target.value);
|
||||||
|
|
||||||
|
@ -81,6 +81,13 @@
|
|||||||
return 'default';
|
return 'default';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
attributeClassNames: function(stateObj, attributes) {
|
||||||
|
if (!stateObj) return '';
|
||||||
|
return attributes.map(function(attribute) {
|
||||||
|
return attribute in stateObj.attributes ? 'has-' + attribute : '';
|
||||||
|
}).join(' ');
|
||||||
|
},
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user