From 82ab8da5f44be7f8f1a471bc5d169425caa05a4d Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mohmans@pm.me>
Date: Wed, 22 Feb 2023 22:59:26 +0300
Subject: [PATCH 1/9] Change text direction for Arabic language

---
 src/App.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f603d1e4..9316aed9 100644
--- a/src/App.vue
+++ b/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>
@@ -549,6 +549,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 };
@@ -658,7 +661,9 @@ body {
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
 }
-
+.lang-rtl {
+  direction: rtl;
+}
 .dark-theme *::-webkit-scrollbar-thumb {
   background: #333940;
   border-radius: 5px;

From 3b6bdd6bf8dc98868dc8786da576b72f4161e47c Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mohmans@pm.me>
Date: Wed, 22 Feb 2023 23:44:32 +0300
Subject: [PATCH 2/9] Fix RTL directions in the todo list container

---
 src/App.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9316aed9..e4905f7a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,14 +10,15 @@
           'full-screen': !showCustomList,
           'hidden-lists-container': hideTopListContainer,
           'full-screen-divider': hideBottomListContainer,
+          'rtl': isRTL,
         }">
-          <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" ref="weekListContainer">
             <to-do-list v-for="date in dates_array" :key="date" :id="date" :showCustomList="showCustomList"
               @todo-list-mounted="todoListMounted">
             </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 v-show="showCustomList && showCalendar" class="main-horizontal-divider" id="resizer"
@@ -39,6 +40,7 @@
           'full-screen': !showCalendar,
           'flex-grow-1': showCalendar,
           'hidden-lists-container': hideBottomListContainer,
+          'rtl': isRTL,
         }">
           <i class="bi-chevron-left slider-btn" @click="customMoveLeft" :style="{
             visibility: cTodoList.length > customColumns ? 'visible' : 'hidden',
@@ -611,7 +613,9 @@ body {
   margin-bottom: 25px;
   // margin-bottom: 5px;
 }
-
+.todo-lists-container.rtl {
+  flex-direction: row-reverse;
+}
 .slider-btn {
   padding: 3px;
   font-size: 2rem;

From bdaf98505c9bbf0e1a0f668d96fb64516e5b6de1 Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mohmans@pm.me>
Date: Wed, 22 Feb 2023 23:45:11 +0300
Subject: [PATCH 3/9] Force the sidebar direction to LTR

---
 src/components/layout/sideBar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/layout/sideBar.vue b/src/components/layout/sideBar.vue
index dca87a75..484a23d6 100644
--- a/src/components/layout/sideBar.vue
+++ b/src/components/layout/sideBar.vue
@@ -107,6 +107,7 @@ export default {
   flex-direction: column;
   float: left;
   background-color: #fcfcfc;
+  direction: ltr;
 }
 
 .side-bar i:first-child {

From e34ed1dbea87e0be3a04ff066c0c3e97ddbdc652 Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mohmans@pm.me>
Date: Wed, 22 Feb 2023 23:57:35 +0300
Subject: [PATCH 4/9] Fix tips modal styling in RTL

---
 src/views/tipsModal.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/views/tipsModal.vue b/src/views/tipsModal.vue
index a6835642..1a1c7e32 100644
--- a/src/views/tipsModal.vue
+++ b/src/views/tipsModal.vue
@@ -9,13 +9,13 @@
         </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" :class="{ 'rtl' : isRTL}" style="font-size: 38px;"></i>
           </div>
           <div style="margin-top: 9px">
             {{tips[index].text}}
           </div>
         </div>
-        <div class="modal-footer d-flex">
+        <div class="modal-footer d-flex" :class="{ 'rtl' : isRTL}">
           <button type="button" class="btn flex-fill" @click="back"><i class="bi-chevron-double-left"></i>
             {{$t('tips.back')}}
           </button>
@@ -71,7 +71,10 @@
                     {text: this.$i18n.t("tips.tip17")},
                     {text: this.$i18n.t("tips.tip18")},
                 ]
-            }
+            },
+            isRTL: function () {
+              return this.$i18n.locale === 'ar'
+            },
         }
     }
 </script>
@@ -84,13 +87,21 @@
   .modal-body {
     height: 100px;
   }
-
+  .modal-footer.rtl {
+    flex-direction: row-reverse;
+  }
+  .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;
+  }
+  .bi-info-circle.rtl {
+    margin-left: 30px;
   }
