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