diff --git a/downloader.js b/downloader.js index c082adaa..0494c6b7 100644 --- a/downloader.js +++ b/downloader.js @@ -166,6 +166,13 @@ function toggleFormAccessibility(disable) { document.getElementById("downloadbtn").classList.replace(((disable) ? "btn-primary" : "btn-disabled"), ((!disable) ? "btn-primary" : "btn-disabled")) } + +function setTheme(theme) { + document.getElementById("theme-auto").ariaSelected = (theme === "auto").toString() + document.getElementById("theme-light").ariaSelected = (theme === "light").toString() + document.getElementById("theme-dark").ariaSelected = (theme === "dark").toString() +} + // main.js sends a ready message if the page is loaded in. This will be received here. ipcRenderer.on("ready", async () => { if (!ready) return @@ -188,6 +195,7 @@ ipcRenderer.on("ready", async () => { */ if (terminals[0]) { console.log(`${terminals[1].length} terminals found in PATH.`) + document.getElementById("terminals-found").innerText = terminals[1].length.toString() terminal_dropdown.selectedIndex = terminals[1][0] // set the terminal dropdown to the first available terminal found. } else { console.log("No terminals found in PATH. Continuing with default values") // when no terminals are found on the system, or when linux is not used. @@ -217,10 +225,33 @@ window.addEventListener("DOMContentLoaded", () => { document.getElementById("downloadbtn").addEventListener("click", () => { if (document.getElementById("downloadbtn").disabled === false) submitForm() }) + document.getElementById("settings-button").addEventListener("click", () => { + console.log("Settings button clicked") + + // show the modal. This is done by setting the display to block. + document.getElementById("settings-surrounding").style.display = "block" + }) + document.getElementById("settings-surrounding").addEventListener("click", (event) => { + if (event.target === document.getElementById("settings-surrounding")) { + document.getElementById("settings-surrounding").style.display = "none" + } + }) + document.getElementById("theme-auto").addEventListener("click", () => { + setTheme("auto") + document.getElementById("theme").setAttribute("data-color-mode", "auto") + }) + document.getElementById("theme-light").addEventListener("click", () => { + setTheme("light") + document.getElementById("theme").setAttribute("data-color-mode", "light") + }) + document.getElementById("theme-dark").addEventListener("click", () => { + setTheme("dark") + document.getElementById("theme").setAttribute("data-color-mode", "dark") + }) }) ipcRenderer.on("file", (event, file) => { console.log("path selected by user: " + file) document.getElementById("checkpath").ariaDisabled = false // Makes the check button active exportedFile = file.toString() -}) \ No newline at end of file +}) diff --git a/index.html b/index.html index 992923b1..2007ca5a 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,6 @@ - + @@ -136,15 +136,25 @@ +
- +
+ + +
-
+
+
+

Settings

+
+
+
+
+ +
+
+
+ + + +
+
+
+
+
+
+ +
+
+
+ found: none +
+
+
+
+
+
+
diff --git a/main.js b/main.js index dd9e46d1..acd85e48 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,6 @@ const {app, BrowserWindow, dialog, ipcMain} = require("electron") const {platformpath} = require("./utils") - - const createWindow = () => { // Create the browser window. const mainWindow = new BrowserWindow({ diff --git a/style.css b/style.css index cf9c394e..abdb553c 100644 --- a/style.css +++ b/style.css @@ -3,11 +3,40 @@ src: url('Hubot-Sans.woff2') format('woff2 supports variations'), url('Hubot-Sans.woff2') format('woff2-variations'); - font-weight: 770; + font-weight: 700; font-stretch: expanded; } .f1-light { font-family: 'Hubot Sans', sans-serif; overflow: hidden; white-space: nowrap; -} \ No newline at end of file +} + +/* The grey part */ +.settings-surrounding { + display: block; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.33); + +} + +.settings-content { + border-radius: 10px; + overflow: auto; + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px black solid; + width: 90vw; /* 90vw -> 90% */ + color: rgba(0, 0, 0, 0.9); +} + +.hide { + display: none; +} diff --git a/utils.js b/utils.js index 601b215e..3fcfb0f8 100644 --- a/utils.js +++ b/utils.js @@ -326,4 +326,4 @@ const forceTerminals = async () => { module.exports = { preDownloadCheck, download, createCommand, runCommand, removeDir, removeFile, unzip, platformpath, forceTerminals -} \ No newline at end of file +}