From b662f8bdc723f48f0ddebab5a37107b2ebadb83c Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Mon, 25 Jul 2022 21:38:10 +0300
Subject: [PATCH 1/4] [PE][SSE] Fix Bug 58271

---
 .../main/app/view/ShapeSettingsAdvanced.js       | 16 ++++++++--------
 .../main/resources/less/advanced-settings.less   |  9 +++++----
 .../main/app/view/ShapeSettingsAdvanced.js       | 16 ++++++++--------
 .../main/resources/less/advanced-settings.less   |  9 +++++----
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js b/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
index 51d4291f8..606cfd05d 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
@@ -406,7 +406,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-begin-style'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="form-control image" style="width: 100px;"></div>',
+                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -424,7 +424,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-menu-begin-style'),
                 parentMenu: this.btnBeginStyleMenu,
                 store: new Common.UI.DataViewStore(_arrStyles),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
             });
             this.mnuBeginStylePicker.on('item:click', _.bind(this.onSelectBeginStyle, this));
             this._selectStyleItem(this.btnBeginStyle, null);
@@ -433,7 +433,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-begin-size'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="form-control image" style="width: 100px;"></div>',
+                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -451,7 +451,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-menu-begin-size'),
                 parentMenu: this.btnBeginSizeMenu,
                 store: new Common.UI.DataViewStore(_arrSize),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
             });
             this.mnuBeginSizePicker.on('item:click', _.bind(this.onSelectBeginSize, this));
             this._selectStyleItem(this.btnBeginSize, null);
@@ -466,7 +466,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-end-style'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="form-control image" style="width: 100px;"></div>',
+                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -484,7 +484,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-menu-end-style'),
                 parentMenu: this.btnEndStyleMenu,
                 store: new Common.UI.DataViewStore(_arrStyles),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
             });
             this.mnuEndStylePicker.on('item:click', _.bind(this.onSelectEndStyle, this));
             this._selectStyleItem(this.btnEndStyle, null);
@@ -493,7 +493,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-end-size'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="form-control image" style="width: 100px;"></div>',
+                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -511,7 +511,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-menu-end-size'),
                 parentMenu: this.btnEndSizeMenu,
                 store: new Common.UI.DataViewStore(_arrSize),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
             });
             this.mnuEndSizePicker.on('item:click', _.bind(this.onSelectEndSize, this));
             this._selectStyleItem(this.btnEndSize, null);
diff --git a/apps/presentationeditor/main/resources/less/advanced-settings.less b/apps/presentationeditor/main/resources/less/advanced-settings.less
index b7be1be09..5bc3951fd 100644
--- a/apps/presentationeditor/main/resources/less/advanced-settings.less
+++ b/apps/presentationeditor/main/resources/less/advanced-settings.less
@@ -4,11 +4,9 @@
         background-color: white;
 
         &.image {
-            .background-ximage('@{common-image-path}/right-panels/Begin-EndStyle.png', '@{common-image-path}/right-panels/Begin-EndStyle@2x.png', 480px);
-            background-repeat: no-repeat;
             background-position: 10px 0;
             background-attachment: scroll;
-            background-color: white;
+            background-color: @background-normal;
         }
     }
 
@@ -22,8 +20,11 @@
     }
 }
 
+.img-arrows {
+    .background-ximage-v2('right-panels/Begin-EndStyle.png', 480px, @commonimage: true);
+}
+
 .item-arrow {
-    .background-ximage('@{common-image-path}/right-panels/Begin-EndStyle.png', '@{common-image-path}/right-panels/Begin-EndStyle@2x.png', 480px);
     width:44px;
     height:20px;
 }
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js b/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
index 510be9f0b..c39790d4e 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
@@ -376,7 +376,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-begin-style'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="form-control image" style="width: 100px;"></div>',
+                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -394,7 +394,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-menu-begin-style'),
                 parentMenu: this.btnBeginStyleMenu,
                 store: new Common.UI.DataViewStore(_arrStyles),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
             });
             this.mnuBeginStylePicker.on('item:click', _.bind(this.onSelectBeginStyle, this));
             this._selectStyleItem(this.btnBeginStyle, null);
