From aa35384d5e423c322a38c016db9ec720900fccd2 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 14 Sep 2022 21:22:52 +0300
Subject: [PATCH] [rtl] Fix input and combobox components

---
 .../main/lib/component/ComboBorderSize.js     |  4 +-
 apps/common/main/resources/less/buttons.less  |  4 ++
 .../resources/less/combo-border-size.less     | 10 +++++
 apps/common/main/resources/less/combobox.less | 38 +++++++++++++++++++
 .../main/resources/less/dropdown-menu.less    |  4 ++
 apps/common/main/resources/less/input.less    | 25 ++++++++++++
 6 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index d784d0f7a..28a2f6e83 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -244,10 +244,10 @@ define([
                 '</button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
-                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem" style="padding: 2px 0 2px 10px;">',
+                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
                             '<span style="margin-top: 0;"></span>',
                             '<% if (item.offsety!==undefined) { %>',
-                                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">',
+                                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-position: 0 -<%= item.offsety %>px;">',
                             '<% } %>',
                         '</a></li>',
                     '<% }); %>',
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 4540fadef..e53641a0a 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -249,6 +249,10 @@
 
                 .caret {
                     margin: 0 1px 0 4px;
+
+                    .rtl & {
+                        margin: 0 4px 0 1px;
+                    }
                 }
             }
         }
diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less
index 669b67f60..bb2d4b0e6 100644
--- a/apps/common/main/resources/less/combo-border-size.less
+++ b/apps/common/main/resources/less/combo-border-size.less
@@ -14,6 +14,11 @@
     li {
         a {
             white-space: normal;
+            padding: 2px 0 2px 10px;
+
+            .rtl & {
+                padding: 2px 10px 2px 0;
+            }
         }
 
         span {
@@ -28,6 +33,11 @@
             height:20px;
             background-color: transparent;
             image-rendering: pixelated;
+            float: left;
+
+            .rtl & {
+                float: right;
+            }
         }
     }
 
diff --git a/apps/common/main/resources/less/combobox.less b/apps/common/main/resources/less/combobox.less
index 81d76ca28..3297071c7 100644
--- a/apps/common/main/resources/less/combobox.less
+++ b/apps/common/main/resources/less/combobox.less
@@ -18,10 +18,27 @@
 
         border-top-right-radius: 2px !important;
         border-bottom-right-radius: 2px !important;
+
+        .rtl & {
+            border-top-left-radius: 2px !important;
+            border-bottom-left-radius: 2px !important;
+        }
+    }
+
+    &.input-group-nr > .btn {
+        .rtl & {
+            border-top-right-radius: 0 !important;
+            border-bottom-right-radius: 0 !important;
+        }
     }
 
     &.input-group-nr > .form-control {
         padding-right: 7px + 2 * @padding-base-horizontal;
+
+        .rtl & {
+            padding-right: 3px;
+            padding-left: 7px + 2 * @padding-base-horizontal;
+        }
     }
 
     .form-control {
@@ -39,6 +56,12 @@
             line-height: 20px;
             padding-left: 2px;
         }
+
+        .rtl & {
+            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+            border: @scaled-one-px-value solid @border-regular-control;
+            border-left: 0;
+        }
     }
 
     .btn {
@@ -52,6 +75,16 @@
         position: absolute;
         top: 0;
         right: 0;
+
+        .rtl & {
+            border: @scaled-one-px-value-ie solid;
+            border: @scaled-one-px-value solid;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 0;
+            right: unset;
+            left: 0;
+        }
     }
 
     .btn-default:not(.disabled),
@@ -61,6 +94,11 @@
         border-color: @border-regular-control-ie;
         border-color: @border-regular-control;
         padding-right: 5px;
+
+        .rtl & {
+            padding-right: 3px;
+            padding-left: 5px;
+        }
     }
 
     .btn-default.disabled {
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index 840465c8d..ae4def3ed 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -52,6 +52,10 @@
                 background-color: @highlight-button-hover-ie;
                 background-color: @highlight-button-hover;
             }
+
+            .rtl & {
+                text-align: right;
+            }
         }
 
         &.over > a {
diff --git a/apps/common/main/resources/less/input.less b/apps/common/main/resources/less/input.less
index 84218bb34..efd5d110e 100644
--- a/apps/common/main/resources/less/input.less
+++ b/apps/common/main/resources/less/input.less
@@ -47,6 +47,11 @@
         height: 16px;
         background-position: @input-error-offset-x @input-error-offset-y;
         filter: none;
+
+        .rtl & {
+            right: unset;
+            left: 3px;
+        }
     }
 }
 
@@ -55,6 +60,10 @@
     .input-error {
         float: left;
         position: relative;
+
+        .rtl & {
+            float: right;
+        }
     }
 
     &.form-control:focus,
@@ -134,14 +143,30 @@ textarea.form-control:focus {
             height: 20px;
             height: calc(22px - @scaled-one-px-value * 2);
         }
+
+        .rtl & {
+            right: unset;
+            left: @scaled-one-px-value-ie;
+            left: @scaled-one-px-value;
+        }
     }
 
     .input-error {
         &:before {
             right: 22px;
+
+            .rtl & {
+                right: unset;
+                left: 22px;
+            }
         }
     }
     input {
         padding-right: 20px;
+
+        .rtl & {
+            padding-right: 3px;
+            padding-left: 20px;
+        }
     }
 }
\ No newline at end of file