jeans/core
jeans/core
1
0
Fork 0
mirror of https://github.com/home-assistant/core.git synced 2025-07-27 07:07:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Polymer 1.0: Move attribute classnames logic to more info elements

Browse Source
This commit is contained in:
Paulus Schoutsen 2015-05-27 22:04:38 -07:00
parent 57d5022e3d
commit b0fdd45205
4 changed files with 41 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
homeassistant/components/frontend/www_static/polymer/more-infos/more-info-content.html
View File

@ -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(' ');
}, },
}); });
})(); })();

12
homeassistant/components/frontend/www_static/polymer/more-infos/more-info-light.html
View File

@ -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);

36
homeassistant/components/frontend/www_static/polymer/more-infos/more-info-thermostat.html
View File

@ -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);

7
homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
View File

@ -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>