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,
|
left_columns_count: usize,
|
||||||
col_sizes: Rc<Vec<gpui::Size<Pixels>>>,
|
col_sizes: Rc<Vec<gpui::Size<Pixels>>>,
|
||||||
columns_count: usize,
|
columns_count: usize,
|
||||||
|
extra_rows_count: usize,
|
||||||
window: &mut Window,
|
window: &mut Window,
|
||||||
cx: &mut Context<Self>,
|
cx: &mut Context<Self>,
|
||||||
) -> impl IntoElement {
|
) -> impl IntoElement {
|
||||||
|
|
@ -1041,16 +1042,26 @@ where
|
||||||
let view = cx.entity().clone();
|
let view = cx.entity().clone();
|
||||||
|
|
||||||
if row_ix < rows_count {
|
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
|
self.delegate
|
||||||
.render_tr(row_ix, window, cx)
|
.render_tr(row_ix, window, cx)
|
||||||
.h_flex()
|
.h_flex()
|
||||||
.w_full()
|
.w_full()
|
||||||
.h(self.size.table_row_height())
|
.h(self.size.table_row_height())
|
||||||
.border_b_1()
|
.when(need_render_border, |this| {
|
||||||
.when(row_ix == rows_count, |this| {
|
this.border_b_1().border_color(cx.theme().table_row_border)
|
||||||
this.border_color(gpui::transparent_white())
|
|
||||||
})
|
})
|
||||||
.border_color(cx.theme().table_row_border)
|
|
||||||
.when(is_stripe_row, |this| this.bg(cx.theme().table_even))
|
.when(is_stripe_row, |this| this.bg(cx.theme().table_even))
|
||||||
.hover(|this| {
|
.hover(|this| {
|
||||||
if is_selected || self.right_clicked_row == Some(row_ix) {
|
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.) })
|
.top(if row_ix == 0 { px(0.) } else { px(-1.) })
|
||||||
.left(px(0.))
|
.left(px(0.))
|
||||||
.right(px(0.))
|
.right(px(0.))
|
||||||
.bottom_0()
|
.bottom(px(-1.))
|
||||||
.absolute()
|
.absolute()
|
||||||
.bg(cx.theme().table_active)
|
.bg(cx.theme().table_active)
|
||||||
.border_1()
|
.border_1()
|
||||||
|
|
@ -1165,7 +1176,7 @@ where
|
||||||
.top(if row_ix == 0 { px(0.) } else { px(-1.) })
|
.top(if row_ix == 0 { px(0.) } else { px(-1.) })
|
||||||
.left(px(0.))
|
.left(px(0.))
|
||||||
.right(px(0.))
|
.right(px(0.))
|
||||||
.bottom_0()
|
.bottom(px(-1.))
|
||||||
.absolute()
|
.absolute()
|
||||||
.border_1()
|
.border_1()
|
||||||
.border_color(cx.theme().selection),
|
.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.
|
/// 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 {
|
fn calculate_extra_rows_needed(&self, rows_count: usize) -> usize {
|
||||||
if !self.stripe {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
let mut extra_rows_needed = 0;
|
let mut extra_rows_needed = 0;
|
||||||
|
|
||||||
let row_height = self.size.table_row_height();
|
let row_height = self.size.table_row_height();
|
||||||
|
|
@ -1311,7 +1318,12 @@ where
|
||||||
.count();
|
.count();
|
||||||
let rows_count = self.delegate.rows_count(cx);
|
let rows_count = self.delegate.rows_count(cx);
|
||||||
let loading = self.delegate.loading(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()
|
let inner_table = v_flex()
|
||||||
.key_context("Table")
|
.key_context("Table")
|
||||||
|
|
@ -1349,7 +1361,7 @@ where
|
||||||
h_flex().id("table-body").flex_grow().size_full().child(
|
h_flex().id("table-body").flex_grow().size_full().child(
|
||||||
uniform_list(
|
uniform_list(
|
||||||
"table-uniform-list",
|
"table-uniform-list",
|
||||||
rows_count + extra_rows_needed,
|
render_rows_count,
|
||||||
cx.processor(
|
cx.processor(
|
||||||
move |table, visible_range: Range<usize>, window, cx| {
|
move |table, visible_range: Range<usize>, window, cx| {
|
||||||
// We must calculate the col sizes here, because the col sizes
|
// We must calculate the col sizes here, because the col sizes
|
||||||
|
|
@ -1399,6 +1411,7 @@ where
|
||||||
left_columns_count,
|
left_columns_count,
|
||||||
col_sizes.clone(),
|
col_sizes.clone(),
|
||||||
columns_count,
|
columns_count,
|
||||||
|
extra_rows_count,
|
||||||
window,
|
window,
|
||||||
cx,
|
cx,
|
||||||
));
|
));
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue