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] 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;