window now maximizable by double click onto toolbar

contextAPI.js

@@ -28,7 +28,8 @@ contextBridge.exposeInMainWorld("api", {
 	appVersion : async () => await ipcRenderer.invoke("Ation::appVersion"),
 	fonts      : async () => await ipcRenderer.invoke("FontManager::fonts"),
 	resize     : size => ipcRenderer.invoke("WindowManager::resize", size),
-	fullscreen : fullscreen => ipcRenderer.invoke("WindowManager::presentFullscreen", fullscreen)
+	fullscreen : fullscreen => ipcRenderer.invoke("WindowManager::presentFullscreen", fullscreen),
+	maximize   : () => ipcRenderer.send("WindowManager::toggleMaximize")
 });
 
 contextBridge.exposeInMainWorld("appSettings", {

src/WindowManager.js

@@ -18,6 +18,7 @@ class WindowManager {
 
 		ipcMain.on("WindowManager::openFileDialog", () => this.app.openFile());
 		ipcMain.on("WindowManager::openFile", (_, path) => this.app.openFile(path));
+		ipcMain.on("WindowManager::toggleMaximize", () => this.mainWindow?.isMaximized() ? this.mainWindow?.unmaximize() : this.mainWindow?.maximize());
 		ipcMain.handle("WindowManager::resize", (_, height) => this.windows.settings.setSize(800, height + (process.platform === "win32" ? 50 : 0), true));
 		ipcMain.handle("WindowManager::presentFullscreen", (_, fullscreen) => this.windows.main.setFullScreen(fullscreen));
 	}

src/ui/src/assets/css/_window.scss

@@ -11,6 +11,10 @@
 		grid-column: 1 / span 2;
 	}
 
+	&.edit {
+		//grid-template-columns: 10% auto;
+	}
+
 	main {
 		background: color(mainBackground);
 		overflow-y: auto;

src/ui/src/components/Ation.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useContext} from "react";
+import React, {useEffect, useState, useContext, useCallback} from "react";
 
 import SlidesList      from "./SlidesList";
 import Mode            from "../models/Mode";
@@ -49,14 +49,14 @@ const Ation = () => {
 
 	const openFile = () => {
 		window.api.openFileDialog();
-	}
+	};
 
-	const toggleEdit = () => {
+	const toggleEdit = useCallback(() => {
 		if (mode === Mode.NORMAL)
 			setMode(Mode.EDIT);
 		else if (mode === Mode.EDIT)
 			setMode(Mode.NORMAL);
-	}
+	}, [mode]);
 
 	return (
 		<>
@@ -64,8 +64,8 @@ const Ation = () => {
 				<NoFile openFile={openFile} />
 			: (
 				<SlideContext.Provider value={{slide, setSlide, mode, setMode, basePath, slideCount : deck.length}}>
-					<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
-						<Toolbar openFile={openFile} setShowTips={setShowTips} version={version} />
+					<section className={`window${mode === Mode.PRESENT ? " fullscreen" : (mode === Mode.EDIT ? " edit" : "")}`}>
+						<Toolbar openFile={openFile} setShowTips={setShowTips} version={version} toggleEdit={toggleEdit} />
 						<SlidesList deck={deck} meta={meta} font={font} />
 						<main className={`main ${mode === Mode.EDIT ? "edit" : ""}`} style={{
 							"--color-hightlight" : meta?.color_highlight || highlightColor,

src/ui/src/components/KeyboardControl.js

@@ -18,6 +18,8 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 		}
 
 		const keyHandler = event => {
+			const commandOrControl = event.metaKey || event.ctrlKey;
+
 			switch(event.key) {
 				case "Escape":
 					setShowTips(false);
@@ -25,7 +27,13 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 				default:
 					break;
 			}
-			if (!mode || !setMode || !deck || !setShowTips)
+			if (!mode || !setMode || !deck || !setShowTips)
+				return;
+
+			if (commandOrControl && event.key === "e")
+				toggleEdit();
+
+			if (mode === Mode.EDIT)
 				return;
 
 			switch (event.key) {
@@ -65,9 +73,6 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 					event.preventDefault();
 					setShowTips(true);
 					break;
-				case "e":
-					toggleEdit();
-					break;
 				default:
 					return;
 			}
@@ -88,7 +93,7 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 			window.removeEventListener("fullscreenchange", fullscreenHandler);
 		}
 
-	}, [slide, setSlide, mode, setMode, deck, setShowTips, openFile]);
+	}, [slide, setSlide, mode, setMode, deck, setShowTips, openFile, toggleEdit]);
 };
 
 export default KeyboardControl;

src/ui/src/components/Tips.js

@@ -6,7 +6,7 @@ const Cheatsheet = Object.freeze([
 	["Open file",          "⌘+O"],
 	["Close file",         "⌘+W"],
 	["Save file",          "⌘+S"],
-	["Toggle editor",      "e"],
+	["Toggle editor",      "⌘+E"],
 	["Next slide",         "→, Page up"],
 	["Last slide",         "←, Page down"],
 	["Black screen out",   "B"],

src/ui/src/components/Toolbar.js

@@ -14,16 +14,20 @@ const Toolbar = ({openFile, setShowTips, version, toggleEdit}) => {
 		setMode(Mode.PRESENT);
 		setSlide(0);
 		document.documentElement.requestFullscreen();
-	}
+	};
+
+	const toggleMaximize = () => {
+		window.api.maximize();
+	};
 
 	return (
-		<nav className="toolbar">
+		<nav className="toolbar" onDoubleClick={toggleMaximize}>
 			<button onClick={openFile} title="Open file [⌘+O]"><Folder2Open /></button>	
 			<button onClick={present} title="Start presentation [F5]"><Cast /></button>	
 			<Logo />
 			<button onClick={() => window.api.closeFile()} title="Close file [⌘+W]" disabled={slideCount < 1}><XSquare /></button>
 			<button onClick={() => setShowTips(true)} title="Show tips [TAB]"><InfoCircle /></button>	
-			<button onClick={toggleEdit} title="Toggle editor [e]"><LayoutSplit /></button>	
+			<button onClick={toggleEdit} title="Toggle editor [⌘+E]"><LayoutSplit /></button>	
 			<small>v{version}</small>
 		</nav>
 	);