Compare commits

..

No commits in common. '87e2bf0b2fb8ebfe56546eb59b27c9baa95c7d7f' and 'ac6c5b0ce113778ff79b01c7538e3eef66440b24' have entirely different histories.

  1. 18
      src/SettingsManager.js
  2. 14
      src/WindowManager.js
  3. 64
      src/ui/src/assets/css/_forms.scss
  4. 4
      src/ui/src/assets/css/_settings.scss
  5. 1
      src/ui/src/assets/css/ation.scss
  6. 25
      src/ui/src/components/Toolbar.js
  7. 23
      src/ui/src/components/settings/General.js
  8. 12
      src/ui/src/components/shared/Toggle.js

@ -8,23 +8,17 @@ const path = require("path");
class SettingsManager { class SettingsManager {
app; app;
data; data;
locked;
constructor(app) { constructor(app) {
this.app = app; this.app = app;
this.data = null; this.data = null;
this.locked = false;
if (!SettingsManager.CheckFileSystem()) { if (!SettingsManager.CheckFileSystem()) {
if (!fsn.existsSync(SettingsManager.Folder)) if (!fsn.existsSync(SettingsManager.Folder))
fsn.mkdirSync(SettingsManager.Folder); fsn.mkdirSync(SettingsManager.Folder);
fsn.writeFileSync(SettingsManager.File, "{}"); fsn.writeFileSync(SettingsManager.File, "{}");
} }
try { this.data = JSON.parse(fsn.readFileSync(SettingsManager.File, {encoding : "utf-8"}));
this.data = JSON.parse(fsn.readFileSync(SettingsManager.File, {encoding : "utf-8"})) ?? {};
} catch (error) {
this.data = {};
}
ipcMain.handle("SettingsManager::get", (_, key, defaultValue = null) => this.get(key, defaultValue)); ipcMain.handle("SettingsManager::get", (_, key, defaultValue = null) => this.get(key, defaultValue));
ipcMain.handle("SettingsManager::set", (_, key, value) => this.set(key, value)); ipcMain.handle("SettingsManager::set", (_, key, value) => this.set(key, value));
@ -47,15 +41,9 @@ class SettingsManager {
this.app.windowManager.mainWindow?.send("SettingsManager::change", this.data); this.app.windowManager.mainWindow?.send("SettingsManager::change", this.data);
} }
async save() { save() {
if (this.locked) { fs.writeFile(SettingsManager.File, JSON.stringify(this.data, null, 4));
setTimeout(async () => await this.save(), 200);
return;
}
this.locked = true;
await fs.writeFile(SettingsManager.File, JSON.stringify(this.data, null, 4));
this.change(); this.change();
this.locked = false;
} }
async reset() { async reset() {

@ -24,15 +24,9 @@ class WindowManager {
} }
init() { init() {
const shouldRestore = this.app.settingsManager.get("restoreWindow", false);
const width = shouldRestore ? this.app.settingsManager.get("windowWidth", 800) : 800;
const height = shouldRestore ? this.app.settingsManager.get("windowHeight", 600) : 600;
this.mainWindow = WindowManager._CreateWindow({ this.mainWindow = WindowManager._CreateWindow({
fullscreen : false, fullscreen : false,
fullscreenable : true, fullscreenable : true
width,
height
}); });
this.windows.settings = WindowManager._CreateWindow({ this.windows.settings = WindowManager._CreateWindow({
height : 300, height : 300,
@ -42,12 +36,6 @@ class WindowManager {
show : false show : false
}, this.mainWindow, false); }, this.mainWindow, false);
this.mainWindow.on("resize", () => {
const [width, height] = this.mainWindow.getSize();
this.app.settingsManager.set("windowWidth", width);
this.app.settingsManager.set("windowHeight", height);
});
// on windows and linux we need to hide the main menu in the settings // on windows and linux we need to hide the main menu in the settings
// window, because it would look odd. // window, because it would look odd.
if (["win32", "linux"].includes(process.platform)) { if (["win32", "linux"].includes(process.platform)) {

@ -52,67 +52,3 @@ select {
} }
} }
} }
$size : 20px;
$spacing : 3px;
.toggle {
position: relative;
display: inline-block;
width: calc(($size + $spacing) * 2);
height: calc($size + 2 * $spacing);
vertical-align: middle;
margin: 0;
input {
opacity: 0;
width: 0;
height: 0;
&:checked {
& + .slider {
background-color: color(hightlight);
}
}
&:checked + .slider::before {
transform: translateX($size);
}
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: color(fadedForeground);
-webkit-transition: .4s;
transition: .4s;
&::before {
position: absolute;
content: "";
height: $size;
width: $size;
left: $spacing;
bottom: $spacing;
background-color: color(sidebarBackground);
-webkit-transition: .4s;
transition: .4s;
}
&.round {
border-radius: calc($size * 2);
&::before {
border-radius: 50%;
}
}
}
& + label {
vertical-align: middle;
}
}

@ -73,10 +73,6 @@
align-self: flex-start; align-self: flex-start;
} }
} }
&.mb {
margin-bottom: 2rem;
}
} }
} }

