From d29d0d61c75fd7f9bc38bcb4454927c9afc1853d Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <julia.svinaryva@onlyoffice.com>
Date: Mon, 24 Oct 2022 02:22:31 +0300
Subject: [PATCH] [rtl] Make settings in right panel (shape, textart)

---
 .../main/app/template/ShapeSettings.template  | 12 ++--
 .../main/app/view/ShapeSettings.js            | 15 +++--
 .../main/app/view/TextArtSettings.js          | 15 +++--
 .../main/resources/less/rightmenu.less        | 58 +++++++++++++++++++
 4 files changed, 84 insertions(+), 16 deletions(-)

diff --git a/apps/documenteditor/main/app/template/ShapeSettings.template b/apps/documenteditor/main/app/template/ShapeSettings.template
index e17c8b350..8cde82cf0 100644
--- a/apps/documenteditor/main/app/template/ShapeSettings.template
+++ b/apps/documenteditor/main/app/template/ShapeSettings.template
@@ -26,7 +26,7 @@
                         <div id="shape-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img">
                             <div id="shape-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -44,11 +44,11 @@
                 <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="shape-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-background-color-btn"></div>
                 </div>
             </div>
             <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -61,7 +61,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="shape-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="shape-button-direction"></div>
                             </div>
@@ -69,7 +69,7 @@
                     </tr>
                     <tr valign="bottom">
                         <td>
-                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                            <label class="input-label angle-label"><%= scope.textAngle %></label>
                         </td>
                         <td>
                             <div id="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -86,7 +86,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="shape-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="shape-gradient-position"></div>
                     </div>
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 85af8379f..24eddcae7 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -532,7 +532,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -1012,7 +1013,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = this.GradColor.values[this.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1452,7 +1454,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -2017,8 +2019,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+                if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index a6a66bea6..dbb022b09 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -398,7 +398,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -678,7 +679,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = this.GradColor.values[this.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]};
                 }
@@ -996,7 +998,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1308,8 +1310,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 8d462d883..1ab8ddd59 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -168,6 +168,64 @@
                 }
             }
         }
+
+        .shape-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        #id-shape-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        .texture-img {
+            width: 90px;
+            height: 80px;
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-foreground-color-btn, #shape-background-color-btn {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
     }
 
     &#id-image-settings {