diff --git a/src/components/Dropdown.astro b/src/components/Dropdown.astro
index afb3802..2ea995a 100644
--- a/src/components/Dropdown.astro
+++ b/src/components/Dropdown.astro
@@ -12,7 +12,7 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
{
dropdownList.map((item: any) => {
return (
-
{item}
+ {item}
)
})
}
@@ -34,6 +34,7 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
font-family: 'Varela Round', sans-serif;
width: 100%;
border-radius: 10px;
+ min-width: 140px;
}
.dropdown-menu {
margin: 0;
diff --git a/src/components/Input.astro b/src/components/Input.astro
new file mode 100644
index 0000000..37083ee
--- /dev/null
+++ b/src/components/Input.astro
@@ -0,0 +1,7 @@
+---
+const { type } = Astro.props;
+---
+
+
+
+
\ No newline at end of file
diff --git a/src/components/TabList.astro b/src/components/SettingsTablist.astro
similarity index 82%
rename from src/components/TabList.astro
rename to src/components/SettingsTablist.astro
index c4ed157..df949fd 100644
--- a/src/components/TabList.astro
+++ b/src/components/SettingsTablist.astro
@@ -1,5 +1,6 @@
---
import Dropdown from "./Dropdown.astro";
+import Input from "./Input.astro";
---
@@ -7,13 +8,21 @@ import Dropdown from "./Dropdown.astro";
Proxy
-
Selected Proxy
+
Selected Proxy
-
Search Engine
+
Search Engine
+
+
@@ -92,7 +101,7 @@ import Dropdown from "./Dropdown.astro";
let dropdown = document.getElementById(toggle.id + "-menu")
if (dropdown) {
if (dropdown.style.maxHeight == '0px' || dropdown.style.maxHeight == '') {
- dropdown.style.maxHeight = dropdown.scrollHeight + 'px'; /* Set max-height dynamically */
+ dropdown.style.maxHeight = dropdown.scrollHeight + 'px';
toggle.style.borderRadius = '10px 10px 0 0';
} else {
dropdown.style.maxHeight = '0px';
@@ -131,43 +140,33 @@ import Dropdown from "./Dropdown.astro";
}
}
+ function applyEventListeners(item, dropdownID, localStorageItem) {
+ Array.from(item.children).forEach((item) => {
+ item.addEventListener('click', () => {
+ localStorage.setItem(localStorageItem, item.dataset.setting)
+ applySavedLocalStorage(localStorageItem, dropdownID)
+ closeDropdown(item.parentElement.id);
+ })
+ })
+ }
+
document.addEventListener('setting-tabChange', determineListener)
loadContent('setting-tab-proxy')
function setLocalStorageItem(event) {
if (event.detail == "setting-tab-proxy") {
- applySavedLocalStorage('selectedProxy', 'dropdown__selected-proxy')
- applySavedLocalStorage('selectedSearchEngine', 'dropdown__search-engine')
+ applySavedLocalStorage('selectedProxy', 'dropdown__selected-proxy');
+ applySavedLocalStorage('selectedSearchEngine', 'dropdown__search-engine');
+ applySavedLocalStorage("selectedOpenWith", 'dropdown__open-with');
let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu')
let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu')
- Array.from(searchEngineDropdown.children).forEach((item) => {
- item.addEventListener('click', () => {
- localStorage.setItem('selectedSearchEngine', item.dataset.setting)
- applySavedLocalStorage('selectedSearchEngine', 'dropdown__search-engine')
- closeDropdown(searchEngineDropdown.id);
- })
- })
- Array.from(selectedProxyDropdown.children).forEach((item) => {
- item.addEventListener('click', () => {
- localStorage.setItem('selectedProxy', item.dataset.setting)
- applySavedLocalStorage('selectedProxy', 'dropdown__selected-proxy')
- closeDropdown(selectedProxyDropdown.id);
- })
- })
- // Array.from(document.getElementsByClassName('dropdown-item')).forEach((item) => {
- // item.addEventListener('click', (event) => {
- // console.log(event.target.dataset)
- // localStorage.setItem('selectedProxy', event.target.dataset.setting)
- // let dropdown = document.getElementById('dropdown__selected-proxy-menu');
- // if (dropdown) {
- // let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
- // dropdown_toggle.innerText = event.target.innerText
- // dropdown.style.height = '0px';
- // dropdown_toggle.style.borderRadius = '10px';
- // }
- // })
- // })
+ let openWithDropdown = document.getElementById('dropdown__open-with-menu')
+ applyEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'selectedSearchEngine');
+ applyEventListeners(selectedProxyDropdown, 'dropdown__selected-proxy', 'selectedProxy');
+ applyEventListeners(openWithDropdown, 'dropdown__open-with', 'selectedOpenWith');
+
+
}
}
@@ -185,6 +184,10 @@ import Dropdown from "./Dropdown.astro";
display: flex;
gap: 20px;
}
+.setting-label {
+ color: white;
+ font-size: 18px;
+}
label {
font-size: 24px;
font-weight: 700;
@@ -208,7 +211,7 @@ label:hover, input[type="radio"]:checked+label {
opacity: 1;
}
.popup{
- width: 800px;
+ width: 1000px;
height: 80%;
min-height: 400px;
max-height: 400px;
diff --git a/src/pages/settings.astro b/src/pages/settings.astro
index f680818..ec0bf7c 100644
--- a/src/pages/settings.astro
+++ b/src/pages/settings.astro
@@ -1,13 +1,13 @@
---
import Switch from "../components/Switch.astro";
-import TabList from "../components/TabList.astro";
+import SettingsTablist from "../components/SettingsTablist.astro";
import Layout from "../layouts/Layout.astro";
---
Settings
-
+