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() .top_0()
.right_0() .right_0()
.border_l_1() .border_l_1()
.border_b_1()
.h_full() .h_full()
.border_color(cx.theme().border) .border_color(cx.theme().border)
.bg(cx.theme().tab_bar) .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 crate::Selectable;
use gpui::prelude::FluentBuilder as _; use gpui::prelude::FluentBuilder as _;
use gpui::{ use gpui::{
div, AnyElement, Div, ElementId, InteractiveElement, IntoElement, ParentElement as _, div, px, AnyElement, Div, ElementId, InteractiveElement, IntoElement, ParentElement as _,
RenderOnce, Stateful, StatefulInteractiveElement, Styled, WindowContext, RenderOnce, Stateful, StatefulInteractiveElement, Styled, WindowContext,
}; };
@ -19,7 +19,7 @@ pub struct Tab {
impl Tab { impl Tab {
pub fn new(id: impl Into<ElementId>, label: impl IntoElement) -> Self { pub fn new(id: impl Into<ElementId>, label: impl IntoElement) -> Self {
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(), label: label.into_any_element(),
disabled: false, disabled: false,
selected: false, selected: false,
@ -79,7 +79,6 @@ impl RenderOnce for Tab {
.text_color(text_color) .text_color(text_color)
.bg(bg_color) .bg(bg_color)
.border_x_1() .border_x_1()
.border_color(bg_color)
.border_color(cx.theme().transparent) .border_color(cx.theme().transparent)
.when(self.selected, |this| this.border_color(cx.theme().border)) .when(self.selected, |this| this.border_color(cx.theme().border))
.text_sm() .text_sm()
@ -87,7 +86,7 @@ impl RenderOnce for Tab {
.when_some(self.prefix, |this, prefix| { .when_some(self.prefix, |this, prefix| {
this.child(prefix).text_color(text_color) 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)) .when_some(self.suffix, |this, suffix| this.child(suffix))
} }
} }

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

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