From b0135d12e8124d743bce52a0f1c05ccd597141f4 Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Mon, 25 Nov 2019 01:31:29 +0200
Subject: [PATCH] RangeSlider able to be disabled

---
 chameleon-client/src/components/cv-range-slider.vue |  4 ++--
 .../src/views/CameraViewes/ThresholdTab.vue         | 13 ++++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/chameleon-client/src/components/cv-range-slider.vue b/chameleon-client/src/components/cv-range-slider.vue
index 571fa086f..8755dc591 100644
--- a/chameleon-client/src/components/cv-range-slider.vue
+++ b/chameleon-client/src/components/cv-range-slider.vue
@@ -6,7 +6,7 @@
             </v-col>
             <v-col :cols="10">
                 <v-range-slider :value="localValue" @input="handleInput" :max="max" :min="min" hide-details
-                                class="align-center" dark color="#4baf62" :step="step">
+                                class="align-center" dark color="#4baf62" :step="step" :disabled="disabled">
                     <template v-slot:prepend>
                         <v-text-field :value="localValue[0]" :max="max" :min="min" @input="handleChange"
                                       @focus="prependFocused = true" @blur="prependFocused = false" class="mt-0 pt-0"
@@ -27,7 +27,7 @@
 <script>
     export default {
         name: 'RangeSlider',
-        props: ['name', 'min', 'max', 'value', 'step'],
+        props: ['name', 'min', 'max', 'value', 'step','disabled'],
         data() {
             return {
                 prependFocused: false,
diff --git a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index 150081c46..9f4e2a69b 100644
--- a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
+++ b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
@@ -1,17 +1,16 @@
 <template>
     <div>        
         <CVswitch v-model="value.isColorPick" name="Colorpick Calibration"/>
-        <v-divider color="white"/>
+        <v-divider color="darkgray "/>
         <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')" :disabled="isAutomaticHSV"/>
-        <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255"
-                       @input="handleData('saturation')"/>
-        <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')"/>
-        <v-divider color="white"/>
+        <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255" @input="handleData('saturation')" :disabled="isAutomaticHSV"/>
+        <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')" :disabled="isAutomaticHSV"/>
+        <v-divider color="darkgray "/>
         <v-btn style="margin: 20px;" tile color="#4baf62" :disabled="isManualHSV">
-                    <v-icon>C</v-icon>
+                    <v-icon>colorize</v-icon>
                     Colorpick Calibration
                 </v-btn>
-        <v-divider color="white"/>
+        <v-divider color="darkgray "/>
         <CVswitch v-model="value.erode" name="Erode" @input="handleData('erode')"/>
         <CVswitch v-model="value.dilate" name="Dilate" @input="handleData('dilate')"/>
     </div>