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

Improved message hovering in chat panel (#8977)

Browse source 
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
This commit is contained in:
Evren Sen 2024-03-07 04:47:19 +01:00 • committed by GitHub
parent 9481b346e2
commit 4d2156e2ad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 52 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

84
crates/collab_ui/src/chat_panel.rs
View file

@ -430,7 +430,6 @@ impl ChatPanel {
ChannelMessageId::Saved(id) => ("saved-message", id).into(), ChannelMessageId::Saved(id) => ("saved-message", id).into(),
ChannelMessageId::Pending(id) => ("pending-message", id).into(), ChannelMessageId::Pending(id) => ("pending-message", id).into(),
}; };
let this = cx.view().clone();
let mentioning_you = message let mentioning_you = message
.mentions .mentions
@ -467,11 +466,15 @@ impl ChatPanel {
.relative() .relative()
.child( .child(
div() div()
.group("")
.bg(background) .bg(background)
.rounded_md() .rounded_md()
.overflow_hidden() .overflow_hidden()
.px_1() .px_1()
.py_0p5() .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| { .when(!is_continuation_from_previous, |this| {
this.mt_2().child( this.mt_2().child(
h_flex() h_flex()
@ -494,8 +497,18 @@ impl ChatPanel {
)) ))
.size(LabelSize::Small) .size(LabelSize::Small)
.color(Color::Muted), .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( .when(
message.reply_to_message_id.is_some() && reply_to_message.is_none(), message.reply_to_message_id.is_some() && reply_to_message.is_none(),
@ -545,37 +558,11 @@ impl ChatPanel {
.w_full() .w_full()
.text_ui_sm() .text_ui_sm()
.id(element_id) .id(element_id)
.group("") .child(text.element("body".into(), cx)),
.child(text.element("body".into(), cx)) )
.child( .when(self.has_open_menu(message_id), |el| {
div() el.bg(cx.theme().colors().element_selected)
.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,
))
}),
)
}),
),
)
}), }),
) )
.when( .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( fn render_message_menu(
this: &View<Self>, this: &View<Self>,
message_id: u64, message_id: u64,