finished basic implementation of settings

contextAPI.js

@@ -4,6 +4,7 @@ const {contextBridge, ipcRenderer, webFrame} = require("electron");
 
 let fileOpenListener       = null;
 let closeFileListener      = null;
+let settingsChangeListener = null;
 
 contextBridge.exposeInMainWorld("api", {
 	openFileDialog : ()       => ipcRenderer.send("WindowManager::openFileDialog"),
@@ -30,5 +31,12 @@ contextBridge.exposeInMainWorld("api", {
 
 contextBridge.exposeInMainWorld("appSettings", {
 	get      : async (key, defaultValue = null) => await ipcRenderer.invoke("SettingsManager::get", key, defaultValue),
-	set : async (key, value) => await ipcRenderer.invoke("SettingsManager::set", key, value)
+	set      : async (key, value) => await ipcRenderer.invoke("SettingsManager::set", key, value),
+	all      : async () => await ipcRenderer.invoke("SettingsManager::all"),
+	onChange : callback => {
+		if (settingsChangeListener)
+			ipcRenderer.off("SettingsManager::change", settingsChangeListener);
+		settingsChangeListener = (_, settings) => callback(settings);
+		ipcRenderer.on("SettingsManager::change", settingsChangeListener);
+	}
 });

package.json

@@ -1,6 +1,6 @@
 {
 		"name": "ation",
-		"version": "0.2.0",
+		"version": "0.3.0",
 		"description": "a simple presentation software",
 		"main": "main.js",
 		"scripts": {

src/Ation.js

@@ -1,5 +1,5 @@
 "use strict";
-const {app, protocol, dialog, ipcMain, Menu, session} = require("electron");
+const {app, protocol, dialog, ipcMain, Menu} = require("electron");
 const path                                   = require("path");
 const fs                                     = require("fs/promises");
 const fsn                                    = require("fs");
@@ -39,6 +39,8 @@ class Ation {
 		ipcMain.on("Ation::closeFile", () => this.closeFile());
 
 		app.whenReady().then(async () => {
+			this.settingsManager.change();
+
 			if (this.fileToOpen)
 				this.openFile(this.fileToOpen);
 			protocol.registerFileProtocol("slideimg", (request, callback) => {

src/MainMenu.js

@@ -1,19 +1,35 @@
 "use strict";
 
-const {Menu} = require("electron");
+const {Menu, app} = require("electron");
 
 class MainMenu {
-	constructor(app) {
+	constructor(parentApp) {
-		this.app  = app;
+		this.app  = parentApp;
 		this.menu = null;
 		this.buildItems();
 		Menu.setApplicationMenu(this.menu);
 	}
 
 	buildItems() {
+		const settingsItem = {
+			label : "Settings",
+			click : () => this.app.windowManager.windows.settings.show()
+		};
 		const template     = [
 			...(process.platform === "darwin" ? [{
-				role : "appMenu"
+				label: app.name,
+				submenu: [
+					{ role: "about" },
+					{...settingsItem},
+					{ type: "separator" },
+					{ role: "services" },
+					{ type: "separator" },
+					{ role: "hide" },
+					{ role: "hideOthers" },
+					{ role: "unhide" },
+					{ type: "separator" },
+					{ role: "quit" }
+				]
 			}] : []),
 			{
 				label   : "File",
@@ -29,7 +45,7 @@ class MainMenu {
 						accelerator : "CommandOrControl+W",
 						click       : () => this.app.closeFile(),
 						enabled     : this.app.currentFile !== ""
-					}
+					}, ...(process.platform !== "darwin" ? [{type : "separator"}, {...settingsItem}] : [])
 				]
 			},
 			{

src/SettingsManager.js

@@ -23,6 +23,7 @@ class SettingsManager {
 		ipcMain.handle("SettingsManager::resize", (_, height) => app.windowManager.windows.settings.setSize(800, height, true));
 		ipcMain.handle("SettingsManager::get", (_, key, defaultValue = null) => this.get(key, defaultValue));
 		ipcMain.handle("SettingsManager::set", (_, key, value) => this.set(key, value));
+		ipcMain.handle("SettingsManager::all", () => this.data);
 	}
 
 	get(key, defaultValue = null) {
@@ -36,8 +37,13 @@ class SettingsManager {
 		this.save();
 	}
 
+	change() {
+		this.app.windowManager.mainWindow.send("SettingsManager::change", this.data);
+	}
+
 	save() {
 		fs.writeFile(SettingsManager.File, JSON.stringify(this.data, null, 4));
+		this.change();
 	}
 
 	static CheckFileSystem() {

src/WindowManager.js

@@ -31,7 +31,12 @@ class WindowManager {
 			resizable      : false,
 			fullscreenable : false,
 			parent         : this.mainWindow,
-			show           : true
+			show           : false
+		}, this.mainWindow, false);
+
+		this.windows.settings.on("close", event => {
+			event.preventDefault();
+			this.windows.settings.hide();
 		});
 
 		if (isDevelopment()) {
@@ -54,7 +59,7 @@ class WindowManager {
 		}
 	}
 
-	static _CreateWindow(options = null, parent = null) {
+	static _CreateWindow(options = null, parent = null, show = true) {
 		const windowOptions = {
 			width          : 800,
 			height         : 600,
@@ -71,6 +76,7 @@ class WindowManager {
 		if (!parent)
 			delete windowOptions.parent;
 		const window = new BrowserWindow(windowOptions);
+		if (show)
 			window.once("ready-to-show", () => window.show());	
 
 		return window;

src/ui/src/assets/css/_variables.scss

@@ -6,7 +6,7 @@ $colors : (
 	sidebarBackground : #333,
 	mainBackground    : #222,
 	scrollbar         : rgba(255,255,255,0.2),
-	hightlight        : rgb(230,193,123),
+	hightlight        : #e6c17b,
 	active            : rgba(255,255,255,0.1)
 );
 

src/ui/src/components/Ation.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useState, useContext} from "react";
 
 import SlidesList      from "./SlidesList";
 import Mode            from "../models/Mode";
@@ -10,9 +10,10 @@ import Toolbar         from "./Toolbar";
 import Tips            from "./Tips";
 
 import SlideContext    from "../shared/SlideContext";
+import SettingsContext from "../shared/SettingsContext";
 
 const Ation = () => {
-	const [font, setFont]         = useState("");
+	const {font, highlightColor}  = useContext(SettingsContext);
 	const [mode, setMode]         = useState(Mode.NORMAL);
 	const [deck, setDeck]         = useState([]);
 	const [slide, setSlide]       = useState(0);
@@ -37,7 +38,7 @@ const Ation = () => {
 			setDeck([]);
 		});
 		(async set => set(await window.api.appVersion()))(setVersion);
-		(async setFont => setFont(await window.appSettings.get("font", "Iosevka")))(setFont);
+		//(async setFont => setFont(await window.appSettings.get("font", "Iosevka")))(setFont);
 
 	}, [basePath, slide]);
 
@@ -54,7 +55,7 @@ const Ation = () => {
 					<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
 						<Toolbar openFile={openFile} setShowTips={setShowTips} version={version} />
 						<SlidesList deck={deck} />
-						<main className="main">
+						<main className="main" style={{"--color-hightlight" : highlightColor}}>
 							<Slide data={deck[slide] || null} style={{fontFamily : font}}/>
 						</main>
 						<Tips show={showTips} />

src/ui/src/components/settings/Appearance.js

@@ -0,0 +1,36 @@
+import React, {useState, useEffect} from "react";
+
+const Appearance = ({fonts}) => {
+	const [font, setFont]                     = useState("");
+	const [highlightColor, setHighlightColor] = useState("");
+
+	const changeFont = event => {
+		const value = event.target.value;
+		setFont(value);
+		window.appSettings.set("font", value);
+	};
+
+	const changeColor = event => {
+		const value = event.target.value;
+		setHighlightColor(value);
+		window.appSettings.set("highlightColor", value);
+	};
+
+	useEffect(() => {
+		(async setFont => setFont(await window.appSettings.get("font", "Iosevka")))(setFont);
+		(async setHighlightColor => setHighlightColor(await window.appSettings.get("highlightColor", "#e6c17b")))(setHighlightColor);
+	}, []);
+
+	return (
+		<section className="grid">
+			<label>Font in slides:</label>
+			<select value={font} onChange={changeFont}>
+				{fonts.map(font => font.trim().replace(/(^"|"$)/g, "")).map(font => <option key={font} value={font}>{font}</option>)}
+			</select>
+			<label>Global highlight color:</label>
+			<input type="color" value={highlightColor} onChange={changeColor} />
+		</section>
+	);
+};
+
+export default Appearance;

src/ui/src/components/settings/General.js

@@ -1,27 +1,10 @@
-import React, {useState, useEffect} from "react";
+import React from "react";
 
-const General = ({fonts}) => {
+const General = () => {
-	const [font, setFont]   = useState("");
-
-	const changeFont = event => {
-		const value = event.target.value;
-		setFont(value);
-		window.appSettings.set("font", value);
-	};
-
-	useEffect(() => {
-		(async setFont => setFont(await window.appSettings.get("font", "Iosevka")))(setFont);
-	}, []);
 
 	return (
-		<section className="grid">
+		<>
-			<label>Font in slides:</label>
+		</>
-			<select value={font} onChange={changeFont}>
-				{fonts.map(font => font.trim().replace(/(^"|"$)/g, "")).map(font => <option key={font} value={font}>{font}</option>)}
-			</select>
-			<label>Global highlight color:</label>
-			<input type="color" />
-		</section>
 	);
 };
 

src/ui/src/components/settings/Navbar.js

@@ -1,9 +1,9 @@
 import React, {forwardRef} from "react";
 
 import {NavLink}       from "react-router-dom";
-import {Gear}    from "react-bootstrap-icons";
+import {Gear, Palette} from "react-bootstrap-icons";
 
-const Navbar = forwardRef((props, ref) => {
+const Navbar = forwardRef((_, ref) => {
 	return (
 		<nav className="navbar" ref={ref}>
 			<NavLink to="/settings" end>
@@ -11,8 +11,8 @@ const Navbar = forwardRef((props, ref) => {
 				<label>General</label>
 			</NavLink>
 			<NavLink to="/settings/style" end>
-				<Gear />
+				<Palette />
-				<label>General</label>
+				<label>Appearance</label>
 			</NavLink>
 		</nav>
 	);

src/ui/src/components/settings/Settings.js

@@ -3,6 +3,7 @@ import {Routes, Route, useLocation} from "react-router-dom";
 
 import Navbar     from "./Navbar";
 import General    from "./General";
+import Appearance from "./Appearance";
 
 const Settings = () => {
 	const navbar            = useRef();
@@ -26,7 +27,8 @@ const Settings = () => {
 			<Navbar ref={navbar} />
 			<main ref={content}>
 				<Routes>
-					<Route index element={<General fonts={fonts} />} />
+					<Route index element={<General />} />
+					<Route path="/style" element={<Appearance fonts={fonts} />} />
 				</Routes>
 			</main>
 			<section className="titlebar"></section>

src/ui/src/higherOrderComponents/withSettings.js

@@ -0,0 +1,22 @@
+import React, {useState, useEffect} from "react";
+
+import SettingsContext from "../shared/SettingsContext";
+
+const withSettings = Component => () => {
+	const [settings, setSettings] = useState({
+		font : "Iosevka"
+	});
+
+	useEffect(() => {
+		(async setSettings => setSettings(await window.appSettings.all()))(setSettings);
+		window.appSettings.onChange(settings => setSettings(settings));
+	}, []);
+
+	return (
+		<SettingsContext.Provider value={{...settings}}>
+			<Component />
+		</SettingsContext.Provider>
+	);
+};
+
+export default withSettings;

src/ui/src/index.js

@@ -6,10 +6,11 @@ import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
 import Ation        from "./components/Ation";
 import Settings     from "./components/settings/Settings";
 import withDrop     from "./higherOrderComponents/withDrop";
+import withSettings from "./higherOrderComponents/withSettings";
 
 import "./assets/css/ation.scss";
 
-const App = withDrop(Ation);
+const App = withSettings(withDrop(Ation));
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(

src/ui/src/shared/SettingsContext.js

@@ -0,0 +1,5 @@
+import {createContext} from "react";
+
+const SettingsContext = createContext({});
+
+export default SettingsContext;