Merge pull request #1088 from ONLYOFFICE/feature/rtl_mode_r1

Add feature: RTL mode
ONLYOFFICE · Dec 20, 2023 · c5e85b1 · c5e85b1
2 parents 9a0a9d2 + 787cd75
commit c5e85b1
Show file tree

Hide file tree

Showing 49 changed files with 408 additions and 76 deletions.
diff --git a/common/loginpage/build/Gruntfile.js b/common/loginpage/build/Gruntfile.js
@@ -52,9 +52,7 @@ module.exports = function(grunt) {
                         compress: true,
                         ieCompat: false
                     },
-                    files: {
-                        "<%= pkg.desktop.less.files.dest %>": packageFile['desktop']['less']['files']['src']
-                    }
+                    files: packageFile.desktop.less.files
                 }
             },
 

diff --git a/common/loginpage/build/startpage.json b/common/loginpage/build/startpage.json
@@ -54,10 +54,13 @@
             ]
         },
         "less": {
-            "files": {
+            "files": [{
                 "src": "../src/styles.less",
                 "dest": "../deploy/styles.css"
-            }
+            },{
+                "src": "../src/css/rtl.less",
+                "dest": "../deploy/rtl.css"
+            }]
         },
         "concat": {
             "files": {

diff --git a/common/loginpage/src/index.html b/common/loginpage/src/index.html
@@ -9,6 +9,7 @@
 
     <!-- debug begin -->
     <link rel="stylesheet/less" type="text/css" href="styles.less" />
+    <link rel="stylesheet/less" type="text/css" href="css/rtl.less" />
     <!-- debug end -->
     <link rel="stylesheet/less" href="../noconnect/styles.css" />
 

diff --git a/common/loginpage/src/index.html.deploy b/common/loginpage/src/index.html.deploy
@@ -5,6 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
     <link rel="stylesheet" type="text/css" href="styles.css">
+    <link rel="stylesheet" type="text/css" href="rtl.css">
     <link rel="stylesheet" type="text/css" href="noconnect.css">
 
     <style type="text/css">

diff --git a/common/loginpage/src/panelsettings.js b/common/loginpage/src/panelsettings.js
@@ -176,6 +176,12 @@
                                                 </section>
                                             </div>
                                         </div>
+                                        <div class='settings-field' style='display:none;'>
+                                            <section class='switch-labeled hbox' id='sett-box-rtl-mode'>
+                                                <input type="checkbox" class="checkbox" id="sett-rtl-mode">
+                                                <label for="sett-rtl-mode" class='sett__caption' l10n>RTL Interface *</label>
+                                            </section>
+                                        </div>
                                         <div class='settings-field' id='opts-ui-scaling' style='display:none'>
                                             <label class='sett__caption' l10n>${_lang.settScaling}</label><label class='sett__caption'> *</label>
                                             <div class='sett--label-lift-top hbox'>
@@ -271,7 +277,7 @@
                                 </div>
                                 <div class="spacer" />
                             </div>
-                            <p id="caption-restart" class="sett__caption" style="display:none;text-align:left;margin-block-start:0.5em;"><label>* - </label><label l10n>${_lang.settAfterRestart}</label></p>
+                            <p id="caption-restart" class="sett__caption" style="display:none;"><label>* - </label><label l10n>${_lang.settAfterRestart}</label></p>
                         </div>
                     </div>`;
 
@@ -300,6 +306,7 @@
             $optsSpellcheckMode,
             $optsLaunchMode,
             $optsAutoupdateMode;
+        let $chRtl;
 
         function _set_user_name(name) {
             let me = this;
@@ -404,6 +411,10 @@
                     $optsSpellcheckMode.selectpicker('refresh');
                 }
 
+                if ( $chRtl ) {
+                    _new_settings.rtl = $chRtl.prop("checked");
+                }
+
                 sdk.command("settings:apply", JSON.stringify(_new_settings));
                 $btnApply.disable(true);
 
@@ -423,6 +434,10 @@
                 $btnApply.disable(false);
         };
 
+        function _is_lang_rtl(code) {
+            return code == 'ar-SA';
+        }
+
         function _on_lang_change(e) {
             let l = $optsLang.find('select').val(),
                 c = utils.Lang.tr('setBtnApply', l);
@@ -431,6 +446,10 @@
                 $btnApply.disable(false);
             }
 
+            if ( $chRtl ) {
+                $chRtl.prop("checked", _is_lang_rtl(l));
+            }
+
             $optsLang.toggleClass('notted', true);
         };
 
@@ -587,6 +606,19 @@
                         }
                     }
 
+                    if ( opts.rtl !== undefined ) {
+                        $chRtl = $('#sett-box-rtl-mode', $panel).parent().show().find('#sett-rtl-mode');
+                        $chRtl.prop('checked', !!opts.rtl)
+                            .on('change', e => {
+                                $btnApply.prop('disabled') && $btnApply.prop('disabled', false);
+                            });
+
+                        if ( opts.rtl ) {
+                            document.body.setAttribute('dir', 'rtl');
+                            document.body.classList.add('rtl');
+                        }
+                    }
+
                     $('.settings-field:visible:last').css('margin-bottom','0');
                 } else
                 if (/updates/.test(cmd)) {

diff --git a/common/loginpage/src/styles.less b/common/loginpage/src/styles.less
@@ -1175,7 +1175,7 @@ li.menu-item {
     }
 }
 
-#sett-preview-mode {
+.checkbox {
     width: 12px;
     height: 18px;
     margin-right: 16px;
@@ -1296,6 +1296,11 @@ li.menu-item {
     margin-left: 10px;
 }
 
+#caption-restart {
+    text-align:left;
+    margin-block-start:0.5em;
+}
+
 .about-field {
     margin-bottom: 10px;
 }

diff --git a/win-linux/res/styles/styles.qss b/win-linux/res/styles/styles.qss
@@ -93,8 +93,10 @@ QPushButton#toolButtonMain {
     font-size: 10px;
     font-family: 'Open Sans',sans-serif;
     font-weight: bold;
+    border-left: 0px;
     border-right: 1px solid #f1f1f1;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-right: 0px; border-left: 1px solid #f1f1f1;}
 
 /*QPushButton#toolButtonMain[theme=light] {*/
 /*    border: 1px solid #b6b6b6;*/
@@ -117,8 +119,9 @@ QPushButton#toolButtonMain[class=normal],
 QPushButton#toolButtonMain[class=normal]
 {
     background: #f1f1f1;
-    border-right-color: #dfdfdf;
+    border-color: #dfdfdf;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain[class=normal] {border-color: #dfdfdf;}
 
 QPushButton#toolButtonMain[class=normal]:hover {
     background: #cecece;
@@ -145,7 +148,8 @@ QPushButton::menu-indicator {width: 0px; height: 0px;}
     /*border-image: url(:/res/icons/menu-indicator-dark.png) 0 10 0 0 repeat repeat;*/
 /*}*/
 
-QPushButton#toolButtonDownload {border-right: 1px solid #dfdfdf; max-width: 40px; width: 40px; max-height: 28px; height: 28px;}
+QPushButton#toolButtonDownload {border-left: 0px; border-right: 1px solid #dfdfdf; max-width: 40px; width: 40px; max-height: 28px; height: 28px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-right: 0px; border-left: 1px solid #dfdfdf;}
 
 /**************************/
 /* dark theme definitions */
@@ -160,9 +164,11 @@ QPushButton#toolButtonDownload {border-right: 1px solid #dfdfdf; max-width: 40px
     color: #d9d9d9;
 }
 
-#mainPanel[uitheme=theme-dark] QPushButton#toolButtonDownload,
+#mainPanel[uitheme=theme-dark] QPushButton#toolButtonDownload {
+    border-color: #505050;
+}
 #mainPanel[uitheme=theme-dark] QPushButton#toolButtonMain {
-    border-right-color: #333;
+    border-color: #333;
 }
 
 #mainPanel[uitheme=theme-dark] QPushButton#toolButtonMain[class=active] {
@@ -171,7 +177,7 @@ QPushButton#toolButtonDownload {border-right: 1px solid #dfdfdf; max-width: 40px
 
 #mainPanel[uitheme=theme-dark] QPushButton#toolButtonMain[class=normal] {
     background: #404040;
-    border-right-color: #505050;
+    border-color: #505050;
 }
 
 #mainPanel[uitheme=theme-dark] QPushButton#toolButtonMain[class=normal]:hover {
@@ -223,14 +229,16 @@ QPushButton#toolButtonDownload {border-right: 1px solid #dfdfdf; max-width: 40px
     background: #1e1e1e;
 }
 
-#mainPanel[uitheme=theme-contrast-dark] QPushButton#toolButtonDownload,
+#mainPanel[uitheme=theme-contrast-dark] QPushButton#toolButtonDownload {
+    border-color: #414141;
+}
 #mainPanel[uitheme=theme-contrast-dark] QPushButton#toolButtonMain {
-    border-right-color: #1e1e1e;
+    border-color: #1e1e1e;
 }
 
 #mainPanel[uitheme=theme-contrast-dark] QPushButton#toolButtonMain[class=normal] {
     background: #2a2a2a;
-    border-right-color: #414141;
+    border-color: #414141;
 }
 
 #mainPanel[uitheme=theme-contrast-dark] QPushButton#toolButtonMain[class=normal]:hover {
@@ -249,11 +257,11 @@ QPushButton#toolButtonDownload {border-right: 1px solid #dfdfdf; max-width: 40px
 /***********************************/
 
 #mainPanel[uitheme=theme-classic-light] QPushButton#toolButtonMain {
-    border-right-color: #f1f1f1;
+    border-color: #f1f1f1;
 }
 
 #mainPanel[uitheme=theme-classic-light] QPushButton#toolButtonMain[class=normal] {
-    border-right-color: #cbcbcb;
+    border-color: #cbcbcb;
 }
 
 

diff --git a/win-linux/res/styles/[email protected] b/win-linux/res/styles/[email protected]
@@ -25,6 +25,7 @@ QPushButton#toolButtonMaximize[kde=true], QPushButton#toolButtonMinimize[kde=tru
 QPushButton#toolButtonMain {
     border-right-width: 1px;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-left-width: 1px;}
 
 QPushButton#toolButtonMain[theme=light] {
     border-width: 1px;
@@ -38,6 +39,7 @@ QPushButton#toolButtonMain[class=normal],
 }
 
 QPushButton#toolButtonDownload {border-right-width: 1px; max-width: 50px; width: 50px; max-height: 35px; height: 35px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-left-width: 1px;}
 
 /* ToolTip*/
 

diff --git a/win-linux/res/styles/[email protected] b/win-linux/res/styles/[email protected]
@@ -26,6 +26,7 @@ QPushButton#toolButtonMain {
     /*font-size: 20px;*/
     border-right-width: 2px;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-left-width: 2px;}
 
 QPushButton#toolButtonMain[theme=light] {
     border-width: 2px;
@@ -39,6 +40,7 @@ QPushButton#toolButtonMain[class=normal],
 }
 
 QPushButton#toolButtonDownload {border-right-width: 2px; max-width: 60px; width: 60px; max-height: 42px; height: 42px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-left-width: 2px;}
 
 /* ToolTip*/
 

diff --git a/win-linux/res/styles/[email protected] b/win-linux/res/styles/[email protected]
@@ -26,6 +26,7 @@ QPushButton#toolButtonMain {
     /*font-size: 20px;*/
     border-right-width: 2px;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-left-width: 2px;}
 
 QPushButton#toolButtonMain[theme=light] {
     border-width: 2px;
@@ -39,6 +40,7 @@ QPushButton#toolButtonMain[class=normal],
 }
 
 QPushButton#toolButtonDownload {border-right-width: 2px; max-width: 70px; width: 70px; max-height: 49px; height: 49px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-left-width: 2px;}
 
 /* ToolTip*/
 

diff --git a/win-linux/res/styles/[email protected] b/win-linux/res/styles/[email protected]
@@ -11,11 +11,13 @@ QPushButton#toolButtonMaximize[kde=true], QPushButton#toolButtonMinimize[kde=tru
     QPushButton#toolButtonClose[kde=true] {padding: 5px 0px 15px;}
 
 QPushButton#toolButtonMain {font-size: 23px; border-right-width: 2px;}
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-left-width: 2px;}
 QPushButton#toolButtonMain[theme=light] {border-width: 2px; border-bottom: 0 none;}
 QPushButton#toolButtonMain[class=normal],
    QPushButton#toolButtonMain[class=normal]:hover {border-bottom-width: 2px;}
 
 QPushButton#toolButtonDownload {border-right-width: 2px; max-width: 90px; width: 90px; max-height: 63px; height: 63px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-left-width: 2px;}
 
 /* ToolTip*/
 

diff --git a/win-linux/res/styles/[email protected] b/win-linux/res/styles/[email protected]
@@ -26,6 +26,7 @@ QPushButton#toolButtonMain {
     font-size: 25px;
     border-right-width: 3px;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-left-width: 3px;}
 
 QPushButton#toolButtonMain[theme=light] {
     border-width: 3px;
@@ -39,6 +40,7 @@ QPushButton#toolButtonMain[class=normal],
 }
 
 QPushButton#toolButtonDownload {border-right-width: 3px; max-width: 100px; width: 100px; max-height: 70px; height: 70px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-left-width: 3px;}
 
 /* ToolTip*/
 

diff --git a/win-linux/res/styles/[email protected] b/win-linux/res/styles/[email protected]
@@ -26,6 +26,7 @@ QPushButton#toolButtonMain {
     font-size: 28px;
     border-right-width: 3px;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-left-width: 3px;}
 
 QPushButton#toolButtonMain[theme=light] {
     border-width: 3px;
@@ -39,6 +40,7 @@ QPushButton#toolButtonMain[class=normal],
 }
 
 QPushButton#toolButtonDownload {border-right-width: 3px; max-width: 110px; width: 110px; max-height: 77px; height: 77px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-left-width: 3px;}
 
 /* ToolTip*/
 

diff --git a/win-linux/res/styles/[email protected] b/win-linux/res/styles/[email protected]
@@ -26,6 +26,7 @@ QPushButton#toolButtonMain {
     font-size: 20px;
     border-right-width: 2px;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-left-width: 2px;}
 
 QPushButton#toolButtonMain[theme=light] {
     border-width: 2px;
@@ -39,6 +40,7 @@ QPushButton#toolButtonMain[class=normal],
 }
 
 QPushButton#toolButtonDownload {border-right-width: 2px; max-width: 80px; width: 80px; max-height: 56px; height: 56px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-left-width: 2px;}
 
 /* ToolTip*/
 

diff --git a/win-linux/res/styles/[email protected] b/win-linux/res/styles/[email protected]
@@ -26,6 +26,7 @@ QPushButton#toolButtonMain {
     font-size: 35px;
     border-right-width: 4px;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-left-width: 4px;}
 
 QPushButton#toolButtonMain[theme=light] {
     border-width: 4px;
@@ -39,6 +40,7 @@ QPushButton#toolButtonMain[class=normal],
 }
 
 QPushButton#toolButtonDownload {border-right-width: 4px; max-width: 140px; width: 140px; max-height: 98px; height: 98px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-left-width: 4px;}
 
 /* ToolTip*/
 

diff --git a/win-linux/res/styles/[email protected] b/win-linux/res/styles/[email protected]
@@ -26,6 +26,7 @@ QPushButton#toolButtonMain {
     font-size: 30px;
     border-right-width: 3px;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-left-width: 3px;}
 
 QPushButton#toolButtonMain[theme=light] {
     border-width: 3px;
@@ -39,6 +40,7 @@ QPushButton#toolButtonMain[class=normal],
 }
 
 QPushButton#toolButtonDownload {border-right-width: 3px; max-width: 120px; width: 120px; max-height: 84px; height: 84px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-left-width: 3px;}
 
 /* ToolTip*/
 

diff --git a/win-linux/res/styles/[email protected] b/win-linux/res/styles/[email protected]
@@ -26,6 +26,7 @@ QPushButton#toolButtonMain {
     font-size: 45px;
     border-right-width: 5px;
 }
+#mainPanel[rtl=true] QPushButton#toolButtonMain {border-left-width: 5px;}
 
 QPushButton#toolButtonMain[theme=light] {
     border-width: 5px;
@@ -39,6 +40,7 @@ QPushButton#toolButtonMain[class=normal],
 }
 
 QPushButton#toolButtonDownload {border-right-width: 5px; max-width: 180px; width: 180px; max-height: 126px; height: 126px;}
+#mainPanel[rtl=true] QPushButton#toolButtonDownload {border-left-width: 5px;}
 
 /* ToolTip*/