Improved message hovering in chat panel (#8977)

Evren Sen created 2 years ago

Highlights messages on hover and fixed a more concise position for the
popover menu button.

Before:


https://github.com/zed-industries/zed/assets/146845123/39cab30f-659f-4164-a4ac-1dfee796e016

<img width="368" alt="Screenshot 2024-03-07 at 01 08 24"
src="https://github.com/zed-industries/zed/assets/146845123/74f41243-2dc2-4839-a733-9db3109e4665">

<img width="313" alt="Screenshot 2024-03-07 at 01 04 39"
src="https://github.com/zed-industries/zed/assets/146845123/f66c764d-488a-4303-b66e-f75835df6949">

After:


https://github.com/zed-industries/zed/assets/146845123/ac059c0d-7b16-4fd5-bbd7-ca96e1a6dfe1


<img width="368" alt="Screenshot 2024-03-07 at 01 09 42"
src="https://github.com/zed-industries/zed/assets/146845123/fa8940f6-52b4-489d-b0d3-d0e9443e2de2">

<img width="313" alt="Screenshot 2024-03-07 at 01 04 31"
src="https://github.com/zed-industries/zed/assets/146845123/850226f3-2c70-4a90-bb35-4a4cb0b7a219">


Thank you for the help @ConradIrwin and @RemcoSmitsDev !


Release Notes:
- Improved message hovering in chat panel

Change summary

crates/collab_ui/src/chat_panel.rs | 84 +++++++++++++++++++------------
1 file changed, 52 insertions(+), 32 deletions(-)

Detailed changes

crates/collab_ui/src/chat_panel.rs

@@ -430,7 +430,6 @@ impl ChatPanel {
             ChannelMessageId::Saved(id) => ("saved-message", id).into(),
             ChannelMessageId::Pending(id) => ("pending-message", id).into(),
         };
-        let this = cx.view().clone();
 
         let mentioning_you = message
             .mentions
@@ -467,11 +466,15 @@ impl ChatPanel {
             .relative()
             .child(
                 div()
+                    .group("")
                     .bg(background)
                     .rounded_md()
                     .overflow_hidden()
                     .px_1()
                     .py_0p5()
+                    .when(!self.has_open_menu(message_id), |this| {
+                        this.hover(|style| style.bg(cx.theme().colors().element_hover))
+                    })
                     .when(!is_continuation_from_previous, |this| {
                         this.mt_2().child(
                             h_flex()
@@ -494,9 +497,19 @@ impl ChatPanel {
                                     ))
                                     .size(LabelSize::Small)
                                     .color(Color::Muted),
-                                ),
+                                )
+                                .map(|el| {
+                                    el.child(self.render_popover_button(
+                                        &cx,
+                                        message_id,
+                                        can_delete_message,
+                                    ))
+                                }),
                         )
                     })
+                    .when(is_continuation_from_previous, |el| {
+                        el.child(self.render_popover_button(&cx, message_id, can_delete_message))
+                    })
                     .when(
                         message.reply_to_message_id.is_some() && reply_to_message.is_none(),
                         |this| {
@@ -545,37 +558,11 @@ impl ChatPanel {
                                 .w_full()
                                 .text_ui_sm()
                                 .id(element_id)
-                                .group("")
-                                .child(text.element("body".into(), cx))
-                                .child(
-                                    div()
-                                        .absolute()
-                                        .z_index(1)
-                                        .right_0()
-                                        .w_6()
-                                        .bg(background)
-                                        .when(!self.has_open_menu(message_id), |el| {
-                                            el.visible_on_hover("")
-                                        })
-                                        .when_some(message_id, |el, message_id| {
-                                            el.child(
-                                                popover_menu(("menu", message_id))
-                                                    .trigger(IconButton::new(
-                                                        ("trigger", message_id),
-                                                        IconName::Ellipsis,
-                                                    ))
-                                                    .menu(move |cx| {
-                                                        Some(Self::render_message_menu(
-                                                            &this,
-                                                            message_id,
-                                                            can_delete_message,
-                                                            cx,
-                                                        ))
-                                                    }),
-                                            )
-                                        }),
-                                ),
+                                .child(text.element("body".into(), cx)),
                         )
+                        .when(self.has_open_menu(message_id), |el| {
+                            el.bg(cx.theme().colors().element_selected)
+                        })
                     }),
             )
             .when(
@@ -609,6 +596,39 @@ impl ChatPanel {
         }
     }
 
+    fn render_popover_button(
+        &self,
+        cx: &ViewContext<Self>,
+        message_id: Option<u64>,
+        can_delete_message: bool,
+    ) -> Div {
+        div()
+            .absolute()
+            .z_index(1)
+            .right_0()
+            .w_6()
+            .bg(cx.theme().colors().element_hover)
+            .when(!self.has_open_menu(message_id), |el| {
+                el.visible_on_hover("")
+            })
+            .when_some(message_id, |el, message_id| {
+                let chat_panel_view = cx.view().clone();
+
+                el.child(
+                    popover_menu(("menu", message_id))
+                        .trigger(IconButton::new(("trigger", message_id), IconName::Ellipsis))
+                        .menu(move |cx| {
+                            Some(Self::render_message_menu(
+                                &chat_panel_view,
+                                message_id,
+                                can_delete_message,
+                                cx,
+                            ))
+                        }),
+                )
+            })
+    }
+
     fn render_message_menu(
         this: &View<Self>,
         message_id: u64,