Enable RTL layouts

enferno/admin/templates/admin/actor-fields.html

@@ -20,7 +20,7 @@
 <!-- Revision history sidebar -->
 <v-navigation-drawer
   v-model="formBuilder.showRevisions"
-  location="right"
+  location="end"
   temporary
   width="630"
   clipped

enferno/admin/templates/admin/actors.html

@@ -40,8 +40,8 @@
                             v-bind="props"
                             v-if="showMapVisualize"
                             variant="elevated"
-                            class="mb-5 mr-5 position-absolute"
-                            style="right: 30px; bottom: 150px; z-index: 1000;"
+                            class="mb-5 me-5 position-absolute"
+                            style="inset-inline-end: 30px; bottom: 150px; z-index: 1000;"
                     ></v-btn>
                 </template>
             </v-tooltip>
@@ -55,8 +55,8 @@
                             v-if="showVisualize"
                             :loading="visualizeLoading"
                             variant="elevated"
-                            class="mb-5 mr-5 position-absolute "
-                            style="right: 30px; bottom: 90px; z-index: 1000;"
+                            class="mb-5 me-5 position-absolute "
+                            style="inset-inline-end: 30px; bottom: 90px; z-index: 1000;"
                             icon="mdi-graph"
                     >
 

enferno/admin/templates/admin/bulletin-fields.html

@@ -20,7 +20,7 @@
 <!-- Revision history sidebar -->
 <v-navigation-drawer
   v-model="formBuilder.showRevisions"
-  location="right"
+  location="end"
   temporary
   width="630"
   clipped

enferno/admin/templates/admin/bulletins.html

@@ -32,8 +32,8 @@
                             v-if="showVisualize"
                             :loading="visualizeLoading"
                             variant="elevated"
-                            class="mb-5 mr-5 position-absolute"
-                            style="right: 30px; bottom: 90px; z-index: 1000;"
+                            class="mb-5 me-5 position-absolute"
+                            style="inset-inline-end: 30px; bottom: 90px; z-index: 1000;"
                     ></v-btn>
                 </template>
             </v-tooltip>
@@ -108,11 +108,11 @@
                                             @click="webImportDlg = true"
                                             color="primary"
                                             variant="elevated"
+                                            prepend-icon="mdi-web"
                                             class="ma-2"
                                     >
-                                        <v-icon left>mdi-web</v-icon>
-                                            {{ _('Import from Web') }}
-                                        </v-btn>
+                                        {{ _('Import from Web') }}
+                                    </v-btn>
                                     {% endif %}
                                 {% endif %}
                                 {% include'admin/partials/bulletin_dialog.html' %}
@@ -489,7 +489,7 @@
                         'content-props': {
                             style: { width: '60%' },
                         },
-                        'content-class': 'absolute left-0',
+                        'content-class': 'absolute inset-inline-start-0',
                         fullscreen: true,
                         persistent: true,
                         'no-click-animation': true,
@@ -500,7 +500,7 @@
                         'content-props': {
                             style: { width: '60%', contain: 'none' },
                         },
-                        'content-class': 'absolute right-0 left-auto',
+                        'content-class': 'absolute inset-inline-end-0',
                         fullscreen: true,
                         persistent: true,
                         'no-click-animation': true,

enferno/admin/templates/admin/incident-fields.html

@@ -20,7 +20,7 @@
 <!-- Revision history sidebar -->
 <v-navigation-drawer
   v-model="formBuilder.showRevisions"
-  location="right"
+  location="end"
   temporary
   width="630"
   clipped

enferno/admin/templates/admin/incidents.html

@@ -21,8 +21,8 @@
                             @click.stop="visualizeResults"
                             v-if="showVisualize"
                             :loading="visualizeLoading"
-                            class="mb-5 mr-5 position-absolute "
-                            style="right: 30px; bottom: 90px; z-index: 1000;"
+                            class="mb-5 me-5 position-absolute "
+                            style="inset-inline-end: 30px; bottom: 90px; z-index: 1000;"
                             icon="mdi-graph"
                     >
 

