RevelaNetwork/Revela-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the dropdown better, lose my sanity even more.

Browse source
This commit is contained in:
wearrrrr 2024-01-12 00:05:22 -06:00
parent e129503865
commit b5976b9943
2 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/Dropdown.astro
View file

@ -1,14 +1,23 @@
--- ---
// TODO: Add Props to make this component more dynamic!! // TODO: Add Props to make this component more dynamic!!
const { buttonNameDefault, dropdownList } = Astro.props;
--- ---
<div class="dropdown"> <div class="dropdown">
<button id="dropdown-toggle" class="dropdown-toggle" type="button" data-toggle="dropdown"> <button id="dropdown-toggle" class="dropdown-toggle" type="button" data-toggle="dropdown">
Auto {buttonNameDefault}
<span class="caret"></span></button> <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class="dropdown-item" id="proxy-auto" data-setting="auto">Auto</li> {
<li class="dropdown-item" id="proxy-ultraviolet" data-setting="ultraviolet">Ultraviolet</li> dropdownList.map((item: any) => {
return (
<li class="dropdown-item" id={`proxy-${item.toLowerCase()}`} data-setting={item.toLowerCase()}>{item}</li>
)
})
}
<!-- <li class="dropdown-item" id="proxy-auto" data-setting="auto">Auto</li>
<li class="dropdown-item" id="proxy-ultraviolet" data-setting="ultraviolet">Ultraviolet</li> -->
</ul> </ul>
</div> </div>
<style> <style>

6
src/components/TabList.astro
View file

@ -6,7 +6,7 @@ import Dropdown from "./Dropdown.astro";
<div id="content-setting-tab-proxy"> <div id="content-setting-tab-proxy">
<h1 style="color: white;">Proxy</h1> <h1 style="color: white;">Proxy</h1>
<p style="color: white; font-size: 18px;">Selected Proxy</p> <p style="color: white; font-size: 18px;">Selected Proxy</p>
<Dropdown></Dropdown> <Dropdown buttonDefaultName="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}></Dropdown>
</div> </div>
<div id="content-setting-tab-customization"> <div id="content-setting-tab-customization">
<h1 style="color: white;">Customization</h1> <h1 style="color: white;">Customization</h1>
@ -79,6 +79,8 @@ import Dropdown from "./Dropdown.astro";
}) })
loadContent('setting-tab-proxy') loadContent('setting-tab-proxy')
const dropdownHeight = '120px'
function addDropdownListener() { function addDropdownListener() {
let dropdown_toggle = document.getElementById('dropdown-toggle'); let dropdown_toggle = document.getElementById('dropdown-toggle');
if (dropdown_toggle) { if (dropdown_toggle) {
@ -86,7 +88,7 @@ import Dropdown from "./Dropdown.astro";
let dropdown = document.getElementsByClassName('dropdown-menu')[0]; let dropdown = document.getElementsByClassName('dropdown-menu')[0];
if (dropdown) { if (dropdown) {
if (dropdown.style.height == '0px' || dropdown.style.height == '') { if (dropdown.style.height == '0px' || dropdown.style.height == '') {
dropdown.style.height = '80px'; dropdown.style.height = dropdownHeight;
dropdown_toggle.style.borderRadius = '10px 10px 0 0'; dropdown_toggle.style.borderRadius = '10px 10px 0 0';
} else { } else {
dropdown.style.height = '0px'; dropdown.style.height = '0px';