Toast and modal dialog CSS (WIP).

backend/scss/toast.scss

@@ -1,44 +1,47 @@
+@use 'constants' as consts;
+
 #toast {
     visibility: hidden;
-    max-width: 300px;
+    width: 300px;
     margin-left: -125px;
-    background-color: black;
+
+    border: 0.1em solid consts.$color-3;
+    border-radius: 0.5em;
+    background-color: consts.$color-2;
+
     text-align: center;
-    border-radius: 2px;
-    padding: 16px; // TODO: 'rem' better?
+    padding: consts.$margin;
     position: fixed;
     z-index: 1;
     left: 50%;
-    bottom: 30px;
+    top: 30px;
     box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
 }
 
-#toast.show {
-    visibility: visible;
-    animation: fadein 0.5s, fadeout 0.5s 9.6s;
-    animation-iteration-count: 1;
-}
+// #toast.show {
+//     visibility: visible;
+//     animation:
+//         fadein 0.5s,
+//         fadeout 0.5s 9.5s;
+// animation-iteration-count: 1;
+// }
 
 @keyframes fadein {
     from {
-        bottom: 0;
         opacity: 0;
     }
 
     to {
-        bottom: 30px;
         opacity: 1;
     }
 }
 
 @keyframes fadeout {
     from {
-        bottom: 30px;
         opacity: 1;
     }
 
     to {
-        bottom: 0;
         opacity: 0;
     }
 }

backend/templates/base.html

@@ -23,7 +23,9 @@
             dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
         </script>
 
-        <div id="toast"></div>
+        <div id="toasts">
+            <div id="toast"></div>
+        </div>
 
         <dialog id="modal-dialog">
             <div class="content"></div>

frontend/Cargo.toml

@@ -47,6 +47,7 @@ web-sys = { version = "0.3", features = [
     "HtmlTextAreaElement",
     "HtmlSelectElement",
     "HtmlDialogElement",
+    "CssStyleDeclaration",
 ] }
 
 gloo = { version = "0.11", features = ["futures"] }

frontend/src/pages/home.rs

@@ -67,7 +67,7 @@ pub fn setup_page(is_user_logged: bool, first_day_of_the_week: Weekday) {
             EventListener::new(
                 // TODO: Find the right place to move the item based on:
                 // 1) recipe id, 2) name, 3) shopping entry id
-                // Se shopping_list.rs@L30
+                // See shopping_list.rs@L30
                 &item_element.selector(".item-is-checked"),
                 "change",
                 move |event| {

frontend/src/toast.rs

@@ -1,5 +1,5 @@
 use gloo::{timers::callback::Timeout, utils::document};
-use web_sys::Element;
+use web_sys::{Element, HtmlElement};
 
 use crate::utils::{SelectorExt, by_id, selector_and_clone};
 
@@ -10,15 +10,31 @@ pub enum Level {
     Warning,
 }
 
-const TIME_DISPLAYED: u32 = 10_000; // [ms].
+/*
+TODO:
+    - Stack multiple toast messages (see #toasts) by cloning #toast
+    - User can close message by clicking a button
+    - Implement level display with icons
+*/
+
+const TIME_ANIMATION: u32 = 500; // [ms].
+const TIME_DISPLAYED: u32 = 5_000; // [ms].
 
 pub fn show_message(level: Level, message: &str) {
-    let toast_element = document().get_element_by_id("toast").unwrap();
+    let toast_element: HtmlElement = by_id("toast");
     toast_element.set_inner_html(message);
-    toast_element.set_class_name("show");
+    toast_element.style().set_css_text(&format!(
+        "visibility: visible;
+        animation:
+            fadein {}ms,
+            fadeout {}ms {}ms;",
+        TIME_ANIMATION,
+        TIME_ANIMATION,
+        TIME_DISPLAYED - TIME_ANIMATION
+    ));
 
     Timeout::new(TIME_DISPLAYED, move || {
-        toast_element.set_class_name("");
+        toast_element.style().set_css_text("");
     })
     .forget();
 }