added foundation for settings dialog

feature/settings-window
Michael Ochmann 3 years ago
parent d981abb377
commit c79b0a91b7
  1. 23
      src/WindowManager.js
  2. 22
      src/ui/package-lock.json
  3. 1
      src/ui/package.json
  4. 23
      src/ui/src/assets/css/_settings.scss
  5. 1
      src/ui/src/assets/css/ation.scss
  6. 1
      src/ui/src/components/Tips.js
  7. 16
      src/ui/src/components/settings/Navbar.js
  8. 13
      src/ui/src/components/settings/Settings.js
  9. 10
      src/ui/src/index.js

@ -13,7 +13,7 @@ class WindowManager {
constructor(parent) { constructor(parent) {
this.app = parent; this.app = parent;
this.mainWindow = null; this.mainWindow = null;
this.windows = []; this.windows = {};
app.whenReady().then(() => this.init()); app.whenReady().then(() => this.init());
@ -24,11 +24,17 @@ class WindowManager {
init() { init() {
this.mainWindow = WindowManager._CreateWindow({ this.mainWindow = WindowManager._CreateWindow({
fullscreen : false, fullscreen : false,
fullscreenable : true, fullscreenable : true
titleBarStyle : "hiddenInset" });
this.windows.settings = WindowManager._CreateWindow({
height : 300,
resizable : false,
fullscreenable : false,
parent : this.mainWindow,
show : true
}); });
if (isDevelopment) { if (isDevelopment()) {
globalShortcut.register("CommandOrControl+I", () => { globalShortcut.register("CommandOrControl+I", () => {
this.mainWindow.toggleDevTools(); this.mainWindow.toggleDevTools();
}); });
@ -37,10 +43,14 @@ class WindowManager {
}); });
} }
if (isDevelopment()) if (isDevelopment()) {
this.mainWindow.loadURL("http://localhost:3000"); 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.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) { static _CreateWindow(options = null, parent = null) {
@ -49,6 +59,7 @@ class WindowManager {
height : 600, height : 600,
show : false, show : false,
devTools : isDevelopment(), devTools : isDevelopment(),
titleBarStyle : "hiddenInset",
webPreferences : { webPreferences : {
contextIsolation : true, contextIsolation : true,
preload : path.join(__dirname, "..", "contextAPI.js") preload : path.join(__dirname, "..", "contextAPI.js")

@ -2075,6 +2075,11 @@
"source-map": "^0.7.3" "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": { "@rollup/plugin-babel": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", "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", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" "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": { "react-scripts": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

@ -10,6 +10,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap-icons": "^1.9.1", "react-bootstrap-icons": "^1.9.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"react-syntax-highlighter": "^15.5.0", "react-syntax-highlighter": "^15.5.0",
"sass": "^1.55.0", "sass": "^1.55.0",

@ -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;
}
}
}
}

@ -4,6 +4,7 @@
@import "scrollbars"; @import "scrollbars";
@import "forms"; @import "forms";
@import "toolbar"; @import "toolbar";
@import "settings";
@import "window"; @import "window";
@import "noFile"; @import "noFile";

@ -4,6 +4,7 @@ const Cheatsheet = Object.freeze([
["Start presentation", "F5"], ["Start presentation", "F5"],
["Stop presentation", "ESC"], ["Stop presentation", "ESC"],
["Open file", "⌘+O"], ["Open file", "⌘+O"],
["Close file", "⌘+W"],
["Next slide", "→, Page up"], ["Next slide", "→, Page up"],
["Last slide", "←, Page down"], ["Last slide", "←, Page down"],
["Black screen out", "B"], ["Black screen out", "B"],

@ -0,0 +1,16 @@
import React from "react";
import {Gear} from "react-bootstrap-icons";
const Navbar = () => {
return (
<nav className="navbar">
<button>
<Gear />
<label>General</label>
</button>
</nav>
);
};
export default Navbar;

@ -0,0 +1,13 @@
import React from "react";
import Navbar from "./Navbar";
const Settings = () => {
return (
<section className="settings">
<Navbar />
</section>
);
};
export default Settings;

@ -1,7 +1,10 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Ation from "./components/Ation"; import Ation from "./components/Ation";
import Settings from "./components/settings/Settings";
import withDrop from "./higherOrderComponents/withDrop"; import withDrop from "./higherOrderComponents/withDrop";
import "./assets/css/ation.scss"; import "./assets/css/ation.scss";
@ -11,6 +14,11 @@ const App = withDrop(Ation);
const root = ReactDOM.createRoot(document.getElementById("root")); const root = ReactDOM.createRoot(document.getElementById("root"));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <Router>
<Routes>
<Route index element={<App />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Router>
</React.StrictMode> </React.StrictMode>
); );
Loading…
Cancel
Save