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

feat: add mobile-optimized sort dropdown and hide column selector on mobile
Some checks failed
Build MIPS Binary / build (push) Failing after 1m25s
Details

Browse Source
This commit is contained in:
spinline
2026-02-12 22:18:09 +03:00
parent 5e098817f2
commit e5f76fe548
1 changed files with 52 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/components/torrent/table.rs
View File

@@ -1,7 +1,7 @@
use leptos::prelude::*;
use leptos::task::spawn_local;
use std::collections::HashSet;
use icons::{ArrowUpDown, Inbox, Settings2, Play, Square, Trash2, Ellipsis};
use icons::{ArrowUpDown, Inbox, Settings2, Play, Square, Trash2, Ellipsis, ArrowUp, ArrowDown, Check, ListFilter};
use crate::store::{get_action_messages, show_toast};
use crate::api;
use shared::NotificationLevel;
@@ -281,6 +281,57 @@ pub fn TorrentTable() -> impl IntoView {
</DropdownMenu>
</Show>
// Mobile Sort Menu
<div class="block md:hidden">
<DropdownMenu>
<DropdownMenuTrigger class="w-[100px] h-9 gap-2 text-xs">
<ListFilter class="size-4" />
"Sırala"
</DropdownMenuTrigger>
<DropdownMenuContent class="w-56">
<DropdownMenuLabel>"Sıralama Ölçütü"</DropdownMenuLabel>
<DropdownMenuGroup class="mt-2">
{move || {
let current_col = sort_col.0.get();
let current_dir = sort_dir.0.get();
let sort_items = vec![
(SortColumn::Name, "İsim"),
(SortColumn::Size, "Boyut"),
(SortColumn::Progress, "İlerleme"),
(SortColumn::Status, "Durum"),
(SortColumn::DownSpeed, "DL Hızı"),
(SortColumn::UpSpeed, "UP Hızı"),
(SortColumn::ETA, "Kalan Süre"),
(SortColumn::AddedDate, "Tarih"),
];
sort_items.into_iter().map(|(col, label)| {
let is_active = current_col == col;
view! {
<DropdownMenuItem on:click=move |_| handle_sort(col)>
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-2">
{if is_active { view! { <Check class="size-4 text-primary" /> }.into_any() } else { view! { <div class="size-4" /> }.into_any() }}
<span class=if is_active { "font-bold text-primary" } else { "" }>{label}</span>
</div>
{if is_active {
match current_dir {
SortDirection::Ascending => view! { <ArrowUp class="size-3 opacity-50" /> }.into_any(),
SortDirection::Descending => view! { <ArrowDown class="size-3 opacity-50" /> }.into_any(),
}
} else { view! { "" }.into_any() }}
</div>
</DropdownMenuItem>
}.into_any()
}).collect_view()
}}
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
// Desktop Columns Menu
<MultiSelect values=visible_columns class="hidden md:flex">
<MultiSelectTrigger class="w-[140px] h-9">
<div class="flex items-center gap-2 text-xs">