Form CSS style + dev panel (WIP)

frontend/src/lib.rs

@@ -53,6 +53,7 @@ pub fn main() -> Result<(), JsValue> {
             let id = id.parse::<i64>().unwrap(); // TODO: remove unwrap.
             pages::recipe_view::setup_page(id, is_user_logged)
         }
+        ["dev_panel"] => pages::dev_panel::setup_page(),
         // Home.
         [""] => pages::home::setup_page(is_user_logged),
         _ => log!("Path unknown: ", location),

frontend/src/modal_dialog.rs

@@ -3,15 +3,18 @@ use web_sys::{Element, HtmlDialogElement};
 
 use crate::{
     on_click,
-    utils::{by_id, selector_and_clone, SelectorExt},
+    utils::{SelectorExt, by_id, selector_and_clone},
 };
 
+/// Show a modal dialog with a copy of the given HTML element as content.
 pub async fn show(element_selector: &str) -> bool {
     show_and_initialize(element_selector, async |_| Some(()))
         .await
         .is_some()
 }
 
+/// Show a modal dialog with a copy of the given HTML element as content and execute an initilizer
+/// to modify the given content.
 pub async fn show_and_initialize<T, U>(element_selector: &str, initializer: T) -> Option<U>
 where
     T: AsyncFn(Element) -> U,
@@ -19,6 +22,9 @@ where
     show_and_initialize_with_ok(element_selector, initializer, |_, result| result).await
 }
 
+/// Show a modal dialog with a copy of the given HTML element as content and execute an initilizer
+/// to modify the given content.
+/// Call the given function when OK is pressed.
 pub async fn show_and_initialize_with_ok<T, V, W, U>(
     element_selector: &str,
     initializer: T,

frontend/src/pages/dev_panel.rs

@@ -0,0 +1,26 @@
+use gloo::{console::log, events::EventListener};
+use wasm_bindgen::prelude::*;
+use wasm_bindgen_futures::spawn_local;
+use web_sys::{Element, HtmlInputElement};
+
+use crate::{
+    calendar, modal_dialog,
+    recipe_scheduler::RecipeScheduler,
+    shopping_list::ShoppingList,
+    toast::{self, Level},
+    utils::{SelectorExt, by_id, get_current_lang, get_locale, selector},
+};
+
+pub fn setup_page() {
+    EventListener::new(&by_id("test-toast"), "click", move |_event| {
+        toast::show_message(Level::Info, "This is a message");
+    })
+    .forget();
+
+    EventListener::new(&by_id("test-modal-dialog"), "click", move |_event| {
+        spawn_local(async move {
+            modal_dialog::show("#hidden-templates").await;
+        });
+    })
+    .forget();
+}

frontend/src/pages/mod.rs

@@ -1,3 +1,4 @@
+pub mod dev_panel;
 pub mod home;
 pub mod recipe_edit;
 pub mod recipe_view;

frontend/src/pages/recipe_edit.rs

@@ -446,6 +446,7 @@ where
             continue;
         }
         let tag_span = document().create_element("span").unwrap();
+        tag_span.set_class_name("tag");
         tag_span.set_inner_html(&tag);
         let delete_tag_button: HtmlInputElement = document()
             .create_element("input")
@@ -453,7 +454,7 @@ where
             .dyn_into()
             .unwrap();
         delete_tag_button.set_attribute("type", "button").unwrap();
-        delete_tag_button.set_attribute("value", "X").unwrap();
+        delete_tag_button.set_attribute("value", "✖").unwrap();
         tag_span.append_child(&delete_tag_button).unwrap();
         tags_span.append_child(&tag_span).unwrap();