Fix RTL design in the simple menu bar

sk-ys · Nov 3, 2024 · 6616fc7 · 6616fc7
1 parent 007f548
commit 6616fc7
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 16 deletions.
diff --git a/app/views/enhanced_ux/layouts/_simple_menu_bar.html.erb b/app/views/enhanced_ux/layouts/_simple_menu_bar.html.erb
@@ -18,22 +18,25 @@
   window.addEventListener("DOMContentLoaded", () => {
     // ----- i18n -----
     const lang = document.documentElement.lang;
+    const resourcesAll = {
+      en: {
+        menu: "Menu",
+        sideMenu: "Side menu",
+        showHeader: "Show Header",
+        hideHeader: "Hide Header",
+      },
+      ja: {
+        menu: "メニュー",
+        sideMenu: "サイドメニュー",
+        showHeader: "ヘッダーを表示",
+        hideHeader: "ヘッダーを非表示",
+      },
+    };
     const resources = {
-      menu: "Menu",
-      sideMenu: "Side menu",
-      showHeader: "Show Header",
-      hideHeader: "Hide Header",
-      search: "Search",
+      ...resourcesAll["en"],
+      ...(resourcesAll[document.documentElement.lang] || {}),
     };
 
-    if (lang === "ja") {
-      resources.menu = "メニュー";
-      resources.sideMenu = "サイドメニュー";
-      resources.showHeader = "ヘッダーを表示";
-      resources.hideHeader = "ヘッダーを非表示";
-      resources.search = "検索";
-    }
-
     // ----- Define variables -----
     const $header = $("#header");
     const $topMenu = $("#top-menu");
@@ -53,6 +56,7 @@
       .filter((i) => i.match(/^project-/))[0]
       ?.match(/^project-(.+)/)[1];
     const syncHeaderVisibilityItems = [];
+    const searchLabel = $("#quick-search form label[for=q] > a").text();
 
     if ($adminMenu.length > 0) {
       $topMenu.addClass("has-admin-menu");
@@ -295,7 +299,7 @@
         .attr("id", "simple-search-menu")
         .css("cursor", "pointer")
         .addClass("simple-menu")
-        .text(resources.search);
+        .text(searchLabel);
 
       const $simpleSearchForm = $("#quick-search>form").clone();
       if ($simpleSearchForm.length === 0) return;
@@ -381,8 +385,6 @@
         .css({
           cursor: "pointer",
           backgroundImage: "url(" + homePath + "images/arrow_down.png)",
-          paddingLeft: "16px",
-          height: "16px",
         })
         .addClass("icon icon-only");
       $topMenu.children("ul").append($("<li />").append($btn));
@@ -731,4 +733,22 @@
     content: "\f0c0";
     font-family: Font Awesome\5 Solid;
   }
+
+  /* Support RTL */
+  html[dir="rtl"],
+  html:has(head link[rel="stylesheet"][href*="/rtl"]) {
+    #top-menu {
+      & .simple-menu {
+        & + .ui-menu {
+          & .ui-menu-item {
+            & > a {
+              padding-left: 0;
+              padding-right: calc(20px + 2px);
+            }
+          }
+        }
+      }
+    }
+    /* TODO: Position the submenu to the left */
+  }
 </style>
diff --git a/assets/stylesheets/global/fixes_for_rtl_design.css b/assets/stylesheets/global/fixes_for_rtl_design.css
@@ -70,6 +70,9 @@ html:has(head link[rel="stylesheet"][href*="/rtl"]) {
       margin-right: 0;
       text-align: right;
     }
+    #header {
+      padding: 0;
+    }
   }
   .ui-dialog .ui-dialog-title {
     float: right;