Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve styling of tree branches in collab panel (#3941)

Browse source 
This PR updates the styling of the tree branches in the current call
section of the collab panel:

- Fixed the gap between the notes and chat items.
- We now overdraw the tree branch on the notes item so it fills the gap.
- The tree branch lines are now thinner.

<img width="231" alt="Screenshot 2024-01-08 at 12 35 35 PM"
src="https://github.com/zed-industries/zed/assets/1486634/844c9e18-c2de-4163-9384-41d1577e23a0">

Note: I think the signature for `render_tree_branch` could use some
improvement. I don't like having the multiple `bool` parameters, but any
change I could think of was going to be a bit more invasive than I
wanted to take on in this PR.

Release Notes:

- Improved the style of the tree branches in current call details in the
collab panel.
This commit is contained in:
Marshall Bowers 2024-01-08 12:40:34 -05:00 • committed by GitHub
commit 2f6bbde785
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

20
crates/collab_ui/src/collab_panel.rs
View file

@ -896,7 +896,7 @@ impl CollabPanel {
.start_slot( .start_slot(
h_stack() h_stack()
.gap_1() .gap_1()
.child(render_tree_branch(is_last, cx)) .child(render_tree_branch(is_last, false, cx))
.child(IconButton::new(0, Icon::Folder)), .child(IconButton::new(0, Icon::Folder)),
) )
.child(Label::new(project_name.clone())) .child(Label::new(project_name.clone()))
@ -917,7 +917,7 @@ impl CollabPanel {
.start_slot( .start_slot(
h_stack() h_stack()
.gap_1() .gap_1()
.child(render_tree_branch(is_last, cx)) .child(render_tree_branch(is_last, false, cx))
.child(IconButton::new(0, Icon::Screen)), .child(IconButton::new(0, Icon::Screen)),
) )
.child(Label::new("Screen")) .child(Label::new("Screen"))
@ -958,7 +958,7 @@ impl CollabPanel {
.start_slot( .start_slot(
h_stack() h_stack()
.gap_1() .gap_1()
.child(render_tree_branch(false, cx)) .child(render_tree_branch(false, true, cx))
.child(IconButton::new(0, Icon::File)), .child(IconButton::new(0, Icon::File)),
) )
.child(div().h_7().w_full().child(Label::new("notes"))) .child(div().h_7().w_full().child(Label::new("notes")))
@ -979,7 +979,7 @@ impl CollabPanel {
.start_slot( .start_slot(
h_stack() h_stack()
.gap_1() .gap_1()
.child(render_tree_branch(false, cx)) .child(render_tree_branch(false, false, cx))
.child(IconButton::new(0, Icon::MessageBubbles)), .child(IconButton::new(0, Icon::MessageBubbles)),
) )
.child(Label::new("chat")) .child(Label::new("chat"))
@ -1007,7 +1007,7 @@ impl CollabPanel {
.start_slot( .start_slot(
h_stack() h_stack()
.gap_1() .gap_1()
.child(render_tree_branch(!has_visible_participants, cx)) .child(render_tree_branch(!has_visible_participants, false, cx))
.child(""), .child(""),
) )
.child(Label::new(if count == 1 { .child(Label::new(if count == 1 {
@ -2404,11 +2404,11 @@ impl CollabPanel {
} }
} }
fn render_tree_branch(is_last: bool, cx: &mut WindowContext) -> impl IntoElement { fn render_tree_branch(is_last: bool, overdraw: bool, cx: &mut WindowContext) -> impl IntoElement {
let rem_size = cx.rem_size(); let rem_size = cx.rem_size();
let line_height = cx.text_style().line_height_in_pixels(rem_size); let line_height = cx.text_style().line_height_in_pixels(rem_size);
let width = rem_size * 1.5; let width = rem_size * 1.5;
let thickness = px(2.); let thickness = px(1.);
let color = cx.theme().colors().text; let color = cx.theme().colors().text;
canvas(move |bounds, cx| { canvas(move |bounds, cx| {
@ -2422,7 +2422,11 @@ fn render_tree_branch(is_last: bool, cx: &mut WindowContext) -> impl IntoElement
point(start_x, top), point(start_x, top),
point( point(
start_x + thickness, start_x + thickness,
if is_last { start_y } else { bounds.bottom() }, if is_last {
start_y
} else {
bounds.bottom() + if overdraw { px(1.) } else { px(0.) }
},
), ),
), ),
color, color,