admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

fix(ui): finalize iOS dropdown interactions and add selection checkmark

Browse Source
This commit is contained in:
spinline
2026-02-04 17:53:22 +03:00
parent 57da8b02c2
commit f0b3db9caf
1 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/layout/statusbar.rs
View File

@@ -115,12 +115,11 @@ pub fn StatusBar() -> impl IntoView {
</div> </div>
<Show when=move || down_menu_open.get() fallback=|| ()> <Show when=move || down_menu_open.get() fallback=|| ()>
<div <button
class="fixed inset-0 z-[99] bg-black opacity-0 cursor-pointer" type="button"
role="button" class="fixed inset-0 z-[99] bg-black opacity-0 cursor-default w-full h-full border-0 outline-none"
tabindex="0"
on:click=move |e| { e.stop_propagation(); set_down_menu_open.set(false); } on:click=move |e| { e.stop_propagation(); set_down_menu_open.set(false); }
></div> ></button>
</Show> </Show>
<ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300"> <ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300">
@@ -128,21 +127,18 @@ pub fn StatusBar() -> impl IntoView {
limits.clone().into_iter().map(|(val, label)| { limits.clone().into_iter().map(|(val, label)| {
let is_active = move || { let is_active = move || {
let current = stats.get().down_limit.unwrap_or(0); let current = stats.get().down_limit.unwrap_or(0);
logging::error!("Down Active Check: current={} (i64), val={} (i64), diff={}, match={}",
current,
val,
(current - val).abs(),
(current - val).abs() < 1024
);
(current - val).abs() < 1024 (current - val).abs() < 1024
}; };
view! { view! {
<li> <li>
<button <button
class=move || if is_active() { "active text-xs" } else { "text-xs" } class=move || if is_active() { "active text-xs flex justify-between" } else { "text-xs flex justify-between" }
on:click=move |_| set_limit("down", val) on:click=move |_| set_limit("down", val)
> >
{label} {label}
<Show when=is_active fallback=|| ()>
<span>"✓"</span>
</Show>
</button> </button>
</li> </li>
} }
@@ -175,12 +171,11 @@ pub fn StatusBar() -> impl IntoView {
</div> </div>
<Show when=move || up_menu_open.get() fallback=|| ()> <Show when=move || up_menu_open.get() fallback=|| ()>
<div <button
class="fixed inset-0 z-[99] bg-black opacity-0 cursor-pointer" type="button"
role="button" class="fixed inset-0 z-[99] bg-black opacity-0 cursor-default w-full h-full border-0 outline-none"
tabindex="0"
on:click=move |e| { e.stop_propagation(); set_up_menu_open.set(false); } on:click=move |e| { e.stop_propagation(); set_up_menu_open.set(false); }
></div> ></button>
</Show> </Show>
<ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300"> <ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300">
@@ -193,10 +188,13 @@ pub fn StatusBar() -> impl IntoView {
view! { view! {
<li> <li>
<button <button
class=move || if is_active() { "active text-xs" } else { "text-xs" } class=move || if is_active() { "active text-xs flex justify-between" } else { "text-xs flex justify-between" }
on:click=move |_| set_limit("up", val) on:click=move |_| set_limit("up", val)
> >
{label} {label}
<Show when=is_active fallback=|| ()>
<span>"✓"</span>
</Show>
</button> </button>
</li> </li>
} }
@@ -227,12 +225,11 @@ pub fn StatusBar() -> impl IntoView {
</div> </div>
<Show when=move || theme_open.get() fallback=|| ()> <Show when=move || theme_open.get() fallback=|| ()>
<div <button
class="fixed inset-0 z-[99] bg-black opacity-0 cursor-pointer" type="button"
role="button" class="fixed inset-0 z-[99] bg-black opacity-0 cursor-default w-full h-full border-0 outline-none"
tabindex="0"
on:click=move |e| { e.stop_propagation(); set_theme_open.set(false); } on:click=move |e| { e.stop_propagation(); set_theme_open.set(false); }
></div> ></button>
</Show> </Show>
<ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-52 mb-2 border border-base-300 max-h-96 overflow-y-auto block"> <ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-52 mb-2 border border-base-300 max-h-96 overflow-y-auto block">