client/about dialog: improve, add GitHub and donate buttons

This commit is contained in:
Adorian Doran
2026-03-22 11:14:16 +02:00
parent 31578521cf
commit 19dfbaacce
3 changed files with 53 additions and 21 deletions

View File

@@ -1,19 +1,11 @@
{
"about": {
"title": "About Trilium Notes",
"homepage": "Homepage:",
"app_version": "App version:",
"db_version": "DB version:",
"sync_version": "Sync version:",
"build_date": "Build date:",
"build_revision": "Build revision:",
"data_directory": "Data directory:",
"version_label": "Version",
"about": {
"version_label": "Version:",
"version": "app: {{appVersion}}, database: {{dbVersion}}, sync protocol: {{syncVersion}}",
"build_info": "{{buildDate}}, revision: {{buildRevision}}",
"contributors_label": "Contributors"
"contributors_label": "Contributors:",
"data_directory": "Data directory:",
"donate": "Donate"
},
"toast": {
"critical-error": {

View File

@@ -1,11 +1,37 @@
.property-sheet-card {
font-size: .85em;
.tn-card-section {
.about-dialog {
.about-dialog-content {
display: flex;
flex-direction: column;
align-items: center;
}
> :first-child {
width: 100px;
.property-sheet-card {
margin-block: 30px;
font-size: .85em;
.tn-card-section {
display: flex;
> :first-child {
width: 100px;
}
}
}
footer {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
a {
display: flex;
flex-direction: column;
align-items: center;
&::after {
display: none;
}
}
}
}

View File

@@ -28,13 +28,14 @@ export default function AboutDialog() {
}}
onHidden={() => setShown(false)}
>
<div>
<div className="about-dialog-content">
<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>
@@ -63,6 +64,19 @@ export default function AboutDialog() {
</CardSection>
</Card>
</div>
<footer>
<a href="https://github.com/TriliumNext/Trilium" target="_blank">
{/* https://phosphoricons.com/?q=github */}
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z"></path></svg>
GitHub
</a>
<a href="https://triliumnotes.org/en/support-us" target="_blank">
{/* https://phosphoricons.com/?q=heart */}
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"></path></svg>
{t("about.donate")}
</a>
</footer>
</Modal>
);
}