table: Fix the border overlap issue (#1110)
| Before | After | | - | - | | <img width="355" height="165" alt="SCR-20250801-kaof" src="https://github.com/user-attachments/assets/ac073913-7813-43f2-a860-690a2366640b" /> <img width="268" height="137" alt="SCR-20250801-kgqk" src="https://github.com/user-attachments/assets/6a01df6d-fbf9-42a3-bfa3-4120a28b1401" /> | <img width="378" height="176" alt="SCR-20250801-kags" src="https://github.com/user-attachments/assets/c5a3196d-4d0f-469b-b0d4-ce60b8dbe3f1" /> <img width="274" height="136" alt="SCR-20250801-kgik" src="https://github.com/user-attachments/assets/649ff866-f153-40f3-97fa-7715f7480a2f" /> |
This commit is contained in:
parent
6c7a28c818
commit
4b85cf6ad2
1 changed files with 25 additions and 12 deletions
|
|
@ -1032,6 +1032,7 @@ where
|
|||
left_columns_count: usize,
|
||||
col_sizes: Rc<Vec<gpui::Size<Pixels>>>,
|
||||
columns_count: usize,
|
||||
extra_rows_count: usize,
|
||||
window: &mut Window,
|
||||
cx: &mut Context<Self>,
|
||||
) -> impl IntoElement {
|
||||
|
|
@ -1041,16 +1042,26 @@ where
|
|||
let view = cx.entity().clone();
|
||||
|
||||
if row_ix < rows_count {
|
||||
let is_last_row = row_ix == rows_count - 1;
|
||||
let table_is_filled = extra_rows_count == 0;
|
||||
let need_render_border = if is_last_row {
|
||||
if table_is_filled {
|
||||
false
|
||||
} else {
|
||||
!self.stripe
|
||||
}
|
||||
} else {
|
||||
true
|
||||
};
|
||||
|
||||
self.delegate
|
||||
.render_tr(row_ix, window, cx)
|
||||
.h_flex()
|
||||
.w_full()
|
||||
.h(self.size.table_row_height())
|
||||
.border_b_1()
|
||||
.when(row_ix == rows_count, |this| {
|
||||
this.border_color(gpui::transparent_white())
|
||||
.when(need_render_border, |this| {
|
||||
this.border_b_1().border_color(cx.theme().table_row_border)
|
||||
})
|
||||
.border_color(cx.theme().table_row_border)
|
||||
.when(is_stripe_row, |this| this.bg(cx.theme().table_even))
|
||||
.hover(|this| {
|
||||
if is_selected || self.right_clicked_row == Some(row_ix) {
|
||||
|
|
@ -1149,7 +1160,7 @@ where
|
|||
.top(if row_ix == 0 { px(0.) } else { px(-1.) })
|
||||
.left(px(0.))
|
||||
.right(px(0.))
|
||||
.bottom_0()
|
||||
.bottom(px(-1.))
|
||||
.absolute()
|
||||
.bg(cx.theme().table_active)
|
||||
.border_1()
|
||||
|
|
@ -1165,7 +1176,7 @@ where
|
|||
.top(if row_ix == 0 { px(0.) } else { px(-1.) })
|
||||
.left(px(0.))
|
||||
.right(px(0.))
|
||||
.bottom_0()
|
||||
.bottom(px(-1.))
|
||||
.absolute()
|
||||
.border_1()
|
||||
.border_color(cx.theme().selection),
|
||||
|
|
@ -1204,10 +1215,6 @@ where
|
|||
|
||||
/// Calculate the extra rows needed to fill the table empty space when `stripe` is true.
|
||||
fn calculate_extra_rows_needed(&self, rows_count: usize) -> usize {
|
||||
if !self.stripe {
|
||||
return 0;
|
||||
}
|
||||
|
||||
let mut extra_rows_needed = 0;
|
||||
|
||||
let row_height = self.size.table_row_height();
|
||||
|
|
@ -1311,7 +1318,12 @@ where
|
|||
.count();
|
||||
let rows_count = self.delegate.rows_count(cx);
|
||||
let loading = self.delegate.loading(cx);
|
||||
let extra_rows_needed = self.calculate_extra_rows_needed(rows_count);
|
||||
let extra_rows_count = self.calculate_extra_rows_needed(rows_count);
|
||||
let render_rows_count = if self.stripe {
|
||||
rows_count + extra_rows_count
|
||||
} else {
|
||||
rows_count
|
||||
};
|
||||
|
||||
let inner_table = v_flex()
|
||||
.key_context("Table")
|
||||
|
|
@ -1349,7 +1361,7 @@ where
|
|||
h_flex().id("table-body").flex_grow().size_full().child(
|
||||
uniform_list(
|
||||
"table-uniform-list",
|
||||
rows_count + extra_rows_needed,
|
||||
render_rows_count,
|
||||
cx.processor(
|
||||
move |table, visible_range: Range<usize>, window, cx| {
|
||||
// We must calculate the col sizes here, because the col sizes
|
||||
|
|
@ -1399,6 +1411,7 @@ where
|
|||
left_columns_count,
|
||||
col_sizes.clone(),
|
||||
columns_count,
|
||||
extra_rows_count,
|
||||
window,
|
||||
cx,
|
||||
));
|
||||
|
|
|
|||
Loading…
Reference in a new issue