From 5e75f8b19e5bacca6dea8649c74aa830bd101bf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Thu, 22 Nov 2018 23:21:47 +0100
Subject: [PATCH] Fix alignment of toggles

---
 slider-entity-row.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/slider-entity-row.js b/slider-entity-row.js
index 342cc47..4eb8529 100644
--- a/slider-entity-row.js
+++ b/slider-entity-row.js
@@ -11,6 +11,9 @@ class SliderEntityRow extends Polymer.Element {
           min-width: 45px;
           text-align: center;
         }
+        .toggle {
+          margin-left: 8px;
+        }
       </style>
       <template is="dom-if" if="{{!displayRow}}">
         <style>
@@ -23,8 +26,8 @@ class SliderEntityRow extends Polymer.Element {
 
     const input = Polymer.html`
       <div>
-        <template is="dom-if" if="{{displaySlider}}">
           <div class="flex">
+        <template is="dom-if" if="{{displaySlider}}">
             <ha-slider
               min="0"
               max="100"
@@ -35,19 +38,22 @@ class SliderEntityRow extends Polymer.Element {
               on-click="stopPropagation"
               ignore-bar-touch
             ></ha-slider>
-            <span class="state" on-click="stopPropagation">
-              <template is="dom-if" if="{{displayValue}}">
+            <template is="dom-if" if="{{displayValue}}">
+              <span class="state" on-click="stopPropagation">
                 [[statusString(stateObj)]]
-              </template>
-              <template is="dom-if" if="{{displayToggle}}">
+              </span>
+            </template>
+        </template>
+            <template is="dom-if" if="{{displayToggle}}">
+              <span class="toggle" on-click="stopPropagation">
                 <ha-entity-toggle
                   state-obj="[[stateObj]]"
                   hass="[[_hass]]"
                 ></ha-entity-toggle>
-              </template>
+                </span>
+            </template>
             </span>
           </div>
-        </template>
       </div>
     `;
 
@@ -83,6 +89,7 @@ class SliderEntityRow extends Polymer.Element {
           return (stateObj.state === 'on')?Math.ceil(stateObj.attributes.brightness*100.0/255):0;
         },
         supported: (stateObj) => {
+          if(stateObj.state === 'off' && this._config.hide_when_off) return false;
           if('brightness' in stateObj.attributes) return true;
           if(('supported_features' in stateObj.attributes) &&
             (stateObj.attributes.supported_features & 1)) return true;