Feature: RTL Support

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <input class="hidden-input-for-focus" type="text" />
-  <div v-show="compatible" id="app-container" class="app-container" :class="{ 'dark-theme': darkTheme }">
+  <div v-show="compatible" id="app-container" class="app-container" :class="{ 'dark-theme': darkTheme, 'lang-rtl': isRTL }">
     <div class="hidden-mobile app-body" :style="{ zoom: `${zoom}%` }">
       <splash-screen ref="splash"></splash-screen>
       <side-bar @change-date="setSelectedDate"></side-bar>
@@ -17,7 +17,7 @@
             'full-screen-divider': hideBottomListContainer,
           }"
         >
-          <i class="bi-chevron-left slider-btn" ref="weekLeft" @click="weekMoveLeft"></i>
+          <i class="bi-chevron-left slider-btn" ref="weekLeft" @click="isRTL ? weekMoveRight() : weekMoveLeft()"></i>
           <div class="todo-slider weekdays" ref="weekListContainer">
             <to-do-list
               v-for="date in dates_array"
@@ -28,7 +28,7 @@
             >
             </to-do-list>
           </div>
-          <i class="bi-chevron-right slider-btn" ref="weekRight" @click="weekMoveRight"></i>
+          <i class="bi-chevron-right slider-btn" ref="weekRight" @click="isRTL ? weekMoveLeft() : weekMoveRight()"></i>
         </div>
 
         <div
@@ -587,6 +587,9 @@ export default {
     darkTheme: function () {
       return this.$store.getters.config.darkTheme;
     },
+    isRTL: function () {
+      return this.$i18n.locale === 'ar'
+    },
     resizableStyle: function () {
       if (this.showCalendar && this.showCustomList) {
         return { height: this.calendarHeight };
@@ -631,6 +634,7 @@ export default {
 
 <style lang="scss">
 @import "/src/assets/style/globalVars.scss";
+@import "/src/assets/style/lang-rtl.scss";
 
 body {
   line-height: unset !important;

src/assets/style/lang-rtl.scss

@@ -0,0 +1,63 @@
+.lang-rtl {
+  direction: rtl;
+
+  #config-links-menu {
+    border-left: 1px solid rgba(0, 0, 0, 0.06);
+    border-right: 0px;
+
+    .list-group{
+      padding-right: 0px;
+      padding-left: 40px;
+    }
+  }
+
+  .dropdown-menu-end{
+       text-align: right;
+  //   padding: 0.4rem 0.65rem 0.4rem 1.9rem;
+  }
+
+  #tipsModal {
+    .modal-footer {
+      flex-direction: row-reverse;
+    }
+    .bi-info-circle {
+      margin-left: 30px;
+      margin-right: 0px;
+    }
+  }
+
+  .form-select {
+    background-position: left 0.75rem center;
+    padding: 0.375rem 0.75rem 0.375rem 2.25rem;
+  }
+
+  .list-group-item .list-item .item-img {
+    margin-right: 0;
+    margin-left: 24px;
+  }
+
+  .inline-todo-item .cicle-icon,
+  #todo-item-active .cicle-icon {
+    margin-right: 0px;
+    margin-left: 5px;
+  }
+
+  // #todo-item-active .time-details{
+  //   float: left;
+  // }
+
+  // .todo-item-sub-tasks .form-check-input {
+  //   margin-right: 0px;
+  //   margin-left: 8px;
+  // }
+
+  // .tasklists-menu .dropdown-item {
+  //   text-align: right;
+  //   padding: 0.4rem 0.65rem 0.4rem 1.9rem;
+
+  //   i {
+  //     margin-right: 0px;
+  //     margin-left: 11px;
+  //   }
+  // }
+}

src/components/layout/sideBar.vue

@@ -188,6 +188,7 @@ export default {
   flex-direction: column;
   float: left;
   background-color: #fcfcfc;
+  direction: ltr;
 }
 
 .side-bar > i:first-child {

src/components/linkList.vue

@@ -7,6 +7,7 @@
           <img v-if="item.img" :src="item.img" height="22">
         </div>
         <div class="align-self-center w-100">{{item.name}}</div>
+        <i class="align-self-center" :class="isRTL ? 'bi-chevron-left' : 'bi-chevron-right'"></i>
       </div>
     </li>
   </ul>
@@ -51,6 +52,11 @@
             tagIdLink: function (id) {
                 document.getElementById(id).click();
             }
+        },
+        computed: {
+          isRTL: function () {
+            return this.$i18n.locale === 'ar'
+          },
         }
     }
 </script>

src/components/listHeader.vue

@@ -19,7 +19,7 @@
     </div>
     <i v-show="!editing" class="bi-three-dots-vertical header-menu-icons dropdown-toggle-split align-self-center"
       type="button" data-bs-toggle="dropdown"></i>
-    <ul class="dropdown-menu" aria-labelledby="btnTaskOptionMenu">
+    <ul class="dropdown-menu tasklists-menu" aria-labelledby="btnTaskOptionMenu">
       <li>
         <button class="dropdown-item" type="button" @click="newTask">
           <i class="bi-plus-lg"></i> <span>{{ $t('ui.newTask') }}</span>

src/views/configModal.vue

@@ -312,7 +312,7 @@
                   <option value="hi">हिंदी</option>
                   <option value="ja">日本</option>
                   <option value="pl">Polski</option>
-                  <option value="ar">عرب</option>
+                  <option value="ar">العربية</option>
                   <option value="ko">한국어</option>
                   <option value="zh_cn">简体中文</option>
                   <option value="zh_tw">繁體中文</option>
@@ -482,7 +482,6 @@ export default {
 .form-select:focus {
   box-shadow: none;
 }
-
 .modal-dialog {
   max-width: 800px;
   max-height: 500px;

src/views/tipsModal.vue

@@ -9,7 +9,7 @@
         </div>
         <div class="modal-body d-flex">
           <div style="margin: 5px">
-            <i class="bi-info-circle" style="font-size: 38px; margin-right: 30px; "></i>
+            <i class="bi-info-circle" style="font-size: 38px;"></i>
           </div>
           <div style="margin-top: 9px">
             {{tips[index].text}}
@@ -84,11 +84,14 @@
   .modal-body {
     height: 100px;
   }
-
+  .modal-footer .btn {
+    direction: ltr;
+  }
   .bi-info-circle {
     background: -webkit-linear-gradient(180deg, rgba(89, 66, 141, 1) 0%, rgba(114, 78, 156, 1) 90%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    margin-right: 30px;
   }
 
   .dark-theme .bi-info-circle {