diff --git a/Cargo.lock b/Cargo.lock index 2308eb213e1b..8cdfbc894aa0 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1308,7 +1308,7 @@ checksum = "4f94fa09c2aeea5b8839e414b7b841bf429fd25b9c522116ac97ee87856d88b2" [[package]] name = "ecolor" version = "0.20.0" -source = "git+https://github.com/emilk/egui?rev=ce62b61e15af391cc0da9963d5920bcbdc8a6704#ce62b61e15af391cc0da9963d5920bcbdc8a6704" +source = "git+https://github.com/emilk/egui?rev=fe7ff6626652d2da6c1fa63b7b75131cd9d664ab#fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" dependencies = [ "bytemuck", "serde", @@ -1317,7 +1317,7 @@ dependencies = [ [[package]] name = "eframe" version = "0.20.1" -source = "git+https://github.com/emilk/egui?rev=ce62b61e15af391cc0da9963d5920bcbdc8a6704#ce62b61e15af391cc0da9963d5920bcbdc8a6704" +source = "git+https://github.com/emilk/egui?rev=fe7ff6626652d2da6c1fa63b7b75131cd9d664ab#fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" dependencies = [ "bytemuck", "directories-next", @@ -1344,7 +1344,7 @@ dependencies = [ [[package]] name = "egui" version = "0.20.1" -source = "git+https://github.com/emilk/egui?rev=ce62b61e15af391cc0da9963d5920bcbdc8a6704#ce62b61e15af391cc0da9963d5920bcbdc8a6704" +source = "git+https://github.com/emilk/egui?rev=fe7ff6626652d2da6c1fa63b7b75131cd9d664ab#fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" dependencies = [ "accesskit", "ahash 0.8.2", @@ -1366,7 +1366,7 @@ dependencies = [ [[package]] name = "egui-wgpu" version = "0.20.0" -source = "git+https://github.com/emilk/egui?rev=ce62b61e15af391cc0da9963d5920bcbdc8a6704#ce62b61e15af391cc0da9963d5920bcbdc8a6704" +source = "git+https://github.com/emilk/egui?rev=fe7ff6626652d2da6c1fa63b7b75131cd9d664ab#fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" dependencies = [ "bytemuck", "epaint", @@ -1380,7 +1380,7 @@ dependencies = [ [[package]] name = "egui-winit" version = "0.20.1" -source = "git+https://github.com/emilk/egui?rev=ce62b61e15af391cc0da9963d5920bcbdc8a6704#ce62b61e15af391cc0da9963d5920bcbdc8a6704" +source = "git+https://github.com/emilk/egui?rev=fe7ff6626652d2da6c1fa63b7b75131cd9d664ab#fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" dependencies = [ "arboard", "egui", @@ -1405,7 +1405,7 @@ dependencies = [ [[package]] name = "egui_extras" version = "0.20.0" -source = "git+https://github.com/emilk/egui?rev=ce62b61e15af391cc0da9963d5920bcbdc8a6704#ce62b61e15af391cc0da9963d5920bcbdc8a6704" +source = "git+https://github.com/emilk/egui?rev=fe7ff6626652d2da6c1fa63b7b75131cd9d664ab#fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" dependencies = [ "egui", "serde", @@ -1415,7 +1415,7 @@ dependencies = [ [[package]] name = "egui_glow" version = "0.20.1" -source = "git+https://github.com/emilk/egui?rev=ce62b61e15af391cc0da9963d5920bcbdc8a6704#ce62b61e15af391cc0da9963d5920bcbdc8a6704" +source = "git+https://github.com/emilk/egui?rev=fe7ff6626652d2da6c1fa63b7b75131cd9d664ab#fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" dependencies = [ "bytemuck", "egui", @@ -1437,7 +1437,7 @@ checksum = "90e5c1c8368803113bf0c9584fc495a58b86dc8a29edbf8fe877d21d9507e797" [[package]] name = "emath" version = "0.20.0" -source = "git+https://github.com/emilk/egui?rev=ce62b61e15af391cc0da9963d5920bcbdc8a6704#ce62b61e15af391cc0da9963d5920bcbdc8a6704" +source = "git+https://github.com/emilk/egui?rev=fe7ff6626652d2da6c1fa63b7b75131cd9d664ab#fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" dependencies = [ "bytemuck", "serde", @@ -1483,7 +1483,7 @@ dependencies = [ [[package]] name = "epaint" version = "0.20.0" -source = "git+https://github.com/emilk/egui?rev=ce62b61e15af391cc0da9963d5920bcbdc8a6704#ce62b61e15af391cc0da9963d5920bcbdc8a6704" +source = "git+https://github.com/emilk/egui?rev=fe7ff6626652d2da6c1fa63b7b75131cd9d664ab#fe7ff6626652d2da6c1fa63b7b75131cd9d664ab" dependencies = [ "ab_glyph", "ahash 0.8.2", diff --git a/Cargo.toml b/Cargo.toml index 54cc89327a4b..cc0696bf0bfe 100644 --- a/Cargo.toml +++ b/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" } diff --git a/crates/re_ui/src/design_tokens.rs b/crates/re_ui/src/design_tokens.rs index 4be4404f69ab..79f0fdaa0a84 100644 --- a/crates/re_ui/src/design_tokens.rs +++ b/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 diff --git a/crates/re_viewer/src/misc/time_control_ui.rs b/crates/re_viewer/src/misc/time_control_ui.rs index 45eab08c7b7c..bb57d79a9c5e 100644 --- a/crates/re_viewer/src/misc/time_control_ui.rs +++ b/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( diff --git a/crates/re_viewer/src/ui/time_panel.rs b/crates/re_viewer/src/ui/time_panel.rs index f385028ade64..9f74ecb241b8 100644 --- a/crates/re_viewer/src/ui/time_panel.rs +++ b/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); diff --git a/crates/re_viewer/src/ui/viewport.rs b/crates/re_viewer/src/ui/viewport.rs index f2289105c313..d101641f55dd 100644 --- a/crates/re_viewer/src/ui/viewport.rs +++ b/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") } // ----------------------------------------------------------------------------