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

Tighten up feedback modal design (#3960)

Browse source 
This PR tightens up the design of the feedback dialog:

<img width="680" alt="Screenshot 2024-01-08 at 6 20 50 PM"
src="https://github.com/zed-industries/zed/assets/1486634/8dc0e687-2459-4ab3-b69f-b610ce067ef1">

<img width="682" alt="Screenshot 2024-01-08 at 6 21 24 PM"
src="https://github.com/zed-industries/zed/assets/1486634/f0730710-16e0-4d61-a919-60874442186a">

Release Notes:

- Improved the design of the feedback dialog.
This commit is contained in:
Marshall Bowers 2024-01-08 18:28:37 -05:00 • committed by GitHub
parent 32cd95674f
commit 4007b2f72b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

60
crates/feedback/src/feedback_modal.rs
View file

@ -179,14 +179,13 @@ impl FeedbackModal {
editor editor
}); });
// Moved here because providing it inline breaks rustfmt
let placeholder_text =
"You can use markdown to organize your feedback with code and links.";
let feedback_editor = cx.new_view(|cx| { let feedback_editor = cx.new_view(|cx| {
let mut editor = Editor::for_buffer(buffer, Some(project.clone()), cx); let mut editor = Editor::for_buffer(buffer, Some(project.clone()), cx);
editor.set_placeholder_text(placeholder_text, cx); editor.set_placeholder_text(
// editor.set_show_gutter(false, cx); "You can use markdown to organize your feedback with code and links.",
cx,
);
editor.set_show_gutter(false, cx);
editor.set_vertical_scroll_margin(5, cx); editor.set_vertical_scroll_margin(5, cx);
editor editor
}); });
@ -422,10 +421,6 @@ impl Render for FeedbackModal {
let open_community_repo = let open_community_repo =
cx.listener(|_, _, cx| cx.dispatch_action(Box::new(OpenZedCommunityRepo))); cx.listener(|_, _, cx| cx.dispatch_action(Box::new(OpenZedCommunityRepo)));
// Moved this here because providing it inline breaks rustfmt
let provide_an_email_address =
"Provide an email address if you want us to be able to reply.";
v_stack() v_stack()
.elevation_3(cx) .elevation_3(cx)
.key_context("GiveFeedback") .key_context("GiveFeedback")
@ -434,11 +429,8 @@ impl Render for FeedbackModal {
.max_w(rems(96.)) .max_w(rems(96.))
.h(rems(32.)) .h(rems(32.))
.p_4() .p_4()
.gap_4() .gap_2()
.child(v_stack().child( .child(Headline::new("Share Feedback"))
// TODO: Add Headline component to `ui2`
div().text_xl().child("Share Feedback"),
))
.child( .child(
Label::new(if self.character_count < *FEEDBACK_CHAR_LIMIT.start() { Label::new(if self.character_count < *FEEDBACK_CHAR_LIMIT.start() {
format!( format!(
@ -468,17 +460,26 @@ impl Render for FeedbackModal {
.child(self.feedback_editor.clone()), .child(self.feedback_editor.clone()),
) )
.child( .child(
h_stack() v_stack()
.bg(cx.theme().colors().editor_background) .gap_1()
.p_2() .child(
.border() h_stack()
.rounded_md() .bg(cx.theme().colors().editor_background)
.border_color(if self.valid_email_address() { .p_2()
cx.theme().colors().border .border()
} else { .rounded_md()
cx.theme().status().error_border .border_color(if self.valid_email_address() {
}) cx.theme().colors().border
.child(self.email_address_editor.clone()), } else {
cx.theme().status().error_border
})
.child(self.email_address_editor.clone()),
)
.child(
Label::new("Provide an email address if you want us to be able to reply.")
.size(LabelSize::Small)
.color(Color::Muted),
),
) )
.child( .child(
h_stack() h_stack()
@ -515,12 +516,7 @@ impl Render for FeedbackModal {
this.submit(cx).detach(); this.submit(cx).detach();
})) }))
.tooltip(move |cx| { .tooltip(move |cx| {
Tooltip::with_meta( Tooltip::text("Submit feedback to the Zed team.", cx)
"Submit feedback to the Zed team.",
None,
provide_an_email_address,
cx,
)
}) })
.when(!self.can_submit(), |this| this.disabled(true)), .when(!self.can_submit(), |this| this.disabled(true)),
), ),