From 2f81753fffb8322ba7ad795592eaeaeb1ea09fb6 Mon Sep 17 00:00:00 2001 From: reya Date: Sat, 24 Jan 2026 06:16:02 +0700 Subject: [PATCH] refine tabbar --- crates/dock/src/tab/mod.rs | 23 ++++++++++++++++++----- crates/dock/src/tab/tab_bar.rs | 22 ++++++++++++++-------- crates/dock/src/tab_panel.rs | 28 ++++++++++++++++++---------- crates/theme/src/colors.rs | 8 ++++---- 4 files changed, 54 insertions(+), 27 deletions(-) diff --git a/crates/dock/src/tab/mod.rs b/crates/dock/src/tab/mod.rs index baa2d69..1e8f22f 100644 --- a/crates/dock/src/tab/mod.rs +++ b/crates/dock/src/tab/mod.rs @@ -1,9 +1,9 @@ use gpui::prelude::FluentBuilder; use gpui::{ - div, px, AnyElement, App, Div, InteractiveElement, IntoElement, ParentElement, RenderOnce, - StatefulInteractiveElement, Styled, Window, + div, px, AnyElement, App, Div, InteractiveElement, IntoElement, MouseButton, ParentElement, + RenderOnce, StatefulInteractiveElement, Styled, Window, }; -use theme::ActiveTheme; +use theme::{ActiveTheme, TITLEBAR_HEIGHT}; use ui::{Selectable, Sizable, Size}; pub mod tab_bar; @@ -130,7 +130,7 @@ impl RenderOnce for Tab { self.base .id(self.ix) - .h(px(30.)) + .h(TITLEBAR_HEIGHT) .px_2() .relative() .flex() @@ -142,11 +142,24 @@ impl RenderOnce for Tab { .text_ellipsis() .text_color(text_color) .bg(bg_color) - .hover(|this| this.bg(hover_bg_color)) + .border_l(px(1.)) + .border_r(px(1.)) + .border_color(cx.theme().border) + .when(!self.selected, |this| { + this.hover(|this| { + this.text_color(text_color) + .bg(hover_bg_color) + .border_l(px(0.)) + .border_r(px(0.)) + }) + }) .when_some(self.prefix, |this, prefix| { this.child(prefix).text_color(text_color) }) .when_some(self.label, |this, label| this.child(label)) .when_some(self.suffix, |this, suffix| this.child(suffix)) + .on_mouse_down(MouseButton::Left, |_ev, _window, cx| { + cx.stop_propagation(); + }) } } diff --git a/crates/dock/src/tab/tab_bar.rs b/crates/dock/src/tab/tab_bar.rs index 8489f50..95bb6fd 100644 --- a/crates/dock/src/tab/tab_bar.rs +++ b/crates/dock/src/tab/tab_bar.rs @@ -27,7 +27,7 @@ pub struct TabBar { impl TabBar { pub fn new() -> Self { Self { - base: div().px(px(-1.)), + base: h_flex().px(px(-1.)), style: StyleRefinement::default(), scroll_handle: None, children: SmallVec::new(), @@ -99,17 +99,23 @@ impl RenderOnce for TabBar { self.base .group("tab-bar") - .refine_style(&self.style) .relative() - .flex() - .items_center() + .refine_style(&self.style) .bg(cx.theme().elevated_surface_background) .when(!focused, |this| { - this.bg(cx.theme().elevated_surface_background.opacity(0.75)) + // TODO: add specific styles for unfocused tab bar + this.bg(cx.theme().elevated_surface_background) }) - .border_b_1() - .border_color(cx.theme().border) - .overflow_hidden() + .child( + div() + .id("border-bottom") + .absolute() + .left_0() + .bottom_0() + .size_full() + .border_b_1() + .border_color(cx.theme().border), + ) .text_color(cx.theme().text) .when_some(self.prefix, |this, prefix| this.child(prefix)) .child( diff --git a/crates/dock/src/tab_panel.rs b/crates/dock/src/tab_panel.rs index 68c984c..55e891d 100644 --- a/crates/dock/src/tab_panel.rs +++ b/crates/dock/src/tab_panel.rs @@ -664,6 +664,7 @@ impl TabPanel { .top_0() .right(-px(1.)) .border_r_1() + .border_b_1() .h_full() .border_color(cx.theme().border) .bg(cx.theme().elevated_surface_background) @@ -791,16 +792,23 @@ impl TabPanel { )) }), ) - .suffix( - h_flex() - .items_center() - .top_0() - .right_0() - .h_full() - .px_2() - .gap_1() - .child(self.render_toolbar(state, window, cx)), - ) + .when(!self.collapsed, |this| { + this.suffix( + h_flex() + .items_center() + .px_2() + .gap_1() + .top_0() + .right_0() + .h_full() + .border_color(cx.theme().border) + .border_l_1() + .border_b_1() + .when(!cx.theme().platform.is_mac(), |this| this.border_r_1()) + .child(self.render_toolbar(state, window, cx)) + .when_some(right_dock_button, |this, btn| this.child(btn)), + ) + }) .into_any_element() } diff --git a/crates/theme/src/colors.rs b/crates/theme/src/colors.rs index e57e936..6e23abd 100644 --- a/crates/theme/src/colors.rs +++ b/crates/theme/src/colors.rs @@ -106,7 +106,7 @@ impl ThemeColors { background: neutral().light().step_1(), surface_background: neutral().light().step_2(), elevated_surface_background: neutral().light().step_3(), - panel_background: neutral().light().step_4(), + panel_background: neutral().light().step_1(), overlay: neutral().light_alpha().step_3(), title_bar: gpui::transparent_black(), title_bar_inactive: neutral().light().step_1(), @@ -166,7 +166,7 @@ impl ThemeColors { tab_inactive_background: neutral().light().step_2(), tab_hover_background: neutral().light().step_3(), - tab_active_background: neutral().light().step_4(), + tab_active_background: neutral().light().step_1(), scrollbar_thumb_background: neutral().light_alpha().step_3(), scrollbar_thumb_hover_background: neutral().light_alpha().step_4(), @@ -188,7 +188,7 @@ impl ThemeColors { background: neutral().dark().step_1(), surface_background: neutral().dark().step_2(), elevated_surface_background: neutral().dark().step_3(), - panel_background: neutral().dark().step_4(), + panel_background: neutral().dark().step_1(), overlay: neutral().dark_alpha().step_3(), title_bar: gpui::transparent_black(), title_bar_inactive: neutral().dark().step_1(), @@ -248,7 +248,7 @@ impl ThemeColors { tab_inactive_background: neutral().dark().step_2(), tab_hover_background: neutral().dark().step_3(), - tab_active_background: neutral().dark().step_4(), + tab_active_background: neutral().dark().step_1(), scrollbar_thumb_background: neutral().dark_alpha().step_3(), scrollbar_thumb_hover_background: neutral().dark_alpha().step_4(),