feat(rtl): apply same mechanism for login/desktop/mobile

This commit is contained in:
Elian Doran 2025-10-09 19:12:46 +03:00
parent 6f51d82f82
commit 2936a537cf
No known key found for this signature in database
8 changed files with 23 additions and 7 deletions

View File

@ -1,7 +1,7 @@
import $ from "jquery";
async function loadBootstrap() {
if (glob.isRtl) {
if (document.body.dir === "rtl") {
await import("bootstrap/dist/css/bootstrap.rtl.min.css");
} else {
await import("bootstrap/dist/css/bootstrap.min.css");

View File

@ -9,7 +9,11 @@
<link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
<title>Trilium Notes</title>
</head>
<body id="trilium-app" class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %> platform-<%= platform %> <%= isElectron ? 'electron' : '' %> <%= hasNativeTitleBar ? 'native-titlebar' : '' %> <%= hasBackgroundEffects ? 'background-effects' : '' %>">
<body
id="trilium-app"
class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %> platform-<%= platform %> <%= isElectron ? 'electron' : '' %> <%= hasNativeTitleBar ? 'native-titlebar' : '' %> <%= hasBackgroundEffects ? 'background-effects' : '' %>"
lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>"
>
<noscript><%= t("javascript-required") %></noscript>
<script>

View File

@ -18,7 +18,7 @@
<link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
<link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
</head>
<body>
<body lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>">
<div class="container login-page">
<div class="col-xs-12 col-sm-10 col-md-6 col-lg-4 col-xl-4 mx-auto pt-4">
<img class="img-fluid d-block mx-auto" style="height: 8rem;" src="<%= assetPathFragment %>/images/icon-color.svg" aria-hidden="true" draggable="false" >

View File

@ -97,7 +97,10 @@
}
</style>
</head>
<body class="mobile heading-style-<%= headingStyle %>">
<body
class="mobile heading-style-<%= headingStyle %>"
lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>"
>
<noscript><%= t("javascript-required") %></noscript>
<div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>

View File

@ -19,6 +19,6 @@
platform: "<%= platform %>",
hasNativeTitleBar: <%= hasNativeTitleBar %>,
TRILIUM_SAFE_MODE: <%= !!process.env.TRILIUM_SAFE_MODE %>,
isRtl: <%= isRtl %>
isRtl: <%= !!currentLocale.isRtl %>
};
</script>

View File

@ -14,7 +14,7 @@ import { generateToken as generateCsrfToken } from "./csrf_protection.js";
import type { Request, Response } from "express";
import type BNote from "../becca/entities/bnote.js";
import { LOCALES } from "@triliumnext/commons";
import { getCurrentLocale } from "../services/i18n.js";
function index(req: Request, res: Response) {
const options = optionService.getOptionMap();
@ -59,7 +59,7 @@ function index(req: Request, res: Response) {
triliumVersion: packageJson.version,
assetPath: assetPath,
appPath: appPath,
isRtl: !!LOCALES.find(l => l.id === options.locale)?.rtl
currentLocale: getCurrentLocale()
});
}

View File

@ -11,6 +11,7 @@ import totp from '../services/totp.js';
import recoveryCodeService from '../services/encryption/recovery_codes.js';
import openID from '../services/open_id.js';
import openIDEncryption from '../services/encryption/open_id_encryption.js';
import { getCurrentLocale } from "../services/i18n.js";
function loginPage(req: Request, res: Response) {
// Login page is triggered twice. Once here, and another time if the password is failed.
@ -24,6 +25,7 @@ function loginPage(req: Request, res: Response) {
assetPath: assetPath,
assetPathFragment: assetUrlFragment,
appPath: appPath,
currentLocale: getCurrentLocale()
});
}

View File

@ -76,3 +76,10 @@ export async function changeLanguage(locale: string) {
await i18next.changeLanguage(locale);
hidden_subtree.checkHiddenSubtree(true, { restoreNames: true });
}
export function getCurrentLocale() {
const localeId = options.getOptionOrNull("locale") ?? "en";
const currentLocale = LOCALES.find(l => l.id === localeId);
if (!currentLocale) return LOCALES.find(l => l.id === "en")!;
return currentLocale;
}