@@ -403,7 +403,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-begin-size'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="form-control image" style="width: 100px;"></div>',
+                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -421,7 +421,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-menu-begin-size'),
                 parentMenu: this.btnBeginSizeMenu,
                 store: new Common.UI.DataViewStore(_arrSize),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
             });
             this.mnuBeginSizePicker.on('item:click', _.bind(this.onSelectBeginSize, this));
             this._selectStyleItem(this.btnBeginSize, null);
@@ -436,7 +436,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-end-style'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="form-control image" style="width: 100px;"></div>',
+                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -454,7 +454,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-menu-end-style'),
                 parentMenu: this.btnEndStyleMenu,
                 store: new Common.UI.DataViewStore(_arrStyles),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
             });
             this.mnuEndStylePicker.on('item:click', _.bind(this.onSelectEndStyle, this));
             this._selectStyleItem(this.btnEndStyle, null);
@@ -463,7 +463,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-end-size'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="form-control image" style="width: 100px;"></div>',
+                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -481,7 +481,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-menu-end-size'),
                 parentMenu: this.btnEndSizeMenu,
                 store: new Common.UI.DataViewStore(_arrSize),
-                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
             });
             this.mnuEndSizePicker.on('item:click', _.bind(this.onSelectEndSize, this));
             this._selectStyleItem(this.btnEndSize, null);
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index f8e64e3d2..7fa069051 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -4,11 +4,9 @@
         background-color: white;
 
         &.image {
-            .background-ximage('@{common-image-path}/right-panels/Begin-EndStyle.png', '@{common-image-path}/right-panels/Begin-EndStyle@2x.png', 480px);
-            background-repeat: no-repeat;
             background-position: 10px 0;
             background-attachment: scroll;
-            background-color: white;
+            background-color: @background-normal;
         }
     }
 
@@ -22,8 +20,11 @@
     }
 }
 
+.img-arrows {
+    .background-ximage-v2('right-panels/Begin-EndStyle.png', 480px, @commonimage: true);
+}
+
 .item-arrow {
-    .background-ximage('@{common-image-path}/right-panels/Begin-EndStyle.png', '@{common-image-path}/right-panels/Begin-EndStyle@2x.png', 480px);
     width:44px;
     height:20px;
 }

From 5ff1d0f48bd1ef31cbfb03d9dbfefb2e3dbb8ed8 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Mon, 25 Jul 2022 21:38:45 +0300
Subject: [PATCH 2/4] [PE][SSE] Fix userLink icon in access right panel

