From c2b98b3e84e5e5cf273e3736e4de578aa8b80b21 Mon Sep 17 00:00:00 2001 From: Cuptain Date: Sun, 23 Jun 2024 10:36:47 +1000 Subject: [PATCH] dropdown box --- FCLauncher/src/index.html | 17 ++++++++++++++- FCLauncher/src/main.js | 44 ++++++++++++++++++++++++++++++++++++++- FCLauncher/src/styles.css | 39 ++++++++++++++++++++++++++++++++++ 3 files changed, 98 insertions(+), 2 deletions(-) diff --git a/FCLauncher/src/index.html b/FCLauncher/src/index.html index 3b7e70d..b28fa23 100644 --- a/FCLauncher/src/index.html +++ b/FCLauncher/src/index.html @@ -8,7 +8,7 @@ - +

Welcome to Tauri!

@@ -27,7 +27,22 @@ />
+ +
+ +
+ Pack 1 + Pack 2 + Pack 3 +
+
+

Click on the Tauri logo to learn more about the framework

diff --git a/FCLauncher/src/main.js b/FCLauncher/src/main.js index 95a1702..3d65437 100644 --- a/FCLauncher/src/main.js +++ b/FCLauncher/src/main.js @@ -5,7 +5,8 @@ let greetMsgEl; async function greet() { // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command - greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value }); + greetMsgEl.textContent = "testing"; + //greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value }); } window.addEventListener("DOMContentLoaded", () => { @@ -16,3 +17,44 @@ window.addEventListener("DOMContentLoaded", () => { greet(); }); }); +function packSelect() { + document.getElementById("myDropdown").classList.toggle("show"); + + +} + +function load() { + console.log("loading"); + var dropdown = document.getElementById("Modpacks"); + var opt = document.createElement("option"); + opt.text = 'something'; + opt.value = 'somethings value'; + dropdown.options.add(opt); +} + +window.onload = async function() { + invoke("get_modpacks").then(addModpacks); + +} + +function addModpacks(modpacks) { + var dropdown = document.getElementById("Modpacks"); + var opt = document.createElement("option"); + opt.text = modpacks[0]; + opt.value = 'somethings value'; + dropdown.options.add(opt); +} + + +//window.onclick = function(event) { + //if (!event.target.matches('.dropbtn')) { + //var dropdowns = document.getElementsByClassName("dropdown-content"); + //var i; + //for (i = 0; i < dropdowns.length; i++) { + //var openDropdown = dropdowns[i]; + //if (openDropdown.classList.contains('show')) { + //openDropdown.classList.remove('show'); + //} + //} + //} +//} \ No newline at end of file diff --git a/FCLauncher/src/styles.css b/FCLauncher/src/styles.css index e57b8ac..10be213 100644 --- a/FCLauncher/src/styles.css +++ b/FCLauncher/src/styles.css @@ -109,4 +109,43 @@ button { button:active { background-color: #0f0f0f69; } + +.dropbtn { + background-color: #3498DB; + color: white; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; +} + +.dropbtn:hover, .dropbtn:focus { + background-color: #2980B9; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown-content a:hover {background-color: #DDD;} + +.show {display:block;} + }