From e32c1fd3cf75b638eed87a340f87d1826934e481 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Wed, 20 Jan 2021 16:42:48 +0300
Subject: [PATCH] [DE][PE] Bug 48248: add auto color to border palette

---
 .../main/app/view/DropcapSettingsAdvanced.js  | 25 ++++++++++++++-----
 .../app/view/ParagraphSettingsAdvanced.js     | 24 +++++++++++++-----
 .../main/app/view/TableSettings.js            | 13 +++++++---
 .../main/app/view/TableSettingsAdvanced.js    | 23 ++++++++++++-----
 .../main/app/view/TableSettings.js            |  5 ++--
 5 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
index b5da68de66..eab91f096b 100644
--- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
@@ -163,11 +163,15 @@ define([
             this.btnBorderColor = new Common.UI.ColorButton({
                 parentEl: $('#drop-advanced-button-bordercolor'),
                 additionalAlign: this.menuAddAlign,
-                color: '000000'
+                color: 'auto',
+                auto: true
             });
             this.btnBorderColor.on('color:select', _.bind(function(btn, color) {
                 this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
             }, this));
+            this.btnBorderColor.on('auto:select', _.bind(function(btn, color) {
+                this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
+            }, this));
             this.colorsBorder = this.btnBorderColor.getPicker();
 
             this.btnBackColor = new Common.UI.ColorButton({
@@ -668,13 +672,16 @@ define([
 
             if (this.borderProps !== undefined) {
                 this.btnBorderColor.setColor(this.borderProps.borderColor);
-                this.tableStyler.setVirtualBorderColor((typeof(this.borderProps.borderColor) == 'object') ? this.borderProps.borderColor.color : this.borderProps.borderColor);
+                this.btnBorderColor.setAutoColor(this.borderProps.borderColor=='auto');
+                this.tableStyler.setVirtualBorderColor((typeof(this.btnBorderColor.color) == 'object') ? this.btnBorderColor.color.color : this.btnBorderColor.color);
+                if (this.borderProps.borderColor=='auto')
+                    this.colorsBorder.clearSelection();
+                else
+                    this.colorsBorder.select(this.borderProps.borderColor,true);
 
                 this.cmbBorderSize.setValue(this.borderProps.borderSize.ptValue);
                 this.BorderSize = {ptValue: this.borderProps.borderSize.ptValue, pxValue: this.borderProps.borderSize.pxValue};
                 this.tableStyler.setVirtualBorderSize(this.BorderSize.pxValue);
-
-                this.colorsBorder.select(this.borderProps.borderColor);
             }
 
             this.setTitle((this.isFrame) ? this.textTitleFrame : this.textTitle);
@@ -775,7 +782,7 @@ define([
                 paragraphProps  : this._changedProps,
                 borderProps     : {
                     borderSize      : this.BorderSize,
-                    borderColor     : this.btnBorderColor.color
+                    borderColor     : this.btnBorderColor.isAutoColor() ? 'auto' : this.btnBorderColor.color
                 }
             };
         },
@@ -1086,7 +1093,13 @@ define([
                 var size = parseFloat(this.BorderSize.ptValue);
                 border.put_Value(1);
                 border.put_Size(size * 25.4 / 72.0);
-                var color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
+                var color;
+                if (this.btnBorderColor.isAutoColor()) {
+                    color = new Asc.asc_CColor();
+                    color.put_auto(true);
+                } else {
+                    color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
+                }
                 border.put_Color(color);
             }
             else {
diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
index 6eb3ee1e99..c948f46790 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
@@ -376,10 +376,12 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             this.btnBorderColor = new Common.UI.ColorButton({
                 parentEl: $('#paragraphadv-border-color-btn'),
                 additionalAlign: this.menuAddAlign,
-                color: '000000'
+                color: 'auto',
+                auto: true
             });
             this.colorsBorder = this.btnBorderColor.getPicker();
             this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
+            this.btnBorderColor.on('auto:select', _.bind(this.onColorsBorderSelect, this));
 
             this.BordersImage = new Common.UI.TableStyler({
                 el: $('#id-deparagraphstyler'),
@@ -781,7 +783,7 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             var horizontalAlign = this.cmbTextAlignment.getValue();
             this._changedProps.asc_putJc((horizontalAlign !== undefined && horizontalAlign !== null) ? horizontalAlign : c_paragraphTextAlignment.LEFT);
 
-            return { paragraphProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.color} };
+            return { paragraphProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.isAutoColor() ? 'auto' : this.btnBorderColor.color} };
         },
 
         _setDefaults: function(props) {
@@ -962,14 +964,18 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
 
             if (this.borderProps !== undefined) {
                 this.btnBorderColor.setColor(this.borderProps.borderColor);
-                this.BordersImage.setVirtualBorderColor((typeof(this.borderProps.borderColor) == 'object') ? this.borderProps.borderColor.color : this.borderProps.borderColor);
+                this.btnBorderColor.setAutoColor(this.borderProps.borderColor=='auto');
+                this.BordersImage.setVirtualBorderColor((typeof(this.btnBorderColor.color) == 'object') ? this.btnBorderColor.color.color : this.btnBorderColor.color);
+
+                if (this.borderProps.borderColor=='auto')
+                    this.colorsBorder.clearSelection();
+                else
+                    this.colorsBorder.select(this.borderProps.borderColor,true);
 
                 this.cmbBorderSize.setValue(this.borderProps.borderSize.ptValue);
                 var rec = this.cmbBorderSize.getSelectedRecord();
                 if (rec)
                     this.onBorderSizeSelect(this.cmbBorderSize, rec);
-
-                this.colorsBorder.select(this.borderProps.borderColor,true);
             }
 
             for (var i=0; i<this.BordersImage.rows; i++) {
@@ -1167,7 +1173,13 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
                 var size = parseFloat(this.BorderSize.ptValue);
                 border.put_Value(1);
                 border.put_Size(size * 25.4 / 72.0);
-                var color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
+                var color;
+                if (this.btnBorderColor.isAutoColor()) {
+                    color = new Asc.asc_CColor();
+                    color.put_auto(true);
+                } else {
+                    color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
+                }
                 border.put_Color(color);
             }
             else {
diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js
index 5fe2fca092..6661e66e3b 100644
--- a/apps/documenteditor/main/app/view/TableSettings.js
+++ b/apps/documenteditor/main/app/view/TableSettings.js
@@ -630,7 +630,13 @@ define([
                 var size = parseFloat(this.BorderSize);
                 border.put_Value(1);
                 border.put_Size(size * 25.4 / 72.0);
-                var color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
+                var color;
+                if (this.btnBorderColor.isAutoColor()) {
+                    color = new Asc.asc_CColor();
+                    color.put_auto(true);
+                } else {
+                    color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
+                }
                 border.put_Color(color);
             }
             else {
@@ -644,7 +650,8 @@ define([
                 // create color buttons
                  this.btnBorderColor = new Common.UI.ColorButton({
                      parentEl: $('#table-border-color-btn'),
-                     color: '000000'
+                     color: 'auto',
+                     auto: true
                  });
                  this.lockedControls.push(this.btnBorderColor);
                  this.borderColor = this.btnBorderColor.getPicker();
@@ -659,7 +666,7 @@ define([
              }
              this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
              this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
-             this.btnBorderColor.setColor(this.borderColor.getColor());
+             !this.btnBorderColor.isAutoColor() && this.btnBorderColor.setColor(this.borderColor.getColor());
         },
 
         _onInitTemplates: function(Templates){
diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
index 1eac6b73cf..9727894608 100644
--- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
@@ -889,9 +889,11 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
             this.btnBorderColor = new Common.UI.ColorButton({
                 parentEl: $('#tableadv-border-color-btn'),
                 additionalAlign: this.menuAddAlign,
-                color: '000000'
+                color: 'auto',
+                auto: true
             });
             this.btnBorderColor.on('color:select', _.bind(me.onColorsBorderSelect, me));
+            this.btnBorderColor.on('auto:select', _.bind(me.onColorsBorderSelect, me));
             this.colorsBorder = this.btnBorderColor.getPicker();
 
             this.btnBackColor = new Common.UI.ColorButton({
@@ -1063,16 +1065,19 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
 
             if (this.borderProps !== undefined) {
                 this.btnBorderColor.setColor(this.borderProps.borderColor);
-                var colorstr = (typeof(this.borderProps.borderColor) == 'object') ? this.borderProps.borderColor.color : this.borderProps.borderColor;
+                this.btnBorderColor.setAutoColor(this.borderProps.borderColor=='auto');
+                var colorstr = (typeof(this.btnBorderColor.color) == 'object') ? this.btnBorderColor.color.color : this.btnBorderColor.color;
                 this.tableBordersImageSpacing.setVirtualBorderColor(colorstr);
                 this.tableBordersImage.setVirtualBorderColor(colorstr);
+                if (this.borderProps.borderColor=='auto')
+                    this.colorsBorder.clearSelection();
+                else
+                    this.colorsBorder.select(this.borderProps.borderColor,true);
 
                 this.cmbBorderSize.setValue(this.borderProps.borderSize.ptValue);
                 var rec = this.cmbBorderSize.getSelectedRecord();
                 if (rec)
                     this.onBorderSizeSelect(this.cmbBorderSize, rec);
-
-                this.colorsBorder.select(this.borderProps.borderColor, true);
             }
 
             for (var i=0; i<this.tableBordersImageSpacing.rows; i++) {
@@ -1163,7 +1168,7 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
             if (this.isAltDescChanged)
                 this._changedProps.put_TableDescription(this.textareaAltDescription.val());
 
-            return { tableProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.color} };
+            return { tableProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.isAutoColor() ? 'auto' : this.btnBorderColor.color} };
         },
 
         _setDefaults: function(props) {
@@ -2063,7 +2068,13 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
                 var size = parseFloat(this.BorderSize.ptValue);
                 border.put_Value(1);
                 border.put_Size(size * 25.4 / 72.0);
-                var color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
+                var color;
+                if (this.btnBorderColor.isAutoColor()) {
+                    color = new Asc.asc_CColor();
+                    color.put_auto(true);
+                } else {
+                    color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
+                }
                 border.put_Color(color);
             }
             else {
diff --git a/apps/presentationeditor/main/app/view/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js
index 54c0b86161..72d1b50b47 100644
--- a/apps/presentationeditor/main/app/view/TableSettings.js
+++ b/apps/presentationeditor/main/app/view/TableSettings.js
@@ -611,7 +611,8 @@ define([
             if (!this.btnBackColor) {
                 this.btnBorderColor = new Common.UI.ColorButton({
                     parentEl: $('#table-border-color-btn'),
-                    color: '000000'
+                    color: 'auto',
+                    auto: true
                 });
                 this.lockedControls.push(this.btnBorderColor);
                 this.borderColor = this.btnBorderColor.getPicker();
@@ -626,7 +627,7 @@ define([
             }
             this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
             this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
-            this.btnBorderColor.setColor(this.borderColor.getColor());
+            !this.btnBorderColor.isAutoColor() && this.btnBorderColor.setColor(this.borderColor.getColor());
         },
 
         _onInitTemplates: function(Templates){