Light hui & more-info card fixes (#7397)

src/components/ha-labeled-slider.js

@@ -14,8 +14,8 @@ class HaLabeledSlider extends PolymerElement {
         }
 
         .title {
-          margin-bottom: 16px;
-          color: var(--secondary-text-color);
+          margin-bottom: 8px;
+          color: var(--primary-text-color);
         }
 
         .slider-container {
@@ -43,7 +43,6 @@ class HaLabeledSlider extends PolymerElement {
           step="[[step]]"
           pin="[[pin]]"
           disabled="[[disabled]]"
-          disabled="[[disabled]]"
           value="{{value}}"
         ></ha-slider>
       </div>

src/components/ha-slider.js

@@ -21,6 +21,7 @@ class HaSlider extends PaperSliderClass {
             .pin > .slider-knob > .slider-knob-inner {
               font-size:  var(--ha-slider-pin-font-size, 10px);
               line-height: normal;
+              cursor: pointer;
             }
 
             .disabled.ring > .slider-knob > .slider-knob-inner {

src/dialogs/more-info/controls/more-info-light.ts

@@ -67,9 +67,10 @@ class MoreInfoLight extends LitElement {
                 caption=${this.hass.localize("ui.card.light.brightness")}
                 icon="hass:brightness-5"
                 min="1"
-                max="255"
+                max="100"
                 value=${this._brightnessSliderValue}
                 @change=${this._brightnessSliderChanged}
+                pin
               ></ha-labeled-slider>
             `
           : ""}
@@ -87,6 +88,7 @@ class MoreInfoLight extends LitElement {
                       .max=${this.stateObj.attributes.max_mireds}
                       .value=${this._ctSliderValue}
                       @change=${this._ctSliderChanged}
+                      pin
                     ></ha-labeled-slider>
                   `
                 : ""}
@@ -98,6 +100,7 @@ class MoreInfoLight extends LitElement {
                       max="255"
                       .value=${this._wvSliderValue}
                       @change=${this._wvSliderChanged}
+                      pin
                     ></ha-labeled-slider>
                   `
                 : ""}
@@ -155,8 +158,11 @@ class MoreInfoLight extends LitElement {
 
   protected updated(changedProps: PropertyValues): void {
     const stateObj = this.stateObj! as LightEntity;
-    if (changedProps.has("stateObj") && stateObj.state === "on") {
-      this._brightnessSliderValue = stateObj.attributes.brightness;
+    if (changedProps.has("stateObj")) {
+      if (stateObj.state === "on") {
+        this._brightnessSliderValue = Math.round(
+          (stateObj.attributes.brightness * 100) / 255
+        );
         this._ctSliderValue = stateObj.attributes.color_temp;
         this._wvSliderValue = stateObj.attributes.white_value;
 
@@ -166,6 +172,9 @@ class MoreInfoLight extends LitElement {
             s: stateObj.attributes.hs_color[1] / 100,
           };
         }
+      } else {
+        this._brightnessSliderValue = 0;
+      }
     }
   }
 
@@ -191,7 +200,7 @@ class MoreInfoLight extends LitElement {
 
     this.hass.callService("light", "turn_on", {
       entity_id: this.stateObj!.entity_id,
-      brightness: bri,
+      brightness_pct: bri,
     });
   }
 
@@ -250,15 +259,10 @@ class MoreInfoLight extends LitElement {
         align-items: center;
       }
 
-      .content.is-on {
-        margin-top: -16px;
-      }
-
       .content > * {
         width: 100%;
         max-height: 84px;
         overflow: hidden;
-        padding-top: 16px;
       }
 
       .color_temp {

src/panels/lovelace/cards/hui-light-card.ts

@@ -99,7 +99,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
     }
 
     const brightness =
-      Math.round((stateObj.attributes.brightness / 254) * 100) || 0;
+      Math.round((stateObj.attributes.brightness / 255) * 100) || 0;
 
     return html`
       <ha-card>
@@ -116,7 +116,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           <div id="controls">
             <div id="slider">
               <round-slider
-                min="0"
+                min="1"
+                max="100"
                 .value=${brightness}
                 .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 @value-changing=${this._dragEvent}

src/resources/styles.ts

@@ -61,6 +61,7 @@ export const derivedStyles = {
   "paper-slider-knob-color": "var(--slider-color)",
   "paper-slider-knob-start-color": "var(--slider-color)",
   "paper-slider-pin-color": "var(--slider-color)",
+  "paper-slider-pin-start-color": "var(--slider-color)",
   "paper-slider-active-color": "var(--slider-color)",
   "paper-slider-secondary-color": "var(--slider-secondary-color)",
   "paper-slider-container-color": "var(--slider-bar-color)",

src/state-summary/state-card-input_number.js

@@ -46,7 +46,7 @@ class StateCardInputNumber extends mixinBehaviors(
           value="{{value}}"
           step="[[step]]"
           hidden="[[hiddenslider]]"
-          pin=""
+          pin
           on-change="selectedValueChanged"
           on-click="stopPropagation"
           id="slider"