54 lines
2.2 KiB
Rust
54 lines
2.2 KiB
Rust
use maud::{PreEscaped, Render, html};
|
|
|
|
use crate::ui::UIWidget;
|
|
|
|
pub fn ModalCloseButton<T: UIWidget + 'static>(modal: &str, inner: T) -> PreEscaped<String> {
|
|
html! {
|
|
button
|
|
data-modal-hide=(modal)
|
|
{ (inner) };
|
|
}
|
|
}
|
|
|
|
pub fn ModalOpenButton<T: UIWidget + 'static>(modal: &str, inner: T) -> PreEscaped<String> {
|
|
html! {
|
|
button
|
|
data-modal-target=(modal)
|
|
data-modal-toggle=(modal)
|
|
{ (inner) };
|
|
}
|
|
}
|
|
|
|
pub fn Modal<T: UIWidget + 'static, E: UIWidget + 'static, F: FnOnce(String) -> E>(
|
|
title: &str,
|
|
body: T,
|
|
footer: F,
|
|
) -> (String, PreEscaped<String>) {
|
|
let id = uuid::Uuid::new_v4().to_string();
|
|
|
|
(format!("modal-{id}"), html! {
|
|
div id=(format!("modal-{id}")) tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full" {
|
|
div class="relative p-4 w-full max-w-2xl max-h-full" {
|
|
|
|
div class="relative bg-white rounded-lg shadow dark:bg-gray-700" {
|
|
div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" {
|
|
h3 class="text-xl font-semibold text-gray-900 dark:text-white" { (title) }
|
|
button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal" {
|
|
svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" {
|
|
path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" {};
|
|
};
|
|
span class="sr-only" { "Close modal" };
|
|
}
|
|
};
|
|
|
|
div class="p-4 md:p-5 space-y-4" {
|
|
(body)
|
|
};
|
|
|
|
div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600" {
|
|
(footer(format!("modal-{id}")))
|
|
};
|
|
};
|
|
}};
|
|
})
|
|
}
|