diff --git a/CHANGELOG.md b/CHANGELOG.md index eee10b6..a316481 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/examples/hello.rs b/examples/hello.rs index d1d55ad..b10f2e8 100644 --- a/examples/hello.rs +++ b/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)); diff --git a/src/lib.rs b/src/lib.rs index c24d95e..7dee94a 100644 --- a/src/lib.rs +++ b/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)); diff --git a/src/style.rs b/src/style.rs index e84aa17..e2c3bbc 100644 --- a/src/style.rs +++ b/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 {