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

View File

@@ -51,4 +51,5 @@ leptos-shadcn-label = "0.8"
leptos-shadcn-alert = "0.8"
leptos-shadcn-toast = "0.8"
leptos-shadcn-dropdown-menu = "0.8"
leptos-shadcn-tooltip = "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,58 +50,76 @@ pub fn AddTorrentDialog(
});
};
let handle_backdrop = {
let on_close = on_close.clone();
move |e: web_sys::MouseEvent| {
e.stop_propagation();
on_close.run(());
}
};
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 {
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>
// 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
input_type="text"
placeholder="magnet:?xt=urn:btih:..."
value=MaybeProp::derive(move || Some(uri.0.get()))
on_change=Callback::new(move |val: String| uri.1.set(val))
disabled=Signal::derive(move || is_loading.0.get())
/>
<form on:submit=handle_submit class="space-y-4">
<Input
input_type="text"
placeholder="magnet:?xt=urn:btih:..."
value=MaybeProp::derive(move || Some(uri.0.get()))
on_change=Callback::new(move |val: String| uri.1.set(val))
disabled=Signal::derive(move || is_loading.0.get())
/>
{move || error_msg.0.get().map(|msg| view! {
<Alert variant=AlertVariant::Destructive>
<AlertDescription>{msg}</AlertDescription>
</Alert>
})}
{move || error_msg.0.get().map(|msg| view! {
<Alert variant=AlertVariant::Destructive>
<AlertDescription>{msg}</AlertDescription>
</Alert>
})}
<DialogFooter>
<Button
variant=ButtonVariant::Ghost
on_click=Callback::new(move |()| {
is_open.1.set(false);
on_close.run(());
<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 |()| {
on_close.run(());
})
>
"Cancel"
</Button>
<Button disabled=Signal::derive(move || is_loading.0.get())>
{move || if is_loading.0.get() {
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..."
})
>
"Cancel"
</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..." })
} else {
leptos::either::Either::Right(view! { "Add" })
}}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
} else {
leptos::either::Either::Right(view! { "Add" })
}}
</Button>
</div>
</form>
// 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>
}
}