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( section("Underline Tabs", cx).child(
TabBar::new("underline") TabBar::new("underline")
.w_full() .w_full()
.px_2()
.mx_3()
.underline() .underline()
.with_size(self.size) .with_size(self.size)
.selected_index(self.active_tab_ix) .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 { Size::Large => match self {
TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(36.), TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(36.),
TabVariant::Segmented => px(28.), TabVariant::Segmented => px(28.),
TabVariant::Underline => px(30.), TabVariant::Underline => px(32.),
}, },
_ => match self { _ => match self {
TabVariant::Tab => px(30.), TabVariant::Tab => px(30.),
TabVariant::Outline | TabVariant::Pill => px(26.), TabVariant::Outline | TabVariant::Pill => px(26.),
TabVariant::Segmented => px(24.), TabVariant::Segmented => px(24.),
TabVariant::Underline => px(24.), TabVariant::Underline => px(26.),
}, },
} }
} }
/// Default px(12) to match panel px_3, See [`crate::dock::TabPanel`] /// Default px(12) to match panel px_3, See [`crate::dock::TabPanel`]
fn inner_paddings(&self, size: Size) -> Edges<Pixels> { fn inner_paddings(&self, size: Size) -> Edges<Pixels> {
let px = match size { let mut padding_x = match size {
Size::XSmall => px(8.), Size::XSmall => px(8.),
Size::Small => px(10.), Size::Small => px(10.),
Size::Large => px(16.), Size::Large => px(16.),
_ => px(12.), _ => px(12.),
}; };
if matches!(self, TabVariant::Underline) {
padding_x = padding_x / 2.;
}
Edges { Edges {
left: px, left: padding_x,
right: px, right: padding_x,
..Default::default() ..Default::default()
} }
} }
fn inner_margins(&self, size: Size) -> Edges<Pixels> { fn inner_margins(&self, size: Size) -> Edges<Pixels> {
match size { 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 { Size::Small => match self {
TabVariant::Underline => Edges { 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() ..Default::default()
}, },
_ => Edges::all(px(0.)), _ => Edges::all(px(0.)),
}, },
_ => match self { _ => match self {
TabVariant::Underline => Edges { TabVariant::Underline => Edges {
top: px(5.), top: px(3.),
bottom: px(3.), bottom: px(4.),
..Default::default() ..Default::default()
}, },
_ => Edges::all(px(0.)), _ => Edges::all(px(0.)),
@ -201,7 +221,7 @@ impl TabVariant {
}, },
TabVariant::Pill => TabStyle { TabVariant::Pill => TabStyle {
fg: cx.theme().secondary_foreground, fg: cx.theme().secondary_foreground,
bg: cx.theme().secondary_hover, bg: cx.theme().secondary,
radius: px(99.), radius: px(99.),
..Default::default() ..Default::default()
}, },
@ -220,7 +240,7 @@ impl TabVariant {
fg: cx.theme().tab_foreground, fg: cx.theme().tab_foreground,
bg: cx.theme().transparent, bg: cx.theme().transparent,
radius: px(0.), radius: px(0.),
inner_bg: cx.theme().secondary, inner_bg: cx.theme().transparent,
inner_radius: cx.theme().radius, inner_radius: cx.theme().radius,
borders: Edges { borders: Edges {
bottom: px(2.), 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.)) (cx.theme().tab_bar_segmented, padding, px(2.))
} }
TabVariant::Underline => { TabVariant::Underline => {
let padding = Edges::all(px(0.)); // This gap is same as the tab inner_paddings
(cx.theme().transparent, padding, default_gap / 2.) 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)
} }
}; };