Add About dialog

The about dialog contains version info as well as the timestamp for the currency exchange rates.
This commit is contained in:
Jonatan Heyman 2023-07-08 16:47:25 +02:00
parent 4cc439eb6d
commit 459fcd7c4c
7 changed files with 153 additions and 5 deletions

61
about.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<meta name="color-scheme" content="light dark">
<title>About Heynote</title>
<style>
body, html {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 11px;
}
#content {
padding: 12px;
text-align: center;
}
h1 {
font-size: 16px;
font-weight: bold;
margin-bottom: 4px;
margin-top 0;
}
p {
line-height: 1.5em;
opacity: 0.7;
margin-top: 0;
margin-bottom: 12px;
}
p.faded {
opacity: 0.5;
}
p.bright {
opacity: 1;
}
.icon {
width: 64px;
height: 64px;
margin-bottom: 0;
}
</style>
</head>
<body>
<div id="content">
<img src="icon.png" class="icon">
<h1>Heynote</h1>
<p>Version <span id="version">0.0.0</span></p>
<p>Currency exchange rates updated at <span id="currencyTimestamp">?</span></p>
<p>
Heynote uses the following great open source projects:<br>
CodeMirror, Vue, Electron, Math.js, Prettier<br>
and many more indirect dependencies.
</p>
<p>© Jonatan Heyman 2023</p>
</div>
</body>
</html>

49
electron/main/about.js Normal file
View File

@ -0,0 +1,49 @@
import { join } from 'node:path'
import { app, BrowserWindow, nativeTheme } from 'electron'
import { win } from "./index"
let aboutWindow = null;
export function openAboutWindow() {
if (!aboutWindow) {
aboutWindow = new BrowserWindow({
parent: win,
width: 400,
height: 300,
resizable: false,
minimizable: false,
maximizable: false,
fullscreen: false,
fullscreenable: false,
//backgroundColor: nativeTheme.shouldUseDarkColors ? '#262B37' : '#FFFFFF',
title: "About Heynote",
show: false,
webPreferences: {
preload: join(__dirname, '../preload/about-preload.js'),
nodeIntegration: true,
}
})
if (process.env.VITE_DEV_SERVER_URL) {
aboutWindow.loadURL(`${process.env.VITE_DEV_SERVER_URL}about.html`)
} else {
aboutWindow.loadFile(join(process.env.DIST, 'about.html'))
}
// don't show until content is loaded
aboutWindow.webContents.on("did-finish-load", () => {
aboutWindow.webContents.send("init", {
"version": app.getVersion(),
});
aboutWindow.show()
})
aboutWindow.on("close", () => {
// this avoids a flash of white when the window is closed
aboutWindow.hide()
aboutWindow = null;
})
} else {
aboutWindow.show()
aboutWindow.focus()
}
}

View File

@ -49,7 +49,7 @@ Menu.setApplicationMenu(menu)
// Read more on https://www.electronjs.org/docs/latest/tutorial/security
// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
let win: BrowserWindow | null = null
export let win: BrowserWindow | null = null
// Here, you can also use other preload
const preload = join(__dirname, '../preload/index.js')
const url = process.env.VITE_DEV_SERVER_URL

View File

@ -1,14 +1,21 @@
const { app, Menu } = require('electron')
import { OPEN_SETTINGS_EVENT } from '../constants';
const { app, Menu } = require("electron")
import { OPEN_SETTINGS_EVENT } from "../constants";
import { openAboutWindow } from "./about";
const isMac = process.platform === 'darwin'
const isMac = process.platform === "darwin"
const template = [
// { role: 'appMenu' }
...(isMac ? [{
label: app.name,
submenu: [
{ role: 'about' },
{
label: 'About',
click:(menuItem, window, event) => {
// open about window
openAboutWindow()
},
},
{ type: 'separator' },
{
label: 'Preferences',

View File

@ -0,0 +1,13 @@
import { ipcRenderer } from "electron"
import CONFIG from "../config"
ipcRenderer.on("init", function (evt, data) {
document.getElementById("version").innerText = data.version;
let currency = CONFIG.get("currency")
if (currency && currency.data && currency.data.timestamp) {
const date = new Date(currency.data.timestamp * 1000);
document.getElementById("currencyTimestamp").innerText = date.toLocaleString()
}
});

BIN
public/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -53,6 +53,24 @@ export default defineConfig({
},
},
},
},
{
entry: 'electron/preload/about-preload.js',
onstart(options) {
// Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
// instead of restarting the entire Electron App.
options.reload()
},
vite: {
build: {
sourcemap: isDevelopment,
minify: isProduction,
outDir: 'dist-electron/preload',
rollupOptions: {
external: Object.keys("dependencies" in pkg ? pkg.dependencies : {}),
},
},
},
}
]),
// Use Node.js API in the Renderer-process