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!!
const { buttonNameDefault, dropdownList } = Astro.props;
---
<div class="dropdown">
<button id="dropdown-toggle" class="dropdown-toggle" type="button" data-toggle="dropdown">
Auto
{buttonNameDefault}
<span class="caret"></span></button>
<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>
</div>
<style>

6
src/components/TabList.astro
View file

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