[rtl] Make checkboxes, settings in file menu

apps/common/main/resources/less/checkbox.less

@@ -6,6 +6,11 @@
     position: relative;
     min-height: 1em;
 
+    .rtl & {
+        padding-left: 0;
+        padding-right: 22px;
+    }
+
     input[type=checkbox] {
         display: none;
 
@@ -21,6 +26,11 @@
             left: 0;
             margin-top: auto;
 
+            .rtl & {
+                left: auto;
+                right: 0;
+            }
+
             + span {
                 outline: @scaled-one-px-value-ie dotted transparent;
                 outline: @scaled-one-px-value dotted transparent;

apps/common/main/resources/less/radiobox.less

@@ -10,6 +10,12 @@
 
     svg {
         margin-right: 8px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+
         .rb-circle {
             fill: @background-normal-ie;
             fill: @background-normal;

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

@@ -350,8 +350,8 @@ define([
                 '<tr class="themes">',
                     '<td><label><%= scope.strTheme %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-theme" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
+                        '<div><div id="fms-cmb-theme"></div>',
-                        '<div id="fms-chb-dark-mode" style="display: inline-block; vertical-align: middle;margin-top: 2px;"></div></div></td>',
+                        '<div id="fms-chb-dark-mode"></div></div></td>',
                 '</tr>',
                 '<tr class="edit">',
                     '<td><label><%= scope.strUnit %></label></td>',
@@ -368,7 +368,7 @@ define([
                 '<tr class="macros">',
                     '<td><label><%= scope.strMacrosSettings %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px; vertical-align: middle;"></div>',
+                        '<div><div id="fms-cmb-macros"></div>',
                 '</tr>',
                 '<tr class ="divider-group"></tr>',
                 '<tr class="fms-btn-apply">',
@@ -1874,7 +1874,7 @@ define([
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom" style="margin-right: 10px;">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -2197,7 +2197,7 @@ define([
                     '</tr>',
                     '<tr>',
                         '<td><div id="fms-btn-change-pwd" style="width:190px;"></div></td>',
-                        '<td align="right"><div id="fms-btn-delete-pwd" style="width:190px; margin-left:20px;"></div></td>',
+                        '<td align="right"><div id="fms-btn-delete-pwd" style="width:190px;"></div></td>',
                     '</tr>',
                 '</table>',
             '</div>',

apps/documenteditor/main/resources/less/filemenu.less

@@ -249,6 +249,34 @@
       }
     }
   }
+
+  #fms-cmb-theme {
+    display: inline-block;
+    margin-right: 15px;
+    vertical-align: middle;
+
+    .rtl & {
+      margin-right: 0;
+      margin-left: 15px;
+    }
+  }
+
+  #fms-chb-dark-mode {
+    display: inline-block;
+    vertical-align: middle;
+    margin-top: 2px;
+  }
+
+  #fms-cmb-macros {
+    display: inline-block;
+    margin-right: 15px;
+    vertical-align: middle;
+
+    .rtl & {
+      margin-right: 0;
+      margin-left: 15px;
+    }
+  }
 }
 
 #panel-createnew {
@@ -260,6 +288,10 @@
     .font-weight-bold();
     padding: 0 0 10px 10px;
     white-space: nowrap;
+
+    .rtl & {
+      padding: 0 10px 10px 0;
+    }
   }
 
 
@@ -420,11 +452,19 @@
 
     .help-item-wrap {
       padding: 4px 2px 4px 20px;
+
+      .rtl & {
+        padding: 4px 20px 4px 2px;
+      }
     }
 
     .header-name {
       padding: 16px 2px 4px 10px;
       font-size: 12px;
+
+      .rtl & {
+        padding: 16px 10px 4px 2px;
+      }
     }
   }
 }
@@ -433,6 +473,15 @@
   #file-menu-panel & {
     padding: 0 30px;
   }
+
+  #id-info-btn-edit {
+    margin-right: 10px;
+
+    .rtl & {
+      margin-right: 0;
+      margin-left: 10px;
+    }
+  }
 }
 
 #panel-info,
@@ -442,11 +491,19 @@
       td {
         padding: 0 20px 5px 0;
 
+        .rtl & {
+          padding: 0 0 5px 20px;
+        }
+
         &.left {
           padding: 5px 10px;
           text-align: right;
           width: 30%;
 
+          .rtl & {
+            text-align: left;
+          }
+
           label {
             .font-weight-bold();
           }
@@ -523,22 +580,31 @@
 }
 
 #panel-protect {
-label {
+  label {
     font-size: 12px;
-}
+  }
 
-#file-menu-panel & {
+  #file-menu-panel & {
     padding: 30px 30px;
-}
+  }
 
-.header {
+  .header {
     .font-weight-bold();
     margin: 30px 0 10px;
-}
+  }
 
-table {
+  table {
     td {
       padding: 5px 0;
     }
+  }
+
+  #fms-btn-delete-pwd {
+    margin-left: 20px;
+    .rtl & {
+      margin-left: 0;
+      margin-right: 20px;
+    }
+  }
 }
