Stop using button for collab notifications (#4085)

Kirill Bulatov created 2 years ago

Attempts to fix 
<img width="472" alt="Screenshot 2024-01-16 at 19 41 56"
src="https://github.com/zed-industries/zed/assets/2690773/5a8d0691-eabb-4e92-9186-362ca8ef9ca6">

by switching from buttons to labels (so that they can wrap) and adding a
background to them, so they are more visible

<img width="446" alt="image"
src="https://github.com/zed-industries/zed/assets/2690773/bb228aae-0abc-45b4-a0f5-a928a2e64390">
<img width="485" alt="image"
src="https://github.com/zed-industries/zed/assets/2690773/b7fa3598-59b8-4a74-97e6-790695e37047">


Release Notes:

- N/A

Change summary

crates/workspace/src/pane_group.rs | 74 +++++++++++++++----------------
1 file changed, 35 insertions(+), 39 deletions(-)

Detailed changes

crates/workspace/src/pane_group.rs

@@ -3,14 +3,14 @@ use anyhow::{anyhow, Result};
 use call::{ActiveCall, ParticipantLocation};
 use collections::HashMap;
 use gpui::{
-    point, size, AnyView, AnyWeakView, Axis, Bounds, Entity as _, IntoElement, Model, Pixels,
+    point, size, AnyView, AnyWeakView, Axis, Bounds, IntoElement, Model, MouseButton, Pixels,
     Point, View, ViewContext,
 };
 use parking_lot::Mutex;
 use project::Project;
 use serde::Deserialize;
 use std::sync::Arc;
-use ui::{prelude::*, Button};
+use ui::prelude::*;
 
 pub const HANDLE_HITBOX_SIZE: f32 = 4.0;
 const HORIZONTAL_MIN_SIZE: f32 = 80.;
@@ -183,6 +183,7 @@ impl Member {
 
                 let mut leader_border = None;
                 let mut leader_status_box = None;
+                let mut leader_join_data = None;
                 if let Some(leader) = &leader {
                     let mut leader_color = cx
                         .theme()
@@ -199,44 +200,21 @@ impl Member {
                             if Some(leader_project_id) == project.read(cx).remote_id() {
                                 None
                             } else {
-                                let leader_user = leader.user.clone();
-                                let leader_user_id = leader.user.id;
-                                Some(
-                                    Button::new(
-                                        ("leader-status", pane.entity_id()),
-                                        format!(
-                                            "Follow {} to their active project",
-                                            leader_user.github_login,
-                                        ),
-                                    )
-                                    .on_click(cx.listener(
-                                        move |this, _, cx| {
-                                            crate::join_remote_project(
-                                                leader_project_id,
-                                                leader_user_id,
-                                                this.app_state().clone(),
-                                                cx,
-                                            )
-                                            .detach_and_log_err(cx);
-                                        },
-                                    )),
-                                )
+                                leader_join_data = Some((leader_project_id, leader.user.id));
+                                Some(Label::new(format!(
+                                    "Follow {} to their active project",
+                                    leader.user.github_login,
+                                )))
                             }
                         }
-                        ParticipantLocation::UnsharedProject => Some(Button::new(
-                            ("leader-status", pane.entity_id()),
-                            format!(
-                                "{} is viewing an unshared Zed project",
-                                leader.user.github_login
-                            ),
-                        )),
-                        ParticipantLocation::External => Some(Button::new(
-                            ("leader-status", pane.entity_id()),
-                            format!(
-                                "{} is viewing a window outside of Zed",
-                                leader.user.github_login
-                            ),
-                        )),
+                        ParticipantLocation::UnsharedProject => Some(Label::new(format!(
+                            "{} is viewing an unshared Zed project",
+                            leader.user.github_login
+                        ))),
+                        ParticipantLocation::External => Some(Label::new(format!(
+                            "{} is viewing a window outside of Zed",
+                            leader.user.github_login
+                        ))),
                     };
                 }
 
@@ -264,7 +242,25 @@ impl Member {
                                 .bottom_3()
                                 .right_3()
                                 .z_index(1)
-                                .child(status_box),
+                                .bg(cx.theme().colors().element_background)
+                                .child(status_box)
+                                .when_some(
+                                    leader_join_data,
+                                    |this, (leader_project_id, leader_user_id)| {
+                                        this.cursor_pointer().on_mouse_down(
+                                            MouseButton::Left,
+                                            cx.listener(move |this, _, cx| {
+                                                crate::join_remote_project(
+                                                    leader_project_id,
+                                                    leader_user_id,
+                                                    this.app_state().clone(),
+                                                    cx,
+                                                )
+                                                .detach_and_log_err(cx);
+                                            }),
+                                        )
+                                    },
+                                ),
                         )
                     })
                     .into_any()