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

tab: Improve TabBar border to let active item can override it. (#194)

Browse source
This commit is contained in:
Jason Lee 2024-09-01 00:31:14 +08:00 committed by GitHub
parent 3d8e7a9e54
commit 169572fa74
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -290,6 +290,7 @@ impl TabPanel {
.top_0()
.right_0()
.border_l_1()
.border_b_1()
.h_full()
.border_color(cx.theme().border)
.bg(cx.theme().tab_bar)

7
crates/ui/src/tab/tab.rs
View file

@ -2,7 +2,7 @@ use crate::theme::{ActiveTheme, Colorize};
use crate::Selectable;
use gpui::prelude::FluentBuilder as _;
use gpui::{
div, AnyElement, Div, ElementId, InteractiveElement, IntoElement, ParentElement as _,
div, px, AnyElement, Div, ElementId, InteractiveElement, IntoElement, ParentElement as _,
RenderOnce, Stateful, StatefulInteractiveElement, Styled, WindowContext,
};
@ -19,7 +19,7 @@ pub struct Tab {
impl Tab {
pub fn new(id: impl Into<ElementId>, label: impl IntoElement) -> Self {
Self {
base: div().id(id.into()).gap_1().py_1p5().px_3().h_8(),
base: div().id(id.into()).gap_1().py_1p5().px_3().h(px(30.)),
label: label.into_any_element(),
disabled: false,
selected: false,
@ -79,7 +79,6 @@ impl RenderOnce for Tab {
.text_color(text_color)
.bg(bg_color)
.border_x_1()
.border_color(bg_color)
.border_color(cx.theme().transparent)
.when(self.selected, |this| this.border_color(cx.theme().border))
.text_sm()
@ -87,7 +86,7 @@ impl RenderOnce for Tab {
.when_some(self.prefix, |this, prefix| {
this.child(prefix).text_color(text_color)
})
.child(self.label)
.child(div().text_ellipsis().child(self.label))
.when_some(self.suffix, |this, suffix| this.child(suffix))
}
}

24
crates/ui/src/tab/tab_bar.rs
View file

@ -21,7 +21,7 @@ pub struct TabBar {
impl TabBar {
pub fn new(id: impl Into<ElementId>) -> Self {
Self {
base: div().h_8().px(px(-1.)),
base: div().px(px(-1.)),
id: id.into(),
children: SmallVec::new(),
scroll_handle: ScrollHandle::new(),
@ -30,7 +30,7 @@ impl TabBar {
}
}
#[allow(unused)]
/// Track the scroll of the TabBar
pub fn track_scroll(mut self, scroll_handle: ScrollHandle) -> Self {
self.scroll_handle = scroll_handle;
self
@ -63,27 +63,31 @@ impl Styled for TabBar {
impl RenderOnce for TabBar {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let theme = cx.theme();
self.base
.id(self.id)
.group("tab-bar")
.relative()
.flex()
.flex_none()
.items_center()
.border_b_1()
.border_color(cx.theme().border)
.bg(theme.tab_bar)
.text_color(theme.tab_foreground)
.bg(cx.theme().tab_bar)
.text_color(cx.theme().tab_foreground)
.child(
div()
.id("border-b")
.absolute()
.bottom_0()
.size_full()
.border_b_1()
.border_color(cx.theme().border),
)
.when_some(self.prefix, |this, prefix| this.child(prefix))
// The child will append to this level
.child(
h_flex()
.id("tabs")
.flex_grow()
.overflow_x_scroll()
.track_scroll(&self.scroll_handle)
// The children will append to this level
.children(self.children),
)
.when_some(self.suffix, |this, suffix| this.child(suffix))