From 4ce4fdaeb7a1adaae7adc9ac2505cb889454854b Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Fri, 17 Mar 2017 16:03:54 +0300
Subject: [PATCH] Fix Bug 20029.

---
 .../main/lib/component/MultiSliderGradient.js |  7 +++-
 .../resources/less/multislider-gradient.less  | 37 +++++++++++++++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js
index 0b44be27e..c738bb976 100644
--- a/apps/common/main/lib/component/MultiSliderGradient.js
+++ b/apps/common/main/lib/component/MultiSliderGradient.js
@@ -63,7 +63,10 @@ define([
             '<div class="slider multi-slider-gradient">',
             '<div class="track"></div>',
             '<% _.each(items, function(item) { %>',
-            '<div class="thumb img-commonctrl" style=""></div>',
+            '<div class="thumb img-commonctrl" style="">',
+                '<div class="thumb-top"></div>',
+                '<div class="thumb-bottom"></div>',
+            '</div>',
             '<% }); %>',
             '</div>'
         ].join('')),
@@ -98,6 +101,7 @@ define([
                 me.thumbs[i].thumb.on('dblclick', null, function() {
                     me.trigger('thumbdblclick', me);
                 });
+                me.thumbs[i].thumbcolor = me.thumbs[i].thumb.find('> div');
             }
 
             if (me.styleStr!=='') {
@@ -118,6 +122,7 @@ define([
         setColorValue: function(color, index) {
             var ind = (index!==undefined) ? index : this.currentThumb;
             this.colorValues[ind] = color;
+            this.thumbs[ind].thumbcolor.css('background-color', color);
             this.changeGradientStyle();
         },
 
diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less
index fdda4ae9e..d42350d94 100644
--- a/apps/common/main/resources/less/multislider-gradient.less
+++ b/apps/common/main/resources/less/multislider-gradient.less
@@ -4,10 +4,41 @@
 
     .thumb {
         top: 18px;
-        background-position: @multislide-thumb-offset-x @multislide-thumb-offset-y;
+        background: none;
 
-        &.active {
-            background-position: @multislide-thumb-offset-x @multislide-thumb-offset-y - 30px;
+        .thumb-top {
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 9px;
+            height: 9px;
+            background-color: #ffffff;
+            -moz-transform: rotate(45deg);
+            -ms-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+            border-top: solid 1px @gray-darker;
+            border-left: solid 1px @gray-darker;
+            border-radius: 0 3px;
+            box-sizing: content-box;
+        }
+
+        .thumb-bottom {
+            position: absolute;
+            top: 6px;
+            left: 1px;
+            width: 10px;
+            height: 8px;
+            background-color: #ffffff;
+            border: solid 1px @gray-darker;
+            border-top: none;
+            border-radius: 2px;
+            box-sizing: content-box;
+        }
+
+        &.active .thumb-bottom {
+            border-bottom-width: 2px;
         }
     }