From 07062b159c4beba1ba8741f1767aeeeeba44b863 Mon Sep 17 00:00:00 2001 From: SpikeHD Date: Thu, 21 Apr 2022 14:53:53 -0700 Subject: [PATCH] experimental settings panel --- resources/index.html | 12 ++++++++++ resources/js/index.js | 34 ++++++++++++++++++++++++++- resources/style/index.css | 49 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 1 deletion(-) diff --git a/resources/index.html b/resources/index.html index b49bdbb..825f91a 100644 --- a/resources/index.html +++ b/resources/index.html @@ -8,6 +8,18 @@ +
+ Settings +
+
+ Scripts +
+
+ Kill Switch + +
+
+
GrassClipper diff --git a/resources/js/index.js b/resources/js/index.js index cd25f95..a7b9f69 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -24,12 +24,35 @@ document.addEventListener('DOMContentLoaded', async () => { // Exit favorites list when clicking outside of it - window.addEventListener("click", function() { + window.addEventListener("click", function(e) { 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') { favList.style.display = 'none' 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)) } +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 */ diff --git a/resources/style/index.css b/resources/style/index.css index 11bc7c4..a60085f 100644 --- a/resources/style/index.css +++ b/resources/style/index.css @@ -11,6 +11,55 @@ body { 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 { position: absolute; z-index: 99;