Updater Popup: Add Changelog; Make about page prettier

This commit is contained in:
V 2023-06-26 01:42:51 +02:00
parent 477ecbb4ba
commit 49fb4c68b6
No known key found for this signature in database
GPG key ID: A1DC0CFB5615D905
8 changed files with 91 additions and 71 deletions

View file

@ -1,6 +1,6 @@
{ {
"name": "VencordDesktop", "name": "VencordDesktop",
"version": "0.2.4", "version": "0.2.5",
"private": true, "private": true,
"description": "", "description": "",
"keywords": [], "keywords": [],

View file

@ -4,8 +4,7 @@
* Copyright (c) 2023 Vendicated and Vencord contributors * Copyright (c) 2023 Vendicated and Vencord contributors
*/ */
import { app, BrowserWindow } from "electron"; import { BrowserWindow } from "electron";
import { readFileSync } from "fs";
import { join } from "path"; import { join } from "path";
import { ICON_PATH, VIEW_DIR } from "shared/paths"; import { ICON_PATH, VIEW_DIR } from "shared/paths";
@ -15,14 +14,15 @@ export function createAboutWindow() {
const about = new BrowserWindow({ const about = new BrowserWindow({
center: true, center: true,
autoHideMenuBar: true, autoHideMenuBar: true,
icon: ICON_PATH icon: ICON_PATH,
webPreferences: {
preload: join(__dirname, "updaterPreload.js")
}
}); });
makeLinksOpenExternally(about); makeLinksOpenExternally(about);
const html = readFileSync(join(VIEW_DIR, "about.html"), "utf-8").replaceAll("%VERSION%", app.getVersion()); about.loadFile(join(VIEW_DIR, "about.html"));
about.loadURL("data:text/html;charset=utf-8," + html);
return about; return about;
} }

View file

@ -6,9 +6,9 @@
import { app, BrowserWindow, ipcMain, shell } from "electron"; import { app, BrowserWindow, ipcMain, shell } from "electron";
import { Settings } from "main/settings"; import { Settings } from "main/settings";
import { makeLinksOpenExternally } from "main/utils/makeLinksOpenExternally";
import { githubGet, ReleaseData } from "main/utils/vencordLoader"; import { githubGet, ReleaseData } from "main/utils/vencordLoader";
import { join } from "path"; import { join } from "path";
import { SplashProps } from "shared/browserWinProperties";
import { IpcEvents } from "shared/IpcEvents"; import { IpcEvents } from "shared/IpcEvents";
import { VIEW_DIR } from "shared/paths"; import { VIEW_DIR } from "shared/paths";
@ -79,13 +79,13 @@ export async function checkUpdates() {
const oldVersion = app.getVersion(); const oldVersion = app.getVersion();
const newVersion = data.tag_name.replace(/^v/, ""); const newVersion = data.tag_name.replace(/^v/, "");
if (Settings.store.skippedUpdate !== newVersion && isOutdated(oldVersion, newVersion)) { updateData = {
updateData = { currentVersion: oldVersion,
currentVersion: oldVersion, latestVersion: newVersion,
latestVersion: newVersion, release: data
release: data };
};
if (Settings.store.skippedUpdate !== newVersion && isOutdated(oldVersion, newVersion)) {
openNewUpdateWindow(); openNewUpdateWindow();
} }
} catch (e) { } catch (e) {
@ -95,11 +95,18 @@ export async function checkUpdates() {
function openNewUpdateWindow() { function openNewUpdateWindow() {
const win = new BrowserWindow({ const win = new BrowserWindow({
...SplashProps, width: 500,
autoHideMenuBar: true,
alwaysOnTop: true,
webPreferences: { webPreferences: {
preload: join(__dirname, "updaterPreload.js") preload: join(__dirname, "updaterPreload.js"),
nodeIntegration: false,
contextIsolation: true,
sandbox: true
} }
}); });
makeLinksOpenExternally(win);
win.loadFile(join(VIEW_DIR, "updater.html")); win.loadFile(join(VIEW_DIR, "updater.html"));
} }

View file

@ -1,9 +1,9 @@
<head> <head>
<link rel="stylesheet" href="./style.css" type="text/css" />
<style> <style>
body { body {
padding: 2em; padding: 2em;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
} }
h1 { h1 {
@ -13,7 +13,7 @@
</head> </head>
<body> <body>
<h1>Vencord Desktop %VERSION%</h1> <h1 id="title">Vencord Desktop</h1>
<p> <p>
Vencord Desktop is a free/libre cross platform desktop app aiming to give you a snappier Discord experience with Vencord Desktop is a free/libre cross platform desktop app aiming to give you a snappier Discord experience with
Vencord pre-installed Vencord pre-installed
@ -60,3 +60,12 @@
</ul> </ul>
</section> </section>
</body> </body>
<script type="module">
const data = await Updater.getData();
if (data.currentVersion) {
const title = document.getElementById("title");
title.textContent += ` v${data.currentVersion}`;
}
</script>

View file

@ -1,29 +1,10 @@
<head> <head>
<link rel="stylesheet" href="./style.css" type="text/css" />
<style> <style>
:root {
--bg: white;
--fg: black;
--fg-secondary: #313338;
--fg-semi-trans: rgb(0 0 0 / 0.2);
--link: #006ce7;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(223 6.7% 20.6%);
--fg: white;
--fg-secondary: #b5bac1;
--fg-semi-trans: rgb(255 255 255 / 0.2);
--link: #00a8fc;
}
}
body { body {
height: 100vh; height: 100vh;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
margin: 0;
padding: 1.5em; padding: 1.5em;
padding-bottom: 1em; padding-bottom: 1em;
@ -34,13 +15,9 @@
box-sizing: border-box; box-sizing: border-box;
} }
body,
select { select {
background: var(--bg); background: var(--bg);
color: var(--fg); color: var(--fg);
}
select {
padding: 0.3em; padding: 0.3em;
margin: -0.3em; margin: -0.3em;
border-radius: 6px; border-radius: 6px;
@ -54,10 +31,6 @@
margin: 1em 0 2em; margin: 1em 0 2em;
} }
a {
color: var(--link);
}
form { form {
display: grid; display: grid;
gap: 1em; gap: 1em;

View file

@ -1,16 +1,11 @@
<head> <head>
<link rel="stylesheet" href="./style.css" type="text/css" />
<style> <style>
* { * {
user-select: none; user-select: none;
} }
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
margin: 0;
padding: 0;
}
.wrapper { .wrapper {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
@ -18,13 +13,11 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: hsl(223 6.7% 20.6%);
border-radius: 8px; border-radius: 8px;
border: 1px solid hsl(220 6.5% 18%); border: 1px solid var(--fg-semi-trans);
} }
p { p {
color: rgb(219, 222, 225);
text-align: center; text-align: center;
} }

30
static/views/style.css Normal file
View file

@ -0,0 +1,30 @@
:root {
--bg: white;
--fg: black;
--fg-secondary: #313338;
--fg-semi-trans: rgb(0 0 0 / 0.2);
--link: #006ce7;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(223 6.7% 20.6%);
--fg: white;
--fg-secondary: #b5bac1;
--fg-semi-trans: rgb(255 255 255 / 0.2);
--link: #00a8fc;
}
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
margin: 0;
padding: 0;
background: var(--bg);
color: var(--fg);
}
a {
color: var(--link);
}

View file

@ -1,22 +1,13 @@
<head> <head>
<style> <link rel="stylesheet" href="./style.css" type="text/css" />
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
margin: 0;
padding: 0;
color: rgb(219, 222, 225);
}
<style>
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
height: 100%; min-height: 100%;
background-color: #313338;
border-radius: 8px;
border: 1px solid #248046;
padding: 1em; padding: 1em;
} }
@ -34,7 +25,7 @@
button { button {
cursor: pointer; cursor: pointer;
padding: 0.5em; padding: 0.5em;
color: white; color: var(--fg);
border: none; border: none;
border-radius: 3px; border-radius: 3px;
font-weight: bold; font-weight: bold;
@ -66,6 +57,9 @@
<br /> <br />
Latest: <span id="latest"></span> Latest: <span id="latest"></span>
</p> </p>
<h2>Changelog</h2>
<p id="changelog">Loading...</p>
</section> </section>
<section> <section>
@ -113,3 +107,17 @@
}); });
} }
</script> </script>
<script type="module">
import { micromark } from "https://esm.sh/micromark@3?bundle";
import { gfm, gfmHtml } from "https://esm.sh/micromark-extension-gfm@2?bundle";
const changelog = (await Updater.getData()).release.body;
if (changelog)
document.getElementById("changelog").innerHTML = micromark(changelog, {
extensions: [gfm()],
htmlExtensions: [gfmHtml()]
})
.replace(/h1>/g, "h3>")
.replace(/<a /g, '<a target="_blank" ');
</script>