Improve MessageNotification design (#22829)

Just fine-tuning some bits of the visual design.

| Before | After |
|--------|--------|
| <img width="1426" alt="Screenshot 2025-01-08 at 11 26 32 AM"
src="https://github.com/user-attachments/assets/9312d3e3-9f20-43c3-9e9d-19f557521b95"
/> | <img width="1426" alt="Screenshot 2025-01-08 at 11 27 13 AM"
src="https://github.com/user-attachments/assets/1521f019-c558-441d-b99a-68a7ff8a8d92"
/> |

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-01-08 11:51:14 -03:00 committed by GitHub
parent b890a12030
commit 8cd2afeacc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 16 deletions

View file

@ -175,7 +175,7 @@ pub(crate) fn suggest(buffer: Model<Buffer>, cx: &mut ViewContext<Workspace>) {
"Do you want to install the recommended '{}' extension for '{}' files?", "Do you want to install the recommended '{}' extension for '{}' files?",
extension_id, file_name_or_extension extension_id, file_name_or_extension
)) ))
.with_click_message("Yes") .with_click_message("Yes, install extension")
.on_click({ .on_click({
let extension_id = extension_id.clone(); let extension_id = extension_id.clone();
move |cx| { move |cx| {
@ -186,7 +186,7 @@ pub(crate) fn suggest(buffer: Model<Buffer>, cx: &mut ViewContext<Workspace>) {
}); });
} }
}) })
.with_secondary_click_message("No") .with_secondary_click_message("No, don't install it")
.on_secondary_click(move |cx| { .on_secondary_click(move |cx| {
let key = language_extension_key(&extension_id); let key = language_extension_key(&extension_id);
db::write_and_log(cx, move || { db::write_and_log(cx, move || {

View file

@ -411,12 +411,10 @@ impl EventEmitter<DismissEvent> for ErrorMessagePrompt {}
pub mod simple_message_notification { pub mod simple_message_notification {
use gpui::{ use gpui::{
div, DismissEvent, EventEmitter, InteractiveElement, ParentElement, Render, SharedString, div, DismissEvent, EventEmitter, ParentElement, Render, SharedString, Styled, ViewContext,
StatefulInteractiveElement, Styled, ViewContext,
}; };
use std::sync::Arc; use std::sync::Arc;
use ui::prelude::*; use ui::prelude::*;
use ui::{h_flex, v_flex, Button, Icon, IconName, Label, StyledExt};
pub struct MessageNotification { pub struct MessageNotification {
message: SharedString, message: SharedString,
@ -482,36 +480,43 @@ pub mod simple_message_notification {
impl Render for MessageNotification { impl Render for MessageNotification {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement { fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
v_flex() v_flex()
.p_3()
.gap_2()
.elevation_3(cx) .elevation_3(cx)
.p_4()
.child( .child(
h_flex() h_flex()
.gap_4()
.justify_between() .justify_between()
.child(div().max_w_80().child(Label::new(self.message.clone()))) .child(div().max_w_80().child(Label::new(self.message.clone())))
.child( .child(
div() IconButton::new("close", IconName::Close)
.id("cancel")
.child(Icon::new(IconName::Close))
.cursor_pointer()
.on_click(cx.listener(|this, _, cx| this.dismiss(cx))), .on_click(cx.listener(|this, _, cx| this.dismiss(cx))),
), ),
) )
.child( .child(
h_flex() h_flex()
.gap_3() .gap_2()
.children(self.click_message.iter().map(|message| { .children(self.click_message.iter().map(|message| {
Button::new(message.clone(), message.clone()).on_click(cx.listener( Button::new(message.clone(), message.clone())
|this, _, cx| { .label_size(LabelSize::Small)
.icon(IconName::Check)
.icon_position(IconPosition::Start)
.icon_size(IconSize::Small)
.icon_color(Color::Success)
.on_click(cx.listener(|this, _, cx| {
if let Some(on_click) = this.on_click.as_ref() { if let Some(on_click) = this.on_click.as_ref() {
(on_click)(cx) (on_click)(cx)
}; };
this.dismiss(cx) this.dismiss(cx)
}, }))
))
})) }))
.children(self.secondary_click_message.iter().map(|message| { .children(self.secondary_click_message.iter().map(|message| {
Button::new(message.clone(), message.clone()) Button::new(message.clone(), message.clone())
.style(ButtonStyle::Filled) .label_size(LabelSize::Small)
.icon(IconName::Close)
.icon_position(IconPosition::Start)
.icon_size(IconSize::Small)
.icon_color(Color::Error)
.on_click(cx.listener(|this, _, cx| { .on_click(cx.listener(|this, _, cx| {
if let Some(on_click) = this.secondary_on_click.as_ref() { if let Some(on_click) = this.secondary_on_click.as_ref() {
(on_click)(cx) (on_click)(cx)