---
 apps/presentationeditor/main/app/view/FileMenuPanels.js   | 2 +-
 apps/presentationeditor/main/resources/less/leftmenu.less | 1 -
 apps/spreadsheeteditor/main/app/view/FileMenuPanels.js    | 2 +-
 apps/spreadsheeteditor/main/resources/less/leftmenu.less  | 1 -
 4 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index 32d4287b3..83593ed40 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -1374,7 +1374,7 @@ define([
                 '<table>',
                     '<% _.each(users, function(item) { %>',
                     '<tr>',
-                        '<td><span class="userLink <% if (item.isLink) { %>sharedLink<% } %>"></span><span><%= Common.Utils.String.htmlEncode(item.user) %></span></td>',
+                        '<td><span class="userLink img-commonctrl <% if (item.isLink) { %>sharedLink<% } %>"></span><span><%= Common.Utils.String.htmlEncode(item.user) %></span></td>',
                         '<td><%= Common.Utils.String.htmlEncode(item.permissions) %></td>',
                     '</tr>',
                     '<% }); %>',
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 01adcd9e7..e852e3cc8 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -469,7 +469,6 @@
             }
 
             .userLink {
-                .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
                 background-position: -81px -234px;
                 background-repeat: no-repeat;
                 padding: 0 0 0 17px;
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index 50ce1d522..9049bd9d6 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -1748,7 +1748,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                 '<table>',
                     '<% _.each(users, function(item) { %>',
                     '<tr>',
-                        '<td><span class="userLink <% if (item.isLink) { %>sharedLink<% } %>"></span><span><%= Common.Utils.String.htmlEncode(item.user) %></span></td>',
+                        '<td><span class="userLink img-commonctrl <% if (item.isLink) { %>sharedLink<% } %>"></span><span><%= Common.Utils.String.htmlEncode(item.user) %></span></td>',
                         '<td><%= Common.Utils.String.htmlEncode(item.permissions) %></td>',
                     '</tr>',
                     '<% }); %>',
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index d66e7f3f6..7f4accae5 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -524,7 +524,6 @@
             }
 
             .userLink {
-                .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
                 background-position: -81px -234px;
                 background-repeat: no-repeat;
                 padding: 0 0 0 17px;

From e3499ad0b41a66345312b1753478aa249baf3cf5 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Mon, 25 Jul 2022 23:17:10 +0300
Subject: [PATCH 3/4] Fix Bug 58276

---
 .../less/advanced-settings-window.less        | 27 +++++++++++++++-
 .../main/app/view/ImageSettingsAdvanced.js    | 18 ++++++++---
 .../resources/less/advanced-settings.less     | 22 -------------
 .../main/app/view/ShapeSettingsAdvanced.js    | 18 ++++++++---
 .../resources/less/advanced-settings.less     | 31 -------------------
 .../main/app/view/ShapeSettingsAdvanced.js    | 18 ++++++++---
 .../resources/less/advanced-settings.less     | 31 -------------------
 7 files changed, 65 insertions(+), 100 deletions(-)

diff --git a/apps/common/main/resources/less/advanced-settings-window.less b/apps/common/main/resources/less/advanced-settings-window.less
index 49085e69c..2f1001059 100644
--- a/apps/common/main/resources/less/advanced-settings-window.less
+++ b/apps/common/main/resources/less/advanced-settings-window.less
@@ -52,4 +52,29 @@
             padding-right: 30px;
         }
     }