enferno/admin/templates/admin/labels.html

@@ -78,7 +78,7 @@
                                         </template>
 
                                         <template v-slot:item.action="{ item }">
-                                            <v-btn icon="mdi-pencil" density="compact" class="mr-2" @click="editItem(item)"></v-btn>
+                                            <v-btn icon="mdi-pencil" density="compact" class="me-2" @click="editItem(item)"></v-btn>
                                             <v-btn icon="mdi-delete-sweep" density="compact" @click="deleteItem(item)"></v-btn>
                                         </template>
 
@@ -100,12 +100,14 @@
                                                 <v-icon size="small">${ item.for_bulletin || item.for_actor || item.for_incident || item.for_offline ? 'mdi-label' : 'mdi-folder-outline' }</v-icon>
                                             </template>
                                             <template v-slot:append="{ item }">
-                                                <v-chip v-if="item.for_bulletin" size="default" class="mr-2">&nbsp;B&nbsp;</v-chip>
-                                                <v-chip v-if="item.for_actor" size="default" class="mr-2">&nbsp;A&nbsp;</v-chip>
-                                                <v-chip v-if="item.for_incident" size="default" class="mr-2">&nbsp;I&nbsp;</v-chip>
-                                                <v-chip v-if="item.for_offline" size="default" class="mr-2">&nbsp;O&nbsp;</v-chip>
-                                                <v-icon class="ml-4" @click="editItem(item)">mdi-pencil</v-icon>
-                                                <v-icon class="ml-4 mr-10" @click="deleteItem(item)">mdi-delete-sweep</v-icon>
+                                                <div class="d-flex align-center ga-2">
+                                                    <v-chip v-if="item.for_bulletin" size="default">B</v-chip>
+                                                    <v-chip v-if="item.for_actor" size="default">A</v-chip>
+                                                    <v-chip v-if="item.for_incident" size="default">I</v-chip>
+                                                    <v-chip v-if="item.for_offline" size="default">O</v-chip>
+                                                    <v-icon class="ms-2" @click="editItem(item)">mdi-pencil</v-icon>
+                                                    <v-icon class="me-10" @click="deleteItem(item)">mdi-delete-sweep</v-icon>
+                                                </div>
                                             </template>
                                         </v-treeview>
                                         <div v-else-if="treeLoading" class="text-center pa-4">

enferno/admin/templates/admin/partials/actor_drawer.html

@@ -2,7 +2,7 @@
       v-model="actorDrawer"
       absolute
       floating
-      location="right"
+      location="end"
       temporary
       :width="actorDrawerSettings?.width ?? 520"
       app
@@ -18,4 +18,4 @@
       <actor-card v-if="actorDrawer && actor" :close-icon="actorDrawerSettings?.closeIcon" :hide-map="actorDrawerSettings?.hideMap" :close-position="actorDrawerSettings?.closePosition" :show-edit="true" :close="true" @edit="editItem" :active="actorDrawer" :log="true" :diff="true" :key="actor.id" @close="closeActorDrawer()" :actor="actor"></actor-card>
       <preview-card ref="prev" :item="pitem" v-model="preview"></preview-card>
       <visualization ref="viz" @error="showSnack($event)"></visualization>
-    </v-navigation-drawer>  
+    </v-navigation-drawer>

enferno/admin/templates/admin/partials/bulk_actor_drawer.html

@@ -1,7 +1,7 @@
 <v-navigation-drawer
         v-model="bulkActorDrawer"
         clipped
-        location="right"
+        location="end"
         temporary
         width="440"
 >

enferno/admin/templates/admin/partials/bulk_bulletin_drawer.html

@@ -1,7 +1,7 @@
 <v-navigation-drawer
         v-model="bulkBulletinDrawer"
         clipped
-        location="right"
+        location="end"
         temporary
         width="440"
 

enferno/admin/templates/admin/partials/bulk_incident_drawer.html

@@ -1,7 +1,7 @@
 <v-navigation-drawer
         v-model="bulkIncidentDrawer"
        clipped
-        location="right"
+        location="end"
         temporary
         width="440"
 >

enferno/admin/templates/admin/partials/bulletin_drawer.html

@@ -2,7 +2,7 @@
         v-model="bulletinDrawer"
         clipped
         fixed
-        location="right"
+        location="end"
         temporary
         width="520"
         app
@@ -24,4 +24,4 @@
                    :bulletin="bulletin"></bulletin-card>
     <preview-card ref="prev" :item="pitem" v-model="preview" :dialog-props="dialog ? rightDialogProps : null"></preview-card>
     <visualization ref="viz" @error="showSnack($event)"></visualization>
-</v-navigation-drawer>
+</v-navigation-drawer>

enferno/admin/templates/admin/partials/export_drawer.html

@@ -1,7 +1,7 @@
 <v-navigation-drawer
         v-model="exportDrawer"
         fixed
-        location="right"
+        location="end"
         temporary
         width="440"
         app
@@ -67,4 +67,4 @@
         </v-card-actions>
     </v-card>
 
-</v-navigation-drawer>
+</v-navigation-drawer>

enferno/admin/templates/admin/partials/incident_drawer.html

@@ -2,7 +2,7 @@
       v-model="incidentDrawer"
       clipped
       fixed
-      location="right"
+      location="end"
       temporary
       width="520"
       app
@@ -18,4 +18,4 @@
       <incident-card v-if="incidentDrawer && incident" :show-edit="true" :close="true" @edit="editItem" :log="true" :diff="true" @close="incidentDrawer=false" :incident="incident"></incident-card>
       <preview-card ref="prev" :item="pitem" v-model="preview"></preview-card>
     <visualization ref="viz" @error="showSnack($event)"></visualization>
-    </v-navigation-drawer>  
+    </v-navigation-drawer>

enferno/admin/templates/admin/partials/location_drawer.html

@@ -2,7 +2,7 @@
       v-model="locationDrawer"
       clipped
       fixed
-      location="right"
+      location="end"
       temporary
       width="520"
       app
@@ -18,4 +18,4 @@
 
 
        <location-card :close="true" v-if="locationDrawer && location" :show-edit="true" @edit="editItem" :log="true" @close="locationDrawer=false" :location="location"></location-card>
-    </v-navigation-drawer>  
+    </v-navigation-drawer>

enferno/admin/templates/admin/partials/user_drawer.html

@@ -1,6 +1,6 @@
 <v-navigation-drawer
     v-model="userDrawer"
-    location="right"
+    location="end"
     temporary
     width="880"
     disable-route-watcher
@@ -18,4 +18,4 @@
         ></user-card>
     </v-card>
 
-</v-navigation-drawer>
+</v-navigation-drawer>

enferno/admin/templates/admin/system-administration.html

@@ -1041,7 +1041,7 @@ <h4 class="subtitle-2 mb-n1">{{ _('Enable Mail System') }}</h4>
     <!-- Revision history sidebar -->
     <v-navigation-drawer
             v-model="showRevisions"
-            location="right"
+            location="end"
             temporary
             width="630"
             clipped

enferno/admin/templates/nav-bar.html

@@ -1,41 +1,39 @@
 <v-app-bar color="primary">
   <template v-slot:prepend>
     <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+    <a href="/" class="d-inline-flex align-center ms-2">
+      <img src="/static/img/bayanat-h-w-v2.svg?v={{ config.VERSION }}" class="d-block" height="42" loading="lazy" />
+    </a>
   </template>
 
-  <v-toolbar-title class="ml-0 pl-2 flex-fill">
-    <a href="/">
-      <img src="/static/img/bayanat-h-w-v2.svg?v={{ config.VERSION }}" class="mt-1" height="42" cover loading="lazy" />
-    </a>
-  </v-toolbar-title>
   <v-spacer></v-spacer>
 
   <template v-slot:append>
     <update-banner></update-banner>
     {% if config.OCR_PROVIDER == 'google_vision' %}
     <v-tooltip location="bottom">
       <template v-slot:activator="{ props }">
