Merge pull request #37 from sk-ys/issue-19-support-rtl

Add RTL support (excluding Gantt chart)
sk-ys · Nov 4, 2024 · db319d7 · db319d7
2 parents e4b36d4 + 956fd66
commit db319d7
Show file tree

Hide file tree

Showing 12 changed files with 417 additions and 61 deletions.
diff --git a/app/views/enhanced_ux/calendars/_custom_calendar.html.erb b/app/views/enhanced_ux/calendars/_custom_calendar.html.erb
@@ -29,6 +29,8 @@
       ...(resourcesAll[document.documentElement.lang] || {}),
     };
 
+    const isRtl = $('head link[rel="stylesheet"][href*="/rtl"]').length > 0;
+
     const csrfToken = $('meta[name="csrf-token"]').attr("content");
 
     const homeUrl = $("link[href*='favicon.ico']")
@@ -406,7 +408,13 @@
             });
           }
           $("#countdown_timer .countdown_timer_label").text(
-            direction === "next" ? "⇨" : "⇦"
+            isRtl
+              ? direction === "next"
+                ? "⇦"
+                : "⇨"
+              : direction === "next"
+              ? "⇨"
+              : "⇦"
           );
           $("#countdown_timer").show();
           $(document).on("mousemove.countdown_timer", (e) => {
@@ -705,7 +713,7 @@
       background-repeat: no-repeat;
       padding-left: 20px;
       cursor: pointer;
-      margin-left: 10px;
+      margin: 0 10px;
       font-weight: normal;
     }
 
@@ -922,4 +930,25 @@
       }
     }
   }
+
+  /* Support RTL */
+  html[dir="rtl"],
+  html:has(head link[rel="stylesheet"][href*="/rtl"]) {
+    @media screen and (min-width: 900px) {
+      #content {
+        & > div.contextual {
+          left: 15px;
+          right: auto;
+        }
+      }
+    }
+    #dSwitchNext {
+      left: 0;
+      right: auto;
+    }
+    #dSwitchPrev {
+      left: auto;
+      right: 0;
+    }
+  }
 </style>
diff --git a/app/views/enhanced_ux/gantts/_custom_gantt_chart.html.erb b/app/views/enhanced_ux/gantts/_custom_gantt_chart.html.erb
@@ -3,6 +3,7 @@
 // Insertion position: Head of all pages
 // Type:               HTML
 // Comment:            Custom gantt chart
+// Note: RTL view is not supported.
   -->
 <script>
   var ajaxUpdateIssueList = false;
@@ -646,6 +647,7 @@
       // Create query form open button and append it to h2 tag.
       const $queryFormOpenButton = $("<a>")
         .attr("id", "query_form_open_button")
+        .addClass("icon")
         .text(resources.labelCriteria)
         .css({ backgroundImage: `url(${homeUrl}images/magnifier.png)` })
         .on("click", (e) => {
@@ -906,20 +908,24 @@
       display: none;
     }
 
-    .gantt_subjects > form {
-      .issue-subject img.gravatar.icon-gravatar {
-        vertical-align: top;
-      }
-      :where(.version-name, .project-name, .issue-subject)
-        > span:not(.expander) {
-        display: inline-block;
-        vertical-align: top;
-        padding-top: 0 !important;
-        padding-bottom: 0 !important;
-        height: 16px;
-        &:before {
+    .gantt_subjects {
+      width: 100%;
+
+      & > form {
+        .issue-subject img.gravatar.icon-gravatar {
           vertical-align: top;
         }
+        :where(.version-name, .project-name, .issue-subject)
+          > span:not(.expander) {
+          display: inline-block;
+          vertical-align: top;
+          padding-top: 0 !important;
+          padding-bottom: 0 !important;
+          height: 16px;
+          &:before {
+            vertical-align: top;
+          }
+        }
       }
     }
   }
@@ -993,12 +999,9 @@
     #query_form_open_button {
       display: inline;
       font-size: 0.6em;
-      background-position: left;
+      margin: 0 10px;
       background-repeat: no-repeat;
-      padding-left: 20px;
       cursor: pointer;
-      margin-left: 10px;
-      font-weight: normal;
     }
     #query_form {
       display: none;
@@ -1143,4 +1146,23 @@
       }
     }
   }
+
+  /* Support RTL */
+  html[dir="rtl"],
+  html:has(head link[rel="stylesheet"][href*="/rtl"]) {
+    @media screen and (min-width: 900px) {
+      #content {
+        & > div.contextual {
+          right: auto;
+          left: 16px;
+        }
+      }
+      @media (min-height: 400px) {
+        #content p.other-formats {
+          right: auto;
+          left: 20px;
+        }
+      }
+    }
+  }
 </style>
diff --git a/app/views/enhanced_ux/issues/_custom_issue.html.erb b/app/views/enhanced_ux/issues/_custom_issue.html.erb
@@ -86,7 +86,7 @@
       ...resourcesAll["en"],
       ...(resourcesAll[document.documentElement.lang] || {}),
     };
-
+    const isRtl = $('head link[rel="stylesheet"][href*="/rtl"]').length > 0;
     const isMac = navigator.platform.indexOf("Mac") !== -1;
     const issuePathname = location.pathname;
     const issueUrl = location.origin + location.pathname;
