feat: add rtl support (#2178)

frontend/src/css/_shell.css

@@ -16,6 +16,10 @@
   transition: .2s ease transform;
 }
 
+body.rtl .shell {
+  direction: ltr;
+}
+
 .shell__result {
   display: flex;
   padding: 0.5em;

frontend/src/css/base.css

@@ -5,6 +5,10 @@ body {
   color: #333333;
 }
 
+body.rtl {
+  direction: rtl;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -58,6 +62,11 @@ nav {
   left: 0;
 }
 
+body.rtl nav {
+  left: unset;
+  right: 0;
+}
+
 nav .action {
   width: 100%;
   display: block;
@@ -69,6 +78,11 @@ nav .action {
   text-overflow: ellipsis;
 }
 
+body.rtl .action {
+  direction: rtl;
+  text-align: right;
+}
+
 nav > div {
   border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
@@ -101,6 +115,10 @@ main {
   border-radius: 0.125em;
 }
 
+body.rtl .breadcrumbs a {
+  transform: translateX(-16em);
+}
+
 .breadcrumbs a:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }

frontend/src/css/dashboard.css

@@ -8,6 +8,10 @@
   flex-wrap: wrap;
 }
 
+body.rtl .dashboard .row {
+  margin-right: 16em;
+}
+
 .dashboard .row .column {
   display: flex;
   padding: 0 .5em;
@@ -60,6 +64,10 @@ p code {
   border-bottom: 2px solid rgba(0, 0, 0, 0.05);
 }
 
+body.rtl #nav .wrapper {
+  margin-right: 16em;
+}
+
 .dashboard #nav ul {
   list-style: none;
   display: flex;
@@ -138,6 +146,13 @@ table tr>*:first-child {
   padding-left: 1em;
 }
 
+body.rtl table tr>* {
+  padding-left: unset;
+  padding-right: 1em;
+  text-align: right;
+  direction: ltr;
+}
+
 table tr>*:last-child {
   padding-right: 1em;
 }
@@ -181,6 +196,11 @@ table tr>*:last-child {
   margin-right: auto;
 }
 
+body.rtl .card .card-title>*:first-child {
+  margin-right: 0;
+  text-align: right;
+}
+
 .card>div {
   padding: 1em 1em;
 }
@@ -461,4 +481,10 @@ table tr>*:last-child {
 .card .card-action.full .action .title {
   font-size: 1.5em;
   font-weight: 500;
+}
+
+/*** RTL - Fix disk usage information (in english) ***/
+body.rtl .credits {
+  text-align: right;
+  direction: ltr;
 }

frontend/src/css/header.css

@@ -135,10 +135,25 @@ header .menu-button {
   z-index: 1;
 }
 
+body.rtl #search #result {
+  direction: ltr;
+}
+
 #search #result>div>*:first-child {
   margin-top: 0;
 }
 
+body.rtl #search #result {
+  direction: rtl;
+  text-align: right;
+}
+
+/*** RTL - Keep search result LTR because it has paths (in english) ***/
+body.rtl #search #result ul>* {
+  direction: ltr;
+  text-align: left;
+}
+
 #search.active #result {
   padding: .5em;
   height: calc(100% - 4em);
@@ -224,6 +239,10 @@ header .menu-button {
   padding: .5em;
 }
 
+body.rtl #search .boxes h3 {
+  text-align: right;
+}
+
 #search .boxes>div {
   display: flex;
   flex-wrap: wrap;

frontend/src/css/listing.css

@@ -2,6 +2,10 @@
   --item-selected: white;
 }
 
+body.rtl #listing {
+  margin-right: 16em;
+}
+
 #listing h2 {
   margin: 0 0 0 0.5em;
   font-size: .9em;

frontend/src/css/mobile.css

@@ -40,6 +40,13 @@
     transform-origin: top right;
     z-index: 99999;
   }
+
+  body.rtl #dropdown {
+    right: unset;
+    left: 1em;
+    transform-origin: top left;
+  }
+
   #dropdown > div {
     display: block;
   }
@@ -95,9 +102,20 @@
     transition: .1s ease left;
     left: -17em;
   }
+
+  body.rtl nav {
+    left: unset;
+    right: -17em;
+  }
   nav.active {
     left: 0;
   }
+
+  body.rtl nav.active {
+    left: unset;
+    right: 0;
+  }
+
   header .search-button,
   header .menu-button {
     display: inherit;
@@ -108,6 +126,23 @@
   #listing {
     margin-bottom: 5em;
   }
+
+  body.rtl #listing {
+    margin-right: unset;
+  }
+
+  body.rtl .breadcrumbs {
+    transform: translateX(16em);
+  }
+
+  body.rtl #nav .wrapper {
+    margin-right: unset;
+  }
+  
+  body.rtl .dashboard .row {
+    margin-right: unset;
+  }
+
   main {
     margin: 0 1em;
     width: calc(100% - 2em);

frontend/src/css/styles.css

@@ -315,6 +315,11 @@ main .spinner .bounce2 {
   padding: 0 1em;
 }
 
+/*** RTL - flip and position arrow of path ***/
+body.rtl .breadcrumbs .chevron {
+  transform: scaleX(-1) translateX(16em);
+}
+
 #editor-container .breadcrumbs span {
   font-size: .75rem;
 }
@@ -404,3 +409,22 @@ main .spinner .bounce2 {
 }
 
 @import './mobile.css';
+
+/* * * * * * * * * * * * * * * *
+ *         RTL overrides       *
+ * * * * * * * * * * * * * * * */
+
+body.rtl .card-content textarea {
+  direction: ltr;
+  text-align: left;
+}
+
+body.rtl .card-content .small + input {
+  direction: ltr;
+  text-align: left;
+}
+
+body.rtl .card.floating .card-content .file-list {
+  direction: ltr;
+  text-align: left;
+}

frontend/src/i18n/index.js

@@ -100,6 +100,8 @@ const removeEmpty = (obj) =>
       {}
     );
 
+export const rtlLanguages = ["he", "ar"];
+
 const i18n = new VueI18n({
   locale: detectLocale(),
   fallbackLocale: "en",

frontend/src/router/index.js

@@ -13,7 +13,7 @@ import Shares from "@/views/settings/Shares";
 import Errors from "@/views/Errors";
 import store from "@/store";
 import { baseURL, name } from "@/utils/constants";
-import i18n from "@/i18n";
+import i18n, { rtlLanguages } from "@/i18n";
 
 Vue.use(Router);
 
@@ -158,6 +158,18 @@ router.beforeEach((to, from, next) => {
   const title = i18n.t(titles[to.name]);
   document.title = title + " - " + name;
 
+  /*** RTL related settings per route ****/
+  const rtlSet = document.querySelector("body").classList.contains("rtl");
+  const shouldSetRtl = rtlLanguages.includes(i18n.locale);
+  switch (true) {
+    case shouldSetRtl && !rtlSet:
+      document.querySelector("body").classList.add("rtl");
+      break;
+    case !shouldSetRtl && rtlSet:
+      document.querySelector("body").classList.remove("rtl");
+      break;
+  }
+
   if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (!store.getters.isLogged) {
       next({

frontend/src/views/settings/Profile.vue

@@ -75,6 +75,7 @@
 import { mapState, mapMutations } from "vuex";
 import { users as api } from "@/api";
 import Languages from "@/components/settings/Languages";
+import i18n, { rtlLanguages } from "@/i18n";
 
 export default {
   name: "settings",
@@ -143,6 +144,9 @@ export default {
           singleClick: this.singleClick,
           dateFormat: this.dateFormat,
         };
+        const shouldReload =
+          rtlLanguages.includes(data.locale) !==
+          rtlLanguages.includes(i18n.locale);
         await api.update(data, [
           "locale",
           "hideDotfiles",
@@ -150,6 +154,9 @@ export default {
           "dateFormat",
         ]);
         this.updateUser(data);
+        if (shouldReload) {
+          location.reload();
+        }
         this.$showSuccess(this.$t("settings.settingsUpdated"));
       } catch (e) {
         this.$showError(e);