Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-07-13 18:03:58 +02:00
Code Issues Packages Projects Releases Activity

client/about dialog: create a new UI

Browse Source
This commit is contained in:
Adorian Doran
2026-03-22 10:27:27 +02:00
parent 8d5e82fa5e
commit 31578521cf
3 changed files with 57 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/translations/en/translation.json
View File

@@ -7,7 +7,13 @@
"sync_version": "Sync version:",
"build_date": "Build date:",
"build_revision": "Build revision:",
"data_directory": "Data directory:"
"data_directory": "Data directory:",
"version_label": "Version",
"version": "app: {{appVersion}}, database: {{dbVersion}}, sync protocol: {{syncVersion}}",
"build_info": "{{buildDate}}, revision: {{buildRevision}}",
"contributors_label": "Contributors"
},
"toast": {
"critical-error": {

11
apps/client/src/widgets/dialogs/about.css Normal file
View File

@@ -0,0 +1,11 @@
.property-sheet-card {
font-size: .85em;
.tn-card-section {
display: flex;
> :first-child {
width: 100px;
}
}
}

80
apps/client/src/widgets/dialogs/about.tsx
View File

@@ -8,18 +8,19 @@ import { useState } from "preact/hooks";
import type { CSSProperties } from "preact/compat";
import type { AppInfo } from "@triliumnext/commons";
import { useTriliumEvent } from "../react/hooks.jsx";
import logo from "../../assets/icon.png";
import { Card, CardSection } from "../react/Card.js";
import "./about.css";
export default function AboutDialog() {
const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
const [shown, setShown] = useState(false);
const forceWordBreak: CSSProperties = { wordBreak: "break-all" };
useTriliumEvent("openAboutDialog", () => setShown(true));
return (
<Modal className="about-dialog"
size="lg"
title={t("about.title")}
size="md"
show={shown}
onShown={async () => {
const appInfo = await server.get<AppInfo>("app-info");
@@ -27,44 +28,41 @@ export default function AboutDialog() {
}}
onHidden={() => setShown(false)}
>
<table className="table table-borderless">
<tbody>
<tr>
<th>{t("about.homepage")}</th>
<td className="selectable-text"><a className="tn-link external" href="https://github.com/TriliumNext/Trilium" style={forceWordBreak}>https://github.com/TriliumNext/Trilium</a></td>
</tr>
<tr>
<th>{t("about.app_version")}</th>
<td className="app-version selectable-text">{appInfo?.appVersion}</td>
</tr>
<tr>
<th>{t("about.db_version")}</th>
<td className="db-version selectable-text">{appInfo?.dbVersion}</td>
</tr>
<tr>
<th>{t("about.sync_version")}</th>
<td className="sync-version selectable-text">{appInfo?.syncVersion}</td>
</tr>
<tr>
<th>{t("about.build_date")}</th>
<td className="build-date selectable-text">
{appInfo?.buildDate ? formatDateTime(appInfo.buildDate) : ""}
</td>
</tr>
<tr>
<th>{t("about.build_revision")}</th>
<td className="selectable-text">
{appInfo?.buildRevision && <a className="tn-link build-revision external" href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" style={forceWordBreak}>{appInfo.buildRevision}</a>}
</td>
</tr>
<tr>
<th>{t("about.data_directory")}</th>
<td className="data-directory">
{appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} style={forceWordBreak} />)}
</td>
</tr>
</tbody>
</table>
<div>
<img src={logo} width="128" />
<h2>Trilium Notes</h2>
<a className="tn-link" href="https://triliumnotes.org/" target="_blank">
triliumnotes.org
</a>
<Card className="property-sheet-card">
<CardSection>
<div>{t("about.version_label")}</div>
<div>
{t("about.version", {
appVersion: appInfo?.appVersion,
dbVersion: appInfo?.dbVersion,
syncVersion: appInfo?.syncVersion
})}
<div>
{t("about.build_info", {
buildDate: appInfo?.buildDate ? formatDateTime(appInfo.buildDate) : "",
buildRevision: appInfo?.buildRevision ? appInfo.buildRevision.substring(0, 6) : ""
})}
</div>
</div>
</CardSection>
<CardSection>
<div>{t("about.contributors_label")}</div>
</CardSection>
<CardSection>
<div>{t("about.data_directory")}</div>
<div>
{appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} />)}
</div>
</CardSection>
</Card>
</div>
</Modal>
);
}