From 8d4cfcc8bbc1d1310fd7905a7cc1fccad88b3850 Mon Sep 17 00:00:00 2001
From: Michael Ochmann <michael.ochmann@propeller.de>
Date: Fri, 30 Sep 2022 19:50:27 +0200
Subject: [PATCH] made toolbar centered and window titlebar inset

---
 src/WindowManager.js                |  6 +++++-
 src/ui/src/assets/css/_toolbar.scss | 26 ++++++++++++++++++++++++++
 src/ui/src/assets/css/_window.scss  | 10 ++++++++++
 src/ui/src/components/Toolbar.js    | 25 +++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/ui/src/assets/css/_toolbar.scss
 create mode 100644 src/ui/src/components/Toolbar.js

diff --git a/src/WindowManager.js b/src/WindowManager.js
index 90c071e..322f49f 100644
--- a/src/WindowManager.js
+++ b/src/WindowManager.js
@@ -43,7 +43,11 @@ class WindowManager {
 	}
 
 	init() {
-		this.mainWindow = WindowManager._CreateWindow();
+		this.mainWindow = WindowManager._CreateWindow({
+			fullscreen     : false,
+			fullscreenable : true,
+			titleBarStyle  : "hiddenInset"
+		});
 
 		if (isDevelopment())
 			this.mainWindow.loadURL("http://localhost:3000");
diff --git a/src/ui/src/assets/css/_toolbar.scss b/src/ui/src/assets/css/_toolbar.scss
new file mode 100644
index 0000000..52f02dd
--- /dev/null
+++ b/src/ui/src/assets/css/_toolbar.scss
@@ -0,0 +1,26 @@
+.toolbar {
+	-webkit-app-region: drag;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.5rem;
+	background: color(mainBackground);
+	border-bottom: solid 1px color(background);
+
+	button {
+		-webkit-app-region: none;
+		padding: 0.5rem !important;
+		margin: 0;
+		font-size: 0.8rem;
+		background-color: color(sidebarBackground);
+		aspect-ratio: 1;
+
+		&:not(:last-child) {
+			margin-right: 0.5rem;
+		}
+
+		svg {
+			margin: 0;
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/ui/src/assets/css/_window.scss b/src/ui/src/assets/css/_window.scss
index c5f5f23..bb81e31 100644
--- a/src/ui/src/assets/css/_window.scss
+++ b/src/ui/src/assets/css/_window.scss
@@ -1,14 +1,23 @@
 .window {
 	display: grid;
 	grid-template-columns: 20% auto;
+	grid-template-rows: 40px auto;
 	height: 100%;
 	width: 100%;
 	position: absolute;
 
+	.toolbar {
+		grid-column: 1 / span 2;
+	}
+
 	main {
 		background: color(mainBackground);
 		overflow-y: auto;
 		transition: all 0.3s ease-in-out;
+		
+		& > .slide:first-child {
+			margin: 2rem;
+		}
 	}
 
 	&.fullscreen {
@@ -17,6 +26,7 @@
 		main {
 			& > .slide:first-child {
 				position: absolute;
+				margin: 0;
 				top: 0;
 				left: 0;
 				width: 100vw;
diff --git a/src/ui/src/components/Toolbar.js b/src/ui/src/components/Toolbar.js
new file mode 100644
index 0000000..3cfcc58
--- /dev/null
+++ b/src/ui/src/components/Toolbar.js
@@ -0,0 +1,25 @@
+import React, {useContext} from "react";
+
+import {Folder2Open, Cast} from "react-bootstrap-icons";
+
+import SlideContext from "../shared/SlideContext";
+import Mode         from "../models/Mode";
+
+const Toolbar = ({openFile}) => {
+	const {setMode, setSlide} = useContext(SlideContext);
+
+	const present = () => {
+		setMode(Mode.PRESENT);
+		setSlide(0);
+		document.documentElement.requestFullscreen();
+	}
+
+	return (
+		<nav className="toolbar">
+			<button onClick={openFile} title="Open file"><Folder2Open /></button>	
+			<button onClick={present} title="Start presentation [F5]"><Cast /></button>	
+		</nav>
+	);
+};
+
+export default Toolbar;
\ No newline at end of file