Fix paper-slider overflow issue (#1235)

* Fix overflow issue with slider pin

* Lint

* Reverted changes

* Style changes

* Centered position values a bit higher

* Use ha-labeled-slider

* Small update

src/components/ha-labeled-slider.js

@@ -24,20 +24,22 @@ class HaLabeledSlider extends PolymerElement {
         opacity: var(--dark-secondary-opacity);
       }
 
-      .slider-container {
-        margin-left: 24px;
-      }
-
       ha-paper-slider {
         background-image: var(--ha-slider-background);
       }
     </style>
 
     <div class="title">[[caption]]</div>
-    <iron-icon icon="[[icon]]"></iron-icon>
+    <div class="extra-container">
+      <slot name="extra"></slot>
+    </div>
     <div class="slider-container">
-      <ha-paper-slider min="[[min]]" max="[[max]]" value="{{value}}" ignore-bar-touch="[[ignoreBarTouch]]">
+      <iron-icon icon="[[icon]]" hidden\$="[[!icon]]"></iron-icon>
-      </ha-paper-slider>
+      <ha-paper-slider
+        min="[[min]]" max="[[max]]" step="[[step]]"
+        pin="[[pin]]" disabled="[[disabled]]" disabled="[[disabled]]"
+        value="{{value}}"
+      ></ha-paper-slider>
     </div>
 `;
   }
@@ -45,11 +47,24 @@ class HaLabeledSlider extends PolymerElement {
   static get properties() {
     return {
       caption: String,
-      icon: String,
+      disabled: Boolean,
       min: Number,
       max: Number,
-      ignoreBarTouch: Boolean,
+      pin: Boolean,
+      step: Number,
 
+      extra: {
+        type: Boolean,
+        value: false,
+      },
+      ignoreBarTouch: {
+        type: Boolean,
+        value: true,
+      },
+      icon: {
+        type: String,
+        value: '',
+      },
       value: {
         type: Number,
         notify: true,

src/components/ha-paper-slider.js

@@ -25,8 +25,8 @@ class HaPaperSlider extends PaperSliderClass {
 
         bottom: calc(15px + var(--calculated-paper-slider-height)/2);
         left: 50%;
-        width: 2.6em;
+        width: 2.2em;
-        height: 2.6em;
+        height: 2.2em;
 
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
@@ -45,9 +45,9 @@ class HaPaperSlider extends PaperSliderClass {
 
         bottom: calc(15px + var(--calculated-paper-slider-height)/2);
         left: 50%;
-        margin-left: -1.3em;
+        margin-left: -1.1em;
-        width: 2.6em;
+        width: 2.2em;
-        height: 2.4em;
+        height: 2.1em;
 
         -webkit-transform-origin: center bottom;
         transform-origin: center bottom;

src/dialogs/more-info/controls/more-info-cover.js

@@ -4,7 +4,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../components/ha-cover-tilt-controls.js';
-import '../../../components/ha-paper-slider.js';
+import '../../../components/ha-labeled-slider.js';
 import CoverEntity from '../../../util/cover-model.js';
 
 import attributeClassNames from '../../../common/entity/attribute_class_names';
@@ -23,11 +23,12 @@ import featureClassNames from '../../../common/entity/feature_class_names';
         max-height: 0px;
         overflow: hidden;
       }
+
       .has-current_position .current_position,
       .has-set_tilt_position .tilt,
       .has-current_tilt_position .tilt
       {
-        max-height: 90px;
+        max-height: 208px;
       }
 
       [invisible] {
@@ -37,17 +38,27 @@ import featureClassNames from '../../../common/entity/feature_class_names';
     <div class\$="[[computeClassNames(stateObj)]]">
 
       <div class="current_position">
-        <div>Position</div>
+        <ha-labeled-slider
-        <ha-paper-slider min="0" max="100" value="{{coverPositionSliderValue}}" step="1" pin="" disabled="[[!entityObj.supportsSetPosition]]" on-change="coverPositionSliderChanged" ignore-bar-touch=""></ha-paper-slider>
+          caption="Position" pin=""
+          value="{{coverPositionSliderValue}}"
+          disabled="[[!entityObj.supportsSetPosition]]"
+          on-change="coverPositionSliderChanged"
+        ></ha-labeled-slider>
       </div>
 
       <div class="tilt">
-        <div>Tilt position</div>
+        <ha-labeled-slider
-        <div>
+          caption="Tilt position" pin="" extra=""
-          <ha-cover-tilt-controls hidden\$="[[entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]">
+          value="{{coverTiltPositionSliderValue}}"
-          </ha-cover-tilt-controls>
+          disabled="[[!entityObj.supportsSetTiltPosition]]"
-        </div>
+          on-change="coverTiltPositionSliderChanged">
-        <ha-paper-slider min="0" max="100" value="{{coverTiltPositionSliderValue}}" step="1" pin="" disabled="[[!entityObj.supportsSetTiltPosition]]" on-change="coverTiltPositionSliderChanged" ignore-bar-touch=""></ha-paper-slider>
+
+          <ha-cover-tilt-controls
+            slot="extra" hidden\$="[[entityObj.isTiltOnly]]"
+            hass="[[hass]]" state-obj="[[stateObj]]"
+          ></ha-cover-tilt-controls>
+
+        </ha-labeled-slider>
       </div>
 
     </div>

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

@@ -83,15 +83,15 @@ import EventsMixin from '../../../mixins/events-mixin.js';
     <div class\$="[[computeClassNames(stateObj)]]">
 
       <div class="control brightness">
-        <ha-labeled-slider caption="Brightness" icon="hass:brightness-5" max="255" value="{{brightnessSliderValue}}" on-change="brightnessSliderChanged" ignore-bar-touch=""></ha-labeled-slider>
+        <ha-labeled-slider caption="Brightness" icon="hass:brightness-5" max="255" value="{{brightnessSliderValue}}" on-change="brightnessSliderChanged"></ha-labeled-slider>
       </div>
 
       <div class="control color_temp">
-        <ha-labeled-slider caption="Color Temperature" icon="hass:thermometer" min="[[stateObj.attributes.min_mireds]]" max="[[stateObj.attributes.max_mireds]]" value="{{ctSliderValue}}" on-change="ctSliderChanged" ignore-bar-touch=""></ha-labeled-slider>
+        <ha-labeled-slider caption="Color Temperature" icon="hass:thermometer" min="[[stateObj.attributes.min_mireds]]" max="[[stateObj.attributes.max_mireds]]" value="{{ctSliderValue}}" on-change="ctSliderChanged"></ha-labeled-slider>
       </div>
 
       <div class="control white_value">
-        <ha-labeled-slider caption="White Value" icon="hass:file-word-box" max="255" value="{{wvSliderValue}}" on-change="wvSliderChanged" ignore-bar-touch=""></ha-labeled-slider>
+        <ha-labeled-slider caption="White Value" icon="hass:file-word-box" max="255" value="{{wvSliderValue}}" on-change="wvSliderChanged"></ha-labeled-slider>
       </div>
 
       <ha-color-picker class="control color" on-colorselected="colorPicked" desired-hs-color="{{colorPickerColor}}" throttle="500" hue-segments="24" saturation-segments="8">