New link sharing dialog for detailed link sharing (#11137)

Author: Wumpf

crates/store/re_log_types/src/index/time_cell.rs

@@ -174,8 +174,25 @@ impl TimeCell {
             TimeType::Sequence => typ.format(value, timestamp_format),
         }
     }
+
+    pub fn format(&self, timestamp_format: super::TimestampFormat) -> String {
+        let Self { typ, value } = *self;
+
+        match typ {
+            TimeType::DurationNs => {
+                crate::Duration::from_nanos(value.into()).format_subsecond_as_relative()
+            }
+
+            TimeType::TimestampNs => {
+                crate::Timestamp::from_nanos_since_epoch(value.into()).format(timestamp_format)
+            }
+
+            TimeType::Sequence => typ.format(value, timestamp_format),
+        }
+    }
 }
 
+// TODO(andreas): Should remove this in favor or explicit format methods above.
 impl std::fmt::Display for TimeCell {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         match self.typ {

crates/viewer/re_ui/data/dark_theme.ron

@@ -4,6 +4,7 @@
   "large_button_corner_radius": 6,
   "small_icon_size": 14,
   "modal_button_width": 50,
+  "default_modal_width": 400,
 
   "Alias": {
     "native_frame_stroke": {
@@ -289,6 +290,19 @@
       "color": "{Gray.400}",
       "width": 1
     },
+
+    "bg_fill_inverse": {
+      "color": "{Gray.800}"
+    },
+    "bg_fill_inverse-hover": {
+      "color": "{Gray.850}"
+    },
+    "text_inverse": {
+      "color": "{Gray.250}"
+    },
+    "icon_inverse": {
+      "color": "{Gray.250}"
+    },
   },
 
   "alert_success": {

crates/viewer/re_ui/data/icons/url.svg

@@ -4,6 +4,7 @@
   "large_button_corner_radius": 6,
   "small_icon_size": 14,
   "modal_button_width": 50,
+  "default_modal_width": 400,
 
   "Alias": {
     "native_frame_stroke": {
@@ -288,6 +289,19 @@
       "color": "{Gray.400}",
       "width": 1
     },
+
+    "bg_fill_inverse": {
+      "color": "{Gray.250}"
+    },
+    "bg_fill_inverse-hover": {
+      "color": "{Gray.150}"
+    },
+    "text_inverse": {
+      "color": "{Gray.1000}"
+    },
+    "icon_inverse": {
+      "color": "{Gray.1000}"
+    },
   },
 
   "alert_success": {

crates/viewer/re_ui/data/light_theme.ron

@@ -89,6 +89,7 @@ pub enum UICommand {
     #[cfg(debug_assertions)]
     ResetEguiMemory,
 
+    Share,
     CopyDirectLink,
 
     CopyTimeRangeLink,
@@ -288,6 +289,7 @@ impl UICommand {
                 "Reset egui memory, useful for debugging UI code.",
             ),
 
+            Self::Share => ("Share…", "Share the current screen as a link"),
             Self::CopyDirectLink => (
                 "Copy direct link",
                 "Try to copy a shareable link to the current screen. This is not supported for all data sources & viewer states.",
@@ -436,6 +438,7 @@ impl UICommand {
             #[cfg(debug_assertions)]
             Self::ResetEguiMemory => smallvec![],
 
+            Self::Share => smallvec![cmd(Key::L)],
             Self::CopyDirectLink => smallvec![],
 
             Self::CopyTimeRangeLink => smallvec![],

crates/viewer/re_ui/src/command.rs

@@ -59,6 +59,7 @@ pub struct DesignTokens {
     pub large_button_corner_radius: f32,
     pub small_icon_size: Vec2,
     pub modal_button_width: f32,
+    pub default_modal_width: f32,
 
     // All these colors can be found in dark_theme.ron and light_theme.ron:
     pub top_bar_color: Color32,
@@ -217,6 +218,11 @@ pub struct DesignTokens {
 
     // Table filter UI
     pub table_filter_frame_stroke: Stroke,
+
+    pub bg_fill_inverse: Color32,
+    pub bg_fill_inverse_hover: Color32,
+    pub text_inverse: Color32,
+    pub icon_inverse: Color32,
 }
 
 impl DesignTokens {
@@ -244,6 +250,7 @@ impl DesignTokens {
             large_button_corner_radius: get_scalar("large_button_corner_radius")?,
             small_icon_size: Vec2::splat(get_scalar("small_icon_size")?),
             modal_button_width: get_scalar("modal_button_width")?,
+            default_modal_width: get_scalar("default_modal_width")?,
 
             top_bar_color: get_color("top_bar_color"),
             bottom_bar_color: get_color("bottom_bar_color"),
@@ -358,6 +365,11 @@ impl DesignTokens {
 
             code_keyword_color: get_color("code_keyword_color"),
             table_filter_frame_stroke: get_stroke("table_filter_frame_stroke"),
+
+            bg_fill_inverse: get_color("bg_fill_inverse"),
+            bg_fill_inverse_hover: get_color("bg_fill_inverse-hover"),
+            text_inverse: get_color("text_inverse"),
+            icon_inverse: get_color("icon_inverse"),
         })
     }
 

crates/viewer/re_ui/src/design_tokens.rs

@@ -165,6 +165,8 @@ pub const CLOSE_SMALL: Icon = icon_from_path!("../data/icons/close_small.svg");
 pub const EXTERNAL_LINK: Icon = icon_from_path!("../data/icons/external_link.svg");
 pub const DISCORD: Icon = icon_from_path!("../data/icons/discord.svg");
 
+pub const URL: Icon = icon_from_path!("../data/icons/url.svg");
+
 pub const CONTAINER_HORIZONTAL: Icon = icon_from_path!("../data/icons/container_horizontal.svg");
 pub const CONTAINER_GRID: Icon = icon_from_path!("../data/icons/container_grid.svg");
 pub const CONTAINER_TABS: Icon = icon_from_path!("../data/icons/container_tabs.svg");

crates/viewer/re_ui/src/icons.rs

@@ -60,6 +60,11 @@ impl ModalHandler {
             None
         }
     }
+
+    /// Whether the modal is currently open.
+    pub fn is_open(&self) -> bool {
+        self.modal.is_some()
+    }
 }
 
 /// Show a modal window with Rerun style using [`egui::Modal`].
@@ -192,6 +197,8 @@ impl ModalWrapper {
                     }
                     if let Some(max_width) = self.max_width {
                         ui.set_max_width(max_width);
+                    } else {
+                        ui.set_max_width(tokens.default_modal_width);
                     }
 
                     if let Some(min_height) = self.min_height {

crates/viewer/re_ui/src/modal.rs

@@ -303,9 +303,9 @@ impl NotificationUi {
 
         ui.horizontal_top(|ui| {
             if !notifications.is_empty() {
-                ui.label(format!("Notifications ({})", notifications.len()));
+                ui.strong(format!("Notifications ({})", notifications.len()));
             } else {
-                ui.label("Notifications");
+                ui.strong("Notifications");
             }
             ui.with_layout(egui::Layout::top_down(egui::Align::Max), |ui| {
                 if ui.small_icon_button(&icons::CLOSE, "Close").clicked() {