Skip to content

Commit 8bf9544

Browse files
authored
Improved right-to-left support (#7227)
2 parents c64e695 + 4ea2fdf commit 8bf9544

File tree

96 files changed

+635
-483
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

96 files changed

+635
-483
lines changed

apps/client/src/desktop.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { t } from "./services/i18n.js";
1010
import options from "./services/options.js";
1111
import type ElectronRemote from "@electron/remote";
1212
import type Electron from "electron";
13-
import "bootstrap/dist/css/bootstrap.min.css";
1413
import "boxicons/css/boxicons.min.css";
1514
import "autocomplete.js/index_jquery.js";
1615

apps/client/src/layouts/mobile_layout.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ kbd {
4040
border: none;
4141
cursor: pointer;
4242
font-size: 1.25em;
43-
padding-left: 0.5em;
44-
padding-right: 0.5em;
43+
padding-inline-start: 0.5em;
44+
padding-inline-end: 0.5em;
4545
color: var(--main-text-color);
4646
}
4747
.quick-search {
@@ -59,7 +59,7 @@ const FANCYTREE_CSS = `
5959
margin-top: 0px;
6060
overflow-y: auto;
6161
contain: content;
62-
padding-left: 10px;
62+
padding-inline-start: 10px;
6363
}
6464
6565
.fancytree-custom-icon {
@@ -68,7 +68,7 @@ const FANCYTREE_CSS = `
6868
6969
.fancytree-title {
7070
font-size: 1.5em;
71-
margin-left: 0.6em !important;
71+
margin-inline-start: 0.6em !important;
7272
}
7373
7474
.fancytree-node {
@@ -81,7 +81,7 @@ const FANCYTREE_CSS = `
8181
8282
span.fancytree-expander {
8383
width: 24px !important;
84-
margin-right: 5px;
84+
margin-inline-end: 5px;
8585
}
8686
8787
.fancytree-loading span.fancytree-expander {
@@ -101,7 +101,7 @@ span.fancytree-expander {
101101
.tree-wrapper .scroll-to-active-note-button,
102102
.tree-wrapper .tree-settings-button {
103103
position: fixed;
104-
margin-right: 16px;
104+
margin-inline-end: 16px;
105105
display: none;
106106
}
107107
@@ -126,8 +126,8 @@ export default class MobileLayout {
126126
.class("d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-3 col-xl-3")
127127
.id("mobile-sidebar-wrapper")
128128
.css("max-height", "100%")
129-
.css("padding-left", "0")
130-
.css("padding-right", "0")
129+
.css("padding-inline-start", "0")
130+
.css("padding-inline-end", "0")
131131
.css("contain", "content")
132132
.child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))
133133
)

apps/client/src/login.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import "bootstrap/dist/css/bootstrap.min.css";
2-
31
// @ts-ignore - module = undefined
42
// Required for correct loading of scripts in Electron
53
if (typeof module === 'object') {window.module = module; module = undefined;}

apps/client/src/menus/context_menu.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,8 @@ class ContextMenu {
150150
this.$widget
151151
.css({
152152
display: "block",
153-
top: top,
154-
left: left
153+
top,
154+
left
155155
})
156156
.addClass("show");
157157
}
@@ -187,7 +187,7 @@ class ContextMenu {
187187
}
188188

189189
// Create a new group to avoid column breaks before and after the seaparator / header.
190-
// This is a workaround for Firefox not supporting break-before / break-after: avoid
190+
// This is a workaround for Firefox not supporting break-before / break-after: avoid
191191
// for columns.
192192
if (shouldStartNewGroup) {
193193
$group = $("<div class='dropdown-no-break'>");
@@ -313,7 +313,7 @@ class ContextMenu {
313313
}
314314

315315
$group.append($item);
316-
316+
317317
// After adding a menu item, if the previous item was a separator or header,
318318
// reset the group so that the next item will be appended directly to the parent.
319319
if (shouldResetGroup) {

apps/client/src/mobile.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import appContext from "./components/app_context.js";
22
import noteAutocompleteService from "./services/note_autocomplete.js";
33
import glob from "./services/glob.js";
4-
import "bootstrap/dist/css/bootstrap.min.css";
54
import "boxicons/css/boxicons.min.css";
65
import "autocomplete.js/index_jquery.js";
76

apps/client/src/runtime.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
import $ from "jquery";
2+
3+
async function loadBootstrap() {
4+
if (document.body.dir === "rtl") {
5+
await import("bootstrap/dist/css/bootstrap.rtl.min.css");
6+
} else {
7+
await import("bootstrap/dist/css/bootstrap.min.css");
8+
}
9+
}
10+
211
(window as any).$ = $;
312
(window as any).jQuery = $;
13+
await loadBootstrap();
414

515
$("body").show();

apps/client/src/services/i18n.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { describe, expect, it } from "vitest";
66
describe("i18n", () => {
77
it("translations are valid JSON", () => {
88
for (const locale of LOCALES) {
9-
if (locale.contentOnly) {
9+
if (locale.contentOnly || locale.id === "en_rtl") {
1010
continue;
1111
}
1212

apps/client/src/services/utils.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -869,6 +869,18 @@ export function getErrorMessage(e: unknown) {
869869
}
870870
}
871871

872+
/**
873+
* Handles left or right placement of e.g. tooltips in case of right-to-left languages. If the current language is a RTL one, then left and right are swapped. Other directions are unaffected.
874+
* @param placement a string optionally containing a "left" or "right" value.
875+
* @returns a left/right value swapped if needed, or the same as input otherwise.
876+
*/
877+
export function handleRightToLeftPlacement<T extends string>(placement: T) {
878+
if (!glob.isRtl) return placement;
879+
if (placement === "left") return "right";
880+
if (placement === "right") return "left";
881+
return placement;
882+
}
883+
872884
export default {
873885
reloadFrontendApp,
874886
restartDesktopApp,

apps/client/src/set_password.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import "bootstrap/dist/css/bootstrap.min.css";
21
import "./stylesheets/auth.css";
32

43
// @TriliumNextTODO: is this even needed anymore?

apps/client/src/setup.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import "jquery";
22
import utils from "./services/utils.js";
33
import ko from "knockout";
4-
import "bootstrap/dist/css/bootstrap.min.css";
54

65
// TriliumNextTODO: properly make use of below types
76
// type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";

0 commit comments

Comments
 (0)