improve about window
This commit is contained in:
@@ -4,25 +4,33 @@
|
|||||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { BrowserWindow } from "electron";
|
import { app, BrowserWindow } from "electron";
|
||||||
import { join } from "path";
|
import { join } from "path";
|
||||||
import { ICON_PATH, VIEW_DIR } from "shared/paths";
|
import { ICON_PATH, VIEW_DIR } from "shared/paths";
|
||||||
|
|
||||||
import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
|
import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
|
||||||
|
|
||||||
export function createAboutWindow() {
|
export async function createAboutWindow() {
|
||||||
|
const height = 750;
|
||||||
|
const width = height * (4 / 3);
|
||||||
|
|
||||||
const about = new BrowserWindow({
|
const about = new BrowserWindow({
|
||||||
center: true,
|
center: true,
|
||||||
autoHideMenuBar: true,
|
autoHideMenuBar: true,
|
||||||
icon: ICON_PATH,
|
icon: ICON_PATH,
|
||||||
webPreferences: {
|
height,
|
||||||
preload: join(__dirname, "updaterPreload.js")
|
width
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
makeLinksOpenExternally(about);
|
makeLinksOpenExternally(about);
|
||||||
|
|
||||||
about.loadFile(join(VIEW_DIR, "about.html"));
|
const data = new URLSearchParams({
|
||||||
|
APP_VERSION: app.getVersion()
|
||||||
|
});
|
||||||
|
|
||||||
|
about.loadFile(join(VIEW_DIR, "about.html"), {
|
||||||
|
search: data.toString()
|
||||||
|
});
|
||||||
|
|
||||||
return about;
|
return about;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
<head>
|
<head>
|
||||||
|
<title>About Vesktop</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="./style.css" type="text/css" />
|
<link rel="stylesheet" href="./style.css" type="text/css" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -9,19 +11,25 @@
|
|||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1 id="title">Vesktop</h1>
|
<h1 id="title">Vesktop v{{APP_VERSION}}</h1>
|
||||||
<p>
|
<p>Vesktop is a cross platform Discord Desktop client, aiming to give you a better Discord experience</p>
|
||||||
Vesktop is a free/libre cross platform desktop app aiming to give you a snappier Discord experience with Vencord
|
|
||||||
pre-installed
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Links</h2>
|
<h2>Links</h2>
|
||||||
<ul>
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://vesktop.vencord.dev/wiki" target="_blank">Vesktop Wiki</a>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://vencord.dev" target="_blank">Vencord Website</a>
|
<a href="https://vencord.dev" target="_blank">Vencord Website</a>
|
||||||
</li>
|
</li>
|
||||||
@@ -34,6 +42,17 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>License</h2>
|
||||||
|
<p>
|
||||||
|
Vesktop is licensed under the
|
||||||
|
<a href="https://www.gnu.org/licenses/gpl-3.0.txt" target="_blank">GNU General Public License v3.0</a>.
|
||||||
|
<br />
|
||||||
|
This is free software, and you are welcome to redistribute it under certain conditions; see the license for
|
||||||
|
details.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Acknowledgements</h2>
|
<h2>Acknowledgements</h2>
|
||||||
<p>These awesome libraries empower Vesktop</p>
|
<p>These awesome libraries empower Vesktop</p>
|
||||||
@@ -58,18 +77,31 @@
|
|||||||
<li>
|
<li>
|
||||||
And many
|
And many
|
||||||
<a href="https://github.com/Vencord/Vesktop/blob/main/pnpm-lock.yaml" target="_blank"
|
<a href="https://github.com/Vencord/Vesktop/blob/main/pnpm-lock.yaml" target="_blank"
|
||||||
>more awesome open source libraries</a
|
>more open source libraries</a
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script type="module">
|
<script>
|
||||||
const data = await Updater.getData();
|
const data = new URLSearchParams(location.search);
|
||||||
if (data.currentVersion) {
|
|
||||||
const title = document.getElementById("title");
|
|
||||||
|
|
||||||
title.textContent += ` v${data.currentVersion}`;
|
// replace all {{FOO}} placeholders in the document with the values from the URL
|
||||||
|
|
||||||
|
/** @param {Node} [node] */
|
||||||
|
function walk(node) {
|
||||||
|
if (node.nodeType === Node.TEXT_NODE) {
|
||||||
|
node.textContent = node.textContent.replace(/{{(\w+)}}/g, (match, key) => data.get(key) || match);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node.nodeType === Node.ELEMENT_NODE && node.nodeName !== "SCRIPT") {
|
||||||
|
for (const child of node.childNodes) {
|
||||||
|
walk(child);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
walk(document.body);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
<head>
|
<head>
|
||||||
|
<title>Vesktop Setup</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="./style.css" type="text/css" />
|
<link rel="stylesheet" href="./style.css" type="text/css" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
--fg-secondary: #313338;
|
--fg-secondary: #313338;
|
||||||
--fg-semi-trans: rgb(0 0 0 / 0.2);
|
--fg-semi-trans: rgb(0 0 0 / 0.2);
|
||||||
--link: #006ce7;
|
--link: #006ce7;
|
||||||
|
--link-hover: #005bb5;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
@@ -13,6 +14,7 @@
|
|||||||
--fg-secondary: #b5bac1;
|
--fg-secondary: #b5bac1;
|
||||||
--fg-semi-trans: rgb(255 255 255 / 0.2);
|
--fg-semi-trans: rgb(255 255 255 / 0.2);
|
||||||
--link: #00a8fc;
|
--link: #00a8fc;
|
||||||
|
--link-hover: #0086c3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -27,4 +29,9 @@ body {
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--link);
|
color: var(--link);
|
||||||
|
transition: color 0.2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--link-hover);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user