Fix low handing styling fruits on the collab panel (#3928)

Kirill Bulatov created 2 years ago

Release Notes:

- N/A

Change summary

crates/collab_ui/src/collab_titlebar_item.rs | 42 ++++++++++++++-------
1 file changed, 28 insertions(+), 14 deletions(-)

Detailed changes

crates/collab_ui/src/collab_titlebar_item.rs

@@ -41,6 +41,7 @@ pub fn init(cx: &mut AppContext) {
         workspace.set_titlebar_item(titlebar_item.into(), cx)
     })
     .detach();
+    // todo!()
     // cx.add_action(CollabTitlebarItem::share_project);
     // cx.add_action(CollabTitlebarItem::unshare_project);
     // cx.add_action(CollabTitlebarItem::toggle_user_menu);
@@ -92,7 +93,7 @@ impl Render for CollabTitlebarItem {
                     .gap_1()
                     .children(self.render_project_host(cx))
                     .child(self.render_project_name(cx))
-                    .children(self.render_project_branch(cx))
+                    .child(div().pr_1().children(self.render_project_branch(cx)))
                     .when_some(
                         current_user.clone().zip(client.peer_id()).zip(room.clone()),
                         |this, ((current_user, peer_id), room)| {
@@ -210,15 +211,19 @@ impl Render for CollabTitlebarItem {
                             )
                         })
                         .child(
-                            IconButton::new("leave-call", ui::Icon::Exit)
-                                .style(ButtonStyle::Subtle)
-                                .tooltip(|cx| Tooltip::text("Leave call", cx))
-                                .icon_size(IconSize::Small)
-                                .on_click(move |_, cx| {
-                                    ActiveCall::global(cx)
-                                        .update(cx, |call, cx| call.hang_up(cx))
-                                        .detach_and_log_err(cx);
-                                }),
+                            div()
+                                .child(
+                                    IconButton::new("leave-call", ui::Icon::Exit)
+                                        .style(ButtonStyle::Subtle)
+                                        .tooltip(|cx| Tooltip::text("Leave call", cx))
+                                        .icon_size(IconSize::Small)
+                                        .on_click(move |_, cx| {
+                                            ActiveCall::global(cx)
+                                                .update(cx, |call, cx| call.hang_up(cx))
+                                                .detach_and_log_err(cx);
+                                        }),
+                                )
+                                .pr_2(),
                         )
                         .when(!read_only, |this| {
                             this.child(
@@ -296,6 +301,7 @@ impl Render for CollabTitlebarItem {
                                     }),
                             )
                         })
+                        .child(div().pr_2())
                     })
                     .map(|el| {
                         let status = self.client.status();
@@ -315,11 +321,19 @@ impl Render for CollabTitlebarItem {
 fn render_color_ribbon(participant_index: ParticipantIndex, colors: &PlayerColors) -> gpui::Canvas {
     let color = colors.color_for_participant(participant_index.0).cursor;
     canvas(move |bounds, cx| {
-        let mut path = Path::new(bounds.lower_left());
         let height = bounds.size.height;
-        path.curve_to(bounds.origin + point(height, px(0.)), bounds.origin);
-        path.line_to(bounds.upper_right() - point(height, px(0.)));
-        path.curve_to(bounds.lower_right(), bounds.upper_right());
+        let horizontal_offset = height;
+        let vertical_offset = px(height.0 / 2.0);
+        let mut path = Path::new(bounds.lower_left());
+        path.curve_to(
+            bounds.origin + point(horizontal_offset, vertical_offset),
+            bounds.origin + point(px(0.0), vertical_offset),
+        );
+        path.line_to(bounds.upper_right() + point(-horizontal_offset, vertical_offset));
+        path.curve_to(
+            bounds.lower_right(),
+            bounds.upper_right() + point(px(0.0), vertical_offset),
+        );
         path.line_to(bounds.lower_left());
         cx.paint_path(path, color);
     })