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) {
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")

@ -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",

@ -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",

@ -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 "forms";
@import "toolbar";
@import "settings";
@import "window";
@import "noFile";

@ -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"],

@ -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 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(
<React.StrictMode>
<App />
<Router>
<Routes>
<Route index element={<App />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Router>
</React.StrictMode>
);
Loading…
Cancel
Save