dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dock: Fix tab panel first tab left border overlap issue (#1734)

Browse source 
| Before | After |
| - | - |
| <img width="811" height="424" alt="SCR-20251203-pzqr"
src="https://github.com/user-attachments/assets/9e0ad869-bb4b-451c-ad9a-1ca74204bb6d"
/> | <img width="811" height="424" alt="SCR-20251203-pzgw"
src="https://github.com/user-attachments/assets/ac6af899-d967-4d97-8818-b615ecd44b6b"
/> |
This commit is contained in:
Floyd Wang 2025-12-03 18:32:48 +08:00 committed by GitHub
parent 31bab9dcc3
commit a50b1e9341
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 32 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
crates/ui/src/dock/tab_panel.rs
View file

@ -615,6 +615,7 @@ impl TabPanel {
let left_dock_button = self.render_dock_toggle_button(DockPlacement::Left, window, cx); let left_dock_button = self.render_dock_toggle_button(DockPlacement::Left, window, cx);
let bottom_dock_button = self.render_dock_toggle_button(DockPlacement::Bottom, window, cx); let bottom_dock_button = self.render_dock_toggle_button(DockPlacement::Bottom, window, cx);
let right_dock_button = self.render_dock_toggle_button(DockPlacement::Right, window, cx); let right_dock_button = self.render_dock_toggle_button(DockPlacement::Right, window, cx);
let has_extend_dock_button = left_dock_button.is_some() || bottom_dock_button.is_some();
let is_bottom_dock = bottom_dock_button.is_some(); let is_bottom_dock = bottom_dock_button.is_some();
@ -642,19 +643,16 @@ impl TabPanel {
.when_some(title_style, |this, theme| { .when_some(title_style, |this, theme| {
this.bg(theme.background).text_color(theme.foreground) this.bg(theme.background).text_color(theme.foreground)
}) })
.when( .when(has_extend_dock_button, |this| {
left_dock_button.is_some() || bottom_dock_button.is_some(), this.child(
|this| { h_flex()
this.child( .flex_shrink_0()
h_flex() .mr_1()
.flex_shrink_0() .gap_1()
.mr_1() .children(left_dock_button)
.gap_1() .children(bottom_dock_button),
.children(left_dock_button) )
.children(bottom_dock_button), })
)
},
)
.child( .child(
div() div()
.id("tab") .id("tab")
@ -694,26 +692,23 @@ impl TabPanel {
TabBar::new("tab-bar") TabBar::new("tab-bar")
.tab_item_top_offset(-px(1.)) .tab_item_top_offset(-px(1.))
.track_scroll(&self.tab_bar_scroll_handle) .track_scroll(&self.tab_bar_scroll_handle)
.when( .when(has_extend_dock_button, |this| {
left_dock_button.is_some() || bottom_dock_button.is_some(), this.prefix(
|this| { h_flex()
this.prefix( .items_center()
h_flex() .top_0()
.items_center() // Right -1 for avoid border overlap with the first tab
.top_0() .right(-px(1.))
// Right -1 for avoid border overlap with the first tab .border_r_1()
.right(-px(1.)) .border_b_1()
.border_r_1() .h_full()
.border_b_1() .border_color(cx.theme().border)
.h_full() .bg(cx.theme().tab_bar)
.border_color(cx.theme().border) .px_2()
.bg(cx.theme().tab_bar) .children(left_dock_button)
.px_2() .children(bottom_dock_button),
.children(left_dock_button) )
.children(bottom_dock_button), })
)
},
)
.children(self.panels.iter().enumerate().filter_map(|(ix, panel)| { .children(self.panels.iter().enumerate().filter_map(|(ix, panel)| {
let mut active = state.active_panel.as_ref() == Some(panel); let mut active = state.active_panel.as_ref() == Some(panel);
let droppable = self.collapsed; let droppable = self.collapsed;
@ -729,6 +724,10 @@ impl TabPanel {
Some( Some(
Tab::default() Tab::default()
.when(!has_extend_dock_button && ix == 0, |this| {
// Right 1px for avoid border overlap with the first tab
this.right(px(1.))
})
.map(|this| { .map(|this| {
if let Some(tab_name) = panel.tab_name(cx) { if let Some(tab_name) = panel.tab_name(cx) {
this.child(tab_name) this.child(tab_name)