Merge pull request #1202 from ONLYOFFICE/feature/custom-color-style

Feature/custom color style

apps/common/main/lib/component/HSBColorPicker.js

@@ -55,7 +55,7 @@ define([
                     '<% } %>'+
                     '<div>'+
                         '<div class="cnt-hb img-colorpicker">'+
-                            '<div class="cnt-hb-arrow img-colorpicker"></div>'+
+                            '<div class="cnt-hb-arrow"></div>'+
                         '</div>'+
                         '<% if (this.changeSaturation) { %>'+
                             '<div class="cnt-root">'+
@@ -106,6 +106,7 @@ define([
                 refreshUI();
 
                 me.trigger('changecolor', me, me.color);
+
             };
 
             var refreshUI = function(){
@@ -125,8 +126,7 @@ define([
                     previewColorText[0].innerHTML = (me.color == 'transparent') ? me.textNoColor : me.color.toUpperCase();
 
                 if (arrowSatBrightness.length>0 && arrowHue.length>0) {
-                    arrowSatBrightness.css('left', saturationVal + '%');
-                    arrowSatBrightness.css('top', 100 - brightnessVal + '%');
+                    arrowSatBrightness.css({'left': saturationVal + '%', 'top': 100 - brightnessVal + '%', 'background-color' : me.color});
                     arrowHue.css('top', parseInt(hueVal * 100 / 360.0) + '%');
                 }
             };

apps/common/main/resources/less/asc-mixins.less

@@ -327,11 +327,12 @@
     }
 }
 
-@img-colorpicker-width: 205px;
+@img-colorpicker-width: 208px;
 .img-colorpicker, .hsb-colorpicker .empty-color:before
 {
     background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png')), ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker.png)");
     background-repeat: no-repeat;
+    background-size:  @img-colorpicker-width auto;
 
     @media only screen {
         @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
@@ -350,6 +351,14 @@
             background-size:  @img-colorpicker-width auto;
         }
     }
+
+    .pixel-ratio__1_25 & {
+        background-image: ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker@1.25x.png)";
+    }
+
+    .pixel-ratio__1_75 & {
+        background-image: ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker@1.75x.png)";
+    }
 }
 
 .icon.lang-flag {

apps/common/main/resources/less/extended-color-picker.less

@@ -38,9 +38,8 @@
             width: 63px;
             height: 20px;
             background-color: transparent;
-            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
-            border: @scaled-one-px-value solid @border-regular-control;
-
+            border: @scaled-one-px-value-ie solid @border-color-shading-ie;
+            border: @scaled-one-px-value solid @border-color-shading;
             &.top {
                 border-bottom: none;
             }

apps/common/main/resources/less/hsb-colorpicker.less

@@ -32,12 +32,9 @@
 
     .cnt-hb {
         display: inline-block;
-        overflow: hidden;
         width: 195px;
         height: 196px;
         position: relative;
-        border: @scaled-one-px-value-ie solid @border-regular-control-ie;
-        border: @scaled-one-px-value solid @border-regular-control;
         background-position: 0 0;
     }
 
@@ -49,7 +46,7 @@
     }
 
     .cnt-sat {
-        width: 10px;
+        width: 12px;
         height: 100%;
         position: relative;
         border: @scaled-one-px-value-ie solid @border-regular-control-ie;
@@ -58,21 +55,33 @@
     }
 
     .cnt-hb-arrow {
-        width: 9px;
-        height: 9px;
-        margin: -4px;
+        display:  block;
+        width: 12px;
+        height: 12px;
+        margin: -6px;
         position: absolute;
-        background-position: 0 -196px;
+        border: @scaled-one-px-value-ie solid #000;
+        border: @scaled-one-px-value solid #000;
+        .border-radius(50%);
+        &:after{
+            content: ' ';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border: @scaled-one-px-value-ie solid #fff;
+            border: @scaled-one-px-value solid #fff;
+            .border-radius(50%);
+        }
     }
 
     .cnt-sat-arrow {
-        width: 14px;
-        height: 9px;
-        margin-top: -4px;
-        margin-left: -3px;
-        margin-left: calc(-2px - @scaled-one-px-value);
+        width: 20px;
+        height: 12px;
+        margin-top: -6px;
+        margin-left: -4px;
+        margin-left: calc(-3px - @scaled-one-px-value);
         position: absolute;
-        background-position: -11px -196px;
+        background-position: -12px -196px;
     }
 
     .empty-color {