-}
+

apps/presentationeditor/main/app/view/FileMenuPanels.js

@@ -1392,7 +1392,7 @@ define([
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom" style="margin-right: 10px;">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));

apps/presentationeditor/main/resources/less/leftmenu.less

@@ -275,6 +275,10 @@
                 .font-weight-bold();
                 padding: 0 0 10px 10px;
                 white-space: nowrap;
+
+                .rtl & {
+                    padding: 0 10px 10px 0;
+                }
             }
 
             .blank-document-info {
@@ -433,10 +437,18 @@
 
                 .help-item-wrap {
                     padding: 4px 2px 4px 20px;
+
+                    .rtl & {
+                        padding: 4px 20px 4px 2px;
+                    }
                 }
 
                 .header-name {
                     padding: 16px 2px 4px 10px;
+
+                    .rtl & {
+                        padding: 16px 10px 4px 2px;
+                    }
                 }
             }
         }
@@ -452,11 +464,19 @@
                     td {
                         padding: 0 20px 5px 0;
 
+                        .rtl & {
+                            padding: 0 0 5px 20px;
+                        }
+
                         &.left {
                             padding: 5px 10px;
                             text-align: right;
                             width: 30%;
 
+                            .rtl & {
+                                text-align: left;
+                            }
+
                             label {
                                 .font-weight-bold();
                             }
@@ -528,6 +548,14 @@
                     padding: 5px 0;
                 }
             }
+
+            #fms-btn-delete-pwd {
+                margin-left: 20px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 20px;
+                }
+            }
         }
     }
 }

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

@@ -266,7 +266,7 @@ define([
                 '<tr class="macros">',
                     '<td><label><%= scope.strMacrosSettings %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
+                        '<div><div id="fms-cmb-macros"></div>',
                     '</td>',
                 '</tr>',
                 '<tr class ="divider-group"></tr>',
@@ -276,14 +276,14 @@ define([
                 '<tr class="">',
                     '<td><label><%= scope.strFuncLocale %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-func-locale" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
+                        '<div><div id="fms-cmb-func-locale"></div>',
-                        '<label id="fms-lbl-func-locale" style="vertical-align: middle;"><%= scope.strFuncLocaleEx %></label></div></td>',
+                        '<label id="fms-lbl-func-locale"><%= scope.strFuncLocaleEx %></label></div></td>',
                 '</tr>',
                 '<tr>',
                     '<td><label><%= scope.txtRegion %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-reg-settings" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
+                        '<div><div id="fms-cmb-reg-settings"></div>',
-                        '<label id="fms-lbl-reg-settings" style="vertical-align: middle;"></label></div></td>',
+                        '<label id="fms-lbl-reg-settings"></label></div></td>',
                 '</tr>',
                 '<tr>',
                     '<td colspan="2"><div id="fms-chb-separator-settings"></div></td>',
@@ -1767,7 +1767,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom" style="margin-right: 10px;">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -2254,14 +2254,14 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                                     '<tr><td><label><%= scope.txtRepeatRowsAtTop %></label></td></tr>',
                                     '<tr><td class="padding-small">',
                                         '<table><tbody><tr>',
-                                            '<td><div id="print-txt-top" style="width: 163px; margin-right: 8px;"></div></td>',
+                                            '<td><div id="print-txt-top" style="width: 163px;"></div></td>',
                                             '<td><div id="print-presets-top" style="width: 77px;"></div></td>',
                                         '</tr></tbody></table>',
                                     '</td></tr>',
                                     '<tr><td><label><%= scope.txtRepeatColumnsAtLeft %></label></td></tr>',
                                     '<tr><td class="padding-large">',
                                         '<table><tbody><tr>',
-                                            '<td><div id="print-txt-left" style="width: 163px; margin-right: 8px;"></div></td>',
+                                            '<td><div id="print-txt-left" style="width: 163px;"></div></td>',
                                             '<td><div id="print-presets-left" style="width: 77px;"></div></td>',
                                         '</tr></tbody></table>',
                                     '</td></tr>',
@@ -2274,8 +2274,8 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                                                     '<td><label><%= scope.txtBottom %></label></td>',
                                                 '</tr>',
                                                 '<tr>',
-                                                    '<td class="padding-small"><div id="print-spin-margin-top" style="margin-right: 8px;"></div></td>',
+                                                    '<td class="padding-small"><div id="print-spin-margin-top"></div></td>',
-                                                    '<td class="padding-small"><div id="print-spin-margin-bottom" style="margin-right: 8px;"></div></td>',
+                                                    '<td class="padding-small"><div id="print-spin-margin-bottom"></div></td>',
                                                 '</tr>',
                                                 '<tr>',
                                                     '<td><label><%= scope.txtLeft %></label></td>',
@@ -2310,11 +2310,16 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                         '</div>',
                     '</div>',
                 '</div>',
-                '<div id="print-preview-box" style="position: absolute; left: 280px; top: 0; right: 0; bottom: 0;" class="no-padding">',
+                '<div id="print-preview-box" class="no-padding">',
                     '<div id="print-preview"></div>',
                     '<div id="print-navigation">',
-                        '<div id="print-prev-page" style="display: inline-block; margin-right: 4px;"></div>',
+                        '<% if (!isRTL) { %>',
-                        '<div id="print-next-page" style="display: inline-block;"></div>',
+                        '<div id="print-prev-page"></div>',
+                        '<div id="print-next-page"></div>',
+                        '<% } else { %>',
+                        '<div id="print-next-page"></div>',
+                        '<div id="print-prev-page"></div>',
+                        '<% } %>',
                         '<div class="page-number">',
                             '<label><%= scope.txtPage %></label>',
                             '<div id="print-number-page"></div>',
@@ -2341,7 +2346,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
         render: function(node) {
             var me = this;
 
-            var $markup = $(this.template({scope: this}));
+            var $markup = $(this.template({scope: this, isRTL: Common.UI.isRTL()}));
 
             this.cmbRange = new Common.UI.ComboBox({
                 el: $markup.findById('#print-combo-range'),

apps/spreadsheeteditor/main/resources/less/leftmenu.less

@@ -319,6 +319,24 @@
                     display: block;
                 }
             }
+
+            #fms-cmb-macros,
+            #fms-cmb-func-locale,
+            #fms-cmb-reg-settings {
+                display: inline-block;
+                margin-right: 15px;
+                vertical-align: middle;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 15px;
+                }
+            }
+
+            #fms-lbl-func-locale,
+            #fms-lbl-reg-settings {
+                vertical-align: middle;
+            }
         }
 
         #panel-createnew {
@@ -330,6 +348,10 @@
                 .font-weight-bold();
                 padding: 0 0 10px 10px;
                 white-space: nowrap;
+
+                .rtl & {
+                    padding: 0 10px 10px 0;
+                }
             }
 
             .blank-document-info {
@@ -488,10 +510,18 @@
 
                 .help-item-wrap {
                     padding: 4px 2px 4px 20px;
+
+                    .rtl & {
+                        padding: 4px 20px 4px 2px;
+                    }
                 }
 
                 .header-name {
                     padding: 16px 2px 4px 10px;
+
+                    .rtl & {
+                        padding: 16px 10px 4px 2px;
+                    }
                 }
             }
         }
