Add close button to result component

1 year ago · e58fca9fa6
parent 77e31d9fff
commit e58fca9fa6
2 changed files with 17 additions and 6 deletions
--- a/dyesub-tool/index.html
+++ b/dyesub-tool/index.html
@ -5,6 +5,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>dyesub-tool</title>
        <link data-trunk rel="css" href="missing.min.css"> <!-- 1.0.9 -->
+        <style>:root { cursor: inherit } button, input[type="submit"] { cursor: pointer }</style>
    </head>
    <body>
        <main>
--- a/dyesub-tool/src/main.rs
+++ b/dyesub-tool/src/main.rs
@ -35,12 +35,22 @@ enum Colorway {

 #[component]
 fn ResultMessage(cx: Scope, message: ReadSignal<Option<ResultMessageData>>) -> impl IntoView {
-    move || message().map(|ResultMessageData { title, message, colorway }| view! { cx,
-        <div class=class_list!["box", <Colorway as Into<&str>>::into(colorway)]>
-            <h3>{title}</h3>
-            <p>{message}</p>
-        </div>
-    })
+    let (open, set_open) = create_signal(cx, true);
+    create_effect(cx, move |_| {
+        message.track();
+        set_open(true);
+    });
+    move || view! { cx,
+        <Show when=move || open() fallback=|_| ()>
+            {move || message().map(|ResultMessageData { title, message, colorway }| view! { cx,
+                <div class=class_list!["box", <Colorway as Into<&str>>::into(colorway)] style="position: relative">
+                    <strong class="block titlebar">{title}</strong>
+                    <button class="iconbutton" on:click=move |_| set_open(false) style="position: absolute; bottom: 0.5em; right: 0.5em">"×"</button>
+                    <p>{message}</p>
+                </div>
+            })}
+        </Show>
+    }
 }

 #[derive(From, IntoStaticStr)]