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

description_list: Add to support border style to DescriptionList vertical layout. (#706)

Browse source 
<img width="899" alt="image"
src="https://github.com/user-attachments/assets/38108d88-7b27-4964-8b1d-07b81522698b"
/>
<img width="980" alt="image"
src="https://github.com/user-attachments/assets/c4467a72-0011-486b-9918-af21297b8c3e"
/>
<img width="980" alt="image"
src="https://github.com/user-attachments/assets/21e8fc31-1642-4ab4-b180-01aea6e81b38"
/>
<img width="980" alt="image"
src="https://github.com/user-attachments/assets/65a02a85-7538-4b6f-83e5-33502c30367e"
/>
This commit is contained in:
Jason Lee 2025-03-11 17:59:56 +08:00 committed by GitHub
parent 65fad70c21
commit 5e4e810c0d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
crates/ui/src/description_list.rs
View file

@ -243,13 +243,8 @@ impl RenderOnce for DescriptionList {
_ => px(4.),
};
let gap = if self.layout.is_vertical() {
base_gap
} else {
px(0.)
};
// Only for Horizontal layout
let (padding_x, padding_y) = match self.size {
let (mut padding_x, mut padding_y) = match self.size {
Size::XSmall | Size::Small => (px(4.), px(2.)),
Size::Medium => (px(8.), px(4.)),
Size::Large => (px(12.), px(6.)),
@ -261,7 +256,11 @@ impl RenderOnce for DescriptionList {
} else {
None
};
let bordered = self.bordered && self.layout.is_horizontal();
if !self.bordered {
padding_x = px(0.);
padding_y = px(0.);
}
let gap = if self.bordered { px(0.) } else { base_gap };
// Group items by columns
let rows = Self::group_item_rows(self.items, self.columns);
@ -270,7 +269,7 @@ impl RenderOnce for DescriptionList {
v_flex()
.gap(gap)
.overflow_hidden()
.when(bordered, |this| {
.when(self.bordered, |this| {
this.rounded(padding_x)
.border_1()
.border_color(cx.theme().border)
@ -278,7 +277,7 @@ impl RenderOnce for DescriptionList {
.children(rows.into_iter().enumerate().map(|(ix, items)| {
let is_last = ix == rows_len - 1;
h_flex()
.when(bordered && !is_last, |this| {
.when(self.bordered && !is_last, |this| {
this.border_b_1().border_color(cx.theme().border)
})
.children({
@ -303,22 +302,25 @@ impl RenderOnce for DescriptionList {
cx.theme().description_list_label_foreground,
)
.text_sm()
.px(padding_x)
.py(padding_y)
.when(self.bordered, |this| {
this.when(self.layout.is_horizontal(), |this| {
this.border_r_1()
.when(!is_first_col, |this| {
this.border_l_1()
})
})
.when(self.layout.is_vertical(), |this| {
this.border_b_1()
})
.border_color(cx.theme().border)
.bg(cx.theme().description_list_label)
})
.map(|this| match label_width {
Some(label_width) => this
.w(label_width)
.px(padding_x)
.py(padding_y)
.flex_shrink_0()
.when(bordered, |this| {
this.border_r_1()
.when(!is_first_col, |this| {
this.border_l_1()
})
.border_color(cx.theme().border)
.bg(cx
.theme()
.description_list_label)
}),
Some(label_width) => {
this.w(label_width).flex_shrink_0()
}
None => this,
})
.child(label),
@ -326,14 +328,13 @@ impl RenderOnce for DescriptionList {
.child(
div()
.flex_1()
.when(self.layout.is_horizontal(), |this| {
this.px(padding_x).py(padding_y)
})
.px(padding_x)
.py(padding_y)
.overflow_hidden()
.child(value),
)
}
_ => div().h_2().w_full().when(bordered, |this| {
_ => div().h_2().w_full().when(self.bordered, |this| {
this.bg(cx.theme().description_list_label)
}),
}

10
crates/ui/src/text/element.rs
View file

@ -602,11 +602,13 @@ impl Node {
match self {
Node::Root { children } => div()
.children(
children.into_iter().map(move |c| {
c.render(None, false, text_view_style, window, cx)
.children({
let children_len = children.len();
children.into_iter().enumerate().map(move |(index, c)| {
let is_last_child = index == children_len - 1;
c.render(None, is_last_child, text_view_style, window, cx)
})
)
})
.into_any_element(),
Node::Paragraph(paragraph) => div().mb(mb).child(paragraph).into_any_element(),
Node::Heading { level, children } => {