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 ( - + ) }) } @@ -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

+
+

Open With

+ +
+
+

Bare URL

+ +
@@ -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

- +