@@ -133,7 +133,7 @@
     const $issueContainer = $("<div>")
       .attr("id", "issue-container")
       .resizable({
-        handles: "e",
+        handles: isRtl ? "w" : "e",
         create: function () {
           $(this)
             .children(".ui-resizable-handle")
@@ -835,14 +835,14 @@
           $("#issue_tracker_id")
             .parent()
             .addClass("header_attribute")
-            .addClass("header_attribute_float-left")
+            .addClass("header_attribute_float-" + (isRtl ? "right" : "left"))
             .css({ clear: "none" })
         )
         .prepend(
           $("#issue_project_id")
             .parent()
             .addClass("header_attribute")
-            .addClass("header_attribute_float-left")
+            .addClass("header_attribute_float-" + (isRtl ? "right" : "left"))
         );
 
       $("#attributes").css("clear: both");
@@ -853,7 +853,7 @@
           $("#issue_subject")
             .parent()
             .addClass("header_attribute")
-            .addClass("header_attribute_float-left")
+            .addClass("header_attribute_float-" + (isRtl ? "right" : "left"))
         )
         .prepend(
           $("#issue_is_private")
@@ -1692,6 +1692,10 @@
       float: left;
     }
 
+    .header_attribute_float-right {
+      float: right;
+    }
+
     #parent_issue {
       clear: right;
       float: right;
@@ -1753,7 +1757,7 @@
           & > .tabs {
             flex: 0 0 auto;
           }
-          & > div.ui-resizable-handle.ui-resizable-e {
+          & > div.ui-resizable-handle {
             display: block;
           }
         }
@@ -1772,6 +1776,7 @@
 
         #history-container {
           margin-left: 10px;
+          margin-right: 10px;
           grid-area: history-container;
           min-width: 350px;
           width: calc(100% - 10px);
@@ -2306,4 +2311,36 @@
       margin-top: 0 !important;
     }
   }
+
+  /* Support RTL */
+  html[dir="rtl"],
+  html:has(head link[rel="stylesheet"][href*="/rtl"]) {
+    #switch-quicknotes2-position-button {
+      right: auto;
+      left: 0;
+    }
+    #notes-dialog .ui-dialog-titlebar-button-group {
+      right: auto;
+      left: 30px;
+    }
+    #issue-container {
+      left: 0 !important;
+    }
+    #issue_is_private_wrap {
+      margin-right: 0;
+      margin-left: 1em;
+      padding-right: 0;
+    }
+    @media screen and (max-width: 899px) {
+      #parent_issue {
+        float: right;
+      }
+    }
+    @media screen and (min-width: 900px) {
+      #parent_issue {
+        clear: left;
+        float: left;
+      }
+    }
+  }
 </style>
diff --git a/app/views/enhanced_ux/issues/_custom_issue_list.html.erb b/app/views/enhanced_ux/issues/_custom_issue_list.html.erb
@@ -295,6 +295,7 @@
     function setUpQueryForm() {
       const $queryFormOpenButton = $("<a>")
         .attr("id", "query_form_open_button")
+        .addClass("icon")
         .text(resources.labelCriteria)
         .css({ backgroundImage: `url(${homeUrl}images/magnifier.png)` })
         .on("click", (e) => {
@@ -500,10 +501,8 @@
     #query_form_open_button {
       display: inline;
       font-size: 0.6em;
-      margin-left: 20px;
-      background-position: left;
+      margin: 0 10px;
       background-repeat: no-repeat;
-      padding-left: 20px;
       cursor: pointer;
     }
 
@@ -689,4 +688,43 @@
       align-items: start;
     }
   }
+
+  /* Support RTL */
+  html[dir="rtl"],
+  html:has(head link[rel="stylesheet"][href*="/rtl"]) {
+    @media screen and (min-width: 900px) {
+      #content {
+        & > div.contextual {
+          left: 15px;
+          right: auto;
+        }
+        table.list.issues {
+          & > thead > tr {
+            & > th {
+              & > span.icon-close {
+                right: auto;
+                left: 0;
+                padding-right: 14px;
+                padding-left: 0;
+              }
+            }
+            &:hover th[style*="width"]:not(.buttons)::after {
+              left: auto;
+              right: 5px;
+            }
+          }
+        }
+      }
+    }
+    body.theme-Bleuclair {
+      @media screen and (min-width: 900px) {
+        #content
+          > #sidebar-switch-panel:not([style*="display: none;"])
+          + div.contextual {
+          left: 45px;
+          right: auto;
+        }
+      }
+    }
+  }
 </style>
diff --git a/app/views/enhanced_ux/layouts/_compact_notice_bar.html.erb b/app/views/enhanced_ux/layouts/_compact_notice_bar.html.erb
@@ -131,7 +131,9 @@
     float: right;
     cursor: pointer;
     margin-left: 0.5em;
-    width: 2em;
+    margin-right: 0.5em;
+    width: 16px;
+    height: 16px;
   }
   #flash_notice.notice.fadeout_notice {
     animation-name: fade_out_notice;
@@ -174,4 +176,21 @@
       }
     }
   }
+
+  /* Support RTL */
+  html[dir="rtl"],
+  html:has(head link[rel="stylesheet"][href*="/rtl"]) {
+    div.flash.notice {
+      background-color: #dfffdf;
+    }
+    .flash_notice_close_button {
+      float: left;
+    }
+    @media (min-width: 900px) {
+      #flash_notice {
+        left: auto;
+        right: 20px;
+      }
+    }
+  }
 </style>