Style option to change tab bar height (#62)

* Added option to change tab bar height

* Make add button consistent size

* Add `tab_bar_height` and `show_add_buttons` to Style Editor

* Resize add button click area

* Fix changelog

Co-authored-by: Adanos020 <adanos020@gmail.com>

CHANGELOG.md

@@ -1,5 +1,10 @@
 # egui_dock changelog
 
+## Unreleased
+
+### Added
+- `Style` now includes an option to change the tab's height - `tab_bar_height`. ([#62](https://github.com/Adanos020/egui_dock/pull/62))
+
 ## 0.3.0 - 2022-12-10
 
 ### Added

examples/hello.rs

@@ -140,7 +140,8 @@ impl MyContext {
             );
             ui.checkbox(&mut style.tabs_are_draggable, "Tabs are draggable");
             ui.checkbox(&mut style.expand_tabs, "Expand tabs");
-            ui.checkbox(&mut style.show_context_menu, "Show context_menu");
+            ui.checkbox(&mut style.show_context_menu, "Show context menu");
+            ui.checkbox(&mut style.show_add_buttons, "Show add buttons");
             ui.checkbox(
                 &mut style.tab_include_scrollarea,
                 "Include ScrollArea inside of tabs",
@@ -148,6 +149,13 @@ impl MyContext {
 
             ui.separator();
 
+            ui.horizontal(|ui| {
+                ui.add(Slider::new(&mut style.tab_bar_height, 20.0..=50.0));
+                ui.label("Tab bar height");
+            });
+
+            ui.separator();
+
             ui.label("Rounding");
             ui.horizontal(|ui| {
                 ui.add(Slider::new(&mut style.tab_rounding.nw, 0.0..=15.0));

src/lib.rs

@@ -332,7 +332,7 @@ impl<'tree, Tab> DockArea<'tree, Tab> {
                 let rect = *rect;
                 ui.set_clip_rect(rect);
 
-                let height_topbar = 24.0;
+                let height_topbar = style.tab_bar_height;
 
                 let bottom_y = rect.min.y + height_topbar;
                 let tabbar = rect.intersect(Rect::everything_above(bottom_y));

src/style.rs

@@ -27,6 +27,7 @@ pub struct Style {
     pub separator_color_dragged: Color32,
 
     pub tab_bar_background_color: Color32,
+    pub tab_bar_height: f32,
 
     pub tab_outline_color: Color32,
     pub tab_rounding: Rounding,
@@ -72,6 +73,7 @@ impl Default for Style {
             separator_color_dragged: Color32::WHITE,
 
             tab_bar_background_color: Color32::WHITE,
+            tab_bar_height: 24.0,
 
             tab_outline_color: Color32::BLACK,
             tab_rounding: Default::default(),
@@ -256,10 +258,17 @@ impl Style {
         }
         rect = rect.shrink(3.0);
 
+        let rect = {
+            let size = Self::TAB_PLUS_SIZE / 2.0;
+            let mut pos = rect.right_top();
+            pos.x -= size / 2.0;
+            pos.y += rect.size().y / 2.0;
+            Rect::from_center_size(pos, Vec2::splat(size))
+        };
+
         let response = ui
             .allocate_rect(rect, Sense::hover())
             .on_hover_cursor(CursorIcon::PointingHand);
-        let rect = rect.shrink(4.0);
 
         let color = if response.hovered() {
             self.add_tab_active_color
@@ -270,6 +279,8 @@ impl Style {
             ui.painter()
                 .rect_filled(rect, Rounding::same(2.0), self.add_tab_background_color);
         }
+
+        let rect = rect.shrink(1.75);
         ui.painter().line_segment(
             [rect.center_top(), rect.center_bottom()],
             Stroke::new(1.0, color),
@@ -299,16 +310,19 @@ impl Style {
 
         let galley = label.into_galley(ui, None, f32::INFINITY, TextStyle::Button);
 
-        let x_size = Vec2::new(galley.size().y / 1.3, galley.size().y / 1.3);
+        let x_size = Vec2::splat(galley.size().y / 1.3);
 
         let offset = vec2(8.0, 0.0);
 
         let desired_size = if self.expand_tabs {
-            vec2(expanded_width, 24.0)
+            vec2(expanded_width, self.tab_bar_height)
         } else if self.show_close_buttons {
-            vec2(galley.size().x + offset.x * 2.0 + x_size.x + 5.0, 24.0)
+            vec2(
+                galley.size().x + offset.x * 2.0 + x_size.x + 5.0,
+                self.tab_bar_height,
+            )
         } else {
-            vec2(galley.size().x + offset.x * 2.0, 24.0)
+            vec2(galley.size().x + offset.x * 2.0, self.tab_bar_height)
         };
 
         let (rect, mut response) = ui.allocate_at_least(desired_size, Sense::hover());
@@ -355,13 +369,13 @@ impl Style {
         }
 
         let pos = if self.expand_tabs {
-            let mut pos = Align2::CENTER_TOP.pos_in_rect(&rect.shrink2(vec2(8.0, 5.0)));
-            pos.x -= galley.size().x / 2.0;
+            let mut pos = Align2::CENTER_CENTER.pos_in_rect(&rect.shrink2(vec2(8.0, 5.0)));
+            pos -= galley.size() / 2.0;
             pos
         } else {
-            Align2::LEFT_TOP
-                .anchor_rect(rect.shrink2(vec2(8.0, 5.0)))
-                .min
+            let mut pos = Align2::LEFT_CENTER.pos_in_rect(&rect.shrink2(vec2(8.0, 5.0)));
+            pos.y -= galley.size().y / 2.0;
+            pos
         };
 
         let override_text_color = if galley.galley_has_color {
@@ -502,6 +516,13 @@ impl StyleBuilder {
         self
     }
 
+    /// Sets `tab_bar_height` for the color of tab bar. By `Default` it's `24.0`.
+    #[inline(always)]
+    pub fn with_tab_bar_height(mut self, tab_bar_height: f32) -> Self {
+        self.style.tab_bar_height = tab_bar_height;
+        self
+    }
+
     /// Sets `tab_outline_color` for the outline color of tabs. By `Default` it's [`Color32::BLACK`].
     #[inline(always)]
     pub fn with_tab_outline_color(mut self, tab_outline_color: Color32) -> Self {