fix: AddTorrent dialog stili düzeltildi, skeleton crate eklendi
Some checks failed
Build MIPS Binary / build (push) Has been cancelled

- Dialog buggy leptos-shadcn-dialog yerine doğrudan shadcn HTML markup ile yeniden yazıldı
- Backdrop overlay, card panel, X close butonu eklendi
- leptos-shadcn-skeleton dependency eklendi
- Tailwind CSS rebuild edildi
This commit is contained in:
spinline
2026-02-11 00:40:39 +03:00
parent 77b77c7775
commit 45247a020e
4 changed files with 89 additions and 53 deletions

16
Cargo.lock generated
View File

@@ -1274,6 +1274,7 @@ dependencies = [
"leptos-shadcn-scroll-area",
"leptos-shadcn-separator",
"leptos-shadcn-sheet",
"leptos-shadcn-skeleton",
"leptos-shadcn-tabs",
"leptos-shadcn-toast",
"leptos-shadcn-tooltip",
@@ -2390,6 +2391,21 @@ dependencies = [
"thiserror 1.0.69",
]
[[package]]
name = "leptos-shadcn-skeleton"
version = "0.8.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "6c14b6bd0f2fe191e3e114a34cee889fc983546ad488e76e76511e3d75ea3f86"
dependencies = [
"leptos",
"leptos-node-ref",
"leptos-shadcn-signal-management",
"leptos-struct-component",
"leptos-style",
"tailwind_fuse",
"web-sys",
]
[[package]]
name = "leptos-shadcn-tabs"
version = "0.8.1"

View File

@@ -52,3 +52,4 @@ leptos-shadcn-alert = "0.8"
leptos-shadcn-toast = "0.8"
leptos-shadcn-dropdown-menu = "0.8"
leptos-shadcn-tooltip = "0.8"
leptos-shadcn-skeleton = "0.8"

View File

@@ -79,7 +79,6 @@
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--tracking-tight: -0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
@@ -1578,6 +1577,11 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-shadow {
transition-property: box-shadow;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

View File

@@ -1,6 +1,5 @@
use leptos::prelude::*;
use leptos::task::spawn_local;
use leptos_shadcn_dialog::{Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter};
use leptos_shadcn_input::Input;
use leptos_shadcn_button::{Button, ButtonVariant};
use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
@@ -17,7 +16,6 @@ pub fn AddTorrentDialog(
let uri = signal(String::new());
let is_loading = signal(false);
let error_msg = signal(Option::<String>::None);
let is_open = signal(true);
let handle_submit = move |ev: web_sys::SubmitEvent| {
ev.prevent_default();
@@ -41,7 +39,6 @@ pub fn AddTorrentDialog(
shared::NotificationLevel::Success,
"Torrent başarıyla eklendi"
);
is_open.1.set(false);
on_close.run(());
}
Err(e) => {
@@ -53,22 +50,27 @@ pub fn AddTorrentDialog(
});
};
view! {
<Dialog
open=Signal::derive(move || is_open.0.get())
on_open_change=Callback::new(move |open: bool| {
is_open.1.set(open);
if !open {
let handle_backdrop = {
let on_close = on_close.clone();
move |e: web_sys::MouseEvent| {
e.stop_propagation();
on_close.run(());
}
})
>
<DialogContent class="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>"Add Torrent"</DialogTitle>
<DialogDescription>"Enter a Magnet link or a .torrent file URL."</DialogDescription>
</DialogHeader>
};
view! {
// Backdrop overlay
<div
class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
on:click=handle_backdrop
/>
// Dialog panel
<div class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-card p-6 shadow-lg rounded-lg sm:max-w-[425px]">
// Header
<div class="flex flex-col space-y-1.5 text-center sm:text-left">
<h2 class="text-lg font-semibold leading-none tracking-tight">"Add Torrent"</h2>
<p class="text-sm text-muted-foreground">"Enter a Magnet link or a .torrent file URL."</p>
</div>
<form on:submit=handle_submit class="space-y-4">
<Input
@@ -85,11 +87,10 @@ pub fn AddTorrentDialog(
</Alert>
})}
<DialogFooter>
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
<Button
variant=ButtonVariant::Ghost
on_click=Callback::new(move |()| {
is_open.1.set(false);
on_close.run(());
})
>
@@ -97,14 +98,28 @@ pub fn AddTorrentDialog(
</Button>
<Button disabled=Signal::derive(move || is_loading.0.get())>
{move || if is_loading.0.get() {
leptos::either::Either::Left(view! { <span class="loading loading-spinner"></span> "Adding..." })
leptos::either::Either::Left(view! {
<span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
"Adding..."
})
} else {
leptos::either::Either::Right(view! { "Add" })
}}
</Button>
</DialogFooter>
</div>
</form>
</DialogContent>
</Dialog>
// Close button (X)
<button
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none"
on:click=move |_| on_close.run(())
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
<span class="sr-only">"Close"</span>
</button>
</div>
}
}