-}
\ No newline at end of file
+}
+
+.combo-arrow-style {
+    .form-control {
+        cursor: pointer;
+
+        .image {
+            width: 100%;
+            height: 100%;
+            display: inline-block;
+            background-color: transparent;
+            margin: 0 0 0 -3px;
+        }
+    }
+}
+
+.img-arrows {
+    .background-ximage-v2('right-panels/Begin-EndStyle.png', 480px);
+    -webkit-filter: @img-border-type-filter;
+    filter: @img-border-type-filter;
+}
+
+.item-arrow {
+    width:44px;
+    height:20px;
+}
diff --git a/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js b/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
index 5a345e2d2..dea267880 100644
--- a/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
@@ -1015,7 +1015,9 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 el: $('#shape-advanced-begin-style'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                        '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                        '<div class="form-control" style="width: 100px;">',
+                            '<i class="image img-arrows"></i>',
+                        '</div>',
                         '<div style="display: table-cell;"></div>',
                         '<button type="button" class="btn btn-default">',
                             '<span class="caret"></span>',
@@ -1044,7 +1046,9 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 el: $('#shape-advanced-begin-size'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                        '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                        '<div class="form-control" style="width: 100px;">',
+                            '<i class="image img-arrows"></i>',
+                        '</div>',
                         '<div style="display: table-cell;"></div>',
                         '<button type="button" class="btn btn-default">',
                             '<span class="caret"></span>',
@@ -1079,7 +1083,9 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 el: $('#shape-advanced-end-style'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                        '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                        '<div class="form-control" style="width: 100px;">',
+                            '<i class="image img-arrows"></i>',
+                        '</div>',
                         '<div style="display: table-cell;"></div>',
                         '<button type="button" class="btn btn-default">',
                             '<span class="caret"></span>',
@@ -1108,7 +1114,9 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 el: $('#shape-advanced-end-size'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                        '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                        '<div class="form-control" style="width: 100px;">',
+                            '<i class="image img-arrows"></i>',
+                        '</div>',
                         '<div style="display: table-cell;"></div>',
                         '<button type="button" class="btn btn-default">',
                             '<span class="caret"></span>',
@@ -2083,7 +2091,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
         },
 
         _selectStyleItem: function(combo, record) {
-            var formcontrol = $(combo.el).find('.form-control');
+            var formcontrol = $(combo.el).find('.form-control > .image');
             formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
         },
 
diff --git a/apps/documenteditor/main/resources/less/advanced-settings.less b/apps/documenteditor/main/resources/less/advanced-settings.less
index 75d7fda5c..84d9d48f1 100644
--- a/apps/documenteditor/main/resources/less/advanced-settings.less
+++ b/apps/documenteditor/main/resources/less/advanced-settings.less
@@ -4,28 +4,6 @@
 .icon-advanced-wrap {
 }
 
-.combo-arrow-style {
-    .form-control {
-        cursor: pointer;
-        background-color: white;
-
-        &.image {
-            background-position: 10px 0;
-            background-attachment: scroll;
-            background-color: @background-normal;
-        }
-    }
-}
-
-.img-arrows {
-    .background-ximage-v2('right-panels/Begin-EndStyle.png', 480px, @commonimage: true);
-}
-
-.item-arrow {
-    width:44px;
-    height:20px;
-}
-
 .header-styles-tableview {
     .list-item > div{
         &:nth-child(1) {
diff --git a/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js b/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
index 606cfd05d..adeeb4432 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
@@ -406,7 +406,9 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-begin-style'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                    '<div class="form-control" style="width: 100px;">',
+                        '<i class="image img-arrows"></i>',
+                    '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -433,7 +435,9 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-begin-size'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                    '<div class="form-control" style="width: 100px;">',
+                        '<i class="image img-arrows"></i>',
+                    '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -466,7 +470,9 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-end-style'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                    '<div class="form-control" style="width: 100px;">',
+                        '<i class="image img-arrows"></i>',
+                    '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -493,7 +499,9 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 el: $('#shape-advanced-end-size'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                    '<div class="form-control" style="width: 100px;">',
+                        '<i class="image img-arrows"></i>',
+                    '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -853,7 +861,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
         },
 
         _selectStyleItem: function(combo, record) {
-            var formcontrol = $(combo.el).find('.form-control');
+            var formcontrol = $(combo.el).find('.form-control > .image');
             formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
         },
 
diff --git a/apps/presentationeditor/main/resources/less/advanced-settings.less b/apps/presentationeditor/main/resources/less/advanced-settings.less
index 5bc3951fd..7d3cf7c5f 100644
--- a/apps/presentationeditor/main/resources/less/advanced-settings.less
+++ b/apps/presentationeditor/main/resources/less/advanced-settings.less
@@ -1,34 +1,3 @@
-.combo-arrow-style {
-    .form-control {
-        cursor: pointer;
-        background-color: white;
-
-        &.image {
-            background-position: 10px 0;
-            background-attachment: scroll;
-            background-color: @background-normal;
-        }
-    }
-
-    .btn {
-        &:active:not(.disabled),
-        &.active:not(.disabled){
-            .caret {
-                background-position: @arrow-small-offset-x @arrow-small-offset-y;
-            }
-        }
-    }
-}
-
-.img-arrows {
-    .background-ximage-v2('right-panels/Begin-EndStyle.png', 480px, @commonimage: true);
-}
-
-.item-arrow {
-    width:44px;
-    height:20px;
-}
-
 .advanced-settings-dlg {
     .div-category {
         padding: 0 15px;
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js b/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
index c39790d4e..5646a2e75 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
@@ -376,7 +376,9 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-begin-style'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                    '<div class="form-control" style="width: 100px;">',
+                        '<i class="image img-arrows"></i>',
+                    '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -403,7 +405,9 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-begin-size'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                    '<div class="form-control" style="width: 100px;">',
+                        '<i class="image img-arrows"></i>',
+                    '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -436,7 +440,9 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-end-style'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                    '<div class="form-control" style="width: 100px;">',
+                        '<i class="image img-arrows"></i>',
+                    '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -463,7 +469,9 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 el: $('#shape-advanced-end-size'),
                 template: _.template([
                     '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style"  data-toggle="dropdown">',
-                    '<div class="img-arrows form-control image" style="width: 100px;"></div>',
+                    '<div class="form-control" style="width: 100px;">',
+                        '<i class="image img-arrows"></i>',
+                    '</div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default"><span class="caret"></span></button>',
                     '</div>'
@@ -835,7 +843,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
         },
 
         _selectStyleItem: function(combo, record) {
-            var formcontrol = $(combo.el).find('.form-control');
+            var formcontrol = $(combo.el).find('.form-control > .image');
             formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
         },
 
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index 7fa069051..eaa2ab0f4 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -1,34 +1,3 @@
-.combo-arrow-style {
-    .form-control {
-        cursor: pointer;
-        background-color: white;
-
-        &.image {
-            background-position: 10px 0;
-            background-attachment: scroll;
-            background-color: @background-normal;
-        }
-    }
-
-    .btn {
-        &:active:not(.disabled),
-        &.active:not(.disabled){
-            .caret {
-                background-position: @arrow-small-offset-x @arrow-small-offset-y;
-            }
-        }
-    }
-}
-
-.img-arrows {
-    .background-ximage-v2('right-panels/Begin-EndStyle.png', 480px, @commonimage: true);
-}
-
-.item-arrow {
-    width:44px;
-    height:20px;
-}
-
 .advanced-settings-dlg {
     .div-category {
         padding: 0 0 0 10px;

From 8ed062a35df1aae5a537168c42732ecb7a3f5abd Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Mon, 25 Jul 2022 23:29:49 +0300
Subject: [PATCH 4/4] Fix Bug 58266

---
 .../main/app/controller/Search.js             | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/apps/documenteditor/main/app/controller/Search.js b/apps/documenteditor/main/app/controller/Search.js
index 4d2527082..31d3f63e0 100644
--- a/apps/documenteditor/main/app/controller/Search.js
+++ b/apps/documenteditor/main/app/controller/Search.js
@@ -208,14 +208,16 @@ define([
                 var me = this;
                 var str = this.api.asc_GetErrorForReplaceString(textReplace);
                 if (str) {
-                    Common.UI.warning({
-                        title: this.notcriticalErrorTitle,
-                        msg: Common.Utils.String.format(this.warnReplaceString, str),
-                        buttons: ['ok'],
-                        callback: function(){
-                            me.view.focus('replace');
-                        }
-                    });
+                    setTimeout(function() {
+                        Common.UI.warning({
+                            title: me.notcriticalErrorTitle,
+                            msg: Common.Utils.String.format(me.warnReplaceString, str),
+                            buttons: ['ok'],
+                            callback: function(){
+                                me.view.focus('replace');
+                            }
+                        });
+                    }, 1);
                     return;
                 }
 
@@ -234,14 +236,16 @@ define([
                 var me = this;
                 var str = this.api.asc_GetErrorForReplaceString(textReplace);
                 if (str) {
-                    Common.UI.warning({
-                        title: this.notcriticalErrorTitle,
-                        msg: Common.Utils.String.format(this.warnReplaceString, str),
-                        buttons: ['ok'],
-                        callback: function(){
-                            me.view.focus('replace');
-                        }
-                    });
+                    setTimeout(function() {
+                        Common.UI.warning({
+                            title: me.notcriticalErrorTitle,
+                            msg: Common.Utils.String.format(me.warnReplaceString, str),
+                            buttons: ['ok'],
+                            callback: function(){
+                                me.view.focus('replace');
+                            }
+                        });
+                    }, 1);
                     return;
                 }