Panel with recent notifications (#8465)

Cargo.lock

@@ -6543,6 +6543,7 @@ dependencies = [
  "strum",
  "strum_macros",
  "sublime_fuzzy",
+ "time",
 ]
 
 [[package]]

crates/utils/re_log/src/channel_logger.rs

@@ -1,5 +1,6 @@
 //! Capture log messages and send them to some receiver over a channel.
 
+#[derive(Clone)]
 pub struct LogMsg {
     /// The verbosity level.
     pub level: log::Level,

crates/viewer/re_ui/Cargo.toml

@@ -50,6 +50,15 @@ smallvec.workspace = true
 strum_macros.workspace = true
 strum.workspace = true
 sublime_fuzzy.workspace = true
+time = { workspace = true, features = ["formatting", "local-offset"] }
+
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+time = { workspace = true, features = [
+  "formatting",
+  "local-offset",
+  "wasm-bindgen",
+] }
 
 
 [dev-dependencies]

crates/viewer/re_ui/examples/re_ui_example/main.rs

@@ -2,8 +2,9 @@ mod drag_and_drop;
 mod hierarchical_drag_and_drop;
 mod right_panel;
 
+use re_ui::notifications;
 use re_ui::{
-    list_item, toasts, CommandPalette, ContextExt as _, DesignTokens, UICommand, UICommandSender,
+    list_item, CommandPalette, ContextExt as _, DesignTokens, UICommand, UICommandSender,
     UiExt as _,
 };
 
@@ -64,7 +65,7 @@ fn main() -> eframe::Result {
 }
 
 pub struct ExampleApp {
-    toasts: toasts::Toasts,
+    notifications: notifications::NotificationUi,
 
     /// Listens to the local text log stream
     text_log_rx: std::sync::mpsc::Receiver<re_log::LogMsg>,
@@ -103,7 +104,7 @@ impl ExampleApp {
         let (command_sender, command_receiver) = command_channel();
 
         Self {
-            toasts: Default::default(),
+            notifications: Default::default(),
             text_log_rx,
 
             tree,
@@ -127,26 +128,8 @@ impl ExampleApp {
 
     /// Show recent text log messages to the user as toast notifications.
     fn show_text_logs_as_notifications(&mut self) {
-        while let Ok(re_log::LogMsg {
-            level,
-            target: _,
-            msg,
-        }) = self.text_log_rx.try_recv()
-        {
-            let kind = match level {
-                re_log::Level::Error => toasts::ToastKind::Error,
-                re_log::Level::Warn => toasts::ToastKind::Warning,
-                re_log::Level::Info => toasts::ToastKind::Info,
-                re_log::Level::Debug | re_log::Level::Trace => {
-                    continue; // too spammy
-                }
-            };
-
-            self.toasts.add(toasts::Toast {
-                kind,
-                text: msg,
-                options: toasts::ToastOptions::with_ttl_in_seconds(4.0),
-            });
+        while let Ok(message) = self.text_log_rx.try_recv() {
+            self.notifications.add_log(message);
         }
     }
 }
@@ -158,7 +141,6 @@ impl eframe::App for ExampleApp {
 
     fn update(&mut self, egui_ctx: &egui::Context, _frame: &mut eframe::Frame) {
         self.show_text_logs_as_notifications();
-        self.toasts.show(egui_ctx);
 
         self.top_bar(egui_ctx);
 
@@ -174,29 +156,29 @@ impl eframe::App for ExampleApp {
         let left_panel_top_section_ui = |ui: &mut egui::Ui| {
             ui.horizontal_centered(|ui| {
                 ui.strong("Left bar");
-            });
 
-            if ui.button("Log info").clicked() {
-                re_log::info!(
-                    "A lot of text on info level.\nA lot of text in fact. So \
+                if ui.button("Log info").clicked() {
+                    re_log::info!(
+                        "A lot of text on info level.\nA lot of text in fact. So \
                              much that we should ideally be auto-wrapping it at some point, much \
                              earlier than this."
-                );
-            }
-            if ui.button("Log warn").clicked() {
-                re_log::warn!(
-                    "A lot of text on warn level.\nA lot of text in fact. So \
-                            much that we should ideally be auto-wrapping it at some point, much \
-                            earlier than this."
-                );
-            }
-            if ui.button("Log error").clicked() {
-                re_log::error!(
-                    "A lot of text on error level.\nA lot of text in fact. \
+                    );
+                }
+                if ui.button("Log warn").clicked() {
+                    re_log::warn!(
+                        "A lot of text on warn level.\nA lot of text in fact."
+                    );
+                }
+                if ui.button("Log error").clicked() {
+                    re_log::error!(
+                        "A lot of text on error level.\nA lot of text in fact. \
                             So much that we should ideally be auto-wrapping it at some point, much \
-                            earlier than this."
-                );
-            }
+                            earlier than this. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. \
+                            Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. \
+                            Lorem ipsum sit dolor amet."
+                    );
+                }
+            });
         };
 
         // bottom section closure
@@ -431,6 +413,8 @@ impl ExampleApp {
                 &re_ui::icons::LEFT_PANEL_TOGGLE,
                 &mut self.show_left_panel,
             );
+
+            notifications::notification_toggle_button(ui, &mut self.notifications);
         });
     }
 }

crates/viewer/re_ui/src/context_ext.rs

@@ -1,6 +1,6 @@
 use egui::{emath::Float, pos2, Align2, Color32, Mesh, Rect, Shape, Vec2};
 
-use crate::toasts::SUCCESS_COLOR;
+use crate::SUCCESS_COLOR;
 use crate::{DesignTokens, TopBarStyle};
 
 /// Extension trait for [`egui::Context`].

crates/viewer/re_ui/src/design_tokens.rs

@@ -441,6 +441,10 @@ impl DesignTokens {
     pub fn drop_target_container_stroke(&self) -> egui::Stroke {
         egui::Stroke::new(2.0, self.color(ColorToken::blue(S350)))
     }
+
+    pub fn text(&self, text: impl Into<String>, token: ColorToken) -> egui::RichText {
+        egui::RichText::new(text).color(self.color(token))
+    }
 }
 
 // ----------------------------------------------------------------------------

crates/viewer/re_ui/src/icons.rs

@@ -59,6 +59,7 @@ pub const ARROW_RIGHT: Icon = icon_from_path!("../data/icons/arrow_right.png");
 pub const ARROW_DOWN: Icon = icon_from_path!("../data/icons/arrow_down.png");
 pub const LOOP: Icon = icon_from_path!("../data/icons/loop.png");
 
+pub const NOTIFICATION: Icon = icon_from_path!("../data/icons/notification.png");
 pub const RIGHT_PANEL_TOGGLE: Icon = icon_from_path!("../data/icons/right_panel_toggle.png");
 pub const BOTTOM_PANEL_TOGGLE: Icon = icon_from_path!("../data/icons/bottom_panel_toggle.png");
 pub const LEFT_PANEL_TOGGLE: Icon = icon_from_path!("../data/icons/left_panel_toggle.png");

crates/viewer/re_ui/src/lib.rs

@@ -10,12 +10,13 @@ pub mod icons;
 pub mod list_item;
 mod markdown_utils;
 pub mod modal;
+pub mod notifications;
 mod section_collapsing_header;
 pub mod syntax_highlighting;
-pub mod toasts;
 mod ui_ext;
 pub mod zoom_pan_area;
 
+use egui::Color32;
 use egui::NumExt as _;
 
 pub use self::{
@@ -46,6 +47,9 @@ pub const CUSTOM_WINDOW_DECORATIONS: bool = false; // !FULLSIZE_CONTENT; // TODO
 /// close/maximize/minimize buttons and app title.
 pub const NATIVE_WINDOW_BAR: bool = !FULLSIZE_CONTENT && !CUSTOM_WINDOW_DECORATIONS;
 
+pub const INFO_COLOR: Color32 = Color32::from_rgb(0, 155, 255);
+pub const SUCCESS_COLOR: Color32 = Color32::from_rgb(0, 240, 32);
+
 // ----------------------------------------------------------------------------
 
 pub struct TopBarStyle {