Good looking Blueprint View (#962)

* Make the hover background color brighter to make it easier to see

* Add a nice hover-effect to the entire row in the blueprint view

* Tweak hover rect

* Fix hover going through menus

* Make room for visibility button, even when not visible

* Add a little comment

* More comments

* Don't leave room for the visibility button

* Draw hover-rect behind instead

* Clip button text instead of painting over it

* Log instead of unwrap

* Compilation fix

* Remove the indent vlines

* Tweak button spacing in the timeline view

Cargo.toml

@@ -67,14 +67,14 @@ arrow2_convert = { git = "https://github.com/rerun-io/arrow2-convert", rev = "7e
 # arrow2 = { path = "../arrow2" }
 # arrow2_convert = { path = "../arrow2-convert/arrow2_convert" }
 
-# 2023-01-27 - wgpu update
-ecolor = { git = "https://github.com/emilk/egui", rev = "ce62b61e15af391cc0da9963d5920bcbdc8a6704" }
-eframe = { git = "https://github.com/emilk/egui", rev = "ce62b61e15af391cc0da9963d5920bcbdc8a6704" }
-egui = { git = "https://github.com/emilk/egui", rev = "ce62b61e15af391cc0da9963d5920bcbdc8a6704" }
-egui_extras = { git = "https://github.com/emilk/egui", rev = "ce62b61e15af391cc0da9963d5920bcbdc8a6704" }
-egui-wgpu = { git = "https://github.com/emilk/egui", rev = "ce62b61e15af391cc0da9963d5920bcbdc8a6704" }
-emath = { git = "https://github.com/emilk/egui", rev = "ce62b61e15af391cc0da9963d5920bcbdc8a6704" }
-epaint = { git = "https://github.com/emilk/egui", rev = "ce62b61e15af391cc0da9963d5920bcbdc8a6704" }
+# 2023-01-27 - add ability to disable the vertical line in indented blocks (e.g. our blurprint panel tree)
+ecolor = { git = "https://github.com/emilk/egui", rev = "fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" }
+eframe = { git = "https://github.com/emilk/egui", rev = "fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" }
+egui = { git = "https://github.com/emilk/egui", rev = "fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" }
+egui_extras = { git = "https://github.com/emilk/egui", rev = "fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" }
+egui-wgpu = { git = "https://github.com/emilk/egui", rev = "fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" }
+emath = { git = "https://github.com/emilk/egui", rev = "fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" }
+epaint = { git = "https://github.com/emilk/egui", rev = "fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" }
 # ecolor = { path = "../../egui/crates/ecolor" }
 # eframe = { path = "../../egui/crates/eframe" }
 # egui = { path = "../../egui/crates/egui" }

crates/re_ui/src/design_tokens.rs

@@ -72,9 +72,9 @@ fn apply_design_tokens(ctx: &egui::Context) -> DesignTokens {
         get_aliased_color(&json, "{Alias.Color.Action.Default.value}");
 
     {
-        // Background colors for menu buttons etc:
+        // Background colors for buttons (menu buttons, blueprint buttons, etc) when hovered or clicked:
         // let hovered_color = get_aliased_color(&json, "{Alias.Color.Action.Hovered.value}");
-        let hovered_color = Color32::from_gray(20); // TODO(emilk): change the content of the design_tokens.json origin instead
+        let hovered_color = Color32::from_gray(64); // TODO(emilk): change the content of the design_tokens.json origin instead
         egui_style.visuals.widgets.hovered.weak_bg_fill = hovered_color;
         egui_style.visuals.widgets.hovered.bg_fill = hovered_color;
         egui_style.visuals.widgets.active.weak_bg_fill = hovered_color;
@@ -127,7 +127,8 @@ fn apply_design_tokens(ctx: &egui::Context) -> DesignTokens {
 
     // Add stripes to grids and tables?
     egui_style.visuals.striped = false;
-    egui_style.visuals.faint_bg_color = Color32::from_additive_luminance(8);
+    egui_style.visuals.indent_has_left_vline = false;
+    egui_style.spacing.indent = 14.0;
 
     egui_style.debug.show_blocking_widget = false; // turn this on to debug interaction problems
 

crates/re_viewer/src/misc/time_control_ui.rs

@@ -59,11 +59,14 @@ impl TimeControl {
         times_per_timeline: &TimesPerTimeline,
         ui: &mut egui::Ui,
     ) {
-        self.play_button_ui(re_ui, ui, times_per_timeline);
-        self.follow_button_ui(re_ui, ui, times_per_timeline);
-        self.pause_button_ui(re_ui, ui);
-        self.step_time_button_ui(re_ui, ui, times_per_timeline);
-        self.loop_button_ui(re_ui, ui);
+        ui.horizontal(|ui| {
+            ui.spacing_mut().item_spacing.x = 5.0; // from figma
+            self.play_button_ui(re_ui, ui, times_per_timeline);
+            self.follow_button_ui(re_ui, ui, times_per_timeline);
+            self.pause_button_ui(re_ui, ui);
+            self.step_time_button_ui(re_ui, ui, times_per_timeline);
+            self.loop_button_ui(re_ui, ui);
+        });
     }
 
     fn play_button_ui(

crates/re_viewer/src/ui/time_panel.rs

@@ -134,6 +134,8 @@ impl TimePanel {
 
     #[allow(clippy::unused_self)]
     fn collapsed_ui(&mut self, ctx: &mut ViewerContext<'_>, ui: &mut egui::Ui) {
+        ui.spacing_mut().item_spacing.x = 18.0; // from figma
+
         ctx.rec_cfg
             .time_ctrl
             .time_control_ui(ctx.re_ui, ctx.log_db.times_per_timeline(), ui);
@@ -520,6 +522,8 @@ impl TimePanel {
 }
 
 fn top_row_ui(ctx: &mut ViewerContext<'_>, ui: &mut egui::Ui) {
+    ui.spacing_mut().item_spacing.x = 18.0; // from figma
+
     ctx.rec_cfg
         .time_ctrl
         .time_control_ui(ctx.re_ui, ctx.log_db.times_per_timeline(), ui);

crates/re_viewer/src/ui/viewport.rs

@@ -119,7 +119,10 @@ impl Viewport {
         ui: &mut egui::Ui,
         space_view_id: &SpaceViewId,
     ) {
-        let space_view = self.space_views.get_mut(space_view_id).unwrap();
+        let Some(space_view) = self.space_views.get_mut(space_view_id) else {
+            re_log::warn_once!("Bug: asked to show a ui for a Space View that doesn't exist");
+            return;
+        };
         debug_assert_eq!(space_view.id, *space_view_id);
 
         let root_group = space_view.data_blueprint.root_group();
@@ -561,19 +564,16 @@ impl Viewport {
     }
 }
 
-/// Returns true if visibility changed
+/// Show a single button (`add_content`), justified,
+/// and show a visibility button if the row is hovered.
+///
+/// Returns true if visibility changed.
 fn blueprint_row_with_visibility_button(
     ui: &mut egui::Ui,
     enabled: bool,
     visible: &mut bool,
     add_content: impl FnOnce(&mut egui::Ui) -> egui::Response,
 ) -> bool {
-    let row_rect = ui.max_rect().expand2(ui.spacing().item_spacing * 0.5);
-
-    let hovered = ui
-        .input(|i| i.pointer.hover_pos())
-        .map_or(false, |pointer| row_rect.contains(pointer));
-
     if !*visible || !enabled {
         // Dim the appearance of things added by `add_content`:
         let widget_visuals = &mut ui.visuals_mut().widgets;
@@ -584,44 +584,80 @@ fn blueprint_row_with_visibility_button(
         dim_color(&mut widget_visuals.inactive.fg_stroke.color);
     }
 
-    add_content(ui);
+    let where_to_add_hover_rect = ui.painter().add(egui::Shape::Noop);
+
+    // Make the main button span the whole width to make it easier to click:
+    let main_button_response = ui
+        .with_layout(egui::Layout::top_down_justified(egui::Align::LEFT), |ui| {
+            ui.style_mut().wrap = Some(false);
 
-    if hovered {
-        // TODO(emilk): enable the highlight once clicking the whole width
-        // is the same as clicking the button, i.e. the button in `add_content` is justified.
-        if false {
-            // Highlight the row:
-            let mut paint_rect = row_rect;
-            paint_rect.min.x = 0.0; // fill full panel width
+            // Turn off the background color of hovered buttons.
+            // Why? Because we add a manual hover-effect later.
+            // Why? Because we want that hover-effect even when only the visibility button is hovered.
+            let visuals = ui.visuals_mut();
+            visuals.widgets.hovered.weak_bg_fill = egui::Color32::TRANSPARENT;
+            visuals.widgets.hovered.bg_fill = egui::Color32::TRANSPARENT;
+            visuals.widgets.active.weak_bg_fill = egui::Color32::TRANSPARENT;
+            visuals.widgets.active.bg_fill = egui::Color32::TRANSPARENT;
+            visuals.widgets.open.weak_bg_fill = egui::Color32::TRANSPARENT;
+            visuals.widgets.open.bg_fill = egui::Color32::TRANSPARENT;
+
+            if ui
+                .interact(ui.max_rect(), ui.id(), egui::Sense::hover())
+                .hovered()
+            {
+                // Clip the main button so that the visibility button has room to cover it.
+                // Ideally we would only clip the button _text_, not the button background, but that's not possible.
+                let mut clip_rect = ui.max_rect();
+                let visibility_button_width = 16.0;
+                clip_rect.max.x -= visibility_button_width;
+                ui.set_clip_rect(clip_rect);
+            }
 
-            // TODO(emilk): paint behind when https://github.com/emilk/egui/issues/1516 is done
-            ui.painter()
-                .rect_filled(paint_rect, 2.0, egui::Color32::WHITE.gamma_multiply(0.1));
-        }
+            add_content(ui)
+        })
+        .inner;
 
-        visibility_button(ui, enabled, visible).changed()
+    let main_button_rect = main_button_response.rect;
+
+    let button_hovered = ui
+        .interact(main_button_rect, ui.id(), egui::Sense::hover())
+        .hovered();
+
+    if button_hovered {
+        let visibility_button_changed = visibility_button(ui, enabled, visible).changed();
+
+        // Highlight the row:
+        let visuals = ui.visuals().widgets.hovered;
+        let hover_rect = main_button_rect.expand(visuals.expansion);
+        ui.painter().set(
+            where_to_add_hover_rect,
+            egui::Shape::rect_filled(hover_rect, visuals.rounding, visuals.bg_fill),
+        );
+
+        visibility_button_changed
     } else {
         false
     }
 }
 
 fn visibility_button(ui: &mut egui::Ui, enabled: bool, visible: &mut bool) -> egui::Response {
-    use re_ui::toggle_switch;
+    // Just put the button on top of the existing ui:
+    let mut ui = ui.child_ui(
+        ui.max_rect(),
+        egui::Layout::right_to_left(egui::Align::Center),
+    );
 
-    ui.add_space(16.0); // Make room for visibility button so the side bar don't become too narrow to fit it
+    ui.set_enabled(enabled);
 
-    ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
-        ui.set_enabled(enabled);
-        if enabled {
-            ui.add(toggle_switch(visible))
-        } else {
-            let mut always_false = false;
-            ui.add(toggle_switch(&mut always_false))
-        }
-        .on_hover_text("Toggle visibility")
-        .on_disabled_hover_text("A parent is invisible")
-    })
-    .inner
+    if enabled {
+        ui.add(re_ui::toggle_switch(visible))
+    } else {
+        let mut always_false = false;
+        ui.add(re_ui::toggle_switch(&mut always_false))
+    }
+    .on_hover_text("Toggle visibility")
+    .on_disabled_hover_text("A parent is invisible")
 }
 
 // ----------------------------------------------------------------------------