-
   .dark-theme .bi-info-circle {
     background: -webkit-linear-gradient(180deg, rgb(115, 75, 176) 0%, rgb(147, 110, 203) 90%);
     -webkit-background-clip: text;

From dd7d7473f76136206ff9425441d90bc49dfaec20 Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mohmans@pm.me>
Date: Thu, 23 Feb 2023 00:38:46 +0300
Subject: [PATCH 5/9] Fix settings list style for RTL

---
 src/components/linkList.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/linkList.vue b/src/components/linkList.vue
index efc71e17..019ca073 100644
--- a/src/components/linkList.vue
+++ b/src/components/linkList.vue
@@ -1,13 +1,13 @@
 <template>
   <ul class="list-group">
-    <li v-for="item in linkList" :key="item" class="list-group-item">
+    <li v-for="item in linkList" :key="item" class="list-group-item" :class="{ 'rtl' : isRTL}">
       <div class="d-flex list-item justify-content-between" @click="linkAction(item.link,item.linktype)">
         <div class="item-img">
           <i v-if="item.ico" :style="'font-size: 24px; color: '+ item.color" :class="item.ico"></i>
           <img v-if="item.img" :src="item.img" height="24">
         </div>
         <div class="align-self-center w-100">{{item.name}}</div>
-        <i class="bi-chevron-right align-self-center"></i>
+        <i class="align-self-center" :class="isRTL ? 'bi-chevron-left' : 'bi-chevron-right'"></i>
       </div>
     </li>
   </ul>
@@ -52,6 +52,11 @@
             tagIdLink: function (id) {
                 document.getElementById(id).click();
             }
+        },
+        computed: {
+          isRTL: function () {
+            return this.$i18n.locale === 'ar'
+          },
         }
     }
 </script>
@@ -83,6 +88,10 @@
   .item-img {
     margin-right: 24px;
   }
+  .list-group-item.rtl .list-item .item-img {
+    margin-right: 0;
+    margin-left: 24px;
+  }
 
   .dark-theme .card {
     background-color: #15161e;

From 6f467028c56a6387cc0e350d2c63d8175898a23b Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mohmans@pm.me>
Date: Thu, 23 Feb 2023 00:43:00 +0300
Subject: [PATCH 6/9] Fix language select element style for RTL

---
 src/views/configModal.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/views/configModal.vue b/src/views/configModal.vue
index 19f67055..305b59c8 100644
--- a/src/views/configModal.vue
+++ b/src/views/configModal.vue
@@ -282,7 +282,7 @@
             <div class="tab-pane fade" id="config-language">
               <div class="d-flex flex-column mt-2 h-100">
                 <label for="language" class="form-label">{{ $t("settings.language") }}:</label>
-                <select id="language" class="col-sm-9 form-select" aria-label="Default select example"
+                <select id="language" class="col-sm-9 form-select" :class="{'rtl' : isRTL}" aria-label="Default select example"
                   v-model="configData.language" @change="setLanguage">
                   <option value="en">English</option>
                   <option value="es">Español</option>
@@ -422,6 +422,9 @@ export default {
     configLinks: function () {
       return configList.configList(this);
     },
+    isRTL: function () {
+      return this.$i18n.locale === 'ar'
+    },
     watch: {
       configProp: function (newVal) {
         this.configData = newVal;
@@ -458,7 +461,9 @@ export default {
 .form-select:focus {
   box-shadow: none;
 }
-
+.form-select.rtl {
+  background-position: left .75rem center;
+}
 .modal-dialog {
   max-width: 320px;
   // height: 200px;

From d71026349903895f1bc6d4f9c45ad8b46531a3db Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mohmans@pm.me>
Date: Thu, 23 Feb 2023 00:43:48 +0300
Subject: [PATCH 7/9] Fix Arabic name in the language selection

---
 src/views/configModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/configModal.vue b/src/views/configModal.vue
index 305b59c8..b8434b9a 100644
--- a/src/views/configModal.vue
+++ b/src/views/configModal.vue
@@ -293,7 +293,7 @@
                   <option value="ru">русский</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>

From 0eebbc3924bf5541bf5752ac78d5ca2c2491acc2 Mon Sep 17 00:00:00 2001
From: Manuel Ernesto Garcia <merodriguez9112@gmail.com>
Date: Wed, 31 May 2023 15:40:17 -0400
Subject: [PATCH 8/9] reimplementing RTL format to single style file

---
 src/App.vue                    |  9 ++----
 src/assets/style/lang-rtl.scss | 50 ++++++++++++++++++++++++++++++++++
 src/components/linkList.vue    |  6 +---
 src/components/listHeader.vue  |  2 +-
 src/views/configModal.vue      |  8 +-----
 src/views/tipsModal.vue        | 16 +++--------
 6 files changed, 60 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/style/lang-rtl.scss

diff --git a/src/App.vue b/src/App.vue
index 5e13fe90..72c97d1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,8 +9,7 @@
         <div v-show="showCalendar" class="todo-lists-container" :style="resizableStyle" ref="calendarContainer" :class="{
           'full-screen': !showCustomList,
           'hidden-lists-container': hideTopListContainer,
-          'full-screen-divider': hideBottomListContainer,
-          'rtl': isRTL,
+          'full-screen-divider': hideBottomListContainer
         }">
           <i class="bi-chevron-left slider-btn" ref="weekLeft" @click="isRTL ? weekMoveRight() : weekMoveLeft()"></i>
           <div class="todo-slider" ref="weekListContainer">
@@ -40,7 +39,6 @@
           'full-screen': !showCalendar,
           'flex-grow-1': showCalendar,
           'hidden-lists-container': hideBottomListContainer,
-          'rtl': isRTL,
         }">
           <i class="bi-chevron-left slider-btn" @click="customMoveLeft" :style="{
             visibility: cTodoList.length > customColumns ? 'visible' : 'hidden',
@@ -581,6 +579,7 @@ export default {
 
 <style lang="scss">
 @import "/src/assets/style/globalVars.scss";
+@import "/src/assets/style/lang-rtl.scss";
 
 body {
   line-height: unset !important;
@@ -596,9 +595,7 @@ body {
   margin-bottom: 25px;
   // margin-bottom: 5px;
 }
-.todo-lists-container.rtl {
-  flex-direction: row-reverse;
-}
+
 .slider-btn {
   padding: 3px;
   font-size: 2rem;
diff --git a/src/assets/style/lang-rtl.scss b/src/assets/style/lang-rtl.scss
new file mode 100644
index 00000000..12da83ad
--- /dev/null
+++ b/src/assets/style/lang-rtl.scss
@@ -0,0 +1,50 @@
+.lang-rtl {
+  .todo-lists-container {
+    flex-direction: row-reverse;
+  }
+
+  #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;
+    }
+  }
+}
diff --git a/src/components/linkList.vue b/src/components/linkList.vue
index 76fa66d8..775224b0 100644
--- a/src/components/linkList.vue
+++ b/src/components/linkList.vue
@@ -1,6 +1,6 @@
 <template>
   <ul class="list-group">
-    <li v-for="item in linkList" :key="item" class="list-group-item" :class="{ 'rtl' : isRTL}">
+    <li v-for="item in linkList" :key="item" class="list-group-item">
       <div class="d-flex list-item justify-content-between" @click="linkAction(item.link,item.linktype)">
         <div class="item-img">
           <i v-if="item.ico" :style="'font-size: 20px; color: '+ item.color" :class="item.ico"></i>
@@ -88,10 +88,6 @@
   .item-img {
     margin-right: 24px;
   }
-  .list-group-item.rtl .list-item .item-img {
-    margin-right: 0;
-    margin-left: 24px;
-  }
 
   .dark-theme .card {
     background-color: #15161e;
diff --git a/src/components/listHeader.vue b/src/components/listHeader.vue
index a75f3a7a..6adb099f 100644
--- a/src/components/listHeader.vue
+++ b/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>
diff --git a/src/views/configModal.vue b/src/views/configModal.vue
index 1b7e0cab..65ad91aa 100644
--- a/src/views/configModal.vue
+++ b/src/views/configModal.vue
@@ -300,7 +300,7 @@
             <div class="tab-pane fade" id="config-language">
               <div class="d-flex flex-column mt-2 h-100">
                 <label for="language" class="form-label">{{ $t("settings.language") }}:</label>
-                <select id="language" class="col-sm-9 form-select" :class="{'rtl' : isRTL}" aria-label="Default select example"
+                <select id="language" class="col-sm-9 form-select" aria-label="Default select example"
                   v-model="configData.language" @change="setLanguage">
                   <option value="en">English</option>
                   <option value="es">Español</option>
@@ -436,9 +436,6 @@ export default {
     configLinks: function () {
       return configList.configList(this);
     },
-    isRTL: function () {
-      return this.$i18n.locale === 'ar'
-    },
     watch: {
       configProp: function (newVal) {
         this.configData = newVal;
@@ -484,9 +481,6 @@ export default {
 .form-select:focus {
   box-shadow: none;
 }
-.form-select.rtl {
-  background-position: left .75rem center;
-}
 .modal-dialog {
   max-width: 800px;
   max-height: 500px;
diff --git a/src/views/tipsModal.vue b/src/views/tipsModal.vue
index 1a1c7e32..e99cc37a 100644
--- a/src/views/tipsModal.vue
+++ b/src/views/tipsModal.vue
@@ -9,13 +9,13 @@
         </div>
         <div class="modal-body d-flex">
           <div style="margin: 5px">
-            <i class="bi-info-circle" :class="{ 'rtl' : isRTL}" style="font-size: 38px;"></i>
+            <i class="bi-info-circle" style="font-size: 38px;"></i>
           </div>
           <div style="margin-top: 9px">
             {{tips[index].text}}
           </div>
         </div>
-        <div class="modal-footer d-flex" :class="{ 'rtl' : isRTL}">
+        <div class="modal-footer d-flex">
           <button type="button" class="btn flex-fill" @click="back"><i class="bi-chevron-double-left"></i>
             {{$t('tips.back')}}
           </button>
@@ -71,10 +71,7 @@
                     {text: this.$i18n.t("tips.tip17")},
                     {text: this.$i18n.t("tips.tip18")},
                 ]
-            },
-            isRTL: function () {
-              return this.$i18n.locale === 'ar'
-            },
+            }
         }
     }
 </script>
@@ -87,9 +84,6 @@
   .modal-body {
     height: 100px;
   }
-  .modal-footer.rtl {
-    flex-direction: row-reverse;
-  }
   .modal-footer .btn {
     direction: ltr;
   }
@@ -99,9 +93,7 @@
     -webkit-text-fill-color: transparent;
     margin-right: 30px;
   }
-  .bi-info-circle.rtl {
-    margin-left: 30px;
-  }
+
   .dark-theme .bi-info-circle {
     background: -webkit-linear-gradient(180deg, rgb(115, 75, 176) 0%, rgb(147, 110, 203) 90%);
     -webkit-background-clip: text;

From 6b4436ba32810116e0982ccef86eb68e9ec8b4a8 Mon Sep 17 00:00:00 2001
From: Manuel Ernesto Garcia <merodriguez9112@gmail.com>
Date: Thu, 8 Feb 2024 23:18:52 -0500
Subject: [PATCH 9/9] moving styles to lang-rtl file

---
 src/App.vue                    |  4 +--
 src/assets/style/lang-rtl.scss | 47 ++++++++++++++++++++++------------
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a208af38..94ddf973 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -700,9 +700,7 @@ body {
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
 }
-.lang-rtl {
-  direction: rtl;
-}
+
 .dark-theme *::-webkit-scrollbar-thumb {
   background: #333940;
   border-radius: 5px;
diff --git a/src/assets/style/lang-rtl.scss b/src/assets/style/lang-rtl.scss
index 12da83ad..18da36ff 100644
--- a/src/assets/style/lang-rtl.scss
+++ b/src/assets/style/lang-rtl.scss
@@ -1,6 +1,19 @@
 .lang-rtl {
-  .todo-lists-container {
-    flex-direction: row-reverse;
+  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 {
@@ -29,22 +42,22 @@
     margin-left: 5px;
   }
 
-  #todo-item-active .time-details{
-    float: left;
-  }
+  // #todo-item-active .time-details{
+  //   float: left;
+  // }
 
-  .todo-item-sub-tasks .form-check-input {
-    margin-right: 0px;
-    margin-left: 8px;
-  }
+  // .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;
+  // .tasklists-menu .dropdown-item {
+  //   text-align: right;
+  //   padding: 0.4rem 0.65rem 0.4rem 1.9rem;
 
-    i {
-      margin-right: 0px;
-      margin-left: 11px;
-    }
-  }
+  //   i {
+  //     margin-right: 0px;
+  //     margin-left: 11px;
+  //   }
+  // }
 }