Better looking tabs (#1011)

* Move egui_dock styling to re_ui

* Add egui_dock example to re_ui_example

* No context-menu on right-click

* Improve the look of tabs

* Use the space icon in the tab name

Author: emilk

Cargo.lock

@@ -84,7 +84,7 @@ epaint = { git = "https://github.com/emilk/egui", rev = "f222ee044edf8beebfaf5dd
 # epaint = { path = "../../egui/crates/epaint" }
 
 # Forks of 3rd party egui crates, tracking latest egui/master:
-egui_dock = { git = "https://github.com/rerun-io/egui_dock", rev = "1355a9f24e99518ef7b9546872a0f25ffe1f91d2" }     # https://github.com/Adanos020/egui_dock/pull/93
+egui_dock = { git = "https://github.com/rerun-io/egui_dock", rev = "69f52c752695165243d8900b8e11a84df812d67f" }     # https://github.com/Adanos020/egui_dock/pull/93
 egui-notify = { git = "https://github.com/rerun-io/egui-notify", rev = "a158c2b81ca69ac78e3c61a705f478e8af76fd7d" } # https://github.com/ItsEthra/egui-notify/pull/10
 # egui_dock = { path = "../../forks/egui_dock" }
 # egui-notify = { path = "../../forks/egui-notify" }

Cargo.toml

@@ -15,7 +15,9 @@ include = [
 
 
 [features]
-default = []
+default = ["egui_dock"]
+
+egui_dock = ["dep:egui_dock"]
 
 
 [dependencies]
@@ -29,6 +31,8 @@ strum = { version = "0.24", features = ["derive"] }
 strum_macros = "0.24"
 sublime_fuzzy = "0.7"
 
+## Optional dependencies:
+egui_dock = { version = "0.3", optional = true, features = ["serde"] }
 
 [dev-dependencies]
 eframe = { workspace = true, default-features = false, features = ["wgpu"] }

crates/re_ui/Cargo.toml

@@ -12,6 +12,8 @@ fn main() -> eframe::Result<()> {
         ..Default::default()
     };
 
+    let tree = egui_dock::Tree::new(vec![1, 2, 3]);
+
     eframe::run_native(
         "re_ui example app",
         native_options,
@@ -20,6 +22,8 @@ fn main() -> eframe::Result<()> {
             Box::new(ExampleApp {
                 re_ui,
 
+                tree,
+
                 left_panel: true,
                 right_panel: true,
                 bottom_panel: true,
@@ -37,6 +41,8 @@ fn main() -> eframe::Result<()> {
 pub struct ExampleApp {
     re_ui: re_ui::ReUi,
 
+    tree: egui_dock::Tree<Tab>,
+
     left_panel: bool,
     right_panel: bool,
     bottom_panel: bool,
@@ -60,31 +66,34 @@ impl eframe::App for ExampleApp {
         self.top_bar(egui_ctx, frame);
 
         egui::SidePanel::left("left_panel").show_animated(egui_ctx, self.left_panel, |ui| {
-            ui.label("Left panel");
+            ui.strong("Left panel");
             ui.horizontal(|ui| {
                 ui.label("Toggle switch:");
                 ui.add(re_ui::toggle_switch(&mut self.dummy_bool));
             });
+            ui.label(format!("Latest command: {}", self.latest_cmd));
         });
         egui::SidePanel::right("right_panel").show_animated(egui_ctx, self.right_panel, |ui| {
-            ui.label("Right panel");
+            ui.strong("Right panel");
             selection_buttons(ui);
         });
         egui::TopBottomPanel::bottom("bottom_panel").show_animated(
             egui_ctx,
             self.bottom_panel,
             |ui| {
-                ui.label("Bottom panel");
+                ui.strong("Bottom panel");
             },
         );
 
-        egui::CentralPanel::default().show(egui_ctx, |ui| {
-            egui::warn_if_debug_build(ui);
-            ui.label("Hover me for a tooltip")
-                .on_hover_text("This is a tooltip");
-
-            ui.label(format!("Latest command: {}", self.latest_cmd));
-        });
+        let central_panel_frame = egui::Frame {
+            fill: egui_ctx.style().visuals.panel_fill,
+            ..Default::default()
+        };
+        egui::CentralPanel::default()
+            .frame(central_panel_frame)
+            .show(egui_ctx, |ui| {
+                tabs_ui(ui, &mut self.tree);
+            });
 
         if let Some(cmd) = self.cmd_palette.show(egui_ctx) {
             self.pending_commands.push(cmd);
@@ -205,3 +214,28 @@ fn selection_buttons(ui: &mut egui::Ui) {
             });
     });
 }
+
+fn tabs_ui(ui: &mut egui::Ui, tree: &mut egui_dock::Tree<Tab>) {
+    let mut my_tab_viewer = MyTabViewer {};
+    egui_dock::DockArea::new(tree)
+        .style(re_ui::egui_dock_style(ui.style()))
+        .show_inside(ui, &mut my_tab_viewer);
+}
+
+pub type Tab = i32;
+
+struct MyTabViewer {}
+
+impl egui_dock::TabViewer for MyTabViewer {
+    type Tab = Tab;
+
+    fn ui(&mut self, ui: &mut egui::Ui, _tab: &mut Self::Tab) {
+        egui::warn_if_debug_build(ui);
+        ui.label("Hover me for a tooltip")
+            .on_hover_text("This is a tooltip");
+    }
+
+    fn title(&mut self, tab: &mut Self::Tab) -> egui::WidgetText {
+        format!("This is tab {tab}").into()
+    }
+}

crates/re_ui/examples/re_ui_example.rs

@@ -313,3 +313,35 @@ impl ReUi {
         self.large_button_impl(ui, icon, bg_fill, tint)
     }
 }
+
+// ----------------------------------------------------------------------------
+
+#[cfg(feature = "egui_dock")]
+pub fn egui_dock_style(style: &egui::Style) -> egui_dock::Style {
+    let mut dock_style = egui_dock::Style::from_egui(style);
+    dock_style.separator_width = 2.0;
+    dock_style.default_inner_margin = 0.0.into();
+    dock_style.show_close_buttons = false;
+    dock_style.tab_include_scrollarea = false;
+    dock_style.show_context_menu = false;
+    dock_style.expand_tabs = false; // expand_tabs looks good, but decreases readability
+
+    // Tabs can be "focused", meaning it was the last clicked (of any tab). We don't care about that.
+    // Tabs can also be "active", meaning it is the selected tab within its sibling tabs. We want to highlight that.
+    let inactive_text_color = style.visuals.widgets.noninteractive.text_color();
+    let active_text_color = style.visuals.widgets.active.text_color();
+
+    dock_style.tab_text_color_unfocused = inactive_text_color;
+    dock_style.tab_text_color_focused = inactive_text_color;
+    dock_style.tab_text_color_active_unfocused = active_text_color;
+    dock_style.tab_text_color_active_focused = active_text_color;
+
+    // Don't show tabs
+    dock_style.tab_bar_background_color = style.visuals.panel_fill;
+    dock_style.tab_background_color = style.visuals.panel_fill;
+
+    // The active tab has no special outline:
+    dock_style.tab_outline_color = Color32::TRANSPARENT;
+
+    dock_style
+}

crates/re_ui/src/lib.rs

@@ -97,6 +97,11 @@ impl SpaceView {
         }
     }
 
+    /// How to show the name in the ui
+    pub fn display_text(&self) -> egui::WidgetText {
+        format!("{} {}", self.category.icon(), &self.name).into()
+    }
+
     /// List of entities a space view queries by default for a given category.
     ///
     /// These are all entities in the given space which have the requested category and are reachable by a transform.

crates/re_viewer/src/ui/space_view.rs

@@ -142,7 +142,7 @@ impl Viewport {
                 true,
                 &mut is_space_view_visible,
                 |ui| {
-                    let label = format!("{} {}", space_view.category.icon(), space_view.name);
+                    let label = space_view.display_text();
                     let response = ctx.space_view_button_to(ui, label, *space_view_id);
                     if response.clicked() {
                         if let Some(tree) = self.trees.get_mut(&self.visible) {
@@ -388,15 +388,6 @@ impl Viewport {
                 });
             }
         } else {
-            let mut dock_style = egui_dock::Style::from_egui(ui.style().as_ref());
-            dock_style.separator_width = 2.0;
-            dock_style.default_inner_margin = 0.0.into();
-            dock_style.show_close_buttons = false;
-            dock_style.tab_include_scrollarea = false;
-            // dock_style.expand_tabs = true; looks good, but decreases readability
-            dock_style.tab_text_color_unfocused = dock_style.tab_text_color_focused; // We don't treat focused tabs differently
-            dock_style.tab_background_color = ui.visuals().panel_fill;
-
             let mut tab_viewer = TabViewer {
                 ctx,
                 spaces_info,
@@ -406,7 +397,7 @@ impl Viewport {
             };
 
             egui_dock::DockArea::new(tree)
-                .style(dock_style)
+                .style(re_ui::egui_dock_style(ui.style()))
                 .show_inside(ui, &mut tab_viewer);
         }
     }
@@ -748,7 +739,7 @@ impl<'a, 'b> egui_dock::TabViewer for TabViewer<'a, 'b> {
             .space_views
             .get_mut(tab)
             .expect("Should have been populated beforehand");
-        space_view.name.clone().into()
+        space_view.display_text()
     }
 }