Color picker: dynamic segmentation (#2806)

* Color picker: dynamic segmentation

* Color Picker: dynamic segmentation

* Color Picker: dynamic segments

* == --> ===

* spaces

* use setProperties()

* fix dynamic segements

* Change size position and collor of segmentation button

* add spaces

* Add ;

src/components/ha-color-picker.js

@@ -140,6 +140,7 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
       hueSegments: {
         type: Number,
         value: 0,
+        observer: "segmentationChange",
       },
 
       // the amount segments for the hue
@@ -149,6 +150,7 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
       saturationSegments: {
         type: Number,
         value: 0,
+        observer: "segmentationChange",
       },
 
       // set to true to make the segments purely esthetical
@@ -590,5 +592,11 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
     this.tooltip = svgElement.tooltip;
     svgElement.appendChild(svgElement.tooltip);
   }
+
+  segmentationChange() {
+    if (this.backgroundLayer) {
+      this.drawColorWheel();
+    }
+  }
 }
 customElements.define("ha-color-picker", HaColorPicker);

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

@@ -48,6 +48,11 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
           --paper-slider-knob-start-border-color: var(--primary-color);
         }
 
+        .segmentationContainer {
+          position: relative;
+          width: 100%;
+        }
+
         ha-color-picker {
           display: block;
           width: 100%;
@@ -57,6 +62,29 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
           transition: max-height 0.5s ease-in;
         }
 
+        .segmentationButton {
+          position: absolute;
+          top: 11%;
+          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;
+        }
+
+        .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-effect_list.is-on .effect_list,
         .has-brightness .brightness,
         .has-color_temp.is-on .color_temp,
@@ -75,6 +103,11 @@ 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;
@@ -126,16 +159,22 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
             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"
-        >
-        </ha-color-picker>
+        <div class="segmentationContainer">
+          <ha-color-picker
+            class="control color"
+            on-colorselected="colorPicked"
+            desired-hs-color="{{colorPickerColor}}"
+            throttle="500"
+            hue-segments="{{hueSegments}}"
+            saturation-segments="{{saturationSegments}}"
+          >
+          </ha-color-picker>
+          <paper-icon-button
+            icon="mdi:palette"
+            on-click="segmentClick"
+            class="control segmentationButton"
+          ></paper-icon-button>
+        </div>
 
         <div class="control effect_list">
           <paper-dropdown-menu
@@ -194,6 +233,16 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
         value: 0,
       },
 
+      hueSegments: {
+        type: Number,
+        value: 24,
+      },
+
+      saturationSegments: {
+        type: Number,
+        value: 8,
+      },
+
       colorPickerColor: {
         type: Object,
       },
@@ -291,6 +340,14 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
     });
   }
 
+  segmentClick() {
+    if (this.hueSegments === 24 && this.saturationSegments === 8) {
+      this.setProperties({ hueSegments: 0, saturationSegments: 0 });
+    } else {
+      this.setProperties({ hueSegments: 24, saturationSegments: 8 });
+    }
+  }
+
   serviceChangeColor(hass, entityId, color) {
     hass.callService("light", "turn_on", {
       entity_id: entityId,