[rtl] Make settings in right panel for SSE

apps/documenteditor/main/app/view/ShapeSettings.js

@@ -2020,7 +2020,7 @@ define([
 
         onPositionChange: function(btn) {
             var pos = btn.getNumberValue();
-                if (Common.UI.isRTL()) {
+            if (Common.UI.isRTL()) {
                 pos = this.sldrGradient.maxValue - pos;
             }
             var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],

apps/spreadsheeteditor/main/app/template/CellSettings.template

@@ -19,22 +19,22 @@
                 <div id="cell-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.textForeground %></label>
-                    <div id="cell-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="cell-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.textBackground %></label>
-                    <div id="cell-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="cell-background-color-btn"></div>
                 </div>
             </div>
             <div id="cell-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <div style="height:80px;">
                     <div style="display: inline-block;">
-                        <label class="input-label" style=""><%= scope.textAngle %></label>
+                        <label class="input-label" ><%= scope.textAngle %></label>
                         <div id="cell-spin-gradient-angle" style="width: 90px;"></div>
                     </div>
-                    <div style="display: inline-block;float: right;">
+                    <div class="cell-direction">
-                        <label class="input-label" style=""><%= scope.textDirection %></label>
+                        <label class="input-label"><%= scope.textDirection %></label>
-                        <div id="cell-button-direction" style=""></div>
+                        <div id="cell-button-direction"></div>
                     </div>
                 </div>
                 <label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
@@ -47,7 +47,7 @@
                         <label class="input-label" style=""><%= scope.textGradientColor %></label>
                         <div id="cell-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="cell-gradient-position"></div>
                     </div>
@@ -72,10 +72,10 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="cell-combo-border-type" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
+            <div id="cell-combo-border-type"></div>
-            <div style="display: inline-block; float:right;vertical-align: middle;">
+            <div class="border-color">
-                <label class="input-label" style="margin-right: 5px;"><%= scope.textBorderColor %></label>
+                <label class="input-label"><%= scope.textBorderColor %></label>
-                <div id="cell-border-color-btn" style="display: inline-block;"></div>
+                <div id="cell-border-color-btn"></div>
             </div>
         </td>
     </tr>
@@ -127,7 +127,7 @@
     <tr>
         <td class="padding-large" colspan=2>
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="cell-spin-angle" style="display: inline-block;margin-left:5px;"></div>
+            <div id="cell-spin-angle"></div>
         </td>
     </tr>
     <tr>

apps/spreadsheeteditor/main/app/template/ImageSettings.template

@@ -43,15 +43,15 @@
         <td class="padding-small" width="50%">
             <label class="input-label"><%= scope.textRotate90 %></label>
             <div>
-                <div id="image-button-270" style="display: inline-block;margin-right: 4px;"></div>
+                <div id="image-button-270"></div>
-                <div id="image-button-90" style="display: inline-block;"></div>
+                <div id="image-button-90"></div>
             </div>
         </td>
         <td class="padding-small" width="50%">
             <label class="input-label"><%= scope.textFlip %></label>
             <div>
-                <div id="image-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
+                <div id="image-button-fliph"></div>
-                <div id="image-button-flipv" style="display: inline-block;"></div>
+                <div id="image-button-flipv"></div>
             </div>
         </td>
     </tr>

apps/spreadsheeteditor/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>
@@ -108,7 +108,7 @@
                     <div id="shape-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="shape-lbl-transparency-end">100</label>
                 </div>
-                <div id="shape-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="shape-spin-transparency"></div>
             </div>
         </td>
     </tr>
@@ -159,15 +159,15 @@
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textRotate90 %></label>
                         <div>
-                            <div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
+                            <div id="shape-button-270"></div>
-                            <div id="shape-button-90" style="display: inline-block;"></div>
+                            <div id="shape-button-90"></div>
                         </div>
                     </td>
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textFlip %></label>
                         <div>
-                            <div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
+                            <div id="shape-button-fliph"></div>
-                            <div id="shape-button-flipv" style="display: inline-block;"></div>
+                            <div id="shape-button-flipv"></div>
                         </div>
                     </td>
                 </tr>
@@ -182,7 +182,7 @@
     <tr class="change-type">
         <td class="padding-small">
             <label class="header" style="margin-top: 3px;"><%= scope.strChange %></label>
-            <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
+            <div id="shape-btn-change"></div>
         </td>
     </tr>
     <tr>

apps/spreadsheeteditor/main/app/template/SlicerSettings.template

@@ -47,7 +47,7 @@
     <tr>
         <td class="padding-small" colspan=2>
             <label class="input-label"><%= scope.textColumns %></label>
-            <div id="slicer-spin-cols" style="display: inline-block;margin-left:5px;"></div>
+            <div id="slicer-spin-cols"></div>
         </td>
     </tr>
     <tr>

apps/spreadsheeteditor/main/app/template/TextArtSettings.template

@@ -36,7 +36,7 @@
                         <button type="button" class="btn btn-text-default" id="textart-button-from-file" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromFile %></button>
                     </td>
                     <td class="padding-small" width="50%">
-                        <button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;float:right;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
+                        <button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
                     </td>
                 </tr>
                 <tr>
@@ -44,7 +44,7 @@
                         <div id="textart-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" style="width: 90px; height: 80px;">
                             <div id="textart-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -62,11 +62,11 @@
                 <div id="textart-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="textart-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="textart-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="textart-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="textart-background-color-btn"></div>
                 </div>
             </div>
             <div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -79,7 +79,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="textar-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="textart-button-direction"></div>
                             </div>
@@ -87,7 +87,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="textart-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -104,7 +104,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="textart-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="textart-gradient-position"></div>
                     </div>
@@ -126,7 +126,7 @@
                     <div id="textart-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="textart-lbl-transparency-end">100</label>
                 </div>
-                <div id="textart-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="textart-spin-transparency"></div>
             </div>
         </td>
     </tr>

apps/spreadsheeteditor/main/app/view/CellSettings.js

@@ -288,7 +288,8 @@ define([
                 var color = me.GradColor.colors[me.GradColor.currentIdx];
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
-                me.spnGradPosition.setValue(me.GradColor.values[me.GradColor.currentIdx]);
+                var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -958,7 +959,8 @@ define([
                         me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
 
                         // Step position
-                        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 = {
@@ -1410,7 +1412,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)  {
@@ -1512,8 +1515,11 @@ define([
 
         onPositionChange: function(btn) {
             var me = this,
-                pos = btn.getNumberValue(),
+                pos = btn.getNumberValue();
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            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) {

apps/spreadsheeteditor/main/app/view/ChartSettings.js

@@ -797,7 +797,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon btn-menu-chart',
                 caption     : this.textChangeType,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -810,7 +809,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon btn-select-range',
                 caption     : this.textSelectData,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -823,7 +821,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon switch_row_column',
                 caption     : this.textSwitch,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'

apps/spreadsheeteditor/main/app/view/ShapeSettings.js

@@ -525,7 +525,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)  {
@@ -938,7 +939,8 @@ define([
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
 
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
 
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
@@ -1375,7 +1377,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');
@@ -1894,8 +1896,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
+            var pos = btn.getNumberValue();
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            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) {

apps/spreadsheeteditor/main/app/view/TextArtSettings.js

@@ -517,7 +517,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)  {
@@ -874,7 +875,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.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'};
@@ -1313,7 +1315,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');
@@ -1757,8 +1759,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
+            var pos = btn.getNumberValue();
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            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) {

apps/spreadsheeteditor/main/resources/less/rightmenu.less

@@ -6,6 +6,314 @@
     label.input-label{
         vertical-align: baseline;
     }
+
+    &#id-cell-settings {
+        #cell-combo-border-type {
+            display: inline-block;
+            vertical-align: middle;
+            width: 93px;
+        }
+
+        .border-color {
+            display: inline-block;
+            float: right;
+            vertical-align: middle;
+
+            .rtl & {
+                float: left;
+            }
+
+            .input-label {
+                margin-right: 5px;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 5px;
+                }
+            }
+
+            #cell-border-color-btn {
+                display: inline-block;
+            }
+        }
+
+        #cell-spin-angle {
+            display: inline-block;
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
+
+        #cell-panel-gradient-fill {
+            .cell-direction {
+                display: inline-block;
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+
+                #cell-button-direction {
+                    .dataview .item {
+                        .rtl & {
+                            float: left;
+                        }
+                    }
+                }
+            }
+
+            .gradient-position {
+                margin-left: 10px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 10px;
+                }
+            }
+        }
+
+        #cell-foreground-color-btn, #cell-background-color-btn {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-table-settings {
+        #id-table-menu-template {
+            .group-description {
+                padding: 3px 0 3px 10px;
+                .font-weight-bold();
+
+                .rtl & {
+                    text-align: right;
+                    padding: 3px 10px 3px 0;
+                }
+            }
+
+            .group-items-container {
+                .item {
+                    &:hover {
+                        .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
+                        .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
+                    }
+
+                    &.selected {
+                        .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
+                        .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
+                    }
+                }
+            }
+        }
+    }
+
+    &#id-shape-settings {
+        #shape-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-button-270, #shape-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #shape-button-90, #shape-button-flipv {
+            display: inline-block;
+        }
+
+        #shape-btn-change {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .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;
+            }
+        }
+
+        .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 {
+        #image-button-270, #image-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #image-button-90, #image-button-flipv {
+            display: inline-block;
+        }
+    }
+
+    &#id-chart-settings {
+        #chart-btn-change-type .btn,
+        #chart-btn-select-data .btn,
+        #chart-btn-switch .btn {
+            width: 100%;
+            text-align: left;
+
+            .rtl & {
+                text-align: right;
+            }
+        }
+    }
+
+    &#id-textart-settings {
+        #textart-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .textar-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;
+            }
+        }
+
+        .texture-img {
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #textart-button-from-url {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #id-textart-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        #textart-foreground-color-btn,
+        #textart-background-color-btn {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-slicer-settings {
+        #slicer-spin-cols {
+            display: inline-block;
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
+    }
 }
 
 .combo-pattern-item {
@@ -57,12 +365,17 @@
 
     .list-item {
         width: 146px;
-        margin-left:20px;
+        margin-left: 20px;
         display: inline-block;
         white-space: pre;
         overflow: hidden;
         text-overflow: ellipsis;
         vertical-align: middle;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 20px;
+        }
     }
 
     .listitem-icon {
@@ -221,25 +534,3 @@
         .box-shadow(none);
     }
 }
-
-#id-table-menu-template {
-    .group-description {
-        padding: 3px 0 3px 10px;
-        .font-weight-bold();
-        
-    } 
-
-    .group-items-container {
-        .item {
-            &:hover {
-                .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
-                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
-            }
-      
-            &.selected {
-                .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
-                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
-            }
-        }
-    }
-}