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 01/11] 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;
 }

From 8c8c3c3d0d44224234f317c7ca814b598dec113b Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Thu, 30 Sep 2021 05:16:32 +0300
Subject: [PATCH 02/11] Fix Bug 52187

---
 .../main/app/view/ShapeSettings.js            | 15 +++---
 .../main/app/view/ShapeSettings.js            | 47 +++++++++++++++----
 .../main/app/view/SlideSettings.js            | 45 ++++++++++++++----
 .../main/app/view/ShapeSettings.js            | 43 +++++++++++++----
 4 files changed, 114 insertions(+), 36 deletions(-)

diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 63f43ad0f..e63d02333 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -407,12 +407,10 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 174;
                 var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
                 this.mnuDirectionPicker.selectRecord(record, true);
-                if(record) {
-                    this.typeGradient = record.get('type') +90;
-                }
+                if(record)
+                    this.typeGradient = this.GradLinearDirectionType +90;
                 else
                     this.typeGradient= -1;
-
                 this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
                 this.numGradientAngle.setDisabled(this._locked);
             } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@@ -421,7 +419,7 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 58;
                 this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
                 if (this.GradRadialDirectionIdx>=0)
-                    this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type + 90;
+                    this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
                 else
                     this.typeGradient= -1;
 
@@ -945,7 +943,7 @@ define([
                             var record = this.mnuDirectionPicker.store.findWhere({type: value});
                             this.mnuDirectionPicker.selectRecord(record, true);
                             if (record)
-                                this.typeGradient = record.get('type') + 90;
+                                this.typeGradient = value + 90;
                             else
                                 this.typeGradient= -1;
 
@@ -991,8 +989,9 @@ define([
 
                     me.gradientColorsStr= arrGrCollors.join(', ');
                     if (me.gradientColorsStr != "") {
-                        if(me.mnuDirectionPicker.dataViewItems.length==1)
+                        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;
@@ -1001,7 +1000,7 @@ define([
 
                         if(this.typeGradient == -1)
                             this.btnDirection.$icon.css({'background': 'none'});
-                        else if(this.typeGradient==92)
+                        else if(this.typeGradient==2)
                             this.btnDirection.$icon.css({'background': ('radial-gradient(' + me.gradientColorsStr + ')')});
                         else
                             this.btnDirection.$icon.css({
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 6479b17a7..e98bcc6b1 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -121,6 +121,8 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.fillControls = [];
+            this.gradientColorsStr="";
+            this.typeGradient = 0 ;
 
             this.render();
 
@@ -390,10 +392,10 @@ 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 = this.GradLinearDirectionType +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) {
@@ -402,9 +404,9 @@ 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;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
                 this.numGradientAngle.setValue(0, true);
                 this.numGradientAngle.setDisabled(true);
             }
@@ -443,7 +445,7 @@ define([
                 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) {
@@ -842,7 +844,7 @@ define([
                             this.onGradTypeSelect(this.cmbGradType, rec.attributes);
                         } else {
                             this.cmbGradType.setValue('');
-                            this.btnDirection.setIconCls('');
+                            this.typeGradient = -1;
                         }
                         this._state.GradFillType = this.GradFillType;
                     }
@@ -854,9 +856,9 @@ 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 = value + 90;
                             else
-                                this.btnDirection.setIconCls('');
+                                this.typeGradient= -1;
                             this.numGradientAngle.setValue(value, true);
                         }
                     } else
@@ -889,10 +891,35 @@ 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==2)
+                            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;
                     }
@@ -1266,7 +1293,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/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index f52c916d6..15a9f37c8 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -110,6 +110,9 @@ define([
             this.textureNames = [this.txtCanvas, this.txtCarton, this.txtDarkFabric, this.txtGrain, this.txtGranite, this.txtGreyPaper,
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
+            this.gradientColorsStr="";
+            this.typeGradient = 0 ;
+
             this.render();
 
             var me = this;
@@ -463,10 +466,10 @@ 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 = this.GradLinearDirectionType +90;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
                 this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
                 this.numGradientAngle.setDisabled(this._locked.background);
             } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@@ -475,9 +478,9 @@ 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;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
                 this.numGradientAngle.setValue(0, true);
                 this.numGradientAngle.setDisabled(true);
             }
@@ -516,7 +519,7 @@ define([
                 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) {
@@ -1193,7 +1196,7 @@ define([
                             this.onGradTypeSelect(this.cmbGradType, rec.attributes);
                         } else {
                             this.cmbGradType.setValue('');
-                            this.btnDirection.setIconCls('');
+                            this.typeGradient = -1;
                         }
                         this._state.GradFillType = this.GradFillType;
                     }
@@ -1205,9 +1208,9 @@ 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 = value + 90;
                             else
-                                this.btnDirection.setIconCls('');
+                                this.typeGradient= -1;
                             this.numGradientAngle.setValue(value, true);
                         }
                     } else
@@ -1240,9 +1243,33 @@ 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 == 2)
+                            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;
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index da203e13b..77248a28f 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -122,6 +122,8 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.fillControls = [];
+            this.gradientColorsStr="";
+            this.typeGradient = 0 ;
 
             this.render();
 
@@ -402,10 +404,10 @@ 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 = this.GradLinearDirectionType +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) {
@@ -414,9 +416,9 @@ 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;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
                 this.numGradientAngle.setValue(0, true);
                 this.numGradientAngle.setDisabled(true);
             }
@@ -456,7 +458,7 @@ define([
                 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) {
@@ -866,7 +868,7 @@ define([
                             this.onGradTypeSelect(this.cmbGradType, rec.attributes);
                         } else {
                             this.cmbGradType.setValue('');
-                            this.btnDirection.setIconCls('');
+                            this.typeGradient = -1;
                         }
                         this._state.GradFillType = this.GradFillType;
                     }
@@ -878,9 +880,9 @@ 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 = value + 90;
                             else
-                                this.btnDirection.setIconCls('');
+                                this.typeGradient= -1;
                             this.numGradientAngle.setValue(value, true);
                         }
                     } else
@@ -913,9 +915,32 @@ 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==2)
+                            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;

From 2001f841f0e91c0be1ffd825cac07b5c1ca754e8 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Fri, 1 Oct 2021 08:17:43 +0300
Subject: [PATCH 03/11] Bug 52187

---
 apps/common/main/lib/component/Slider.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index 05ad8c0c0..a557adef8 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -387,13 +387,13 @@ define([
                     pos = Math.max(0, Math.min(100, position)),
                     value = pos/me.delta + me.minValue;
 
-                if (me.isRemoveThumb) {
-                    if (me.thumbs.length < 3) {
+                if ((me.isRemoveThumb) && (me.thumbs.length < 3)) {
+                    /*if (me.thumbs.length < 3) {
                         $(document).off('mouseup', me.binding.onMouseUp);
                         $(document).off('mousemove', me.binding.onMouseMove);
                         me._dragstart = undefined;
                         return;
-                    }
+                    }*/
                     me.trigger('removethumb', me, _.findIndex(me.thumbs, {index: index}));
                     me.trigger('change', me, value, lastValue);
                     me.trigger('changecomplete', me, value, lastValue);

From 526c0987699185ce6a3495ef3e3ed7a153a38cf4 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Fri, 1 Oct 2021 08:42:57 +0300
Subject: [PATCH 04/11] Fix Bug 52187

---
 .../main/app/view/CellSettings.js             | 30 +++++++++++++++++--
 .../main/app/view/ShapeSettings.js            |  2 +-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 3964e3a74..ea2d477dd 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -91,6 +91,8 @@ define([
             this.GradColor = { values: [0, 100], colors: ['000000', 'ffffff'], currentIdx: 0};
 
             this.fillControls = [];
+            this.gradientColorsStr="";
+            this.typeGradient = 0;
 
             this.render();
             this.createDelayedControls();
@@ -910,9 +912,9 @@ 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 = value + 90;
                                 else
-                                    this.btnDirection.setIconCls('');
+                                    this.typeGradient= -1;
                                 this.numGradientAngle.setValue(value, true);
                             }
                         }
@@ -934,10 +936,32 @@ define([
                                 Common.Utils.ThemeColor.getHexColor(clr.asc_getR(), clr.asc_getG(), clr.asc_getB()));
                             me.GradColor.values.push(position*100);
                         });
+
+                        var arrGrCollors=[];
                         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) +'%');
                         }
+
+                        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
+                                this.btnDirection.$icon.css({
+                                    'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + me.gradientColorsStr + ')')
+                                });
+                        }
+
                         if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
                             me.GradColor.currentIdx = 0;
                         }
@@ -1306,7 +1330,7 @@ define([
                 rawData = record;
             }
 
-            this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
+            this.typeGradient = rawData.type + 90;
             this.GradLinearDirectionType = rawData.type;
             this.numGradientAngle.setValue(rawData.type, true);
 
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 77248a28f..3cc34e0e1 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -123,7 +123,7 @@ define([
 
             this.fillControls = [];
             this.gradientColorsStr="";
-            this.typeGradient = 0 ;
+            this.typeGradient = 0;
 
             this.render();
 

From 3b2d55b6d55429a6bad8b8d8f450536e966ffc65 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Fri, 1 Oct 2021 15:41:37 +0300
Subject: [PATCH 05/11] Fix Bug 52187

---
 apps/common/main/lib/component/Slider.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index a557adef8..7a77729d7 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -386,14 +386,11 @@ define([
                     need_sort = position < minValue || position > maxValue,
                     pos = Math.max(0, Math.min(100, position)),
                     value = pos/me.delta + me.minValue;
+                
+                    if (me.thumbs.length < 3)
+                        me.isRemoveThumb = false;
 
-                if ((me.isRemoveThumb) && (me.thumbs.length < 3)) {
-                    /*if (me.thumbs.length < 3) {
-                        $(document).off('mouseup', me.binding.onMouseUp);
-                        $(document).off('mousemove', me.binding.onMouseMove);
-                        me._dragstart = undefined;
-                        return;
-                    }*/
+                    if (me.isRemoveThumb) {
                     me.trigger('removethumb', me, _.findIndex(me.thumbs, {index: index}));
                     me.trigger('change', me, value, lastValue);
                     me.trigger('changecomplete', me, value, lastValue);

From 5f4345679d1fcd2cd8a53b87ed92932d3a814cb7 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Sat, 2 Oct 2021 01:20:52 +0300
Subject: [PATCH 06/11] Bug 52187

---
 apps/common/main/lib/component/Slider.js      |  5 +-
 .../main/app/view/ShapeSettings.js            |  2 +-
 .../main/app/view/ShapeSettings.js            | 58 +++++++++++--------
 .../main/app/view/SlideSettings.js            | 56 +++++++++++-------
 .../main/app/view/CellSettings.js             |  2 +-
 .../main/app/view/ShapeSettings.js            |  2 +-
 6 files changed, 76 insertions(+), 49 deletions(-)

diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index 7a77729d7..cec805653 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -316,6 +316,7 @@ define([
             me.delta = 100/(me.maxValue - me.minValue);
             me.includeSnap = me.options.includeSnap;
             me.intervalSnap = me.options.intervalSnap;
+            me.mouseFree = true;
             me.thumbs = [];
             if (me.options.el) {
                 me.render();
@@ -404,7 +405,7 @@ define([
 
                 $(document).off('mouseup', me.binding.onMouseUp);
                 $(document).off('mousemove', me.binding.onMouseMove);
-
+                me.mouseFree = true;
                 me._dragstart = undefined;
                 !me.isRemoveThumb && me.trigger('changecomplete', me, value, lastValue);
                 me.isRemoveThumb = undefined;
@@ -443,7 +444,7 @@ define([
 
             var onMouseDown = function (e) {
                 if ( me.disabled ) return;
-
+                me.mouseFree = false;
                 var index = e.data.index,
                     thumb = me.thumbs[index].thumb;
 
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index e63d02333..53391fbeb 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -127,7 +127,7 @@ define([
 
             this.fillControls = [];
             this.gradientColorsStr="";
-            this.typeGradient = 0 ;
+            this.typeGradient = 90 ;
             this.render();
         },
 
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index e98bcc6b1..5da359ca0 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -121,8 +121,8 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.fillControls = [];
-            this.gradientColorsStr="";
-            this.typeGradient = 0 ;
+            this.gradientColorsStr = "#000, #fff";
+            this.typeGradient = 90 ;
 
             this.render();
 
@@ -520,9 +520,39 @@ define([
                 this.api.setEndPointHistory();
                 this._gradientApplyFunc();
             }
+
+            var arrGrCollors=[];
+            var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
+            for (var index=0; index < slider.thumbs.length; index++) {
+                arrGrCollors.push(slider.getColorValue(index)+ ' '+ slider.getValue(index)*scale +'%');
+            }
+
+            this.btnDirectionRedraw(slider, arrGrCollors.join(', '));
             this._sendUndoPoint = true;
         },
 
+        btnDirectionRedraw: function(slider, gradientColorsStr) {
+            if(!slider.mouseFree) return;
+
+            this.gradientColorsStr = gradientColorsStr;
+            if (this.mnuDirectionPicker.dataViewItems.length == 1)
+                this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
+            else
+                this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
+                    var type = item.options.model.attributes.type + 90;
+                    item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
+                });
+
+            if (this.typeGradient == -1)
+                this.btnDirection.$icon.css({'background': 'none'});
+            else if (this.typeGradient == 2)
+                this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
+            else
+                this.btnDirection.$icon.css({
+                    'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
+                });
+        },
+
         _gradientApplyFunc: function() {
             if (this._sliderChanged) {
                 var props = new Asc.asc_CShapeProperty();
@@ -900,25 +930,7 @@ define([
                         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==2)
-                            this.btnDirection.$icon.css({'background': ('radial-gradient(' + me.gradientColorsStr + ')')});
-                        else
-                            this.btnDirection.$icon.css({
-                                'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + me.gradientColorsStr + ')')
-                            });
-                    }
+                    this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
 
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;
@@ -1312,8 +1324,8 @@ define([
                     restoreHeight: 174,
                     store: new Common.UI.DataViewStore(me._viewDataLinear),
                     itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
-                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
-                        +' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
+                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg, ' + me.gradientColorsStr + ' )'
+                        +' <%} else {%> radial-gradient( ' + me.gradientColorsStr + ' 70%) <%}%>;"></div>')
                 });
             });
             this.btnDirection.render($('#shape-button-direction'));
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index 15a9f37c8..e397a522b 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -111,7 +111,7 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.gradientColorsStr="";
-            this.typeGradient = 0 ;
+            this.typeGradient = 90;
 
             this.render();
 
@@ -594,9 +594,41 @@ define([
                 this.api.setEndPointHistory();
                 this._gradientApplyFunc();
             }
+
+            var arrGrCollors=[];
+            var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
+            for (var index=0; index < slider.thumbs.length; index++) {
+                arrGrCollors.push(slider.getColorValue(index)+ ' '+ slider.getValue(index)*scale +'%');
+            }
+
+            this.btnDirectionRedraw(slider, arrGrCollors.join(', '));
+
             this._sendUndoPoint = true;
         },
 
+        btnDirectionRedraw: function(slider, gradientColorsStr) {
+            if(!slider.mouseFree) return;
+
+
+            this.gradientColorsStr = gradientColorsStr;
+            if (this.mnuDirectionPicker.dataViewItems.length == 1)
+                this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
+            else
+                this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
+                    var type = item.options.model.attributes.type + 90;
+                    item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
+                });
+
+            if (this.typeGradient == -1)
+                this.btnDirection.$icon.css({'background': 'none'});
+            else if (this.typeGradient == 2)
+                this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
+            else
+                this.btnDirection.$icon.css({
+                    'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
+                });
+        },
+
         _gradientApplyFunc: function() {
             if (this._sliderChanged) {
                 var props = new Asc.CAscSlideProps();
@@ -1251,26 +1283,8 @@ define([
                         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 == 2)
-                            this.btnDirection.$icon.css({'background': ('radial-gradient(' + me.gradientColorsStr + ')')});
-                        else
-                            this.btnDirection.$icon.css({
-                                'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + me.gradientColorsStr + ')')
-                            });
-                    }
+                    this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
+                    
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;
                     }
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index ea2d477dd..96893a739 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -92,7 +92,7 @@ define([
 
             this.fillControls = [];
             this.gradientColorsStr="";
-            this.typeGradient = 0;
+            this.typeGradient = 90;
 
             this.render();
             this.createDelayedControls();
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 3cc34e0e1..2691552ac 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -123,7 +123,7 @@ define([
 
             this.fillControls = [];
             this.gradientColorsStr="";
-            this.typeGradient = 0;
+            this.typeGradient = 90;
 
             this.render();
 

From 68ad058a65bd0e2b75d847ee94f6520125b293f6 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Tue, 5 Oct 2021 12:25:58 +0300
Subject: [PATCH 07/11] Refactoring

---
 apps/common/main/lib/component/Slider.js               | 2 +-
 apps/documenteditor/main/app/view/ShapeSettings.js     | 2 +-
 apps/presentationeditor/main/app/view/ShapeSettings.js | 2 +-
 apps/presentationeditor/main/app/view/SlideSettings.js | 2 +-
 apps/spreadsheeteditor/main/app/view/CellSettings.js   | 2 +-
 apps/spreadsheeteditor/main/app/view/ShapeSettings.js  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index cec805653..0c7cfade3 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -378,6 +378,7 @@ define([
                 e.preventDefault();
                 e.stopPropagation();
                 resetPageX(e);
+                me.mouseFree = true;
 
                 var index = e.data.index,
                     lastValue = me.thumbs[index].value,
@@ -405,7 +406,6 @@ define([
 
                 $(document).off('mouseup', me.binding.onMouseUp);
                 $(document).off('mousemove', me.binding.onMouseMove);
-                me.mouseFree = true;
                 me._dragstart = undefined;
                 !me.isRemoveThumb && me.trigger('changecomplete', me, value, lastValue);
                 me.isRemoveThumb = undefined;
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 53391fbeb..9e56ed570 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -994,7 +994,7 @@ define([
                         }
                         else
                             me.mnuDirectionPicker.dataViewItems.forEach(function (item){
-                                var type = item.options.model.attributes.type+90;
+                                var type = item.model.get('type')+90;
                                 item.$el.children(0).css({'background': 'linear-gradient('+ type + 'deg, '+ me.gradientColorsStr + ')'});
                             });
 
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 5da359ca0..34e88cd0e 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -539,7 +539,7 @@ define([
                 this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
             else
                 this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
-                    var type = item.options.model.attributes.type + 90;
+                    var type = item.model.get('type') + 90;
                     item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
                 });
 
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index e397a522b..cf3e8672d 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -615,7 +615,7 @@ define([
                 this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
             else
                 this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
-                    var type = item.options.model.attributes.type + 90;
+                    var type = item.model.get('type') + 90;
                     item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
                 });
 
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 96893a739..92ac88154 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -950,7 +950,7 @@ define([
                                 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;
+                                    var type = item.model.get('type')+90;
                                     item.$el.children(0).css({'background': 'linear-gradient('+ type + 'deg, '+ me.gradientColorsStr + ')'});
                                 });
 
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 2691552ac..c737aab48 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -929,7 +929,7 @@ define([
                             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;
+                                var type = item.model.get('type')+90;
                                 item.$el.children(0).css({'background': 'linear-gradient('+ type + 'deg, '+ me.gradientColorsStr + ')'});
                             });
 

From 5ca8b6cff018d951078eed44e35f92b07504ea09 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Wed, 6 Oct 2021 01:00:48 +0300
Subject: [PATCH 08/11] Bug 52187

---
 .../main/app/view/ShapeSettings.js            | 44 ++++++++++---------
 .../main/app/view/ShapeSettings.js            |  1 -
 .../main/app/view/SlideSettings.js            |  1 -
 .../main/app/view/CellSettings.js             | 41 +++++++++--------
 .../main/app/view/ShapeSettings.js            | 42 ++++++++++--------
 5 files changed, 69 insertions(+), 60 deletions(-)

diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 9e56ed570..e9922cef7 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -986,27 +986,7 @@ define([
                         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.model.get('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==2)
-                            this.btnDirection.$icon.css({'background': ('radial-gradient(' + me.gradientColorsStr + ')')});
-                        else
-                            this.btnDirection.$icon.css({
-                                'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + me.gradientColorsStr + ')')
-                            });
-                    }
+                    this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
 
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;
@@ -1220,6 +1200,28 @@ define([
             }
         },
 
+        btnDirectionRedraw: function(slider, gradientColorsStr) {
+            if(!slider.mouseFree) return;
+
+            this.gradientColorsStr = gradientColorsStr;
+            if (this.mnuDirectionPicker.dataViewItems.length == 1)
+                this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
+            else
+                this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
+                    var type = item.model.get('type') + 90;
+                    item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
+                });
+
+            if (this.typeGradient == -1)
+                this.btnDirection.$icon.css({'background': 'none'});
+            else if (this.typeGradient == 2)
+                this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
+            else
+                this.btnDirection.$icon.css({
+                    'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
+                });
+        },
+
         createDelayedControls: function() {
             var me = this;
 
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 34e88cd0e..ce0947876 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -929,7 +929,6 @@ define([
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                         arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
                     }
-
                     this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
 
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index cf3e8672d..b2f7cb9e9 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -600,7 +600,6 @@ define([
             for (var index=0; index < slider.thumbs.length; index++) {
                 arrGrCollors.push(slider.getColorValue(index)+ ' '+ slider.getValue(index)*scale +'%');
             }
-
             this.btnDirectionRedraw(slider, arrGrCollors.join(', '));
 
             this._sendUndoPoint = true;
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 92ac88154..a79be80ee 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -943,24 +943,7 @@ define([
                             me.sldrGradient.setValue(index, me.GradColor.values[index]);
                             arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index) +'%');
                         }
-
-                        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.model.get('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
-                                this.btnDirection.$icon.css({
-                                    'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + me.gradientColorsStr + ')')
-                                });
-                        }
+                        this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
 
                         if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
                             me.GradColor.currentIdx = 0;
@@ -1093,6 +1076,28 @@ define([
             }
         },
 
+        btnDirectionRedraw: function(slider, gradientColorsStr) {
+            if(!slider.mouseFree) return;
+
+            this.gradientColorsStr = gradientColorsStr;
+            if (this.mnuDirectionPicker.dataViewItems.length == 1)
+                this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
+            else
+                this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
+                    var type = item.model.get('type') + 90;
+                    item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
+                });
+
+            if (this.typeGradient == -1)
+                this.btnDirection.$icon.css({'background': 'none'});
+            else if (this.typeGradient == 2)
+                this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
+            else
+                this.btnDirection.$icon.css({
+                    'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
+                });
+        },
+
         UpdateThemeColors: function() {
              if (!this.borderColor) {
                 // create color buttons
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index c737aab48..cadaa4747 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -922,26 +922,8 @@ define([
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                         arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
                     }
+                    this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
 
-                    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.model.get('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==2)
-                            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;
                     }
@@ -1156,6 +1138,28 @@ define([
             }
         },
 
+        btnDirectionRedraw: function(slider, gradientColorsStr) {
+            if(!slider.mouseFree) return;
+
+            this.gradientColorsStr = gradientColorsStr;
+            if (this.mnuDirectionPicker.dataViewItems.length == 1)
+                this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
+            else
+                this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
+                    var type = item.model.get('type') + 90;
+                    item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
+                });
+
+            if (this.typeGradient == -1)
+                this.btnDirection.$icon.css({'background': 'none'});
+            else if (this.typeGradient == 2)
+                this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
+            else
+                this.btnDirection.$icon.css({
+                    'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
+                });
+        },
+
         createDelayedControls: function() {
             var me = this;
 

From ec154ba349aa85275e549eec31e6a5ec4e53ef02 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Wed, 6 Oct 2021 01:07:36 +0300
Subject: [PATCH 09/11] Delete mouseFree

---
 apps/common/main/lib/component/Slider.js               | 4 +---
 apps/documenteditor/main/app/view/ShapeSettings.js     | 2 --
 apps/presentationeditor/main/app/view/ShapeSettings.js | 2 --
 apps/presentationeditor/main/app/view/SlideSettings.js | 3 ---
 apps/spreadsheeteditor/main/app/view/CellSettings.js   | 1 -
 apps/spreadsheeteditor/main/app/view/ShapeSettings.js  | 2 --
 6 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index 0c7cfade3..b146eb9e4 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -316,7 +316,6 @@ define([
             me.delta = 100/(me.maxValue - me.minValue);
             me.includeSnap = me.options.includeSnap;
             me.intervalSnap = me.options.intervalSnap;
-            me.mouseFree = true;
             me.thumbs = [];
             if (me.options.el) {
                 me.render();
@@ -378,7 +377,6 @@ define([
                 e.preventDefault();
                 e.stopPropagation();
                 resetPageX(e);
-                me.mouseFree = true;
 
                 var index = e.data.index,
                     lastValue = me.thumbs[index].value,
@@ -444,7 +442,7 @@ define([
 
             var onMouseDown = function (e) {
                 if ( me.disabled ) return;
-                me.mouseFree = false;
+
                 var index = e.data.index,
                     thumb = me.thumbs[index].thumb;
 
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index e9922cef7..e7fa9d01f 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -1201,8 +1201,6 @@ define([
         },
 
         btnDirectionRedraw: function(slider, gradientColorsStr) {
-            if(!slider.mouseFree) return;
-
             this.gradientColorsStr = gradientColorsStr;
             if (this.mnuDirectionPicker.dataViewItems.length == 1)
                 this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index ce0947876..e378c4f91 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -532,8 +532,6 @@ define([
         },
 
         btnDirectionRedraw: function(slider, gradientColorsStr) {
-            if(!slider.mouseFree) return;
-
             this.gradientColorsStr = gradientColorsStr;
             if (this.mnuDirectionPicker.dataViewItems.length == 1)
                 this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index b2f7cb9e9..ac73297c6 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -606,9 +606,6 @@ define([
         },
 
         btnDirectionRedraw: function(slider, gradientColorsStr) {
-            if(!slider.mouseFree) return;
-
-
             this.gradientColorsStr = gradientColorsStr;
             if (this.mnuDirectionPicker.dataViewItems.length == 1)
                 this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index a79be80ee..a342ffa11 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -1077,7 +1077,6 @@ define([
         },
 
         btnDirectionRedraw: function(slider, gradientColorsStr) {
-            if(!slider.mouseFree) return;
 
             this.gradientColorsStr = gradientColorsStr;
             if (this.mnuDirectionPicker.dataViewItems.length == 1)
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index cadaa4747..ecf7f9d93 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -1139,8 +1139,6 @@ define([
         },
 
         btnDirectionRedraw: function(slider, gradientColorsStr) {
-            if(!slider.mouseFree) return;
-
             this.gradientColorsStr = gradientColorsStr;
             if (this.mnuDirectionPicker.dataViewItems.length == 1)
                 this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});

From 112fa9f9771cac20e7220eb28b80910b8b62b547 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Wed, 6 Oct 2021 13:21:06 +0300
Subject: [PATCH 10/11] Refactoring

---
 .../main/app/view/ShapeSettings.js            | 18 ++++-----
 .../main/resources/less/rightmenu.less        | 39 ------------------
 .../main/app/view/ShapeSettings.js            | 18 ++++-----
 .../main/app/view/SlideSettings.js            | 18 ++++-----
 .../main/resources/less/rightmenu.less        | 40 -------------------
 .../main/app/view/CellSettings.js             | 18 ++++-----
 .../main/app/view/ShapeSettings.js            | 18 ++++-----
 .../main/resources/less/rightmenu.less        | 40 -------------------
 8 files changed, 45 insertions(+), 164 deletions(-)

diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index e7fa9d01f..bd5778e39 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -1365,18 +1365,18 @@ define([
             this.fillControls.push(this.cmbGradType);
 
             this._viewDataLinear = [
-                { offsetx: 0,   offsety: 0,   type:45,  subtype:-1, iconcls:'gradient-left-top' },
-                { offsetx: 50,  offsety: 0,   type:90,  subtype:4,  iconcls:'gradient-top'},
-                { offsetx: 100, offsety: 0,   type:135, subtype:5,  iconcls:'gradient-right-top'},
-                { offsetx: 0,   offsety: 50,  type:0,   subtype:6,  iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
-                { offsetx: 100, offsety: 50,  type:180, subtype:1,  iconcls:'gradient-right'},
-                { offsetx: 0,   offsety: 100, type:315, subtype:2,  iconcls:'gradient-left-bottom'},
-                { offsetx: 50,  offsety: 100, type:270, subtype:3,  iconcls:'gradient-bottom'},
-                { offsetx: 100, offsety: 100, type:225, subtype:7,  iconcls:'gradient-right-bottom'}
+                { type:45,  subtype:-1},
+                { type:90,  subtype:4},
+                { type:135, subtype:5},
+                { type:0,   subtype:6, cls: 'item-gradient-separator', selected: true},
+                { type:180, subtype:1},
+                { type:315, subtype:2},
+                { type:270, subtype:3},
+                { type:225, subtype:7}
             ];
 
             this._viewDataRadial = [
-                { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
+                { type:2, subtype:5}
             ];
 
             this.btnDirection = new Common.UI.Button({
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 1f30fc168..c6510e63c 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -47,45 +47,6 @@
     margin-right: 62px !important;
 }
 
-.item-gradient-separator {
-    margin-right: 62px !important;
-}
-
-.gradient-left-top {
-    background: linear-gradient(to bottom right, #000, #fff);
-}
-
-.gradient-top {
-    background: linear-gradient(to bottom, #000, #fff);
-}
-
-.gradient-right-top {
-    background: linear-gradient(to bottom left, #000, #fff);
-}
-
-.gradient-left {
-    background: linear-gradient(to right, #000, #fff);
-}
-
-.gradient-right {
-    background: linear-gradient(to left, #000, #fff);
-}
-
-.gradient-left-bottom {
-    background: linear-gradient(to top right, #000, #fff);
-}
-
-.gradient-bottom {
-    background: linear-gradient(to top, #000, #fff);
-}
-
-.gradient-right-bottom {
-    background: linear-gradient(to top left, #000, #fff);
-}
-
-.gradient-radial-center {
-    background: radial-gradient( #000 , #fff 70%);
-}
 
 #signature-requested-sign,
 #signature-valid-sign,
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index e378c4f91..8192a55bc 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -1286,18 +1286,18 @@ define([
             this.fillControls.push(this.cmbGradType);
 
             this._viewDataLinear = [
-                { offsetx: 0,   offsety: 0,   type:45,  subtype:-1, iconcls:'gradient-left-top' },
-                { offsetx: 50,  offsety: 0,   type:90,  subtype:4,  iconcls:'gradient-top'},
-                { offsetx: 100, offsety: 0,   type:135, subtype:5,  iconcls:'gradient-right-top'},
-                { offsetx: 0,   offsety: 50,  type:0,   subtype:6,  iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
-                { offsetx: 100, offsety: 50,  type:180, subtype:1,  iconcls:'gradient-right'},
-                { offsetx: 0,   offsety: 100, type:315, subtype:2,  iconcls:'gradient-left-bottom'},
-                { offsetx: 50,  offsety: 100, type:270, subtype:3,  iconcls:'gradient-bottom'},
-                { offsetx: 100, offsety: 100, type:225, subtype:7,  iconcls:'gradient-right-bottom'}
+                { type:45,  subtype:-1},
+                { type:90,  subtype:4},
+                { type:135, subtype:5},
+                { type:0,   subtype:6,  cls: 'item-gradient-separator', selected: true},
+                { type:180, subtype:1},
+                { type:315, subtype:2},
+                { type:270, subtype:3},
+                { type:225, subtype:7}
             ];
 
             this._viewDataRadial = [
-                { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
+                { type:2, subtype:5}
             ];
 
             this.btnDirection = new Common.UI.Button({
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index ac73297c6..f7a7e23da 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -788,18 +788,18 @@ define([
             this.FillItems.push(this.cmbGradType);
 
             this._viewDataLinear = [
-                { offsetx: 0,   offsety: 0,   type:45,  subtype:-1, iconcls:'gradient-left-top' },
-                { offsetx: 50,  offsety: 0,   type:90,  subtype:4,  iconcls:'gradient-top'},
-                { offsetx: 100, offsety: 0,   type:135, subtype:5,  iconcls:'gradient-right-top'},
-                { offsetx: 0,   offsety: 50,  type:0,   subtype:6,  iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
-                { offsetx: 100, offsety: 50,  type:180, subtype:1,  iconcls:'gradient-right'},
-                { offsetx: 0,   offsety: 100, type:315, subtype:2,  iconcls:'gradient-left-bottom'},
-                { offsetx: 50,  offsety: 100, type:270, subtype:3,  iconcls:'gradient-bottom'},
-                { offsetx: 100, offsety: 100, type:225, subtype:7,  iconcls:'gradient-right-bottom'}
+                { type:45,  subtype:-1},
+                { type:90,  subtype:4},
+                { type:135, subtype:5},
+                { type:0,   subtype:6,  cls: 'item-gradient-separator', selected: true},
+                { type:180, subtype:1},
+                { type:315, subtype:2},
+                { type:270, subtype:3},
+                { type:225, subtype:7}
             ];
 
             this._viewDataRadial = [
-                { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
+                { type:2, subtype:5}
             ];
 
             this.btnDirection = new Common.UI.Button({
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index a580a64ed..c4aa9546f 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -41,46 +41,6 @@
     margin-right: 62px !important;
 }
 
-.item-gradient-separator {
-    margin-right: 62px !important;
-}
-
-.gradient-left-top {
-    background: linear-gradient(to bottom right, #000, #fff);
-}
-
-.gradient-top {
-    background: linear-gradient(to bottom, #000, #fff);
-}
-
-.gradient-right-top {
-    background: linear-gradient(to bottom left, #000, #fff);
-}
-
-.gradient-left {
-    background: linear-gradient(to right, #000, #fff);
-}
-
-.gradient-right {
-    background: linear-gradient(to left, #000, #fff);
-}
-
-.gradient-left-bottom {
-    background: linear-gradient(to top right, #000, #fff);
-}
-
-.gradient-bottom {
-    background: linear-gradient(to top, #000, #fff);
-}
-
-.gradient-right-bottom {
-    background: linear-gradient(to top left, #000, #fff);
-}
-
-.gradient-radial-center {
-    background: radial-gradient( #000 , #fff 70%);
-}
-
 #signature-requested-sign,
 #signature-valid-sign,
 #signature-invalid-sign {
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index a342ffa11..043785507 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -232,14 +232,14 @@ define([
             this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));*/
 
             this._viewDataLinear = [
-                { offsetx: 0,   offsety: 0,   type:45,  subtype:-1, iconcls:'gradient-left-top' },
-                { offsetx: 50,  offsety: 0,   type:90,  subtype:4,  iconcls:'gradient-top'},
-                { offsetx: 100, offsety: 0,   type:135, subtype:5,  iconcls:'gradient-right-top'},
-                { offsetx: 0,   offsety: 50,  type:0,   subtype:6,  iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
-                { offsetx: 100, offsety: 50,  type:180, subtype:1,  iconcls:'gradient-right'},
-                { offsetx: 0,   offsety: 100, type:315, subtype:2,  iconcls:'gradient-left-bottom'},
-                { offsetx: 50,  offsety: 100, type:270, subtype:3,  iconcls:'gradient-bottom'},
-                { offsetx: 100, offsety: 100, type:225, subtype:7,  iconcls:'gradient-right-bottom'}
+                { offsetx: 0,   offsety: 0,   type:45,  subtype:-1},
+                { offsetx: 50,  offsety: 0,   type:90,  subtype:4},
+                { offsetx: 100, offsety: 0,   type:135, subtype:5},
+                { offsetx: 0,   offsety: 50,  type:0,   subtype:6,  cls: 'item-gradient-separator', selected: true},
+                { offsetx: 100, offsety: 50,  type:180, subtype:1},
+                { offsetx: 0,   offsety: 100, type:315, subtype:2},
+                { offsetx: 50,  offsety: 100, type:270, subtype:3},
+                { offsetx: 100, offsety: 100, type:225, subtype:7}
             ];
 
             this.btnDirection = new Common.UI.Button({
@@ -262,7 +262,7 @@ define([
                     parentMenu: btn.menu,
                     restoreHeight: 174,
                     store: new Common.UI.DataViewStore(me._viewDataLinear),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" ></div>')
                 });
             });
             this.btnDirection.render($('#cell-button-direction'));
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index ecf7f9d93..172febc67 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -1303,18 +1303,18 @@ define([
             this.fillControls.push(this.cmbGradType);
 
             this._viewDataLinear = [
-                { offsetx: 0,   offsety: 0,   type:45,  subtype:-1, iconcls:'gradient-left-top' },
-                { offsetx: 50,  offsety: 0,   type:90,  subtype:4,  iconcls:'gradient-top'},
-                { offsetx: 100, offsety: 0,   type:135, subtype:5,  iconcls:'gradient-right-top'},
-                { offsetx: 0,   offsety: 50,  type:0,   subtype:6,  iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
-                { offsetx: 100, offsety: 50,  type:180, subtype:1,  iconcls:'gradient-right'},
-                { offsetx: 0,   offsety: 100, type:315, subtype:2,  iconcls:'gradient-left-bottom'},
-                { offsetx: 50,  offsety: 100, type:270, subtype:3,  iconcls:'gradient-bottom'},
-                { offsetx: 100, offsety: 100, type:225, subtype:7,  iconcls:'gradient-right-bottom'}
+                { type:45,  subtype:-1},
+                { type:90,  subtype:4},
+                { type:135, subtype:5},
+                { type:0,   subtype:6,  cls: 'item-gradient-separator', selected: true},
+                { type:180, subtype:1},
+                { type:315, subtype:2},
+                { type:270, subtype:3},
+                { type:225, subtype:7}
             ];
 
             this._viewDataRadial = [
-                { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
+                { type:2, subtype:5}
             ];
 
             this.btnDirection = new Common.UI.Button({
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index 98c95f832..2301d2d97 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -35,46 +35,6 @@
     margin-right: 62px !important;
 }
 
-.item-gradient-separator {
-    margin-right: 62px !important;
-}
-
-.gradient-left-top {
-    background: linear-gradient(to bottom right, #000, #fff);
-}
-
-.gradient-top {
-    background: linear-gradient(to bottom, #000, #fff);
-}
-
-.gradient-right-top {
-    background: linear-gradient(to bottom left, #000, #fff);
-}
-
-.gradient-left {
-    background: linear-gradient(to right, #000, #fff);
-}
-
-.gradient-right {
-    background: linear-gradient(to left, #000, #fff);
-}
-
-.gradient-left-bottom {
-    background: linear-gradient(to top right, #000, #fff);
-}
-
-.gradient-bottom {
-    background: linear-gradient(to top, #000, #fff);
-}
-
-.gradient-right-bottom {
-    background: linear-gradient(to top left, #000, #fff);
-}
-
-.gradient-radial-center {
-    background: radial-gradient( #000 , #fff 70%);
-}
-
 .item-wrap {
     width:50px;
     height:50px;

From 85167c57146c58f78e80e4596a8a19c8c46e4dce Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Wed, 6 Oct 2021 13:22:04 +0300
Subject: [PATCH 11/11] Fix Bug 52187

---
 apps/spreadsheeteditor/main/app/view/CellSettings.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 043785507..f9a587fcb 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -68,7 +68,8 @@ define([
         initialize: function () {
             this._initSettings = true;
             this._noApply = true;
-
+            this._sendUndoPoint = true;
+            
             this._state = {
                 DisabledControls: true,
                 DisabledFillPanels: true,