Lino/StickExporterTX
1
0
Fork 0
mirror of https://github.com/LinoSchmidt/StickExporterTX.git synced 2026-03-21 01:51:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated design

Browse Source
This commit is contained in:
Lino Schmidt
2022-06-15 02:16:03 +02:00
parent 9d6daa069e
commit e4b758bb11
3 changed files with 76 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/ui/settingsSide.tsx
View File

@@ -45,43 +45,47 @@ function SettingsSide() {
return (
<div id="content">
<div className="dataDiv">
<p>FPS: </p>
<input id="fpsInput" type="number" value={fps.toString()} min="1" step="1" onChange={e => {
if(e.target.value.trim().length !== 0) setFps(parseInt(e.target.value));
}}/>
</div>
<div className="dataDiv">
<p>Width: </p>
<input id="widthInput" type="number" value={width.toString()} min="1" step="1" onChange={e => {
if(e.target.value.trim().length !== 0) setWidth(parseInt(e.target.value));
}}/>
</div>
<div className="dataDiv">
<p>Stick Distance: </p>
<input id="stickDistanceInput" type="number" value={stickDistance.toString()} min="0" step="1" onChange={e => {
if(e.target.value.trim().length !== 0) setStickDistance(parseInt(e.target.value));
}}/>
</div>
<div className="dataDiv">
<p>Stick Mode:</p>
<label htmlFor="stickMode" className="toggle-switchy" data-style="rounded" data-text="12">
<input checked={stickMode2} type="checkbox" id="stickMode" onChange={e => {
setStickMode2(e.target.checked);
<div id="settingRow">
<span className="inputSpan">
<label>FPS</label>
<input id="fpsInput" type="number" value={fps.toString()} min="1" step="1" onChange={e => {
if(e.target.value.trim().length !== 0) setFps(parseInt(e.target.value));
}}/>
<span className="toggle">
<span className="switch"></span>
</span>
</label>
</span>
<span className="inputSpan">
<label>Width: </label>
<input id="widthInput" type="number" value={width.toString()} min="1" step="1" onChange={e => {
if(e.target.value.trim().length !== 0) setWidth(parseInt(e.target.value));
}}/>
</span>
<span className="inputSpan">
<label>Stick Distance: </label>
<input id="stickDistanceInput" type="number" value={stickDistance.toString()} min="0" step="1" onChange={e => {
if(e.target.value.trim().length !== 0) setStickDistance(parseInt(e.target.value));
}}/>
</span>
</div>
<div id="settingRow">
<div className="dataDiv">
<p>Stick Mode:</p>
<label htmlFor="stickMode" className="toggle-switchy" data-style="rounded" data-text="12">
<input checked={stickMode2} type="checkbox" id="stickMode" onChange={e => {
setStickMode2(e.target.checked);
}}/>
<span className="toggle">
<span className="switch"></span>
</span>
</label>
</div>
<button id="resetSettingsButton" onClick={() => {
settingListLoadDefault();
setFps(settingList.fps);
setWidth(settingList.width);
setStickDistance(settingList.stickDistance);
setStickMode2(settingList.stickMode2);
}}>Reset Settings</button>
</div>
<button onClick={() => {
settingListLoadDefault();
setFps(settingList.fps);
setWidth(settingList.width);
setStickDistance(settingList.stickDistance);
setStickMode2(settingList.stickMode2);
}}>Reset Settings</button>
<div id="renderImgDiv">
<img id="render-ex" src={renderImg}></img>
{renderLoading? <RenderLoadingSpinner/> : null}

35
src/index.css
View File

@@ -239,4 +239,39 @@ button {
}
button:hover {
transform: scale(1.05);
}
.inputSpan {
position: relative;
display: inline-block;
align-items: center;
padding-bottom: 15px;
}
.inputSpan input {
width: 75px;
padding: 8px 0;
border: 0;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
text-align: center;
font-size: large;
line-height: 0px;
}
.inputSpan label {
padding: 10px 10px;
background: #00c24a;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
font-weight: bolder;
text-shadow: #0d131e 1px 1px 1px;
}
#settingRow {
display: flex;
justify-content: space-around;
align-items: center;
}
#resetSettingsButton {
height: 35px;
}

2
src/index.ts
View File

@@ -58,6 +58,8 @@ const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
minWidth: 600,
minHeight: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,