From e90296cda1a745425c07e8cb688181930bcafd74 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Wed, 20 Jan 2021 16:40:00 +0300
Subject: [PATCH] [DE] ColorButton: fix auto color

---
 apps/common/main/lib/component/ColorButton.js |  9 ++++++-
 .../main/app/view/ControlSettingsDialog.js    | 24 +++++--------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index 41b24ecb8..99d51a4b4 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -82,6 +82,8 @@ define([
         },
 
         setColor: function(color) {
+            if (color == 'auto' && this.options.auto)
+                color = this.autocolor;
             var span = $(this.cmpEl).find('button span:nth-child(1)');
             this.color = color;
 
@@ -102,6 +104,7 @@ define([
                 if (this.options.auto) {
                     this.cmpEl.find('#' + this.menu.id + '-color-auto').on('click', _.bind(this.onAutoColorSelect, this));
                     this.colorAuto = this.cmpEl.find('#' + this.menu.id + '-color-auto > a');
+                    (color == 'auto') && this.setAutoColor(true);
                 }
             }
             return this.colorPicker;
@@ -148,7 +151,7 @@ define([
         },
 
         onAutoColorSelect: function() {
-            this.setColor(this.autocolor);
+            this.setColor('auto');
             this.setAutoColor(true);
             this.colorPicker && this.colorPicker.clearSelection();
             this.trigger('auto:select', this, this.autocolor);
@@ -162,6 +165,10 @@ define([
                 this.colorAuto.removeClass('selected');
         },
 
+        isAutoColor: function() {
+            return this.colorAuto && this.colorAuto.hasClass('selected');
+        },
+
         textNewColor: 'Add New Custom Color',
         textAutoColor: 'Automatic'
 
diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
index 52d450069..8717bdfe5 100644
--- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
@@ -132,10 +132,10 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
                 parentEl: $('#control-settings-color-btn'),
                 auto: {
                     caption: this.textSystemColor,
-                    color: 'dcdcdc'
+                    color: Common.Utils.ThemeColor.getHexColor(220, 220, 220)
                 },
                 additionalAlign: this.menuAddAlign,
-                color: '000000',
+                color: 'auto',
                 colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600',
                     '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966',
                     '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
@@ -143,8 +143,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
                 ],
                 paletteHeight: 94
             });
-            this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
-            this.btnColor.on('auto:select', _.bind(this.onSystemColor, this));
             this.colors = this.btnColor.getPicker();
 
             this.btnApplyAll = new Common.UI.Button({
@@ -379,14 +377,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
             }, 100);
         },
 
-        onColorsSelect: function(btn, color) {
-            this.isSystemColor = false;
-        },
-
-        onSystemColor: function(btn, color) {
-            this.isSystemColor = true;
-        },
-
         afterRender: function() {
             this.updateMetricUnit();
             this._setDefaults(this.props);
@@ -415,16 +405,14 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
                 (val!==null && val!==undefined) && this.cmbShow.setValue(val);
 
                 val = props.get_Color();
-                this.isSystemColor = (val===null);
                 if (val) {
                     val = Common.Utils.ThemeColor.getHexColor(val.get_r(), val.get_g(), val.get_b());
                     this.colors.selectByRGB(val,true);
-                    this.btnColor.setAutoColor(false);
                 } else {
                     this.colors.clearSelection();
-                    this.btnColor.setAutoColor(true);
-                    val = Common.Utils.ThemeColor.getHexColor(220, 220, 220);
+                    val = 'auto';
                 }
+                this.btnColor.setAutoColor(val == 'auto');
                 this.btnColor.setColor(val);
 
                 val = props.get_Lock();
@@ -559,7 +547,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
             props.put_PlaceholderText(this.txtPlaceholder.getValue() || '    ');
             props.put_Appearance(this.cmbShow.getValue());
 
-            if (this.isSystemColor) {
+            if (this.btnColor.isAutoColor()) {
                 props.put_Color(null);
             } else {
                 var color = Common.Utils.ThemeColor.getRgbColor(this.colors.getColor());
@@ -669,7 +657,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
             if (this.api) {
                 var props   = new AscCommon.CContentControlPr();
                 props.put_Appearance(this.cmbShow.getValue());
-                if (this.isSystemColor) {
+                if (this.btnColor.isAutoColor()) {
                     props.put_Color(null);
                 } else {
                     var color = Common.Utils.ThemeColor.getRgbColor(this.colors.getColor());