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

tab: Add xsmall, large style to Tab. (#680)

Browse source 
<img width="1047" alt="image"
src="https://github.com/user-attachments/assets/763fc4c9-bda8-4292-83c5-4a44db091938"
/>
<img width="1047" alt="image"
src="https://github.com/user-attachments/assets/e21d5344-f31c-43b3-af6b-28d845af77f8"
/>
<img width="1047" alt="image"
src="https://github.com/user-attachments/assets/3da37f16-55aa-44b3-98c2-4cadfae458b3"
/>
<img width="1047" alt="image"
src="https://github.com/user-attachments/assets/cfbb1f7e-c810-4387-b7dc-d1d2870d50a6"
/>
This commit is contained in:
Jason Lee 2025-03-04 10:26:12 +08:00 committed by GitHub
parent 793a35eff2
commit 581d92378c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 69 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
crates/ui/src/button/button.rs
View file

@ -1,6 +1,6 @@
use crate::{
h_flex, indicator::Indicator, tooltip::Tooltip, ActiveTheme, Colorize as _, Disableable, Icon,
Selectable, Sizable, Size,
Selectable, Sizable, Size, StyleSized,
};
use gpui::{
div, prelude::FluentBuilder as _, relative, AnyElement, App, ClickEvent, Corners, Div, Edges,
@ -432,10 +432,11 @@ impl RenderOnce for Button {
.id("label")
.items_center()
.justify_center()
.button_text_size(self.size)
.map(|this| match self.size {
Size::XSmall => this.gap_1().text_xs(),
Size::Small => this.gap_1().text_sm(),
_ => this.gap_2().text_base(),
Size::XSmall => this.gap_1(),
Size::Small => this.gap_1(),
_ => this.gap_2(),
})
.when(!self.loading, |this| {
this.when_some(self.icon, |this, icon| {

9
crates/ui/src/styled.rs
View file

@ -283,6 +283,7 @@ pub trait StyleSized<T: Styled> {
fn size_with(self, size: Size) -> Self;
/// Apply the table cell size (Font size, padding) with the given `Size`.
fn table_cell_size(self, size: Size) -> Self;
fn button_text_size(self, size: Size) -> Self;
}
impl<T: Styled> StyleSized<T> for T {
@ -399,6 +400,14 @@ impl<T: Styled> StyleSized<T> for T {
.pt(padding.top)
.pb(padding.bottom)
}
fn button_text_size(self, size: Size) -> Self {
match size {
Size::XSmall => self.text_xs(),
Size::Small => self.text_sm(),
_ => self.text_base(),
}
}
}
pub trait AxisExt {

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

@ -47,12 +47,24 @@ impl Default for TabStyle {
impl TabVariant {
fn height(&self, size: Size) -> Pixels {
match size {
Size::Small | Size::XSmall => match self {
Size::XSmall => match self {
TabVariant::Tab => px(22.),
TabVariant::Pill => px(20.),
TabVariant::Segmented => px(20.),
TabVariant::Underline => px(26.),
},
Size::Small => match self {
TabVariant::Tab => px(24.),
TabVariant::Pill => px(24.),
TabVariant::Segmented => px(24.),
TabVariant::Underline => px(30.),
},
Size::Large => match self {
TabVariant::Tab => px(36.),
TabVariant::Pill => px(36.),
TabVariant::Segmented => px(36.),
TabVariant::Underline => px(42.),
},
_ => match self {
TabVariant::Tab => px(30.),
TabVariant::Pill => px(31.),
@ -64,12 +76,24 @@ impl TabVariant {
fn inner_height(&self, size: Size) -> Pixels {
match size {
Size::Small | Size::XSmall => match self {
TabVariant::Tab => px(25.),
TabVariant::Pill => px(26.),
TabVariant::Segmented => px(26.),
Size::XSmall => match self {
TabVariant::Tab => px(20.),
TabVariant::Pill => px(20.),
TabVariant::Segmented => px(20.),
TabVariant::Underline => px(20.),
},
Size::Small => match self {
TabVariant::Tab => px(24.),
TabVariant::Pill => px(24.),
TabVariant::Segmented => px(24.),
TabVariant::Underline => px(22.),
},
Size::Large => match self {
TabVariant::Tab => px(36.),
TabVariant::Pill => px(36.),
TabVariant::Segmented => px(36.),
TabVariant::Underline => px(30.),
},
_ => match self {
TabVariant::Tab => px(30.),
TabVariant::Pill => px(31.),
@ -81,56 +105,33 @@ impl TabVariant {
fn inner_paddings(&self, size: Size) -> Edges<Pixels> {
match size {
Size::Small | Size::XSmall => match self {
TabVariant::Tab => Edges {
left: px(10.),
right: px(10.),
..Default::default()
},
TabVariant::Pill => Edges {
left: px(14.),
right: px(14.),
..Default::default()
},
TabVariant::Segmented => Edges {
left: px(8.),
right: px(8.),
..Default::default()
},
TabVariant::Underline => Edges {
left: px(10.),
right: px(10.),
..Default::default()
},
Size::XSmall => Edges {
left: px(8.),
right: px(8.),
..Default::default()
},
_ => match self {
TabVariant::Tab => Edges {
left: px(12.),
right: px(12.),
..Default::default()
},
TabVariant::Pill => Edges {
left: px(16.),
right: px(16.),
..Default::default()
},
TabVariant::Segmented => Edges {
left: px(10.),
right: px(10.),
..Default::default()
},
TabVariant::Underline => Edges {
left: px(12.),
right: px(12.),
..Default::default()
},
Size::Small => Edges {
left: px(12.),
right: px(12.),
..Default::default()
},
Size::Large => Edges {
left: px(20.),
right: px(20.),
..Default::default()
},
_ => Edges {
left: px(16.),
right: px(16.),
..Default::default()
},
}
}
fn inner_margins(&self, size: Size) -> Edges<Pixels> {
match size {
Size::Small | Size::XSmall => match self {
Size::XSmall => Edges::all(px(0.)),
Size::Small => match self {
TabVariant::Underline => Edges {
bottom: px(2.),
..Default::default()
@ -514,6 +515,11 @@ impl RenderOnce for Tab {
.h(height)
.overflow_hidden()
.text_color(tab_style.fg)
.map(|this| match self.size {
Size::XSmall => this.text_xs(),
Size::Large => this.text_base(),
_ => this.text_sm(),
})
.bg(tab_style.bg)
.border_l(tab_style.borders.left)
.border_r(tab_style.borders.right)
@ -534,7 +540,6 @@ impl RenderOnce for Tab {
.rounded(tab_style.radius)
})
})
.text_sm()
.when_some(self.prefix, |this, prefix| this.child(prefix))
.child(
div()

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

@ -135,6 +135,7 @@ impl RenderOnce for TabBar {
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
let default_gap = match self.size {
Size::Small | Size::XSmall => px(8.),
Size::Large => px(16.),
_ => px(12.),
};
let (bg, paddings, gap) = match self.variant {