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

tab: Add tab_bar_segemented theme variable. (#690)

Browse source
This commit is contained in:
Jason Lee 2025-03-05 19:07:58 +08:00 committed by GitHub
parent 9194d7f6bb
commit d009b37bf1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -55,7 +55,7 @@ impl TabVariant {
TabVariant::Underline => px(30.),
_ => px(24.),
},
Size::Large => px(42.),
Size::Large => px(36.),
_ => match self {
TabVariant::Underline => px(36.),
_ => px(32.),
@ -77,7 +77,7 @@ impl TabVariant {
},
Size::Large => match self {
TabVariant::Tab | TabVariant::Pill => px(36.),
TabVariant::Segmented => px(34.),
TabVariant::Segmented => px(28.),
TabVariant::Underline => px(30.),
},
_ => match self {
@ -197,7 +197,7 @@ impl TabVariant {
},
TabVariant::Segmented => TabStyle {
fg: cx.theme().tab_foreground,
bg: cx.theme().tab_bar,
bg: cx.theme().transparent,
inner_bg: if selected {
cx.theme().background
} else {
@ -246,7 +246,7 @@ impl TabVariant {
},
TabVariant::Segmented => TabStyle {
fg: cx.theme().tab_active_foreground,
bg: cx.theme().tab_bar,
bg: cx.theme().transparent,
inner_radius: cx.theme().radius,
inner_bg: cx.theme().background,
shadow: true,
@ -565,7 +565,6 @@ impl RenderOnce for Tab {
.justify_center()
.overflow_hidden()
.margins(inner_margins)
.text_ellipsis()
.flex_shrink_0()
.map(|this| match self.icon {
Some(icon) => {
@ -573,7 +572,7 @@ impl RenderOnce for Tab {
.child(icon.map(|this| match self.size {
Size::XSmall => this.size_2p5(),
Size::Small => this.size_3p5(),
Size::Large => this.size_5(),
Size::Large => this.size_4(),
_ => this.size_4(),
}))
}

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

@ -152,7 +152,7 @@ impl RenderOnce for TabBar {
Size::XSmall => px(3.),
Size::Small => px(3.),
Size::Large => px(6.),
_ => px(4.),
_ => px(5.),
};
let padding = Edges {
left: padding_x,
@ -160,7 +160,7 @@ impl RenderOnce for TabBar {
..Default::default()
};
(cx.theme().tab_bar, padding, px(2.))
(cx.theme().tab_bar_segmented, padding, px(2.))
}
TabVariant::Underline => {
let padding = Edges::all(px(0.));
@ -224,7 +224,9 @@ impl RenderOnce for TabBar {
})
}),
)
.child(self.last_empty_space),
.when(self.variant == TabVariant::Tab, |this| {
this.child(self.last_empty_space)
}),
)
.when_some(self.suffix, |this, suffix| this.child(suffix))
}

5
crates/ui/src/theme.rs
View file

@ -179,6 +179,8 @@ pub struct ThemeColor {
pub tab_active_foreground: Hsla,
/// TabBar background color.
pub tab_bar: Hsla,
/// TabBar segmented background color.
pub tab_bar_segmented: Hsla,
/// Tab text color.
pub tab_foreground: Hsla,
/// Table background color.
@ -275,6 +277,7 @@ impl ThemeColor {
tab_active: hsl(0.0, 0.0, 100.0),
tab_active_foreground: hsl(240.0, 10., 3.9),
tab_bar: hsl(240.0, 14.3, 95.9),
tab_bar_segmented: hsl(240.0, 14.3, 95.9),
tab_foreground: hsl(240.0, 10., 33.9),
table: hsl(0.0, 0.0, 100.),
table_active: hsl(211.0, 97.0, 85.0).opacity(0.2),
@ -354,6 +357,7 @@ impl ThemeColor {
tab_active: hsl(0.0, 0.0, 8.0),
tab_active_foreground: hsl(0., 0., 78.),
tab_bar: hsl(299.0, 0., 5.5),
tab_bar_segmented: hsl(299.0, 0., 5.5),
tab_foreground: hsl(0., 0., 78.),
table: hsl(0.0, 0.0, 8.0),
table_active: hsl(240.0, 3.7, 15.0).opacity(0.2),
@ -457,6 +461,7 @@ impl Theme {
self.tab_active = self.tab_active.apply(mask_color);
self.tab_foreground = self.tab_foreground.apply(mask_color);
self.tab_active_foreground = self.tab_active_foreground.apply(mask_color);
self.tab_bar_segmented = self.tab_bar_segmented.apply(mask_color);
self.progress_bar = self.progress_bar.apply(mask_color);
self.slider_bar = self.slider_bar.apply(mask_color);
self.slider_thumb = self.slider_thumb.apply(mask_color);