Option to remove toggle and put slider on separate row

This commit is contained in:
Thomas Lovén 2018-08-16 23:05:39 +02:00
parent 72bb2a73be
commit b18c6bd425
2 changed files with 31 additions and 0 deletions

View File

@ -25,3 +25,10 @@ views:
type: custom:slider-entity-row type: custom:slider-entity-row
``` ```
![slider-entity-row](https://user-images.githubusercontent.com/1299821/44172580-e7161200-a0dd-11e8-8042-19199ad5d5ac.png) ![slider-entity-row](https://user-images.githubusercontent.com/1299821/44172580-e7161200-a0dd-11e8-8042-19199ad5d5ac.png)
### Other options
`hide_control: true` - Remove toggle
`break_slider: true` - Put slider on separate row

View File

@ -8,11 +8,23 @@ class SliderEntityRow extends Polymer.Element {
paper-slider { paper-slider {
margin-left: auto; margin-left: auto;
} }
.second-line paper-slider {
width: 100%;
}
</style> </style>
<hui-generic-entity-row config="[[_config]]" hass="[[_hass]]"> <hui-generic-entity-row config="[[_config]]" hass="[[_hass]]">
<template is='dom-if' if='{{!breakSlider}}'>
<paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider> <paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider>
</template>
<template is='dom-if' if='{{!hideControl}}'>
<ha-entity-toggle state-obj="[[stateObj]]" hass="[[_hass]]"></ha-entity-toggle> <ha-entity-toggle state-obj="[[stateObj]]" hass="[[_hass]]"></ha-entity-toggle>
</template>
</hui-generic-entity-row> </hui-generic-entity-row>
<template is='dom-if' if='{{breakSlider}}'>
<div class="second-line">
<paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider>
</div>
</template>
` `
} }
@ -20,6 +32,14 @@ class SliderEntityRow extends Polymer.Element {
return { return {
_hass: Object, _hass: Object,
_config: Object, _config: Object,
hideControl: {
type: Boolean,
value: false,
},
breakSlider: {
type: Boolean,
value: false,
},
stateObj: { stateObj: {
type: Object, type: Object,
value: null, value: null,
@ -43,6 +63,10 @@ class SliderEntityRow extends Polymer.Element {
setConfig(config) setConfig(config)
{ {
this._config = config; this._config = config;
if('hide_control' in config && config.hide_control)
this.hideControl = true;
if('break_slider' in config && config.break_slider)
this.breakSlider = true;
} }
set hass(hass) { set hass(hass) {