Add support for handling languages written from right to left

assets/css/extra.css

@@ -21,6 +21,12 @@ input[type="text"]{
     border:none;
     width:60%;
 }
+
+.prefBox{
+    display:flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
 #save{
     padding:10px;
     border-radius: 8px;
@@ -92,8 +98,9 @@ select {
 	border-radius: 8px;
 	cursor: pointer;
 	font-size: large;
-	margin: 8px;
 	outline: none;
+    position:relative;
+    bottom:8px;
 }
 #browserInfo{
     cursor: pointer;

html/preferences.html

@@ -19,21 +19,33 @@
 
     <h1 id="preferences">Preferences</h1>
     <br><br>
-    <strong id="dlText">Download location</strong>
+
-    <br><br>
+    <div class="prefBox">
-    <span id="clText">Current download location - </span><span id="path"></span>
+        <strong id="dlText">Download location</strong>
-    <br><br>
+    </div>
+    <br>
+
+
+    <div class="prefBox">
+        <span id="clText">Current download location - </span><span id="path"></span>
+    </div>
+
+    <br>
     <button id="selectLocation">Select Download Location</button>
 
     <p id="msg">
-        </pid>
+    </p>
 
+    <br>
 
+    <div class="prefBox">
         <span id="transparentText">Enable transparent dark mode(only Linux, needs restart)</span><input type="checkbox"
             id="enableTransparent">
+    </div>
+    <br>
 
-        <br><br>
 
+    <div class="prefBox">
         <label id="selectLn">Select Language (Requires reload)</label>
         <select id="select" onchange="changeLanguage()">
             <option value="en">English</option>
@@ -48,8 +60,10 @@
             <option value="uk">Українська</option>
             <option value="tr">Türkçe</option>
         </select>
-        
+    </div>
-        <br>
+    <br>
+
+    <div class="prefBox">
         <span id="browserTxt">Select browser to use cookies from</span>
         <span id="browserInfo"> ℹ️</span>
         <select id="browser">
@@ -63,70 +77,95 @@
             <option value="safari">Safari</option>
             <option value="vivaldi">Vivaldi</option>
         </select>
+    </div>
 
-        <script>
-            let downloadPath = localStorage.getItem("downloadPath")
-            getId("path").textContent = downloadPath
-
-            const { ipcRenderer, dialog } = require("electron")
-            function getId(id) {
-                return document.getElementById(id)
-            }
-
-            function restartApp(){
-                ipcRenderer.send("restart")
-            }
 
-            getId("back").addEventListener("click", () => {
+    <script>
-                ipcRenderer.send("close-secondary")
+        let rightToLeft = false;
+        if (localStorage.getItem("rightToLeft")) {
+            rightToLeft = localStorage.getItem("rightToLeft")
+        }
+        if (rightToLeft == "true") {
+            document.querySelectorAll(".prefBox").forEach(item => {
+                item.style.flexDirection = "row-reverse"
             })
-
+        }
-            getId("selectLocation").addEventListener("click", () => {
+        else{
-                ipcRenderer.send("select-location", "")
+            console.log("Change to left to right");
-            })
+            document.querySelectorAll(".prefBox").forEach(item => {
-
+                item.style.flexDirection = "row"
-            ipcRenderer.on("downloadPath", (event, downloadPath) => {
-                console.log(downloadPath);
-                localStorage.setItem("downloadPath", downloadPath)
-                getId("path").textContent = downloadPath
-            })
-
-            const enabledTransparent = getId("enableTransparent")
-            enabledTransparent.addEventListener("change", (event) => {
-                if (enabledTransparent.checked) {
-                    localStorage.setItem("enabledTransparent", "true")
-                }
-                else {
-                    localStorage.setItem("enabledTransparent", "false")
-                }
             })
+        }
+        let downloadPath = localStorage.getItem("downloadPath")
+        getId("path").textContent = downloadPath
+
+        const { ipcRenderer, dialog } = require("electron")
+        function getId(id) {
+            return document.getElementById(id)
+        }
+
+        function restartApp() {
+            ipcRenderer.send("restart")
+        }
+
+        getId("back").addEventListener("click", () => {
+            ipcRenderer.send("close-secondary")
+        })
+
+        getId("selectLocation").addEventListener("click", () => {
+            ipcRenderer.send("select-location", "")
+        })
+
+        ipcRenderer.on("downloadPath", (event, downloadPath) => {
+            console.log(downloadPath);
+            localStorage.setItem("downloadPath", downloadPath)
+            getId("path").textContent = downloadPath
+        })
 
-            const localEnabledTransparent = localStorage.getItem("enabledTransparent")
+        const enabledTransparent = getId("enableTransparent")
-            if (localEnabledTransparent == "true") {
+        enabledTransparent.addEventListener("change", (event) => {
-                enabledTransparent.checked = true
+            if (enabledTransparent.checked) {
+                localStorage.setItem("enabledTransparent", "true")
             }
-            const language = localStorage.getItem("language")
+            else {
-
+                localStorage.setItem("enabledTransparent", "false")
-            if (language) {
-                getId("select").value = language
             }
-            function changeLanguage() {
+        })
-                const language = getId("select").value
+
-                localStorage.setItem("language", language)  
+        const localEnabledTransparent = localStorage.getItem("enabledTransparent")
+        if (localEnabledTransparent == "true") {
+            enabledTransparent.checked = true
+        }
+        const language = localStorage.getItem("language")
+
+        if (language) {
+            getId("select").value = language
+        }
+        function changeLanguage() {
+            const language = getId("select").value
+            localStorage.setItem("language", language)
+            if (language === "fa") {
+                rightToLeft = true;
+                localStorage.setItem("rightToLeft", true)
             }
-
+            else {
-            let browser = localStorage.getItem("browser")
+                rightToLeft = false;
-            if (browser) {
+                localStorage.setItem("rightToLeft", false)
-                getId("browser").value = browser
             }
+        }
 
-            getId("browser").addEventListener("change", ()=>{
+        let browser = localStorage.getItem("browser")
-                browser = getId("browser").value
+        if (browser) {
-                localStorage.setItem("browser", browser)
+            getId("browser").value = browser
-            })
+        }
+
+        getId("browser").addEventListener("change", () => {
+            browser = getId("browser").value
+            localStorage.setItem("browser", browser)
+        })
 
-            require("../src/translate_preferences")
+        require("../src/translate_preferences")
-        </script>
+    </script>
 </body>
 
 </html>