[rtl] Make settings in right panel

apps/common/main/lib/component/ComboBorderSize.js

@@ -182,7 +182,7 @@ define([
 
     Common.UI.ComboBorderSizeEditable = Common.UI.ComboBox.extend(_.extend({
         template: _.template([
-            '<span class="input-group combobox combo-border-size combo-border-size-ed input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+            '<span class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<input type="text" class="form-control text" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
                 '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
                     '<span class="caret"></span>',
@@ -241,7 +241,7 @@ define([
 
     Common.UI.ComboBorderType = Common.UI.ComboBorderSize.extend(_.extend({
         template: _.template([
-            '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+            '<div class="input-group combobox combo-border-size combo-border-type input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
                     '<i class="image"></i>',
                 '</div>',

apps/common/main/resources/less/buttons.less

@@ -477,6 +477,10 @@
 
     &.align-left {
         text-align: left;
+
+        .rtl & {
+            text-align: right;
+        }
     }
 }
 
@@ -531,6 +535,22 @@
     > .btn {
         + .dropdown-toggle {
             padding: 0 4px 0 3px;
+
+            .rtl & {
+                padding: 0 3px 0 4px;
+            }
+        }
+
+        .rtl & {
+            float: right;
+        }
+
+        &:first-child:not(:last-child):not(.dropdown-toggle) {
+            .rtl & {
+                .border-radius(@border-radius-small);
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
         }
     }
 
@@ -544,6 +564,14 @@
         }
     }
 
+    > .dropdown-toggle:not(first-child) {
+        .rtl & {
+            .border-radius(@border-radius-small);
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+
     .caption {
         &:empty {
             display: none;
@@ -893,6 +921,11 @@
         position: absolute;
         right: 5px;
         margin-top: 5px;
+
+        .rtl & {
+            right: auto;
+            left: 5px;
+        }
     }
 
     &:hover:not(.disabled),
@@ -935,6 +968,12 @@
 
     &:not(.dropdown-toggle) {
         border-right: none;
+
+        .rtl & {
+            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+            border: @scaled-one-px-value solid @border-regular-control;
+            border-left: none;
+        }
     }
 
     &:hover:not(.disabled),

apps/common/main/resources/less/combo-border-size.less

@@ -68,15 +68,13 @@
         }
     }
 
-    &:not(.combo-border-size-ed) {
+    &.combo-border-type {
         .rtl & li img {
             float: right;
         }
     }
-}
 
-.combo-border-size-ed {
+    &:not(.combo-border-type) .dropdown-menu li a {
-    .dropdown-menu li a {
         padding: 5px 20px;
     }
 }

apps/common/main/resources/less/combo-dataview.less

@@ -320,6 +320,10 @@
     .item {
         margin: @combo-dataview-item-margins 0 @combo-dataview-item-margins @combo-dataview-item-margins;
         .box-shadow(none);
+
+        .rtl & {
+            margin: @combo-dataview-item-margins @combo-dataview-item-margins @combo-dataview-item-margins 0;
+        }
     }
 
     &.disabled {

apps/documenteditor/main/app/template/HeaderFooterSettings.template

@@ -52,9 +52,9 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="headerfooter-button-top-left" style="display: inline-block; margin-right:5px;"></div>
+            <div id="headerfooter-button-top-left"></div>
-            <div id="headerfooter-button-top-center" style="display: inline-block; margin-right:5px;"></div>
+            <div id="headerfooter-button-top-center"></div>
-            <div id="headerfooter-button-top-right" style="display: inline-block; margin-right:5px;"></div>
+            <div id="headerfooter-button-top-right"></div>
         </td>
     </tr>
     <tr>
@@ -64,9 +64,9 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="headerfooter-button-bottom-left" style="display: inline-block; margin-right:5px;"></div>
+            <div id="headerfooter-button-bottom-left"></div>
-            <div id="headerfooter-button-bottom-center" style="display: inline-block; margin-right:5px;"></div>
+            <div id="headerfooter-button-bottom-center"></div>
-            <div id="headerfooter-button-bottom-right" style="display: inline-block; margin-right:5px;"></div>
+            <div id="headerfooter-button-bottom-right"></div>
         </td>
     </tr>
     <tr>
@@ -86,9 +86,9 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="headerfooter-radio-prev"  style="margin-bottom: 5px;"></div>
+            <div id="headerfooter-radio-prev"></div>
-            <div id="headerfooter-radio-from" style="display: inline-block;vertical-align: middle; margin-right: 2px;"></div>
+            <div id="headerfooter-radio-from"></div>
-            <div id="headerfooter-spin-from" style="display: inline-block;vertical-align: middle;"></div>
+            <div id="headerfooter-spin-from"></div>
         </td>
     </tr>
     <tr class="finish-cell"></tr>

apps/documenteditor/main/app/template/ImageSettings.template

@@ -41,15 +41,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/documenteditor/main/app/template/ParagraphSettings.template

@@ -73,7 +73,7 @@
     <tr class="text-only">
         <td class="padding-small" colspan=2>
             <div id="paragraph-color-btn" style="display: inline-block;"></div>
-            <label class="input-label" style="margin-left: 5px;"><%= scope.textBackColor %></label>
+            <label class="input-label margin"><%= scope.textBackColor %></label>
         </td>
     </tr>
     <tr>

apps/documenteditor/main/app/template/TableSettings.template

@@ -53,10 +53,10 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="table-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
+            <div id="table-combo-border-size"></div>
-            <div style="display: inline-block; float:right;vertical-align: middle;">
+            <div class="table-color">
-                <label class="input-label" style="margin-right: 5px;"><%= scope.textBorderColor %></label>
+                <label class="input-label"><%= scope.textBorderColor %></label>
-                <div id="table-border-color-btn" style="display: inline-block;"></div>
+                <div id="table-border-color-btn"></div>
             </div>
         </td>
     </tr>
@@ -85,7 +85,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2 align="right">
-            <label class="input-label" style="margin-right: 5px;"><%= scope.textBackColor %></label>
+            <label class="input-label margin"><%= scope.textBackColor %></label>
             <div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
         </td>
     </tr>
@@ -112,15 +112,15 @@
     <tr>
         <td class="padding-small" colspan=2>
             <label style="margin-top: 3px;"><%= scope.textHeight %></label>
-            <div id="table-btn-distrub-rows" style="display: inline-block; float:right; margin-left: 4px;"></div>
+            <div id="table-btn-distrub-rows"></div>
-            <div id="table-spin-cell-height" style="display: inline-block; float:right;"></div>
+            <div id="table-spin-cell-height"></div>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
             <label style="margin-top: 3px;"><%= scope.textWidth %></label>
-            <div id="table-btn-distrub-cols" style="display: inline-block; float:right; margin-left: 4px;"></div>
+            <div id="table-btn-distrub-cols"></div>
-            <div id="table-spin-cell-width" style="display: inline-block; float:right;"></div>
+            <div id="table-spin-cell-width"></div>
         </td>
     </tr>
     <tr>

apps/documenteditor/main/app/template/TextArtSettings.template

@@ -39,7 +39,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="textart-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="textart-button-direction"></div>
                             </div>
@@ -47,7 +47,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>
@@ -64,7 +64,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>
@@ -86,7 +86,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/documenteditor/main/app/view/TableSettings.js

@@ -484,7 +484,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon table-to-text',
                 caption     : this.textConvert,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'medium'
@@ -871,7 +870,7 @@ define([
                     menu        : new Common.UI.Menu({
                         style: 'width: 588px;',
                         items: [
-                            { template: _.template('<div id="id-table-menu-template" class="menu-table-template"  style="margin: 5px 5px 5px 10px;"></div>') }
+                            { template: _.template('<div id="id-table-menu-template" class="menu-table-template"></div>') }
                         ]
                     }),
                     dataHint: '1',

apps/documenteditor/main/resources/less/rightmenu.less

@@ -9,10 +9,108 @@
     }
 }
 .right-panel .settings-panel {
-    label.input-label{
+    label.input-label {
         vertical-align: baseline;
     }
 
+    &#id-paragraph-settings {
+        .input-label.margin {
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
+    }
+
+    &#id-table-settings {
+        #id-table-menu-template {
+            margin: 5px 5px 5px 10px;
+
+            .rtl & {
+                margin: 5px 10px 5px 5px;
+            }
+
+            .group-description {
+                padding: 3px 0 3px 10px;
+
+                .rtl & {
+                    padding: 3px 10px 3px 0;
+                    text-align: right;
+                }
+            }
+        }
+
+        #table-combo-border-size {
+            display: inline-block;
+            vertical-align: middle;
+            width: 93px;
+        }
+
+        .table-color {
+            display: inline-block;
+            float: right;
+            vertical-align: middle;
+
+            .rtl & {
+                float: left;
+            }
+
+            .input-label {
+                margin-right: 5px;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 5px;
+                }
+            }
+
+            #table-border-color-btn {
+                display: inline-block;
+            }
+        }
+
+        .input-label.margin {
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        #table-btn-distrub-rows, #table-btn-distrub-cols,
+        #table-spin-cell-height, #table-spin-cell-width {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #table-btn-distrub-rows, #table-btn-distrub-cols {
+            margin-left: 4px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #table-btn-convert-to-text {
+            .btn {
+                width: 100%;
+                text-align: left;
+
+                .rtl & {
+                    text-align: right;
+                }
+            }
+        }
+    }
+
     &#id-shape-settings {
         #shape-panel-transparent-fill {
             width: 100%;
@@ -71,6 +169,107 @@
             }
         }
     }
+
+    &#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-header-settings {
+        #headerfooter-radio-from {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 2px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 2px;
+            }
+        }
+
+        #headerfooter-radio-prev {
+            margin-bottom: 5px;
+        }
+
+        #headerfooter-spin-from {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        #headerfooter-button-top-left,
+        #headerfooter-button-top-center,
+        #headerfooter-button-top-right,
+        #headerfooter-button-bottom-left,
+        #headerfooter-button-bottom-center,
+        #headerfooter-button-bottom-right {
+            display: inline-block;
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+    }
+
+    &#id-textart-settings {
+        #textart-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #textart-panel-gradient-fill {
+            .textart-direction {
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        .angle-label {
+            margin-bottom: 3px;
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        #id-textart-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+    }
 }
 
 .ie {