From 9c42ca03155b7dee7a2680aa7810a4e28cc429bc Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 15 Jul 2020 15:34:18 +0200
Subject: [PATCH] Fix filtering attributes (#6394)

---
 src/components/ha-attributes.ts               |  2 +-
 src/components/ha-labeled-slider.js           |  4 +--
 .../more-info/controls/more-info-light.js     | 30 +++++--------------
 3 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/src/components/ha-attributes.ts b/src/components/ha-attributes.ts
index abef729cf6..a92d4912b6 100644
--- a/src/components/ha-attributes.ts
+++ b/src/components/ha-attributes.ts
@@ -17,7 +17,7 @@ let jsYamlPromise: Promise<typeof import("js-yaml")>;
 class HaAttributes extends LitElement {
   @property() public stateObj?: HassEntity;
 
-  @property() public extraFilters?: string;
+  @property({ attribute: "extra-filters" }) public extraFilters?: string;
 
   protected render(): TemplateResult {
     if (!this.stateObj) {
diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js
index 9939db3d1b..ef49e80077 100644
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@@ -15,7 +15,7 @@ class HaLabeledSlider extends PolymerElement {
 
         .title {
           margin-bottom: 16px;
-          opacity: var(--dark-primary-opacity);
+          color: var(--secondary-text-color);
         }
 
         .slider-container {
@@ -24,7 +24,7 @@ class HaLabeledSlider extends PolymerElement {
 
         ha-icon {
           margin-top: 4px;
-          opacity: var(--dark-secondary-opacity);
+          color: var(--secondary-text-color);
         }
 
         ha-paper-slider {
diff --git a/src/dialogs/more-info/controls/more-info-light.js b/src/dialogs/more-info/controls/more-info-light.js
index f961c9c6a8..860e3c5454 100644
--- a/src/dialogs/more-info/controls/more-info-light.js
+++ b/src/dialogs/more-info/controls/more-info-light.js
@@ -68,26 +68,15 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         .segmentationButton {
+          display: none;
           position: absolute;
-          top: 11%;
+          top: 5%;
           transform: translate(0%, 0%);
-          padding: 0px;
-          max-height: 0px;
-          width: 23px;
-          height: 23px;
-          opacity: var(--dark-secondary-opacity);
-          overflow: hidden;
-          transition: max-height 0.5s ease-in;
+          color: var(--secondary-text-color);
         }
 
-        .has-color.is-on .segmentationContainer .segmentationButton {
-          position: absolute;
-          top: 11%;
-          transform: translate(0%, 0%);
-          width: 23px;
-          height: 23px;
-          padding: 0px;
-          opacity: var(--dark-secondary-opacity);
+        .has-color.is-on .segmentationButton {
+          display: inline-block;
         }
 
         .has-effect_list.is-on .effect_list,
@@ -108,11 +97,6 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
           padding-top: 16px;
         }
 
-        .has-color.is-on .segmentationButton {
-          max-height: 100px;
-          overflow: visible;
-        }
-
         .has-color.is-on ha-color-picker {
           max-height: 500px;
           overflow: visible;
@@ -189,7 +173,7 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
           <ha-icon-button
             icon="mdi:palette"
             on-click="segmentClick"
-            class="control segmentationButton"
+            class="segmentationButton"
           ></ha-icon-button>
         </div>
 
@@ -217,7 +201,7 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
         <ha-attributes
           state-obj="[[stateObj]]"
-          extra-filters="brightness,color_temp,white_value,effect_list,effect,hs_color,rgb_color,xy_color,min_mireds,max_mireds"
+          extra-filters="brightness,color_temp,white_value,effect_list,effect,hs_color,rgb_color,xy_color,min_mireds,max_mireds,entity_id"
         ></ha-attributes>
       </div>
     `;