added functionality to restore former window size

development
Michael Ochmann 1 year ago
parent ac6c5b0ce1
commit b8ad7b57da
  1. 14
      src/WindowManager.js
  2. 64
      src/ui/src/assets/css/_forms.scss
  3. 4
      src/ui/src/assets/css/_settings.scss
  4. 1
      src/ui/src/assets/css/ation.scss
  5. 29
      src/ui/src/components/settings/General.js
  6. 12
      src/ui/src/components/shared/Toggle.js

@ -24,9 +24,15 @@ class WindowManager {
}
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({
fullscreen : false,
fullscreenable : true
fullscreenable : true,
width,
height
});
this.windows.settings = WindowManager._CreateWindow({
height : 300,
@ -36,6 +42,12 @@ class WindowManager {
show : 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
// window, because it would look odd.
if (["win32", "linux"].includes(process.platform)) {

@ -51,4 +51,68 @@ select {
font-size: 1.8vw;
}
}
}
$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,6 +73,10 @@
align-self: flex-start;
}
}
&.mb {
margin-bottom: 2rem;
}
}
}

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

@ -1,15 +1,36 @@
import React from "react";
import React, {useState, useEffect} from "react";
import Toggle from "../shared/Toggle";
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 = () => {
window.appSettings.reset();
}
return (
<section style={{textAlign : "center"}}>
<button className="danger" onClick={reset}>reset all settings to default</button>
</section>
<>
<section className="grid mb">
<label>Restore window size:</label>
<Toggle checked={restoreWindow} onChange={changeRestoreWindow} />
</section>
<section style={{textAlign : "center"}}>
<button className="danger" onClick={reset}>reset all settings to default</button>
</section>
</>
);
};

@ -0,0 +1,12 @@
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