fix: AddTorrent dialog stili düzeltildi, skeleton crate eklendi
Some checks failed
Build MIPS Binary / build (push) Has been cancelled
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:
16
Cargo.lock
generated
16
Cargo.lock
generated
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
@@ -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));
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user