Grasscutters/GrassClipper
3
0
Fork 0
mirror of https://github.com/Grasscutters/GrassClipper.git synced 2024-11-16 12:51:49 +00:00
Code Issues Projects Releases Wiki Activity

experimental settings panel

Browse Source
This commit is contained in:
SpikeHD 2022-04-21 14:53:53 -07:00
parent fa4092c664
commit 07062b159c
3 changed files with 94 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
resources/index.html
View File

@ -8,6 +8,18 @@
<script src="js/index.js"></script> <script src="js/index.js"></script>
</head> </head>
<body> <body>
<div id="settingsPanel">
<span id="fullSettingsTitle">Settings</span>
<div id="settingsPanelInner">
<div class="settingTitle">
<span>Scripts</span>
</div>
<div class="settingsRow">
<span class="settingLabel">Kill Switch</span>
<input type="checkbox" id="killswitchOption" />
</div>
</div>
</div>
<div id="controlBar"> <div id="controlBar">
<span id="titleSection"> <span id="titleSection">
GrassClipper GrassClipper

34
resources/js/index.js
View File

@ -24,12 +24,35 @@ document.addEventListener('DOMContentLoaded', async () => {
// Exit favorites list when clicking outside of it // Exit favorites list when clicking outside of it
window.addEventListener("click", function() { window.addEventListener("click", function(e) {
const favList = document.querySelector('#ipList') const favList = document.querySelector('#ipList')
const settingsPanel = document.querySelector('#settingsPanel')
// This will close the favorites list no matter what is clicked
if (favList.style.display !== 'none') { if (favList.style.display !== 'none') {
favList.style.display = 'none' favList.style.display = 'none'
favList.style.transform = '' favList.style.transform = ''
} }
// This will close the settings panel no matter what is clicked
let settingCheckElm = e.target
while(settingCheckElm.tagName !== 'BODY') {
if (settingCheckElm.id === 'settingsPanel'
|| settingCheckElm.id === 'settingsBtn') {
return
}
settingCheckElm = settingCheckElm.parentElement
}
// We travelled through the parents, so if we are at the body, we clicked outside of the settings panel
if (settingCheckElm.tagName === 'BODY') {
// This will close the settings panel only when something outside of it is clicked
if (settingsPanel.style.display !== 'none') {
settingsPanel.style.display = 'none'
}
}
}); });
}) })
@ -276,6 +299,15 @@ async function setFavorite() {
Neutralino.storage.setData('favorites', JSON.stringify(ipArr)) Neutralino.storage.setData('favorites', JSON.stringify(ipArr))
} }
async function openSettings() {
const settings = document.querySelector('#settingsPanel')
const settingsBtn = document.querySelector('#settingsBtn')
if (settings.style.display === 'none') {
settings.style.removeProperty('display')
}
}
/** /**
* Set the game folder by opening a folder picker * Set the game folder by opening a folder picker
*/ */

49
resources/style/index.css
View File

@ -11,6 +11,55 @@ body {
filter: brightness(0.6); filter: brightness(0.6);
} }
#settingsPanel {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-right: -50%;
z-index: 99;
padding: 20px;
background-color: #fff;
border-radius: 2px;
border: 1px solid #141414;
width: 30%;
height: 60%;
font-family: system-ui;
}
#fullSettingsTitle {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
#settingsPanelInner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 20%;
}
.settingsRow {
width: 100%;
}
.settingTitle {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
}
.settingLabel {
display:inline-block;
font-size: 1em;
font-weight: normal;
margin-bottom: 10px;
margin-right: 50%;
}
#ipList { #ipList {
position: absolute; position: absolute;
z-index: 99; z-index: 99;