diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index c59057709..09c336115 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2005,5 +2005,8 @@ }, "content_renderer": { "open_externally": "Open externally" + }, + "modal": { + "close": "Close" } } diff --git a/apps/client/src/widgets/dialogs/about.ts b/apps/client/src/widgets/dialogs/about.ts deleted file mode 100644 index 2276a5214..000000000 --- a/apps/client/src/widgets/dialogs/about.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { formatDateTime } from "../../utils/formatters.js"; -import { t } from "../../services/i18n.js"; -import BasicWidget from "../basic_widget.js"; -import openService from "../../services/open.js"; -import server from "../../services/server.js"; -import utils from "../../services/utils.js"; -import { openDialog } from "../../services/dialog.js"; - -interface AppInfo { - appVersion: string; - dbVersion: number; - syncVersion: number; - buildDate: string; - buildRevision: string; - dataDirectory: string; -} - -const TPL = /*html*/` - - - -`; - -export default class AboutDialog extends BasicWidget { - private $appVersion!: JQuery; - private $dbVersion!: JQuery; - private $syncVersion!: JQuery; - private $buildDate!: JQuery; - private $buildRevision!: JQuery; - private $dataDirectory!: JQuery; - - doRender(): void { - this.$widget = $(TPL); - this.$appVersion = this.$widget.find(".app-version"); - this.$dbVersion = this.$widget.find(".db-version"); - this.$syncVersion = this.$widget.find(".sync-version"); - this.$buildDate = this.$widget.find(".build-date"); - this.$buildRevision = this.$widget.find(".build-revision"); - this.$dataDirectory = this.$widget.find(".data-directory"); - } - - async refresh() { - const appInfo = await server.get("app-info"); - - this.$appVersion.text(appInfo.appVersion); - this.$dbVersion.text(appInfo.dbVersion.toString()); - this.$syncVersion.text(appInfo.syncVersion.toString()); - this.$buildDate.text(formatDateTime(appInfo.buildDate)); - this.$buildRevision.text(appInfo.buildRevision); - this.$buildRevision.attr("href", `https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`); - if (utils.isElectron()) { - this.$dataDirectory.html( - $("", { - href: "#", - class: "tn-link", - text: appInfo.dataDirectory - }).prop("outerHTML") - ); - this.$dataDirectory.find("a").on("click", (event: JQuery.ClickEvent) => { - event.preventDefault(); - openService.openDirectory(appInfo.dataDirectory); - }); - } else { - this.$dataDirectory.text(appInfo.dataDirectory); - } - } - - async openAboutDialogEvent() { - await this.refresh(); - openDialog(this.$widget); - } -} diff --git a/apps/client/src/widgets/dialogs/about.tsx b/apps/client/src/widgets/dialogs/about.tsx new file mode 100644 index 000000000..7d784627a --- /dev/null +++ b/apps/client/src/widgets/dialogs/about.tsx @@ -0,0 +1,98 @@ +import { openDialog } from "../../services/dialog.js"; +import ReactBasicWidget from "../react/ReactBasicWidget.js"; +import Modal from "../react/Modal.js"; +import { t } from "../../services/i18n.js"; +import { formatDateTime } from "../../utils/formatters.js"; +import { useState } from "react"; +import server from "../../services/server.js"; +import utils from "../../services/utils.js"; +import openService from "../../services/open.js"; + +interface AppInfo { + appVersion: string; + dbVersion: number; + syncVersion: number; + buildDate: string; + buildRevision: string; + dataDirectory: string; +} + +function AboutDialogComponent() { + let [appInfo, setAppInfo] = useState(null); + + async function onShown() { + const appInfo = await server.get("app-info"); + setAppInfo(appInfo); + } + + const forceWordBreak = { wordBreak: "break-all" }; + + return ( + + {(appInfo !== null) ? ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{t("about.homepage")}https://github.com/TriliumNext/Trilium
{t("about.app_version")}{appInfo.appVersion}
{t("about.db_version")}{appInfo.dbVersion}
{t("about.sync_version")}{appInfo.syncVersion}
{t("about.build_date")}{formatDateTime(appInfo.buildDate)}
{t("about.build_revision")} + {appInfo.buildRevision} +
{t("about.data_directory")} + +
+ ) : ( +
+ )} + + ); +} + +function DirectoryLink({ directory, style }: { directory: string, style?: React.CSSProperties }) { + if (utils.isElectron()) { + const onClick = (e: React.MouseEvent) => { + e.preventDefault(); + openService.openDirectory(directory); + }; + + return + } else { + return {directory}; + } +} + +export default class AboutDialog extends ReactBasicWidget { + + get component() { + return ; + } + + async openAboutDialogEvent() { + openDialog(this.$widget); + } +} \ No newline at end of file diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx index 718bc23a2..1522a3947 100644 --- a/apps/client/src/widgets/react/Modal.tsx +++ b/apps/client/src/widgets/react/Modal.tsx @@ -1,9 +1,39 @@ -export default function Modal({ children }) { +import { useEffect, useRef } from "preact/hooks"; +import { t } from "../../services/i18n"; +import { ComponentChildren } from "preact"; + +interface ModalProps { + className: string; + title: string; + size: "lg" | "sm"; + children: ComponentChildren; + onShown?: () => void; +} + +export default function Modal({ children, className, size, title, onShown }: ModalProps) { + const modalRef = useRef(null); + + if (onShown) { + useEffect(() => { + const modalElement = modalRef.current; + if (modalElement) { + modalElement.addEventListener("shown.bs.modal", onShown); + } + }); + } + return ( -
-
+
+
- {children} +
+
{title}
+ +
+ +
+ {children} +