@@ -507,11 +537,19 @@
                     td {
                         padding: 0 20px 5px 0;
 
+                        .rtl & {
+                            padding: 0 0 5px 20px;
+                        }
+
                         &.left {
                             padding: 5px 10px;
                             text-align: right;
                             width: 30%;
 
+                            .rtl & {
+                                text-align: left;
+                            }
+
                             label {
                                 .font-weight-bold();
                             }
@@ -583,6 +621,14 @@
                     padding: 5px 0;
                 }
             }
+
+            #fms-btn-delete-pwd {
+                margin-left: 20px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 20px;
+                }
+            }
         }
 
         #panel-print {
@@ -601,6 +647,11 @@
                 justify-content: center;
                 align-items: center;
 
+                .rtl & {
+                    right: 280px;
+                    left: 0;
+                }
+
                 div {
                     text-align: center;
                 }
@@ -625,6 +676,10 @@
                 .footer {
                     .btn.primary {
                         margin-right: 8px;
+                        .rtl & {
+                            margin-right: 0;
+                            margin-left: 8px;
+                        }
                     }
                 }
                 .settings-container {
@@ -658,12 +713,29 @@
                         }
                     }
                 }
+                #print-txt-top,
+                #print-txt-left,
+                #print-spin-margin-top,
+                #print-spin-margin-bottom {
+                    margin-right: 8px;
+                    .rtl & {
+                        margin-right: 0;
+                        margin-left: 8px;
+                    }
+                }
             }
             #print-navigation {
                 height: 50px;
                 padding-left: 20px;
                 padding-top: 10px;
                 display: flex;
+                #print-prev-page {
+                    display: inline-block;
+                    margin-right: 4px;
+                }
+                #print-next-page {
+                    display: inline-block;
+                }
                 .btn-prev-page, .btn-next-page {
                     background-color: transparent;
                     padding: 0;
@@ -703,22 +775,45 @@
                     align-items: center;
                     height: 20px;
                     margin-left: 10px;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 10px;
+                    }
                     label {
                         .font-weight-bold();
                     }
                     #print-count-page, #print-number-page {
                         margin-left: 4px;
+                        .rtl & {
+                            margin-left: 0;
+                            margin-right: 4px;
+                        }
                     }
                 }
                 #print-active-sheet {
                     margin-left: 12px;
                     height: 20px;
                     line-height: 20px;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 12px;
+                    }
                 }
             }
             #print-preview {
                 height: calc(100% - 50px);
             }
+            #print-preview-box {
+                position: absolute;
+                left: 280px;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                .rtl & {
+                    right: 280px;
+                    left: 0;
+                }
+            }
         }
     }
 }