From 45448e23d3d73cb4d41d8cee4a62a9c4e0c61461 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 5 Feb 2018 12:45:59 +0200
Subject: [PATCH] add value tooltip to slider

---
 .../partials/generic/forms/sliders.scss       | 21 ++++++++++++++++---
 .../ui/components/bd/pluginsetting/Slider.vue | 15 +++++++++----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/client/src/styles/partials/generic/forms/sliders.scss b/client/src/styles/partials/generic/forms/sliders.scss
index 249e0b30..3c3614e0 100644
--- a/client/src/styles/partials/generic/forms/sliders.scss
+++ b/client/src/styles/partials/generic/forms/sliders.scss
@@ -4,6 +4,21 @@
     .bd-slider-container {
         margin-top: 8px;
         border-radius: 8px;
+
+        .bd-slider-thumb {
+            width: 10px;
+            height: 24px;
+            display: block;
+            position: relative;
+            bottom: 16px;
+            pointer-events: none;
+            background: #FFF;
+            border: 1px solid #dcddde;
+            box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
+            margin-left: -5px;
+            border-radius: 3px;
+            box-sizing: border-box;
+        }
     }
 
     .bd-slider-bar {
@@ -33,16 +48,16 @@
         &::-webkit-slider-thumb {
             -webkit-appearance: none;
             appearance: none;
-            -webkit-box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
             background-color: #fff;
-            border: 1px solid #dcddde;
+            border: 1px solid transparent;
             border-radius: 3px;
-            box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
             cursor: ew-resize;
             height: 24px;
             left: 0;
             top: 50%;
             width: 10px;
+            background: transparent;
+            box-sizing: border-box;
         }
     }
 }
diff --git a/client/src/ui/components/bd/pluginsetting/Slider.vue b/client/src/ui/components/bd/pluginsetting/Slider.vue
index 7749042a..3932fe09 100644
--- a/client/src/ui/components/bd/pluginsetting/Slider.vue
+++ b/client/src/ui/components/bd/pluginsetting/Slider.vue
@@ -9,15 +9,16 @@
 */
 
 <template>
-    <div class="bd-form-slider">
+    <div class="bd-form-slider" @mouseenter="showTooltip" @mouseleave="hideTooltip">
         <div class="bd-title">
             <h3>{{ setting.text }}</h3>
             <div class="bd-slider">
                 <div class="bd-slider-container">
                     <div class="bd-slider-bar">
-                        <div class="bd-slider-bar-filled" :style="'width: ' + (((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100) + '%;'"></div>
+                        <div class="bd-slider-bar-filled" :style="{width: `${(((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100)}%`}"></div>
                     </div>
                     <input type="range" :value="setting.value" :min="setting.min || 0" :max="setting.max || 100" :step="setting.step || 1" @keyup.stop @input="input" />
+                    <span class="bd-slider-thumb" v-tooltip="{content: setting.value || '0', show: toolTip, trigger: 'manual'}" :style="{left: `${(((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100)}%`}"></span>
                 </div>
             </div>
         </div>
@@ -29,15 +30,21 @@
         props: ['setting', 'change'],
         data() {
             return {
-                fillpercentage: 0
+                fillpercentage: 0,
+                toolTip: false
             };
         },
         methods: {
             input(e) {
                 let number = parseFloat(e.target.value);
                 if (Number.isNaN(number)) return;
-
                 this.change(this.setting.id, number);
+            },
+            showTooltip() {
+                this.toolTip = true;
+            },
+            hideTooltip() {
+                this.toolTip = false;
             }
         }
     }