From 3f3f7b2de7753910977a078d076aa3e189f6c840 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Thu, 30 Sep 2021 03:48:54 +0300
Subject: [PATCH] Bug 52187

---
 .../main/app/view/ShapeSettings.js            | 52 +++++++++++++++----
 .../main/resources/less/rightmenu.less        |  2 -
 .../main/resources/less/rightmenu.less        |  1 -
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 63877cc67..63f43ad0f 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -126,7 +126,8 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.fillControls = [];
-
+            this.gradientColorsStr="";
+            this.typeGradient = 0 ;
             this.render();
         },
 
@@ -406,10 +407,12 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 174;
                 var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
                 this.mnuDirectionPicker.selectRecord(record, true);
-                if (record)
-                    this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
+                if(record) {
+                    this.typeGradient = record.get('type') +90;
+                }
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
+
                 this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
                 this.numGradientAngle.setDisabled(this._locked);
             } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@@ -418,9 +421,10 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 58;
                 this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
                 if (this.GradRadialDirectionIdx>=0)
-                    this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
+                    this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type + 90;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
+
                 this.numGradientAngle.setValue(0, true);
                 this.numGradientAngle.setDisabled(true);
             }
@@ -459,7 +463,9 @@ define([
             } else {
                 rawData = record;
             }
-            this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
+
+            this.typeGradient = rawData.type + 90;
+
             (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
             if (this.api) {
                 if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
@@ -932,7 +938,6 @@ define([
                         }
                         this._state.GradFillType = this.GradFillType;
                     }
-
                     if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR ) {
                         var value = Math.floor(fill.get_linear_angle()/60000);
                         if (Math.abs(this.GradLinearDirectionType-value)>0.001) {
@@ -940,9 +945,10 @@ define([
                             var record = this.mnuDirectionPicker.store.findWhere({type: value});
                             this.mnuDirectionPicker.selectRecord(record, true);
                             if (record)
-                                this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
+                                this.typeGradient = record.get('type') + 90;
                             else
-                                this.btnDirection.setIconCls('');
+                                this.typeGradient= -1;
+
                             this.numGradientAngle.setValue(value, true);
                         }
                     } else
@@ -975,10 +981,34 @@ define([
                             me.GradColor.values[index] = position;
                         }
                     });
+                    var arrGrCollors=[];
+                    var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
                     for (var index=0; index<length; index++) {
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
+                        arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
                     }
+
+                    me.gradientColorsStr= arrGrCollors.join(', ');
+                    if (me.gradientColorsStr != "") {
+                        if(me.mnuDirectionPicker.dataViewItems.length==1)
+                            me.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + me.gradientColorsStr + ')'});
+                        else
+                            me.mnuDirectionPicker.dataViewItems.forEach(function (item){
+                                var type = item.options.model.attributes.type+90;
+                                item.$el.children(0).css({'background': 'linear-gradient('+ type + 'deg, '+ me.gradientColorsStr + ')'});
+                            });
+
+                        if(this.typeGradient == -1)
+                            this.btnDirection.$icon.css({'background': 'none'});
+                        else if(this.typeGradient==92)
+                            this.btnDirection.$icon.css({'background': ('radial-gradient(' + me.gradientColorsStr + ')')});
+                        else
+                            this.btnDirection.$icon.css({
+                                'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + me.gradientColorsStr + ')')
+                            });
+                    }
+
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;
                     }
@@ -1352,7 +1382,7 @@ define([
 
             this.btnDirection = new Common.UI.Button({
                 cls         : 'btn-large-dataview',
-                iconCls     : 'item-gradient gradient-left',
+                iconCls     : 'item-gradient',
                 menu        : new Common.UI.Menu({
                     style: 'min-width: 60px;',
                     menuAlign: 'tr-br',
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index cff250ed5..1f30fc168 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -39,8 +39,6 @@
 }
 
 .item-gradient {
-    //.background-ximage-all('right-panels/gradients.png', 150px);
-
     width:50px;
     height:50px;
 }
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index 03a38a5fe..98c95f832 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -27,7 +27,6 @@
 }
 
 .item-gradient {
-    //.background-ximage-all('right-panels/gradients.png', 150px);
     width:50px;
     height:50px;
 }