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

tab: Adjust underline tab style. (#720)

Browse source 
<img width="1293" alt="image"
src="https://github.com/user-attachments/assets/bd0cdd71-9e83-460a-8224-f255a590f2ac"
/>
This commit is contained in:
Jason Lee 2025-03-17 21:50:39 +08:00 committed by GitHub
parent 7442aa1fba
commit a0c7d0b791
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 45 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
crates/story/src/tabs_story.rs
View file

@ -150,8 +150,6 @@ impl Render for TabsStory {
section("Underline Tabs", cx).child(
TabBar::new("underline")
.w_full()
.px_2()
.mx_3()
.underline()
.with_size(self.size)
.selected_index(self.active_tab_ix)

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

@ -79,47 +79,67 @@ impl TabVariant {
Size::Large => match self {
TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(36.),
TabVariant::Segmented => px(28.),
TabVariant::Underline => px(30.),
TabVariant::Underline => px(32.),
},
_ => match self {
TabVariant::Tab => px(30.),
TabVariant::Outline | TabVariant::Pill => px(26.),
TabVariant::Segmented => px(24.),
TabVariant::Underline => px(24.),
TabVariant::Underline => px(26.),
},
}
}
/// Default px(12) to match panel px_3, See [`crate::dock::TabPanel`]
fn inner_paddings(&self, size: Size) -> Edges<Pixels> {
let px = match size {
let mut padding_x = match size {
Size::XSmall => px(8.),
Size::Small => px(10.),
Size::Large => px(16.),
_ => px(12.),
};
if matches!(self, TabVariant::Underline) {
padding_x = padding_x / 2.;
}
Edges {
left: px,
right: px,
left: padding_x,
right: padding_x,
..Default::default()
}
}
fn inner_margins(&self, size: Size) -> Edges<Pixels> {
match size {
Size::XSmall => Edges::all(px(0.)),
Size::XSmall => match self {
TabVariant::Underline => Edges {
top: px(1.),
bottom: px(2.),
..Default::default()
},
_ => Edges::all(px(0.)),
},
Size::Small => match self {
TabVariant::Underline => Edges {
bottom: px(2.),
top: px(2.),
bottom: px(3.),
..Default::default()
},
_ => Edges::all(px(0.)),
},
Size::Large => match self {
TabVariant::Underline => Edges {
top: px(5.),
bottom: px(6.),
..Default::default()
},
_ => Edges::all(px(0.)),
},
_ => match self {
TabVariant::Underline => Edges {
top: px(5.),
bottom: px(3.),
top: px(3.),
bottom: px(4.),
..Default::default()
},
_ => Edges::all(px(0.)),
@ -201,7 +221,7 @@ impl TabVariant {
},
TabVariant::Pill => TabStyle {
fg: cx.theme().secondary_foreground,
bg: cx.theme().secondary_hover,
bg: cx.theme().secondary,
radius: px(99.),
..Default::default()
},
@ -220,7 +240,7 @@ impl TabVariant {
fg: cx.theme().tab_foreground,
bg: cx.theme().transparent,
radius: px(0.),
inner_bg: cx.theme().secondary,
inner_bg: cx.theme().transparent,
inner_radius: cx.theme().radius,
borders: Edges {
bottom: px(2.),

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

@ -173,8 +173,20 @@ impl RenderOnce for TabBar {
(cx.theme().tab_bar_segmented, padding, px(2.))
}
TabVariant::Underline => {
let padding = Edges::all(px(0.));
(cx.theme().transparent, padding, default_gap / 2.)
// This gap is same as the tab inner_paddings
let gap = match self.size {
Size::XSmall => px(8.),
Size::Small => px(10.),
Size::Large => px(16.),
_ => px(12.),
};
let padding = Edges {
left: gap,
right: gap,
..Default::default()
};
(cx.theme().transparent, padding, gap)
}
};