refactor: tüm bileşenler leptos-shadcn-ui'ye dönüştürüldü
All checks were successful
Build MIPS Binary / build (push) Successful in 5m16s
All checks were successful
Build MIPS Binary / build (push) Successful in 5m16s
- login.rs: Card, Input, Button, Label, Alert - setup.rs: Card, Input, Button, Label, Alert - add_torrent.rs: Dialog, Input, Button, Alert - toast.rs: Alert bileşeni ile - Cargo.toml: dialog, label, alert, toast, dropdown-menu, tooltip eklendi
This commit is contained in:
spinline
98
Cargo.lock
generated
98
Cargo.lock
generated
@@ -1260,17 +1260,23 @@ dependencies = [
|
||||
"gloo-timers",
|
||||
"js-sys",
|
||||
"leptos",
|
||||
"leptos-shadcn-alert",
|
||||
"leptos-shadcn-avatar",
|
||||
"leptos-shadcn-badge",
|
||||
"leptos-shadcn-button",
|
||||
"leptos-shadcn-card",
|
||||
"leptos-shadcn-context-menu",
|
||||
"leptos-shadcn-dialog",
|
||||
"leptos-shadcn-dropdown-menu",
|
||||
"leptos-shadcn-input",
|
||||
"leptos-shadcn-label",
|
||||
"leptos-shadcn-progress",
|
||||
"leptos-shadcn-scroll-area",
|
||||
"leptos-shadcn-separator",
|
||||
"leptos-shadcn-sheet",
|
||||
"leptos-shadcn-tabs",
|
||||
"leptos-shadcn-toast",
|
||||
"leptos-shadcn-tooltip",
|
||||
"leptos-use",
|
||||
"leptos_router",
|
||||
"log",
|
||||
@@ -2159,6 +2165,21 @@ dependencies = [
|
||||
"send_wrapper",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-alert"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "884551df61ade405bdb61b0d5a92a3a88b3a7af7a2d283b8d3e942ae0d71309c"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-avatar"
|
||||
version = "0.8.1"
|
||||
@@ -2234,6 +2255,36 @@ dependencies = [
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-dialog"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a3fdbb636393b150c2db1e37d44a6832e9dde177ce2e81281932fefad8bde98e"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-dropdown-menu"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f50189623a176386a30443d281483c5aa6cc34dc45fa11c3e53bd187ffccde21"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-input"
|
||||
version = "0.8.1"
|
||||
@@ -2250,6 +2301,21 @@ dependencies = [
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-label"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "5e7cad4b5fae11df9bf3b1d4265a56509a9bb7d3a8580e7487f398b733eadf0c"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-progress"
|
||||
version = "0.8.1"
|
||||
@@ -2339,6 +2405,38 @@ dependencies = [
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-toast"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3315f7ed844e3286704cc7b57db7209cad592c11eee770f5dc48ebdc92d66cfb"
|
||||
dependencies = [
|
||||
"gloo-timers",
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"uuid",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-tooltip"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3e41d37932d700444e1d3a21f10f198c3c9e76dde3fd78d58da4b5a099939fd7"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-struct-component"
|
||||
version = "0.2.0"
|
||||
|
||||
@@ -45,4 +45,10 @@ leptos-shadcn-progress = "0.8"
|
||||
leptos-shadcn-avatar = "0.8"
|
||||
leptos-shadcn-sheet = "0.8"
|
||||
leptos-shadcn-tabs = "0.8"
|
||||
leptos-shadcn-scroll-area = "0.8"
|
||||
leptos-shadcn-scroll-area = "0.8"
|
||||
leptos-shadcn-dialog = "0.8"
|
||||
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"
|
||||
@@ -1,5 +1,10 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos::task::spawn_local;
|
||||
use leptos_shadcn_card::{Card, CardHeader, CardContent};
|
||||
use leptos_shadcn_input::Input;
|
||||
use leptos_shadcn_button::Button;
|
||||
use leptos_shadcn_label::Label;
|
||||
use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
|
||||
|
||||
#[component]
|
||||
pub fn Login() -> impl IntoView {
|
||||
@@ -32,8 +37,8 @@ pub fn Login() -> impl IntoView {
|
||||
|
||||
view! {
|
||||
<div class="flex items-center justify-center min-h-screen bg-muted/40 px-4">
|
||||
<div class="w-full max-w-sm rounded-xl border border-border bg-card text-card-foreground shadow-lg">
|
||||
<div class="flex flex-col space-y-1.5 p-6 pb-2 items-center">
|
||||
<Card class="w-full max-w-sm shadow-lg">
|
||||
<CardHeader class="pb-2 items-center">
|
||||
<div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center text-primary-foreground shadow-sm mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.25 0 003 2.48z" />
|
||||
@@ -42,56 +47,53 @@ pub fn Login() -> impl IntoView {
|
||||
</div>
|
||||
<h3 class="font-semibold tracking-tight text-2xl">"VibeTorrent"</h3>
|
||||
<p class="text-sm text-muted-foreground">"Hesabınıza giriş yapın"</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<div class="p-6 pt-4">
|
||||
<CardContent class="pt-4">
|
||||
<form on:submit=handle_login class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium leading-none">"Kullanıcı Adı"</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Kullanıcı adınız"
|
||||
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
|
||||
prop:value=move || username.0.get()
|
||||
on:input=move |ev| username.1.set(event_target_value(&ev))
|
||||
disabled=move || loading.0.get()
|
||||
required
|
||||
<Label>"Kullanıcı Adı"</Label>
|
||||
<Input
|
||||
input_type="text"
|
||||
placeholder="Kullanıcı adınız"
|
||||
value=MaybeProp::derive(move || Some(username.0.get()))
|
||||
on_change=Callback::new(move |val: String| username.1.set(val))
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium leading-none">"Şifre"</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="******"
|
||||
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
|
||||
prop:value=move || password.0.get()
|
||||
on:input=move |ev| password.1.set(event_target_value(&ev))
|
||||
disabled=move || loading.0.get()
|
||||
required
|
||||
<Label>"Şifre"</Label>
|
||||
<Input
|
||||
input_type="password"
|
||||
placeholder="******"
|
||||
value=MaybeProp::derive(move || Some(password.0.get()))
|
||||
on_change=Callback::new(move |val: String| password.1.set(val))
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Show when=move || error.0.get().is_some()>
|
||||
<div class="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{move || error.0.get().unwrap_or_default()}
|
||||
</div>
|
||||
<Alert variant=AlertVariant::Destructive>
|
||||
<AlertDescription>
|
||||
{move || error.0.get().unwrap_or_default()}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</Show>
|
||||
|
||||
<div class="pt-2">
|
||||
<button
|
||||
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2 w-full"
|
||||
type="submit"
|
||||
disabled=move || loading.0.get()
|
||||
<Button
|
||||
class="w-full"
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
>
|
||||
<Show when=move || loading.0.get() fallback=|| "Giriş Yap">
|
||||
<span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
|
||||
"Giriş Yapılıyor..."
|
||||
</Show>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,10 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos::task::spawn_local;
|
||||
use leptos_shadcn_card::{Card, CardHeader, CardContent};
|
||||
use leptos_shadcn_input::Input;
|
||||
use leptos_shadcn_button::Button;
|
||||
use leptos_shadcn_label::Label;
|
||||
use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
|
||||
|
||||
#[component]
|
||||
pub fn Setup() -> impl IntoView {
|
||||
@@ -48,8 +53,8 @@ pub fn Setup() -> impl IntoView {
|
||||
|
||||
view! {
|
||||
<div class="flex items-center justify-center min-h-screen bg-muted/40 px-4">
|
||||
<div class="w-full max-w-md rounded-xl border border-border bg-card text-card-foreground shadow-lg overflow-hidden">
|
||||
<div class="flex flex-col space-y-1.5 p-6 pb-2 items-center text-center">
|
||||
<Card class="w-full max-w-md shadow-lg overflow-hidden">
|
||||
<CardHeader class="pb-2 items-center text-center">
|
||||
<div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center text-primary-foreground shadow-sm mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-3.497a2.548 2.548 0 113.586 3.586l-6.837 5.63m-5.108 3.497l2.496-3.03c.317-.384.74-.626 1.208-.766M15.75 9.25a2.548 2.548 0 11-5.096 0 2.548 2.548 0 015.096 0z" />
|
||||
@@ -57,74 +62,63 @@ pub fn Setup() -> impl IntoView {
|
||||
</div>
|
||||
<h3 class="font-semibold tracking-tight text-2xl">"VibeTorrent Kurulumu"</h3>
|
||||
<p class="text-sm text-muted-foreground">"Yönetici hesabınızı oluşturun"</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<div class="p-6 pt-4">
|
||||
<CardContent class="pt-4">
|
||||
<form on:submit=handle_setup class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||
"Yönetici Kullanıcı Adı"
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="admin"
|
||||
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
|
||||
prop:value=move || username.0.get()
|
||||
on:input=move |ev| username.1.set(event_target_value(&ev))
|
||||
disabled=move || loading.0.get()
|
||||
required
|
||||
<Label>"Yönetici Kullanıcı Adı"</Label>
|
||||
<Input
|
||||
input_type="text"
|
||||
placeholder="admin"
|
||||
value=MaybeProp::derive(move || Some(username.0.get()))
|
||||
on_change=Callback::new(move |val: String| username.1.set(val))
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||
"Şifre"
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="******"
|
||||
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
|
||||
prop:value=move || password.0.get()
|
||||
on:input=move |ev| password.1.set(event_target_value(&ev))
|
||||
disabled=move || loading.0.get()
|
||||
required
|
||||
<Label>"Şifre"</Label>
|
||||
<Input
|
||||
input_type="password"
|
||||
placeholder="******"
|
||||
value=MaybeProp::derive(move || Some(password.0.get()))
|
||||
on_change=Callback::new(move |val: String| password.1.set(val))
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||
"Şifre Onay"
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="******"
|
||||
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
|
||||
prop:value=move || confirm_password.0.get()
|
||||
on:input=move |ev| confirm_password.1.set(event_target_value(&ev))
|
||||
disabled=move || loading.0.get()
|
||||
required
|
||||
<Label>"Şifre Onay"</Label>
|
||||
<Input
|
||||
input_type="password"
|
||||
placeholder="******"
|
||||
value=MaybeProp::derive(move || Some(confirm_password.0.get()))
|
||||
on_change=Callback::new(move |val: String| confirm_password.1.set(val))
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Show when=move || error.0.get().is_some() fallback=|| ()>
|
||||
<div class="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive dark:border-destructive dark:bg-destructive/50 dark:text-destructive-foreground">
|
||||
<span>{move || error.0.get().unwrap_or_default()}</span>
|
||||
</div>
|
||||
<Alert variant=AlertVariant::Destructive>
|
||||
<AlertDescription>
|
||||
<span>{move || error.0.get().unwrap_or_default()}</span>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</Show>
|
||||
|
||||
<div class="pt-2">
|
||||
<button
|
||||
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2 w-full"
|
||||
type="submit"
|
||||
disabled=move || loading.0.get()
|
||||
<Button
|
||||
class="w-full"
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
>
|
||||
<Show when=move || loading.0.get() fallback=|| "Kurulumu Tamamla">
|
||||
<span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
|
||||
"Kuruluyor..."
|
||||
</Show>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,22 @@
|
||||
use leptos::prelude::*;
|
||||
use shared::NotificationLevel;
|
||||
use leptos_shadcn_alert::{Alert, AlertVariant};
|
||||
|
||||
// ============================================================================
|
||||
// Toast Components - Shadcn Style
|
||||
// Toast Components - Using ShadCN Alert
|
||||
// ============================================================================
|
||||
|
||||
/// Returns the Shadcn class for the notification level
|
||||
fn get_toast_class(level: &NotificationLevel) -> &'static str {
|
||||
fn level_to_variant(level: &NotificationLevel) -> AlertVariant {
|
||||
match level {
|
||||
NotificationLevel::Info => "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 shadow-lg transition-all bg-background text-foreground border-border",
|
||||
NotificationLevel::Success => "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 shadow-lg transition-all bg-background text-foreground border-primary/50 text-primary",
|
||||
NotificationLevel::Warning => "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 shadow-lg transition-all bg-yellow-50 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-500 border-yellow-200 dark:border-yellow-900",
|
||||
NotificationLevel::Error => "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 shadow-lg transition-all destructive group border-destructive bg-destructive text-destructive-foreground",
|
||||
NotificationLevel::Info => AlertVariant::Default,
|
||||
NotificationLevel::Success => AlertVariant::Success,
|
||||
NotificationLevel::Warning => AlertVariant::Warning,
|
||||
NotificationLevel::Error => AlertVariant::Destructive,
|
||||
}
|
||||
}
|
||||
|
||||
/// Individual toast item component
|
||||
#[component]
|
||||
fn ToastItem(
|
||||
level: NotificationLevel,
|
||||
message: String,
|
||||
) -> impl IntoView {
|
||||
let toast_class = get_toast_class(&level);
|
||||
|
||||
// Icons
|
||||
let icon_svg = match level {
|
||||
fn level_icon(level: &NotificationLevel) -> impl IntoView {
|
||||
match level {
|
||||
NotificationLevel::Info => view! {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 opacity-90">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
||||
@@ -45,15 +37,25 @@ fn ToastItem(
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
}.into_any(),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/// Individual toast item component
|
||||
#[component]
|
||||
fn ToastItem(
|
||||
level: NotificationLevel,
|
||||
message: String,
|
||||
) -> impl IntoView {
|
||||
let variant = level_to_variant(&level);
|
||||
let icon = level_icon(&level);
|
||||
|
||||
view! {
|
||||
<div class=toast_class>
|
||||
<Alert variant=variant class="pointer-events-auto shadow-lg">
|
||||
<div class="flex items-center gap-3">
|
||||
{icon_svg}
|
||||
{icon}
|
||||
<div class="text-sm font-medium">{message}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Alert>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos::html;
|
||||
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};
|
||||
use crate::store::TorrentStore;
|
||||
use crate::api;
|
||||
|
||||
@@ -11,16 +14,10 @@ pub fn AddTorrentDialog(
|
||||
let store = use_context::<TorrentStore>().expect("TorrentStore not provided");
|
||||
let notifications = store.notifications;
|
||||
|
||||
let dialog_ref = NodeRef::<html::Dialog>::new();
|
||||
let uri = signal(String::new());
|
||||
let is_loading = signal(false);
|
||||
let error_msg = signal(Option::<String>::None);
|
||||
|
||||
Effect::new(move |_| {
|
||||
if let Some(dialog) = dialog_ref.get() {
|
||||
let _ = dialog.show_modal();
|
||||
}
|
||||
});
|
||||
let is_open = signal(true);
|
||||
|
||||
let handle_submit = move |ev: web_sys::SubmitEvent| {
|
||||
ev.prevent_default();
|
||||
@@ -44,9 +41,7 @@ pub fn AddTorrentDialog(
|
||||
shared::NotificationLevel::Success,
|
||||
"Torrent başarıyla eklendi"
|
||||
);
|
||||
if let Some(dialog) = dialog_ref.get() {
|
||||
dialog.close();
|
||||
}
|
||||
is_open.1.set(false);
|
||||
on_close.run(());
|
||||
}
|
||||
Err(e) => {
|
||||
@@ -58,51 +53,58 @@ pub fn AddTorrentDialog(
|
||||
});
|
||||
};
|
||||
|
||||
let handle_cancel = move |_| {
|
||||
if let Some(dialog) = dialog_ref.get() {
|
||||
dialog.close();
|
||||
}
|
||||
on_close.run(());
|
||||
};
|
||||
|
||||
view! {
|
||||
<dialog node_ref=dialog_ref class="modal modal-bottom sm:modal-middle">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">"Add Torrent"</h3>
|
||||
<p class="py-4 text-sm opacity-70">"Enter a Magnet link or a .torrent file URL."</p>
|
||||
<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>
|
||||
|
||||
<form on:submit=handle_submit>
|
||||
<div class="form-control w-full">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="magnet:?xt=urn:btih:..."
|
||||
class="input input-bordered w-full"
|
||||
prop:value=move || uri.0.get()
|
||||
on:input=move |ev| uri.1.set(event_target_value(&ev))
|
||||
disabled=move || is_loading.0.get()
|
||||
autofocus
|
||||
/>
|
||||
</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())
|
||||
/>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn btn-ghost" on:click=handle_cancel>"Cancel"</button>
|
||||
<button type="submit" class="btn btn-primary" disabled=move || is_loading.0.get()>
|
||||
{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(());
|
||||
})
|
||||
>
|
||||
"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>
|
||||
</div>
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
|
||||
{move || error_msg.0.get().map(|msg| view! {
|
||||
<div class="text-error text-sm mt-2">{msg}</div>
|
||||
})}
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button on:click=handle_cancel>"close"</button>
|
||||
</form>
|
||||
</dialog>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user