Add stray UI polish to the SSH flow (#17798)
Some super subtle refinement opportunities I spotted while playing around with this flow. There are mostly copywriting tweaks and some UI tweaks here and there (including editing the modal horizontal padding). --- Release Notes: - N/A
This commit is contained in:
Danilo Leal
GitHub
parent
c71f052276
commit
e145c13f73
2 changed files with 20 additions and 21 deletions
|
|
@ -929,7 +929,7 @@ impl DevServerProjects {
|
|||
.on_click(
|
||||
cx.listener(move |this, _, cx| this.delete_ssh_server(ix, cx)),
|
||||
)
|
||||
.tooltip(|cx| Tooltip::text("Remove dev server", cx))
|
||||
.tooltip(|cx| Tooltip::text("Remove Dev Server", cx))
|
||||
})),
|
||||
),
|
||||
)
|
||||
|
|
@ -1162,9 +1162,10 @@ impl DevServerProjects {
|
|||
})
|
||||
});
|
||||
|
||||
const MANUAL_SETUP_MESSAGE: &str = "Click create to generate a token for this server. The next step will provide instructions for setting zed up on that machine.";
|
||||
const MANUAL_SETUP_MESSAGE: &str =
|
||||
"Generate a token for this server and follow the steps to set Zed up on that machine.";
|
||||
const SSH_SETUP_MESSAGE: &str =
|
||||
"Enter the command you use to ssh into this server.\nFor example: `ssh me@my.server` or `ssh me@secret-box:2222`.";
|
||||
"Enter the command you use to SSH into this server.\nFor example: `ssh me@my.server` or `ssh me@secret-box:2222`.";
|
||||
|
||||
Modal::new("create-dev-server", Some(self.scroll_handle.clone()))
|
||||
.header(
|
||||
|
|
@ -1191,6 +1192,7 @@ impl DevServerProjects {
|
|||
.child(
|
||||
v_flex()
|
||||
.w_full()
|
||||
.px_2()
|
||||
.gap_y(Spacing::Large.rems(cx))
|
||||
.when(ssh_prompt.is_none(), |el| {
|
||||
el.child(
|
||||
|
|
@ -1346,9 +1348,9 @@ impl DevServerProjects {
|
|||
) -> Div {
|
||||
self.markdown.update(cx, |markdown, cx| {
|
||||
if kind == NewServerKind::Manual {
|
||||
markdown.reset(format!("Please log into '{}'. If you don't yet have zed installed, run:\n```\ncurl https://zed.dev/install.sh | bash\n```\nThen to start zed in headless mode:\n```\nzed --dev-server-token {}\n```", dev_server_name, access_token), cx);
|
||||
markdown.reset(format!("Please log into '{}'. If you don't yet have Zed installed, run:\n```\ncurl https://zed.dev/install.sh | bash\n```\nThen, to start Zed in headless mode:\n```\nzed --dev-server-token {}\n```", dev_server_name, access_token), cx);
|
||||
} else {
|
||||
markdown.reset("Please wait while we connect over SSH.\n\nIf you run into problems, please [file a bug](https://github.com/zed-industries/zed), and in the meantime try using manual setup.".to_string(), cx);
|
||||
markdown.reset("Please wait while we connect over SSH.\n\nIf you run into problems, please [file a bug](https://github.com/zed-industries/zed), and in the meantime try using the manual setup.".to_string(), cx);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1420,15 +1422,14 @@ impl DevServerProjects {
|
|||
)
|
||||
.when(is_signed_out, |modal| {
|
||||
modal
|
||||
.section(Section::new().child(v_flex().mb_4().child(Label::new(
|
||||
"You are not currently signed in to Zed. Currently the remote development features are only available to signed in users. Please sign in to continue.",
|
||||
.section(Section::new().child(div().child(Label::new(
|
||||
"To continue with the remote development features, you need to sign in to Zed.",
|
||||
))))
|
||||
.footer(
|
||||
ModalFooter::new().end_slot(
|
||||
Button::new("sign_in", "Sign in")
|
||||
Button::new("sign_in", "Sign in with GitHub")
|
||||
.icon(IconName::Github)
|
||||
.icon_position(IconPosition::Start)
|
||||
.style(ButtonStyle::Filled)
|
||||
.full_width()
|
||||
.on_click(cx.listener(|_, _, cx| {
|
||||
let client = Client::global(cx).clone();
|
||||
|
|
@ -1447,17 +1448,15 @@ impl DevServerProjects {
|
|||
.when(!is_signed_out, |modal| {
|
||||
modal.section(
|
||||
Section::new().child(
|
||||
div().mb_4().child(
|
||||
div().child(
|
||||
List::new()
|
||||
.empty_message("No dev servers registered.")
|
||||
.empty_message("No dev servers registered yet.")
|
||||
.header(Some(
|
||||
ListHeader::new("Connections").end_slot(
|
||||
Button::new("register-dev-server-button", "Connect")
|
||||
Button::new("register-dev-server-button", "Connect New Server")
|
||||
.icon(IconName::Plus)
|
||||
.icon_position(IconPosition::Start)
|
||||
.tooltip(|cx| {
|
||||
Tooltip::text("Connect to a new server", cx)
|
||||
})
|
||||
.icon_color(Color::Muted)
|
||||
.on_click(cx.listener(|this, _, cx| {
|
||||
this.mode = Mode::CreateDevServer(
|
||||
CreateDevServer {
|
||||
|
|
@ -1524,6 +1523,7 @@ impl Render for DevServerProjects {
|
|||
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
|
||||
div()
|
||||
.track_focus(&self.focus_handle)
|
||||
.p_2()
|
||||
.elevation_3(cx)
|
||||
.key_context("DevServerModal")
|
||||
.on_action(cx.listener(Self::cancel))
|
||||
|
|
@ -1590,7 +1590,7 @@ pub fn reconnect_to_dev_server(
|
|||
cx: &mut WindowContext,
|
||||
) -> Task<Result<()>> {
|
||||
let Some(ssh_connection_string) = dev_server.ssh_connection_string else {
|
||||
return Task::ready(Err(anyhow!("can't reconnect, no ssh_connection_string")));
|
||||
return Task::ready(Err(anyhow!("Can't reconnect, no ssh_connection_string")));
|
||||
};
|
||||
let dev_server_store = dev_server_projects::Store::global(cx);
|
||||
let get_access_token = dev_server_store.update(cx, |store, cx| {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
use crate::{
|
||||
h_flex, rems_from_px, v_flex, Clickable, Color, Headline, HeadlineSize, IconButton,
|
||||
IconButtonShape, IconName, Label, LabelCommon, LabelSize, Spacing,
|
||||
h_flex, v_flex, Clickable, Color, Headline, HeadlineSize, IconButton, IconButtonShape,
|
||||
IconName, Label, LabelCommon, LabelSize, Spacing,
|
||||
};
|
||||
use gpui::{prelude::FluentBuilder, *};
|
||||
use smallvec::SmallVec;
|
||||
|
|
@ -210,7 +210,7 @@ impl ParentElement for ModalRow {
|
|||
|
||||
impl RenderOnce for ModalRow {
|
||||
fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
|
||||
h_flex().w_full().px_2().py_1().children(self.children)
|
||||
h_flex().w_full().py_1().children(self.children)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -326,7 +326,6 @@ impl RenderOnce for Section {
|
|||
.border_color(cx.theme().colors().border)
|
||||
.bg(section_bg)
|
||||
.py(Spacing::Medium.rems(cx))
|
||||
.px(Spacing::Large.rems(cx) - rems_from_px(1.0))
|
||||
.gap_y(Spacing::Small.rems(cx))
|
||||
.child(div().flex().flex_1().size_full().children(self.children)),
|
||||
)
|
||||
|
|
@ -334,7 +333,7 @@ impl RenderOnce for Section {
|
|||
v_flex()
|
||||
.w_full()
|
||||
.gap_y(Spacing::Small.rems(cx))
|
||||
.px(Spacing::Large.rems(cx) + Spacing::Large.rems(cx))
|
||||
.px(Spacing::Medium.rems(cx) + Spacing::Medium.rems(cx))
|
||||
.children(self.children)
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue