fix: arabic UI improvements

client/components/admin/admin-dashboard.vue

@@ -177,6 +177,11 @@ export default {
   top: 12px;
   font-size: 100px !important;
   opacity: .25;
+
+  @at-root .v-application--is-rtl & {
+    left: 0;
+    right: initial;
+  }
 }
 
 </style>

client/components/admin/admin-locale.vue

@@ -114,7 +114,7 @@
                   template(v-slot:item.availability='{ item }')
                     .d-flex.align-center.pl-4
                       v-progress-circular(:value='item.availability', width='2', size='20', :color='item.availability <= 33 ? `red` : (item.availability <= 66) ? `orange` : `green`')
-                      .caption.ml-2(:class='item.availability <= 33 ? `red--text` : (item.availability <= 66) ? `orange--text` : `green--text`') {{item.availability}}%
+                      .caption.mx-2(:class='item.availability <= 33 ? `red--text` : (item.availability <= 66) ? `orange--text` : `green--text`') {{item.availability}}%
                   template(v-slot:item.isInstalled='{ item }')
                     v-progress-circular(v-if='item.isDownloading', indeterminate, color='blue', size='20', :width='2')
                     v-btn(v-else-if='item.isInstalled && item.installDate < item.updatedAt', icon, small, @click='download(item)')
@@ -257,7 +257,7 @@ export default {
 
         _.delay(() => {
           window.location.reload(true)
-        }, 1500)
+        }, 1000)
       } else {
         this.$store.commit('showNotification', {
           message: `Error: ${resp.message}`,

client/components/common/nav-header.vue

@@ -161,11 +161,11 @@
                 template(v-slot:activator='{ on: tooltip }')
                   v-btn(icon, v-on='{ ...menu, ...tooltip }', :class='$vuetify.rtl ? `ml-0` : ``')
                     v-icon(v-if='picture.kind === `initials`', color='grey') mdi-account-circle
-                    v-avatar(v-else-if='picture.kind === `image`', :size='29')
+                    v-avatar(v-else-if='picture.kind === `image`', :size='34')
                       v-img(:src='picture.url')
                 span {{$t('common:header.account')}}
             v-list.py-0
-              v-list-item.py-3.grey(avatar, :class='$vuetify.theme.dark ? `darken-4-l5` : `lighten-5`')
+              v-list-item.py-3.grey(:class='$vuetify.theme.dark ? `darken-4-l5` : `lighten-5`')
                 v-list-item-avatar
                   v-avatar.blue(v-if='picture.kind === `initials`', :size='40')
                     span.white--text.subheading {{picture.initials}}
@@ -189,7 +189,7 @@
 
           v-tooltip(v-else, left)
             template(v-slot:activator='{ on }')
-              v-btn(icon, v-on='on', outlined, color='grey darken-3', href='/login')
+              v-btn(icon, v-on='on', color='grey darken-3', href='/login')
                 v-icon(color='grey') mdi-account-circle
             span {{$t('common:header.login')}}
 
@@ -378,7 +378,7 @@ export default {
     right: 12px;
     border-radius: 4px !important;
 
-    @at-root .application--is-rtl & {
+    @at-root .v-application--is-rtl & {
       right: initial;
       left: 12px;
     }

client/scss/fonts/arabic.scss

@@ -22,6 +22,14 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'BalooBhaijaan';
+  src: url('/fonts/arabic/BalooBhaijaan-Regular.woff2') format('woff2'),
+      url('/fonts/arabic/BalooBhaijaan-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
 @font-face {
   font-family: 'Roboto Mono';
   src: url('/fonts/arabic/RobotoMono-Regular.woff2') format('woff2'),
@@ -39,5 +47,12 @@ html:lang(ar), html:lang(fa) {
     & .headline, & .title {
       font-family: Tajawal, sans-serif !important;
     }
+
+    &.v-application--is-rtl {
+      h1, h2, h3, h4, h5, h6 {
+        font-family: BalooBhaijaan, sans-serif;
+        font-weight: normal;
+      }
+    }
   }
 }

client/themes/default/components/page.vue

@@ -61,13 +61,13 @@
               v-list.pb-3(dense, nav, :class='darkMode ? `darken-3-d3` : ``')
                 template(v-for='(tocItem, tocIdx) in toc')
                   v-list-item(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
-                    v-icon(color='grey', small) mdi-chevron-right
-                    v-list-item-title.pl-3 {{tocItem.title}}
+                    v-icon(color='grey', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
+                    v-list-item-title.px-3 {{tocItem.title}}
                   //- v-divider(v-if='tocIdx < toc.length - 1 || tocItem.children.length')
                   template(v-for='tocSubItem in tocItem.children')
                     v-list-item(@click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)')
-                      v-icon.pl-3(color='grey lighten-1', small) mdi-chevron-right
-                      v-list-item-title.pl-3.caption.grey--text(:class='darkMode ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}}
+                      v-icon.px-3(color='grey lighten-1', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
+                      v-list-item-title.px-3.caption.grey--text(:class='darkMode ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}}
                     //- v-divider(inset, v-if='tocIdx < toc.length - 1')
 
             v-card.mt-5
@@ -126,9 +126,19 @@
                 v-spacer
 
           v-flex.page-col-content(xs12, lg9, xl10)
-            v-tooltip(left, v-if='isAuthenticated')
+            v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='isAuthenticated')
               template(v-slot:activator='{ on }')
-                v-btn.btn-animate-edit(fab, bottom, right, color='primary', fixed, dark, :href='"/e/" + locale + "/" + path', v-on='on')
+                v-btn.btn-animate-edit(
+                  fab
+                  bottom
+                  :right='!$vuetify.rtl'
+                  :left='$vuetify.rtl'
+                  color='primary'
+                  fixed
+                  dark
+                  :href='"/e/" + locale + "/" + path'
+                  v-on='on'
+                  )
                   v-icon mdi-pencil
               span {{$t('common:page.editPage')}}
             .contents(ref='container')