Toast and modal dialog CSS (WIP).

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();
 }