diff --git a/src/WindowManager.js b/src/WindowManager.js
index 5a0ca7b..ad79bfc 100644
--- a/src/WindowManager.js
+++ b/src/WindowManager.js
@@ -13,7 +13,7 @@ class WindowManager {
constructor(parent) {
this.app = parent;
this.mainWindow = null;
- this.windows = [];
+ this.windows = {};
app.whenReady().then(() => this.init());
@@ -24,11 +24,17 @@ class WindowManager {
init() {
this.mainWindow = WindowManager._CreateWindow({
fullscreen : false,
- fullscreenable : true,
- titleBarStyle : "hiddenInset"
+ fullscreenable : true
+ });
+ this.windows.settings = WindowManager._CreateWindow({
+ height : 300,
+ resizable : false,
+ fullscreenable : false,
+ parent : this.mainWindow,
+ show : true
});
- if (isDevelopment) {
+ if (isDevelopment()) {
globalShortcut.register("CommandOrControl+I", () => {
this.mainWindow.toggleDevTools();
});
@@ -37,10 +43,14 @@ class WindowManager {
});
}
- if (isDevelopment())
+ if (isDevelopment()) {
this.mainWindow.loadURL("http://localhost:3000");
- else
+ this.windows.settings.loadURL("http://localhost:3000/settings");
+ }
+ else {
this.mainWindow.loadURL(`file://${__dirname}/ui/build/index.html`);
+ this.windows.settings.loadURL(`file://${__dirname}/ui/build/index.html/settings`);
+ }
}
static _CreateWindow(options = null, parent = null) {
@@ -49,6 +59,7 @@ class WindowManager {
height : 600,
show : false,
devTools : isDevelopment(),
+ titleBarStyle : "hiddenInset",
webPreferences : {
contextIsolation : true,
preload : path.join(__dirname, "..", "contextAPI.js")
diff --git a/src/ui/package-lock.json b/src/ui/package-lock.json
index b2ea987..a48dd76 100644
--- a/src/ui/package-lock.json
+++ b/src/ui/package-lock.json
@@ -2075,6 +2075,11 @@
"source-map": "^0.7.3"
}
},
+ "@remix-run/router": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.1.tgz",
+ "integrity": "sha512-eBV5rvW4dRFOU1eajN7FmYxjAIVz/mRHgUE9En9mBn6m3mulK3WTR5C3iQhL9MZ14rWAq+xOlEaCkDiW0/heOg=="
+ },
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -10053,6 +10058,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
+ "react-router": {
+ "version": "6.4.1",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.1.tgz",
+ "integrity": "sha512-OJASKp5AykDWFewgWUim1vlLr7yfD4vO/h+bSgcP/ix8Md+LMHuAjovA74MQfsfhQJGGN1nHRhwS5qQQbbBt3A==",
+ "requires": {
+ "@remix-run/router": "1.0.1"
+ }
+ },
+ "react-router-dom": {
+ "version": "6.4.1",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.1.tgz",
+ "integrity": "sha512-MY7NJCrGNVJtGp8ODMOBHu20UaIkmwD2V3YsAOUQoCXFk7Ppdwf55RdcGyrSj+ycSL9Uiwrb3gTLYSnzcRoXww==",
+ "requires": {
+ "@remix-run/router": "1.0.1",
+ "react-router": "6.4.1"
+ }
+ },
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/src/ui/package.json b/src/ui/package.json
index 275ac2f..99d532d 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -10,6 +10,7 @@
"react": "^18.2.0",
"react-bootstrap-icons": "^1.9.1",
"react-dom": "^18.2.0",
+ "react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"react-syntax-highlighter": "^15.5.0",
"sass": "^1.55.0",
diff --git a/src/ui/src/assets/css/_settings.scss b/src/ui/src/assets/css/_settings.scss
new file mode 100644
index 0000000..30abb12
--- /dev/null
+++ b/src/ui/src/assets/css/_settings.scss
@@ -0,0 +1,23 @@
+.settings {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+ .navbar {
+ padding: 1.5rem 0.5rem 0 0.5rem;
+ background: color(sidebarBackground);
+ app-region: drag;
+
+ button {
+ padding: 0.3rem 0.5rem;
+
+ svg {
+ font-size: 1.3rem;
+ }
+
+ label {
+ margin-top: 0.2rem;
+ display: block;
+ font-size: 0.8rem;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/ui/src/assets/css/ation.scss b/src/ui/src/assets/css/ation.scss
index 41ab486..69f1b7c 100644
--- a/src/ui/src/assets/css/ation.scss
+++ b/src/ui/src/assets/css/ation.scss
@@ -4,6 +4,7 @@
@import "scrollbars";
@import "forms";
@import "toolbar";
+@import "settings";
@import "window";
@import "noFile";
diff --git a/src/ui/src/components/Tips.js b/src/ui/src/components/Tips.js
index 54abdc3..8760045 100644
--- a/src/ui/src/components/Tips.js
+++ b/src/ui/src/components/Tips.js
@@ -4,6 +4,7 @@ const Cheatsheet = Object.freeze([
["Start presentation", "F5"],
["Stop presentation", "ESC"],
["Open file", "⌘+O"],
+ ["Close file", "⌘+W"],
["Next slide", "→, Page up"],
["Last slide", "←, Page down"],
["Black screen out", "B"],
diff --git a/src/ui/src/components/settings/Navbar.js b/src/ui/src/components/settings/Navbar.js
new file mode 100644
index 0000000..4c8a82e
--- /dev/null
+++ b/src/ui/src/components/settings/Navbar.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+import {Gear} from "react-bootstrap-icons";
+
+const Navbar = () => {
+ return (
+
+ );
+};
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/ui/src/components/settings/Settings.js b/src/ui/src/components/settings/Settings.js
new file mode 100644
index 0000000..1177f13
--- /dev/null
+++ b/src/ui/src/components/settings/Settings.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+import Navbar from "./Navbar";
+
+const Settings = () => {
+ return (
+
+ );
+};
+
+export default Settings;
\ No newline at end of file
diff --git a/src/ui/src/index.js b/src/ui/src/index.js
index a545a68..b8709f0 100644
--- a/src/ui/src/index.js
+++ b/src/ui/src/index.js
@@ -1,7 +1,10 @@
import React from "react";
import ReactDOM from "react-dom/client";
+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 "./assets/css/ation.scss";
@@ -11,6 +14,11 @@ const App = withDrop(Ation);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
-
+
+
+ } />
+ } />
+
+
);
\ No newline at end of file