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

table, list: Avoid use deferred to show selected row style. (#363)

Browse source 
<img width="956" alt="image"
src="https://github.com/user-attachments/assets/0f72b556-76bc-4808-bca8-c261411656d1">
This commit is contained in:
Jason Lee 2024-10-18 13:27:59 +08:00 committed by GitHub
parent 4bef681c9a
commit a4260c109f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
crates/ui/src/list/list.rs
View file

@ -8,13 +8,13 @@ use crate::{
theme::ActiveTheme, theme::ActiveTheme,
v_flex, IconName, Size, v_flex, IconName, Size,
}; };
use gpui::px;
use gpui::{ use gpui::{
actions, div, prelude::FluentBuilder, uniform_list, AnyElement, AppContext, Entity, actions, div, prelude::FluentBuilder, uniform_list, AnyElement, AppContext, Entity,
FocusHandle, FocusableView, InteractiveElement, IntoElement, KeyBinding, Length, FocusHandle, FocusableView, InteractiveElement, IntoElement, KeyBinding, Length,
ListSizingBehavior, MouseButton, ParentElement, Render, SharedString, Styled, Task, ListSizingBehavior, MouseButton, ParentElement, Render, SharedString, Styled, Task,
UniformListScrollHandle, View, ViewContext, VisualContext, WindowContext, UniformListScrollHandle, View, ViewContext, VisualContext, WindowContext,
}; };
use gpui::{deferred, px};
use smol::Timer; use smol::Timer;
actions!(list, [Cancel, Confirm, SelectPrev, SelectNext]); actions!(list, [Cancel, Confirm, SelectPrev, SelectNext]);
@ -315,30 +315,30 @@ where
.children(self.delegate.render_item(ix, cx)) .children(self.delegate.render_item(ix, cx))
.when_some(self.selected_index, |this, selected_index| { .when_some(self.selected_index, |this, selected_index| {
this.when(ix == selected_index, |this| { this.when(ix == selected_index, |this| {
this.child(deferred( this.child(
div() div()
.absolute() .absolute()
.top(px(-1.)) .top(px(0.))
.left(px(-1.)) .left(px(0.))
.right(px(-1.)) .right(px(0.))
.bottom(px(-1.)) .bottom(px(0.))
.bg(cx.theme().list_active) .bg(cx.theme().list_active)
.border_1() .border_1()
.border_color(cx.theme().list_active_border), .border_color(cx.theme().list_active_border),
)) )
}) })
}) })
.when(self.right_clicked_index == Some(ix), |this| { .when(self.right_clicked_index == Some(ix), |this| {
this.child(deferred( this.child(
div() div()
.absolute() .absolute()
.top(px(-1.)) .top(px(0.))
.left(px(-1.)) .left(px(0.))
.right(px(-1.)) .right(px(0.))
.bottom(px(-1.)) .bottom(px(0.))
.border_1() .border_1()
.border_color(cx.theme().list_active_border), .border_color(cx.theme().list_active_border),
)) )
}) })
.on_mouse_down( .on_mouse_down(
MouseButton::Left, MouseButton::Left,

26
crates/ui/src/table.rs
View file

@ -9,8 +9,8 @@ use crate::{
v_flex, Icon, IconName, Sizable, Size, StyleSized as _, v_flex, Icon, IconName, Sizable, Size, StyleSized as _,
}; };
use gpui::{ use gpui::{
actions, canvas, deferred, div, prelude::FluentBuilder, px, uniform_list, AppContext, Bounds, actions, canvas, div, prelude::FluentBuilder, px, uniform_list, AppContext, Bounds, Div,
Div, DragMoveEvent, Edges, Entity, EntityId, EventEmitter, FocusHandle, FocusableView, DragMoveEvent, Edges, Entity, EntityId, EventEmitter, FocusHandle, FocusableView,
InteractiveElement, IntoElement, KeyBinding, MouseButton, ParentElement, Pixels, Point, Render, InteractiveElement, IntoElement, KeyBinding, MouseButton, ParentElement, Pixels, Point, Render,
ScrollHandle, SharedString, Stateful, StatefulInteractiveElement as _, Styled, ScrollHandle, SharedString, Stateful, StatefulInteractiveElement as _, Styled,
UniformListScrollHandle, ViewContext, VisualContext as _, WindowContext, UniformListScrollHandle, ViewContext, VisualContext as _, WindowContext,
@ -967,9 +967,11 @@ where
}) })
.w_full() .w_full()
.h(self.size.table_row_height()) .h(self.size.table_row_height())
.when(row_ix > 0, |this| { .border_b_1()
this.border_t_1().border_color(cx.theme().table_row_border) .when(row_ix == rows_count, |this| {
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) {
@ -1018,32 +1020,32 @@ where
this.when( this.when(
is_selected && self.selection_state == SelectionState::Row, is_selected && self.selection_state == SelectionState::Row,
|this| { |this| {
this.child(deferred( this.child(
div() div()
.top(px(-1.)) .top(px(-1.))
.left(px(-1.)) .left(px(0.))
.right(px(-1.)) .right(px(0.))
.bottom_0() .bottom_0()
.absolute() .absolute()
.bg(cx.theme().table_active) .bg(cx.theme().table_active)
.border_1() .border_1()
.border_color(cx.theme().table_active_border), .border_color(cx.theme().table_active_border),
)) )
}, },
) )
}) })
// Row right click row style // Row right click row style
.when(self.right_clicked_row == Some(row_ix), |this| { .when(self.right_clicked_row == Some(row_ix), |this| {
this.child(deferred( this.child(
div() div()
.top(px(-1.)) .top(px(-1.))
.left(px(-1.)) .left(px(0.))
.right(px(-1.)) .right(px(0.))
.bottom_0() .bottom_0()
.absolute() .absolute()
.border_1() .border_1()
.border_color(cx.theme().selection), .border_color(cx.theme().selection),
)) )
}) })
.on_mouse_down( .on_mouse_down(
MouseButton::Left, MouseButton::Left,