RTL languages video transcripts handling and element positioning corr…

…ected
LianaHarris360 · Jan 6, 2023 · 645e5bb · 645e5bb
1 parent ca39e6d
commit 645e5bb
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 29 deletions.
diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue
@@ -357,8 +357,11 @@
     position: fixed;
     right: 8px;
     z-index: 8;
+    [dir='rtl'] & {
+      right: auto;
+      left: 8px;
+    }
   }
-
   .role {
     margin-bottom: 8px;
     font-size: small;
@@ -385,7 +388,6 @@
   /deep/ .ui-toolbar__title {
     margin-right: 10px;
   }
-
   .brand-logo {
     max-width: 48px;
     max-height: 48px;

diff --git a/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue b/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue
@@ -115,4 +115,10 @@
     }
   }
 
+  .core-menu-option /deep/ .icon {
+    [dir='rtl'] & {
+      left: auto;
+    }
+  }
+
 </style>
diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
@@ -328,6 +328,7 @@
     position: fixed;
     top: 0;
     bottom: 0;
+    left: 0;
     z-index: 16;
   }
 

diff --git a/kolibri/core/kolibri_plugin.py b/kolibri/core/kolibri_plugin.py
@@ -147,7 +147,7 @@ def language_globals(self):
                 "english_name": lang_info["english_name"]
                 if lang_info
                 else get_language_info(code)["name"],
-                "lang_direction": get_language_info(code)["bidi"],
+                "lang_direction": "rtl" if get_language_info(code)["bidi"] else "ltr",
             }
         return {
             "coreLanguageMessages": self.frontend_messages(),

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
@@ -196,7 +196,10 @@
 
   .message {
     display: inline-block;
-    margin: 0 16px;
+    margin-right: 16px;
+    [dir='rtl'] & {
+      margin: 0 16px;
+    }
   }
 
 </style>
diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/ContentNodeRow.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/ContentNodeRow.vue
@@ -12,7 +12,7 @@
       />
     </td>
 
-    <td class="title" :class="isRTL">
+    <td class="title">
       <KLabeledIcon>
         <template #icon>
           <ContentIcon :kind="node.kind" />
@@ -99,9 +99,6 @@
       importing() {
         return this.node.updated_resource && !this.node.available;
       },
-      isRTL() {
-        return document.getElementsByTagName('html')[0].getAttribute('dir') === 'rtl' ? 'rtl' : {};
-      },
     },
   };
 
@@ -129,8 +126,10 @@
     margin-left: 24px;
   }
 
-  /deep/ .title.rtl .icon {
-    left: auto;
+  .title /deep/ .icon {
+    [dir='rtl'] & {
+      left: auto;
+    }
   }
 
 </style>
diff --git a/kolibri/plugins/facility/assets/src/views/SelectionBottomBar.vue b/kolibri/plugins/facility/assets/src/views/SelectionBottomBar.vue
@@ -68,7 +68,10 @@
 
   .message {
     display: inline-block;
-    margin: 0 16px;
+    margin-right: 16px;
+    [dir='rtl'] & {
+      margin: 0 16px;
+    }
   }
 
 </style>
diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <UiToolbar style="z-index: 8;" :style="contentSpecificStyles" class="toolbar" :class="isRTL">
+  <UiToolbar style="z-index: 8;" :style="contentSpecificStyles" class="toolbar">
     <CoachContentLabel
       :value="isCoachContent"
       style="margin-top: 8px; width: auto;"
@@ -293,9 +293,6 @@
           return {};
         }
       },
-      isRTL() {
-        return document.getElementsByTagName('html')[0].getAttribute('dir') === 'rtl' ? 'rtl' : {};
-      },
     },
     created() {
       window.addEventListener('click', this.onWindowClick);
@@ -394,14 +391,14 @@
   }
 
   /*
-      Make truncation via text ellipsis work well in UIToolbar's body flex item:
-      By default, `min-width` is `auto`  for a flex item which means it
-      cannot be smaller than the size of its content which causes the whole
-      title being visible even in cases when it should be already truncated.
-      Overriding it to `0` allows the title to be shrinked and then truncated
-      properly. Labeled icon wrapper needs to have this set too for its parent
-      flex item to shrink.
-    */
+              Make truncation via text ellipsis work well in UIToolbar's body flex item:
+              By default, `min-width` is `auto`  for a flex item which means it
+              cannot be smaller than the size of its content which causes the whole
+              title being visible even in cases when it should be already truncated.
+              Overriding it to `0` allows the title to be shrinked and then truncated
+              properly. Labeled icon wrapper needs to have this set too for its parent
+              flex item to shrink.
+            */
   /deep/ .ui-toolbar__body,
   /deep/ .labeled-icon-wrapper {
     min-width: 0;
@@ -421,9 +418,10 @@
       height: 18px;
     }
   }
-
-  /deep/ .toolbar.rtl .icon {
-    right: 0.625rem;
+  .toolbar /deep/ .icon {
+    [dir='rtl'] & {
+      right: 0.625rem;
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage.vue
@@ -379,9 +379,7 @@
         return this.searchTerms.categories;
       },
       gridOffset() {
-        return this.isRtl
-          ? { marginRight: `${this.sidePanelWidth + 24}px` }
-          : { marginLeft: `${this.sidePanelWidth + 24}px` };
+        return { marginLeft: `${this.sidePanelWidth + 24}px` };
       },
     },
     watch: {