mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-26 19:44:04 +03:00
Improve UI of popover buttons when hovering over chat messages (#9041)
### Before https://github.com/zed-industries/zed/assets/146845123/4a16c1ce-a671-4e39-abc9-3a0cb25bc0cd ### After https://github.com/zed-industries/zed/assets/146845123/cfab3d00-246e-427d-9c40-8ee520a0a186 Release Notes: - Improved the UI of popover buttons when hovering over chat messages.
This commit is contained in:
Evren Sen
GitHub
parent
be953b78ef
commit
1756c1fc1e
4
assets/icons/reply_arrow.svg
Normal file
4
assets/icons/reply_arrow.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 17V15.8C20 14.1198 20 13.2798 19.673 12.638C19.3854 12.0735 18.9265 11.6146 18.362 11.327C17.7202 11 16.8802 11 15.2 11H4M4 11L8 7M4 11L8 15" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 468 B |
@ -464,19 +464,25 @@ impl ChatPanel {
|
||||
v_flex()
|
||||
.w_full()
|
||||
.relative()
|
||||
.group("")
|
||||
.when(!is_continuation_from_previous, |this| this.pt_2())
|
||||
.child(
|
||||
self.render_popover_buttons(&cx, message_id, can_delete_message)
|
||||
.neg_mt_2p5(),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.group("")
|
||||
.bg(background)
|
||||
.rounded_md()
|
||||
.overflow_hidden()
|
||||
.px_1()
|
||||
.px_1p5()
|
||||
.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(
|
||||
this.child(
|
||||
h_flex()
|
||||
.text_ui_sm()
|
||||
.child(div().absolute().child(
|
||||
@ -497,18 +503,8 @@ 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(),
|
||||
@ -596,7 +592,7 @@ impl ChatPanel {
|
||||
}
|
||||
}
|
||||
|
||||
fn render_popover_button(
|
||||
fn render_popover_buttons(
|
||||
&self,
|
||||
cx: &ViewContext<Self>,
|
||||
message_id: Option<u64>,
|
||||
@ -605,28 +601,82 @@ impl ChatPanel {
|
||||
div()
|
||||
.absolute()
|
||||
.z_index(1)
|
||||
.right_0()
|
||||
.child(
|
||||
div()
|
||||
.absolute()
|
||||
.z_index(1)
|
||||
.right_8()
|
||||
.w_6()
|
||||
.bg(cx.theme().colors().element_hover)
|
||||
.rounded_tl_md()
|
||||
.rounded_bl_md()
|
||||
.border_l_1()
|
||||
.border_t_1()
|
||||
.border_b_1()
|
||||
.border_color(cx.theme().colors().element_selected)
|
||||
.bg(cx.theme().colors().element_background)
|
||||
.hover(|style| style.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(
|
||||
div()
|
||||
.id("reply")
|
||||
.child(
|
||||
IconButton::new(("reply", message_id), IconName::ReplyArrow)
|
||||
.on_click(cx.listener(move |this, _, cx| {
|
||||
this.message_editor.update(cx, |editor, cx| {
|
||||
editor.set_reply_to_message_id(message_id);
|
||||
editor.focus_handle(cx).focus(cx);
|
||||
})
|
||||
})),
|
||||
)
|
||||
.tooltip(|cx| Tooltip::text("Reply", cx)),
|
||||
)
|
||||
}),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.absolute()
|
||||
.z_index(1)
|
||||
.right_2()
|
||||
.w_6()
|
||||
.rounded_tr_md()
|
||||
.rounded_br_md()
|
||||
.border_r_1()
|
||||
.border_t_1()
|
||||
.border_b_1()
|
||||
.border_color(cx.theme().colors().element_selected)
|
||||
.bg(cx.theme().colors().element_background)
|
||||
.hover(|style| style.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 this = cx.view().clone();
|
||||
|
||||
el.child(
|
||||
div()
|
||||
.id("more")
|
||||
.child(
|
||||
popover_menu(("menu", message_id))
|
||||
.trigger(IconButton::new(("trigger", message_id), IconName::Ellipsis))
|
||||
.trigger(IconButton::new(
|
||||
("trigger", message_id),
|
||||
IconName::Ellipsis,
|
||||
))
|
||||
.menu(move |cx| {
|
||||
Some(Self::render_message_menu(
|
||||
&chat_panel_view,
|
||||
&this,
|
||||
message_id,
|
||||
can_delete_message,
|
||||
cx,
|
||||
))
|
||||
}),
|
||||
)
|
||||
})
|
||||
.tooltip(|cx| Tooltip::text("More", cx)),
|
||||
)
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
fn render_message_menu(
|
||||
|
||||
@ -101,6 +101,7 @@ pub enum IconName {
|
||||
ReplaceAll,
|
||||
ReplaceNext,
|
||||
Return,
|
||||
ReplyArrow,
|
||||
Screen,
|
||||
SelectAll,
|
||||
Shift,
|
||||
@ -194,6 +195,7 @@ impl IconName {
|
||||
IconName::ReplaceAll => "icons/replace_all.svg",
|
||||
IconName::ReplaceNext => "icons/replace_next.svg",
|
||||
IconName::Return => "icons/return.svg",
|
||||
IconName::ReplyArrow => "icons/reply_arrow.svg",
|
||||
IconName::Screen => "icons/desktop.svg",
|
||||
IconName::SelectAll => "icons/select_all.svg",
|
||||
IconName::Shift => "icons/shift.svg",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user