From 4d2156e2ad700d10c756bd88d3dfc3b382e39a87 Mon Sep 17 00:00:00 2001
From: Evren Sen <146845123+evrsen@users.noreply.github.com>
Date: Thu, 7 Mar 2024 04:47:19 +0100
Subject: [PATCH] Improved message hovering in chat panel (#8977)
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
After:
https://github.com/zed-industries/zed/assets/146845123/ac059c0d-7b16-4fd5-bbd7-ca96e1a6dfe1
Thank you for the help @ConradIrwin and @RemcoSmitsDev !
Release Notes:
- Improved message hovering in chat panel
---
crates/collab_ui/src/chat_panel.rs | 84 ++++++++++++++++++------------
1 file changed, 52 insertions(+), 32 deletions(-)
diff --git a/crates/collab_ui/src/chat_panel.rs b/crates/collab_ui/src/chat_panel.rs
index 6d2f3ea487..fb945987b5 100644
--- a/crates/collab_ui/src/chat_panel.rs
+++ b/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,
+ message_id: Option,
+ 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,
message_id: u64,