From ca20d3b5d4c6312efd955cd4fb9275fae38549d2 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Tue, 28 Sep 2021 03:43:03 +0300
Subject: [PATCH 1/3] DE gradient fill

---
 .../main/app/view/ShapeSettings.js            |  5 +++-
 .../main/resources/less/rightmenu.less        | 29 ++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index c6a93f973..e0b453c13 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -1371,7 +1371,10 @@ define([
                     restoreHeight: 174,
                     allowScrollbar: false,
                     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" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                    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>')
                 });
             });
             this.btnDirection.render($('#shape-button-direction'));
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 7844607ef..b21cabe64 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -39,7 +39,7 @@
 }
 
 .item-gradient {
-    .background-ximage-all('right-panels/gradients.png', 150px);
+    //.background-ximage-all('right-panels/gradients.png', 150px);
 
     width:50px;
     height:50px;
@@ -50,39 +50,48 @@
 }
 
 .gradient-left-top {
-    background-position: 0 0;
+    //background-position: 0 0;
+    background: linear-gradient(to bottom right, #000, #fff);
 }
 
 .gradient-top {
-    background-position: -50px 0;
+    //background-position: -50px 0;
+    background: linear-gradient(to bottom, #000, #fff);
 }
 
 .gradient-right-top {
-    background-position: -100px 0;
+    //background-position: -100px 0;
+    background: linear-gradient(to bottom left, #000, #fff);
 }
 
 .gradient-left {
-    background-position: 0 -50px;
+    //background-position: 0 -50px;
+    background: linear-gradient(to right, #000, #fff);
 }
 
 .gradient-right {
-    background-position: -100px -50px;
+    //background-position: -100px -50px;
+    background: linear-gradient(to left, #000, #fff);
 }
 
 .gradient-left-bottom {
-    background-position: 0 -100px;
+    //background-position: 0 -100px;
+    background: linear-gradient(to top right, #000, #fff);
 }
 
 .gradient-bottom {
-    background-position: -50px -100px;
+   // background-position: -50px -100px;
+    background: linear-gradient(to top, #000, #fff);
 }
 
 .gradient-right-bottom {
-    background-position: -100px -100px;
+    //background-position: -100px -100px;
+    background: linear-gradient(to top left, #000, #fff);
 }
 
 .gradient-radial-center {
-    background-position: -100px -150px;
+    //background-position: -100px -150px;
+    background: radial-gradient( #000 , #fff 70%);
 }
 
 #signature-requested-sign,

From 3d60527f994afff08439ae8ccc38ae93a28ec7c8 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Tue, 28 Sep 2021 04:14:30 +0300
Subject: [PATCH 2/3] SSE and PE

---
 .../main/app/view/ShapeSettings.js            |  4 ++-
 .../main/app/view/SlideSettings.js            |  4 ++-
 .../main/resources/less/rightmenu.less        | 33 +++++++++++++------
 .../main/app/view/ShapeSettings.js            |  4 ++-
 .../main/resources/less/rightmenu.less        | 29 ++++++++++------
 5 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 5ecb19a7d..6479b17a7 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -1284,7 +1284,9 @@ 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" style="background: '
+                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
+                        +' <%} else {%> radial-gradient( #000 , #fff 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 dc80ccb8b..f52c916d6 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -791,7 +791,9 @@ 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" style="background: '
+                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
+                        +' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
                 });
             });
             this.btnDirection.render($('#slide-button-direction'));
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 0a576902f..25bedd9ef 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -33,7 +33,7 @@
 }
 
 .item-gradient {
-    .background-ximage-all('right-panels/gradients.png', 150px);
+    //.background-ximage-all('right-panels/gradients.png', 150px);
     width:50px;
     height:50px;
 }
@@ -42,40 +42,53 @@
     margin-right: 62px !important;
 }
 
+.item-gradient-separator {
+    margin-right: 62px !important;
+}
+
 .gradient-left-top {
-    background-position: 0 0;
+    //background-position: 0 0;
+    background: linear-gradient(to bottom right, #000, #fff);
 }
 
 .gradient-top {
-    background-position: -50px 0;
+    //background-position: -50px 0;
+    background: linear-gradient(to bottom, #000, #fff);
 }
 
 .gradient-right-top {
-    background-position: -100px 0;
+    //background-position: -100px 0;
+    background: linear-gradient(to bottom left, #000, #fff);
 }
 
 .gradient-left {
-    background-position: 0 -50px;
+    //background-position: 0 -50px;
+    background: linear-gradient(to right, #000, #fff);
 }
 
 .gradient-right {
-    background-position: -100px -50px;
+    //background-position: -100px -50px;
+    background: linear-gradient(to left, #000, #fff);
 }
 
 .gradient-left-bottom {
-    background-position: 0 -100px;
+    //background-position: 0 -100px;
+    background: linear-gradient(to top right, #000, #fff);
 }
 
 .gradient-bottom {
-    background-position: -50px -100px;
+    // background-position: -50px -100px;
+    background: linear-gradient(to top, #000, #fff);
 }
 
 .gradient-right-bottom {
-    background-position: -100px -100px;
+    //background-position: -100px -100px;
+    background: linear-gradient(to top left, #000, #fff);
 }
 
 .gradient-radial-center {
-    background-position: -100px -150px;
+    //background-position: -100px -150px;
+    background: radial-gradient( #000 , #fff 70%);
 }
 
 #signature-requested-sign,
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 909df6986..da203e13b 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -1310,7 +1310,9 @@ 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" style="background: '
+                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
+                        +' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
                 });
             });
             this.btnDirection.render($('#shape-button-direction'));
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index ea4e49a78..a85f1e3af 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -27,7 +27,7 @@
 }
 
 .item-gradient {
-    .background-ximage-all('right-panels/gradients.png', 150px);
+    //.background-ximage-all('right-panels/gradients.png', 150px);
     width:50px;
     height:50px;
 }
@@ -37,39 +37,48 @@
 }
 
 .gradient-left-top {
-    background-position: 0 0;
+    //background-position: 0 0;
+    background: linear-gradient(to bottom right, #000, #fff);
 }
 
 .gradient-top {
-    background-position: -50px 0;
+    //background-position: -50px 0;
+    background: linear-gradient(to bottom, #000, #fff);
 }
 
 .gradient-right-top {
-    background-position: -100px 0;
+    //background-position: -100px 0;
+    background: linear-gradient(to bottom left, #000, #fff);
 }
 
 .gradient-left {
-    background-position: 0 -50px;
+    //background-position: 0 -50px;
+    background: linear-gradient(to right, #000, #fff);
 }
 
 .gradient-right {
-    background-position: -100px -50px;
+    //background-position: -100px -50px;
+    background: linear-gradient(to left, #000, #fff);
 }
 
 .gradient-left-bottom {
-    background-position: 0 -100px;
+    //background-position: 0 -100px;
+    background: linear-gradient(to top right, #000, #fff);
 }
 
 .gradient-bottom {
-    background-position: -50px -100px;
+    // background-position: -50px -100px;
+    background: linear-gradient(to top, #000, #fff);
 }
 
 .gradient-right-bottom {
-    background-position: -100px -100px;
+    //background-position: -100px -100px;
+    background: linear-gradient(to top left, #000, #fff);
 }
 
 .gradient-radial-center {
-    background-position: -100px -150px;
+    //background-position: -100px -150px;
+    background: radial-gradient( #000 , #fff 70%);
 }
 
 .item-wrap {

From 501043f04c8917b1279c2815448ae2aa01bc60f1 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Tue, 28 Sep 2021 17:35:52 +0300
Subject: [PATCH 3/3] Fix Bug 52187

---
 apps/documenteditor/main/app/view/ShapeSettings.js  |  1 -
 .../main/resources/less/rightmenu.less              | 13 ++++---------
 .../main/resources/less/rightmenu.less              | 10 ----------
 .../main/resources/less/rightmenu.less              | 13 ++++---------
 4 files changed, 8 insertions(+), 29 deletions(-)

diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index e0b453c13..63877cc67 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -1371,7 +1371,6 @@ define([
                     restoreHeight: 174,
                     allowScrollbar: false,
                     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" style="background: '
                         +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
                         +' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index b21cabe64..cff250ed5 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -49,48 +49,43 @@
     margin-right: 62px !important;
 }
 
+.item-gradient-separator {
+    margin-right: 62px !important;
+}
+
 .gradient-left-top {
-    //background-position: 0 0;
     background: linear-gradient(to bottom right, #000, #fff);
 }
 
 .gradient-top {
-    //background-position: -50px 0;
     background: linear-gradient(to bottom, #000, #fff);
 }
 
 .gradient-right-top {
-    //background-position: -100px 0;
     background: linear-gradient(to bottom left, #000, #fff);
 }
 
 .gradient-left {
-    //background-position: 0 -50px;
     background: linear-gradient(to right, #000, #fff);
 }
 
 .gradient-right {
-    //background-position: -100px -50px;
     background: linear-gradient(to left, #000, #fff);
 }
 
 .gradient-left-bottom {
-    //background-position: 0 -100px;
     background: linear-gradient(to top right, #000, #fff);
 }
 
 .gradient-bottom {
-   // background-position: -50px -100px;
     background: linear-gradient(to top, #000, #fff);
 }
 
 .gradient-right-bottom {
-    //background-position: -100px -100px;
     background: linear-gradient(to top left, #000, #fff);
 }
 
 .gradient-radial-center {
-    //background-position: -100px -150px;
     background: radial-gradient( #000 , #fff 70%);
 }
 
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 25bedd9ef..a580a64ed 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -33,7 +33,6 @@
 }
 
 .item-gradient {
-    //.background-ximage-all('right-panels/gradients.png', 150px);
     width:50px;
     height:50px;
 }
@@ -47,47 +46,38 @@
 }
 
 .gradient-left-top {
-    //background-position: 0 0;
     background: linear-gradient(to bottom right, #000, #fff);
 }
 
 .gradient-top {
-    //background-position: -50px 0;
     background: linear-gradient(to bottom, #000, #fff);
 }
 
 .gradient-right-top {
-    //background-position: -100px 0;
     background: linear-gradient(to bottom left, #000, #fff);
 }
 
 .gradient-left {
-    //background-position: 0 -50px;
     background: linear-gradient(to right, #000, #fff);
 }
 
 .gradient-right {
-    //background-position: -100px -50px;
     background: linear-gradient(to left, #000, #fff);
 }
 
 .gradient-left-bottom {
-    //background-position: 0 -100px;
     background: linear-gradient(to top right, #000, #fff);
 }
 
 .gradient-bottom {
-    // background-position: -50px -100px;
     background: linear-gradient(to top, #000, #fff);
 }
 
 .gradient-right-bottom {
-    //background-position: -100px -100px;
     background: linear-gradient(to top left, #000, #fff);
 }
 
 .gradient-radial-center {
-    //background-position: -100px -150px;
     background: radial-gradient( #000 , #fff 70%);
 }
 
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index a85f1e3af..03a38a5fe 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -36,48 +36,43 @@
     margin-right: 62px !important;
 }
 
+.item-gradient-separator {
+    margin-right: 62px !important;
+}
+
 .gradient-left-top {
-    //background-position: 0 0;
     background: linear-gradient(to bottom right, #000, #fff);
 }
 
 .gradient-top {
-    //background-position: -50px 0;
     background: linear-gradient(to bottom, #000, #fff);
 }
 
 .gradient-right-top {
-    //background-position: -100px 0;
     background: linear-gradient(to bottom left, #000, #fff);
 }
 
 .gradient-left {
-    //background-position: 0 -50px;
     background: linear-gradient(to right, #000, #fff);
 }
 
 .gradient-right {
-    //background-position: -100px -50px;
     background: linear-gradient(to left, #000, #fff);
 }
 
 .gradient-left-bottom {
-    //background-position: 0 -100px;
     background: linear-gradient(to top right, #000, #fff);
 }
 
 .gradient-bottom {
-    // background-position: -50px -100px;
     background: linear-gradient(to top, #000, #fff);
 }
 
 .gradient-right-bottom {
-    //background-position: -100px -100px;
     background: linear-gradient(to top left, #000, #fff);
 }
 
 .gradient-radial-center {
-    //background-position: -100px -150px;
     background: radial-gradient( #000 , #fff 70%);
 }