1
0
mirror of https://github.com/emilk/egui.git synced 2026-09-01 06:10:06 -04:00

Users can add button to the tab bar

This commit is contained in:
Emil Ernerfeldt
2023-05-04 15:42:40 +02:00
parent f2d6885a6b
commit 051ec14b98
3 changed files with 70 additions and 27 deletions

View File

@@ -69,7 +69,15 @@ pub trait Behavior<Leaf> {
true
}
// ---
/// Adds some UI to the top right of the tab bar.
/// You can use this to, for instance, add a button for adding new tabs.
fn top_bar_rtl_ui(&mut self, _ui: &mut Ui, _node_id: NodeId) {
// if ui.button("").clicked() {
// // TODO: add a new thing
// }
}
// --------
// Settings:
/// The height of the bar holding tab names.
@@ -102,16 +110,18 @@ pub trait Behavior<Leaf> {
/// The background color of the tab bar
fn tab_bar_color(&self, visuals: &Visuals) -> Color32 {
(Rgba::from(visuals.window_fill()) * Rgba::from_gray(0.7)).into()
if visuals.dark_mode {
Color32::BLACK
} else {
(Rgba::from(visuals.window_fill()) * Rgba::from_gray(0.8)).into()
}
}
fn tab_bg_color(&self, visuals: &Visuals, active: bool) -> Color32 {
if active {
// blend it with the tab contents:
visuals.window_fill()
visuals.window_fill() // same as the tab contents
} else {
// fade into background:
self.tab_bar_color(visuals)
Color32::TRANSPARENT // fade into background
}
}

View File

@@ -19,6 +19,14 @@ impl Tabs {
Self { children, active }
}
pub fn add_child(&mut self, child: NodeId) {
self.children.push(child);
}
pub fn set_active(&mut self, child: NodeId) {
self.active = child;
}
pub fn layout<Leaf>(
&self,
nodes: &mut Nodes<Leaf>,
@@ -73,39 +81,46 @@ impl Tabs {
let tab_bar_height = behavior.tab_bar_height(ui.style());
let tab_bar_rect = rect.split_top_bottom_at_y(rect.top() + tab_bar_height).0;
let mut tab_bar_ui = ui.child_ui(tab_bar_rect, *ui.layout());
let mut ui = ui.child_ui(tab_bar_rect, *ui.layout());
let mut button_rects = HashMap::new();
let mut dragged_index = None;
tab_bar_ui.horizontal(|ui| {
ui.painter()
.rect_filled(ui.max_rect(), 0.0, behavior.tab_bar_color(ui.visuals()));
ui.painter()
.rect_filled(ui.max_rect(), 0.0, behavior.tab_bar_color(ui.visuals()));
for (i, &child_id) in self.children.iter().enumerate() {
let is_being_dragged = is_being_dragged(ui.ctx(), child_id);
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
behavior.top_bar_rtl_ui(ui, node_id);
let selected = child_id == self.active;
let id = child_id.id();
ui.with_layout(egui::Layout::left_to_right(egui::Align::Center), |ui| {
for (i, &child_id) in self.children.iter().enumerate() {
let is_being_dragged = is_being_dragged(ui.ctx(), child_id);
let response = behavior.tab_ui(nodes, ui, id, child_id, selected, is_being_dragged);
let response = response.on_hover_cursor(egui::CursorIcon::Grab);
if response.clicked() {
next_active = child_id;
}
let selected = child_id == self.active;
let id = child_id.id();
if let Some(mouse_pos) = drop_context.mouse_pos {
if drop_context.dragged_node_id.is_some() && response.rect.contains(mouse_pos) {
// Expand this tab - maybe the user wants to drop something into it!
let response =
behavior.tab_ui(nodes, ui, id, child_id, selected, is_being_dragged);
let response = response.on_hover_cursor(egui::CursorIcon::Grab);
if response.clicked() {
next_active = child_id;
}
}
button_rects.insert(child_id, response.rect);
if is_being_dragged {
dragged_index = Some(i);
if let Some(mouse_pos) = drop_context.mouse_pos {
if drop_context.dragged_node_id.is_some()
&& response.rect.contains(mouse_pos)
{
// Expand this tab - maybe the user wants to drop something into it!
next_active = child_id;
}
}
button_rects.insert(child_id, response.rect);
if is_being_dragged {
dragged_index = Some(i);
}
}
}
});
});
// -----------