-        <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-google" size="small" class="mr-2" href="/admin/media/">Vision API</v-chip>
+        <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-google" size="small" class="me-2" href="/admin/media/">Vision API</v-chip>
       </template>
       {{ _('OCR powered by Google Vision') }}
     </v-tooltip>
     {% elif config.OCR_PROVIDER %}
     <v-tooltip location="bottom">
       <template v-slot:activator="{ props }">
-        <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-creation" size="small" class="mr-2" href="/admin/media/">AI Powered</v-chip>
+        <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-creation" size="small" class="me-2" href="/admin/media/">AI Powered</v-chip>
       </template>
       {{ _('OCR powered by AI') }}
     </v-tooltip>
     {% endif %}
 
     <v-tooltip location="bottom">
       <template v-slot:activator="{ props }">
-        <v-btn id="menu-activator" v-bind="props" icon="mdi-translate"></v-btn>
+        <v-btn id="language-menu-activator" v-bind="props" icon="mdi-translate"></v-btn>
       </template>
         {{ _('Interface Language') }}
     </v-tooltip>
 
-    <v-menu activator="#menu-activator">
+    <v-menu activator="#language-menu-activator" :z-index="3004">
       <v-list color="primary">
         <v-list-subheader>{{ _('Translations')}}</v-list-subheader>
         <v-list-item

enferno/app.py

@@ -1,6 +1,7 @@
 # -*- coding: utf-8 -*-
 
 import pandas as pd
+from babel import Locale
 from urllib.parse import urlparse
 from flask import Flask, render_template, current_app, request
 from flask_login import user_logged_in, user_logged_out
@@ -107,12 +108,28 @@ def create_app(config_object=Config):
     register_constants(app)
     register_blueprints(app)
     register_extensions(app)
+    register_template_context(app)
     register_shellcontext(app)
     register_commands(app)
     register_signals(app)
     return app
 
 
+def register_template_context(app):
+    @app.context_processor
+    def locale_context():
+        locale = str(get_locale())
+        direction = (
+            "rtl"
+            if Locale.parse(locale.replace("-", "_")).character_order == "right-to-left"
+            else "ltr"
+        )
+        return {
+            "current_language": locale.replace("_", "-"),
+            "current_direction": direction,
+        }
+
+
 def register_extensions(app):
     """
     Register Flask extensions.

enferno/export/templates/export_drawer.html

@@ -2,7 +2,7 @@
       v-model="exportDrawer"
       clipped
       fixed
-      location="right"
+      location="end"
       temporary
       width="520"
       app
@@ -25,4 +25,4 @@
                  :exp="eitem"></export-card>
 
   </div>
-    </v-navigation-drawer>
+    </v-navigation-drawer>

enferno/static/css/app.css

@@ -305,6 +305,10 @@ button.swh {
     float: right;
 }
 
+[dir="rtl"] .vue-query-builder button.pull-right {
+    float: left;
+}
+
 
 .smaller {
     transform: scale(0.9);
@@ -863,7 +867,8 @@ div.jsondiffpatch-child-node-type-array:after {
 .overflow-unset { overflow: var(--v-overflow-unset); }
 .z-1 { z-index: var(--v-z-1); }
 .z-100 { z-index: var(--v-z-100); }
-.left-auto { left: var(--v-left-auto) !important; }
+.inset-inline-start-0 { inset-inline-start: 0 !important; }
+.inset-inline-end-0 { inset-inline-end: 0 !important; }
 .h-fit { height: var(--v-h-fit); }
 .pointer-events-none { pointer-events: var(--v-pointer-events-none) !important; }
 .pointer-events-auto { pointer-events: var(--v-pointer-events-auto) !important; }