Skip to content

Commit

Permalink
Expand styling options for tabs (#139)
Browse files Browse the repository at this point in the history 
* Add rounding and correctly draw border

* Add TabBodyStyle

* Round the leaf size calculation

If this isn't rounded it is possible that either leaf disappears behind
the separator by one pixel. The rounding here should happen the same
way the rounding happens in `show_separator`

* Deal with stroke width correctly

The stroke of a rectangle expands beyond the original rectangle.
This will make sure that the rectangle is small enough so that when the
stroke expands beyond the rect, it is still inside the original size.

* Add different interaction version of tab style

* Move `fill_tab_bar` to tab bar settings

* Update the examples with the new styling

* Account for the scrollbar in the tab bar

* Use the correct interact style for the tab title

* Rename style structs

* Move hline style to tab style

* Add a prefered width for tabs

* Hide to tab body top border

* Set pointer hand when hovering over a tab

* Update changelog

* Remove todo

* Improve doc and apply suggestions

* Depluralise

* Change preferred width to minimum width

* Change styling a bit

* Change the default styling a bit

* Avoid overdrawing the add button line

* Update CHANGELOG.md

Adjust changelog
  • Loading branch information
@LennysLounge @Adanos020
LennysLounge authored and Adanos020 committed Jun 16, 2023
1 parent 45d3403 commit 3825c6d
Show file tree
Hide file tree
Showing 6 changed files with 423 additions and 167 deletions.
35 changes: 35 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,40 @@
# egui_dock changelog

## 0.7 - (to be determined)

### Changed

- Adjusted the styling of tabs to closer follow the egui default styling.

### Fixed

- Correctly draw a border around a dock area using the `Style::border` property.

### Added

- `Style::rounding` for the rounding of the dock area border.
- `TabStyle::active` for the active style of a tab.
- `TabStyle::inactive` for the inactive style of a tab.
- `TabStyle::focused` for the focused style of a tab.
- `TabStyle::hovered` for the hovered style of a tab.
- `TabStyle::tab_body` for styling the body of the tab including background color, stroke color, rounding and inner margin.
- `TabStyle::minimum_width` to set the minimum width of the tab.
- `TabInteractionStyle` to style the active/inactive/focused/hovered states of a tab.


### Breaking changes

- Moved `TabStyle::inner_margin` to `TabBodyStyle::inner_margin`.
- Moved `TabStyle::fill_tab_bar` to `TabBarStyle::fill_tab_bar`.
- Moved `TabStyle::outline_color` to `TabInteractionStyle::outline_color`.
- Moved `TabStyle::rounding` to `TabInteractionStyle::rounding`.
- Moved `TabStyle::bg_fill` to `TabInteractionStyle::bg_fill`.
- Moved `TabStyle::text_color_unfocused` to `TabStyle::inactive.text_color`.
- Moved `TabStyle::text_color_active_focused` to `TabStyle::focused.text_color`.
- Moved `TabStyle::text_color_active_unfocused` to `TabStyle::active.text_color`.
- Renamed `Style::tabs` to `Style::tab`.
- Removed `TabStyle::text_color_focused`. This style was practically never reachable.

## 0.6.3 - 2023-06-16

### Fixed
Expand Down
144 changes: 92 additions & 52 deletions examples/hello.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ use egui::{
CentralPanel, ComboBox, Frame, Slider, TopBottomPanel, Ui, WidgetText,
};

use egui_dock::{DockArea, Node, NodeIndex, Style, TabViewer, Tree};
use egui_dock::{DockArea, Node, NodeIndex, Style, TabInteractionStyle, TabViewer, Tree};

fn main() -> eframe::Result<()> {
let options = NativeOptions {
Expand Down Expand Up @@ -160,18 +160,15 @@ impl MyContext {
ui.collapsing("Tabs", |ui| {
ui.separator();

ui.checkbox(&mut style.tabs.fill_tab_bar, "Expand tabs");
ui.checkbox(
&mut style.tabs.hline_below_active_tab_name,
"Show a line below the active tab name",
);

ui.separator();

ui.checkbox(&mut style.tab_bar.fill_tab_bar, "Expand tabs");
ui.checkbox(
&mut style.tab_bar.show_scroll_bar_on_overflow,
"Show scroll bar on tab overflow",
);
ui.checkbox(
&mut style.tab.hline_below_active_tab_name,
"Show a line below the active tab name",
);
ui.horizontal(|ui| {
ui.add(Slider::new(&mut style.tab_bar.height, 20.0..=50.0));
ui.label("Tab bar height");
Expand All @@ -191,51 +188,64 @@ impl MyContext {

ui.separator();

ui.label("Rounding");
ui.horizontal(|ui| {
ui.add(Slider::new(&mut style.tabs.rounding.nw, 0.0..=15.0));
ui.label("North-West");
fn tab_style_editor_ui(ui: &mut egui::Ui, tab_style: &mut TabInteractionStyle) {
ui.separator();

ui.label("Rounding");
ui.horizontal(|ui| {
ui.add(Slider::new(&mut tab_style.rounding.nw, 0.0..=15.0));
ui.label("North-West");
});
ui.horizontal(|ui| {
ui.add(Slider::new(&mut tab_style.rounding.ne, 0.0..=15.0));
ui.label("North-East");
});
ui.horizontal(|ui| {
ui.add(Slider::new(&mut tab_style.rounding.sw, 0.0..=15.0));
ui.label("South-West");
});
ui.horizontal(|ui| {
ui.add(Slider::new(&mut tab_style.rounding.se, 0.0..=15.0));
ui.label("South-East");
});

ui.separator();

egui::Grid::new("tabs_colors").show(ui, |ui| {
ui.label("Title text color:");
color_edit_button_srgba(ui, &mut tab_style.text_color, Alpha::OnlyBlend);
ui.end_row();

ui.label("Outline color:")
.on_hover_text("The outline around the active tab name.");
color_edit_button_srgba(ui, &mut tab_style.outline_color, Alpha::OnlyBlend);
ui.end_row();

ui.label("Background color:");
color_edit_button_srgba(ui, &mut tab_style.bg_fill, Alpha::OnlyBlend);
ui.end_row();
});
}

ui.collapsing("Active", |ui| {
tab_style_editor_ui(ui, &mut style.tab.active);
});
ui.horizontal(|ui| {
ui.add(Slider::new(&mut style.tabs.rounding.ne, 0.0..=15.0));
ui.label("North-East");

ui.collapsing("Inactive", |ui| {
tab_style_editor_ui(ui, &mut style.tab.inactive);
});
ui.horizontal(|ui| {
ui.add(Slider::new(&mut style.tabs.rounding.sw, 0.0..=15.0));
ui.label("South-West");

ui.collapsing("Focused", |ui| {
tab_style_editor_ui(ui, &mut style.tab.focused);
});
ui.horizontal(|ui| {
ui.add(Slider::new(&mut style.tabs.rounding.se, 0.0..=15.0));
ui.label("South-East");

ui.collapsing("Hovered", |ui| {
tab_style_editor_ui(ui, &mut style.tab.hovered);
});

ui.separator();

egui::Grid::new("tabs_colors").show(ui, |ui| {
ui.label("Title text color, inactive and unfocused:");
color_edit_button_srgba(ui, &mut style.tabs.text_color_unfocused, Alpha::OnlyBlend);
ui.end_row();

ui.label("Title text color, inactive and focused:");
color_edit_button_srgba(ui, &mut style.tabs.text_color_focused, Alpha::OnlyBlend);
ui.end_row();

ui.label("Title text color, active and unfocused:");
color_edit_button_srgba(
ui,
&mut style.tabs.text_color_active_unfocused,
Alpha::OnlyBlend,
);
ui.end_row();

ui.label("Title text color, active and focused:");
color_edit_button_srgba(
ui,
&mut style.tabs.text_color_active_focused,
Alpha::OnlyBlend,
);
ui.end_row();

ui.label("Close button color unfocused:");
color_edit_button_srgba(ui, &mut style.buttons.close_tab_color, Alpha::OnlyBlend);
ui.end_row();
Expand All @@ -256,19 +266,49 @@ impl MyContext {
color_edit_button_srgba(ui, &mut style.tab_bar.bg_fill, Alpha::OnlyBlend);
ui.end_row();

ui.label("Outline color:")
.on_hover_text("The outline around the active tab name.");
color_edit_button_srgba(ui, &mut style.tabs.outline_color, Alpha::OnlyBlend);
ui.end_row();

ui.label("Horizontal line color:").on_hover_text(
"The line separating the tab name area from the tab content area",
);
color_edit_button_srgba(ui, &mut style.tab_bar.hline_color, Alpha::OnlyBlend);
ui.end_row();
});
});

ui.collapsing("Tab body", |ui| {
ui.separator();

ui.label("Rounding");
ui.horizontal(|ui| {
ui.add(Slider::new(&mut style.tab.tab_body.rounding.nw, 0.0..=15.0));
ui.label("North-West");
});
ui.horizontal(|ui| {
ui.add(Slider::new(&mut style.tab.tab_body.rounding.ne, 0.0..=15.0));
ui.label("North-East");
});
ui.horizontal(|ui| {
ui.add(Slider::new(&mut style.tab.tab_body.rounding.sw, 0.0..=15.0));
ui.label("South-West");
});
ui.horizontal(|ui| {
ui.add(Slider::new(&mut style.tab.tab_body.rounding.se, 0.0..=15.0));
ui.label("South-East");
});

ui.label("Stroke width:");
ui.add(Slider::new(
&mut style.tab.tab_body.stroke.width,
0.0..=10.0,
));
ui.end_row();

egui::Grid::new("tab_body_colors").show(ui, |ui| {
ui.label("Stroke color:");
color_edit_button_srgba(ui, &mut style.tab.tab_body.stroke.color, Alpha::OnlyBlend);
ui.end_row();

ui.label("Background color:");
color_edit_button_srgba(ui, &mut style.tabs.bg_fill, Alpha::OnlyBlend);
color_edit_button_srgba(ui, &mut style.tab.tab_body.bg_fill, Alpha::OnlyBlend);
ui.end_row();
});
});
Expand Down
2 changes: 1 addition & 1 deletion examples/tab_add.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ impl eframe::App for MyApp {
.show_add_buttons(true)
.style({
let mut style = Style::from_egui(ctx.style().as_ref());
style.tabs.fill_tab_bar = true;
style.tab_bar.fill_tab_bar = true;
style
})
.show(
Expand Down
Loading

0 comments on commit 3825c6d

Please sign in to comment.