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

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

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

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

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