@ -39,7 +39,6 @@ body {
app-region: drag; app-region: drag;
height: 30px; height: 30px;
width: 100%; width: 100%;
user-select: none;
} }
::selection { ::selection {

@ -1,4 +1,4 @@
import React, {useContext, useEffect, useRef} from "react"; import React, {useContext} from "react";
import {Folder2Open, Cast, InfoCircle, XSquare, LayoutSplit} from "react-bootstrap-icons"; import {Folder2Open, Cast, InfoCircle, XSquare, LayoutSplit} from "react-bootstrap-icons";
@ -8,7 +8,6 @@ import Mode from "../models/Mode";
import {ReactComponent as Logo} from "../assets/images/logo_ation.svg"; import {ReactComponent as Logo} from "../assets/images/logo_ation.svg";
const Toolbar = ({openFile, setShowTips, version, toggleEdit}) => { const Toolbar = ({openFile, setShowTips, version, toggleEdit}) => {
const toolbar = useRef();
const {setMode, setSlide, slideCount} = useContext(SlideContext); const {setMode, setSlide, slideCount} = useContext(SlideContext);
const present = () => { const present = () => {
@ -17,30 +16,12 @@ const Toolbar = ({openFile, setShowTips, version, toggleEdit}) => {
document.documentElement.requestFullscreen(); document.documentElement.requestFullscreen();
}; };
const toggleMaximize = event => { const toggleMaximize = () => {
if (event.target !== toolbar.current)
return;
window.api.maximize(); window.api.maximize();
event.stopPropagation();
}; };
// prevent text selection on doubleclick
useEffect(() => {
const tBar = toolbar.current;
const doubleClickListener = event => {
if (event.detail > 1)
event.preventDefault();
};
tBar?.addEventListener("mousedown", doubleClickListener);
return () => {
tBar?.removeEventListener("mousedown", doubleClickListener);
};
}, [toolbar]);
return ( return (
<nav className="toolbar" onDoubleClick={toggleMaximize} ref={toolbar}> <nav className="toolbar" onDoubleClick={toggleMaximize}>
<button onClick={openFile} title="Open file [⌘+O]"><Folder2Open /></button> <button onClick={openFile} title="Open file [⌘+O]"><Folder2Open /></button>
<button onClick={present} title="Start presentation [F5]"><Cast /></button> <button onClick={present} title="Start presentation [F5]"><Cast /></button>
<Logo /> <Logo />

@ -1,36 +1,15 @@
import React, {useState, useEffect} from "react"; import React from "react";
import Toggle from "../shared/Toggle";
const General = () => { const General = () => {
const [restoreWindow, setRestoreWindow] = useState(false);
useEffect(() => {
(async () => {
setRestoreWindow(await window.appSettings.get("restoreWindow", false));
})(setRestoreWindow);
}, []);
const changeRestoreWindow = event => {
const value = event.target.checked === true;
setRestoreWindow(value);
window.appSettings.set("restoreWindow", value);
};
const reset = () => { const reset = () => {
window.appSettings.reset(); window.appSettings.reset();
} }
return ( return (
<>
<section className="grid mb">
<label>Restore window size:</label>
<Toggle checked={restoreWindow} onChange={changeRestoreWindow} />
</section>
<section style={{textAlign : "center"}}> <section style={{textAlign : "center"}}>
<button className="danger" onClick={reset}>reset all settings to default</button> <button className="danger" onClick={reset}>reset all settings to default</button>
</section> </section>
</>
); );
}; };

@ -1,12 +0,0 @@
import React from "react";
const Toggle = ({...props}) => {
return (
<label className="toggle">
<input type="checkbox" {...props} />
<span className="slider round"></span>
</label>
);
};
export default Toggle;
Loading…
Cancel
Save