ssh: Refine the modal UI (#19256)
This PR refines the SSH modal UI, adjusting spacing and alignment. Via these changes, I'm also introducing the ability for the `empty_message` on the `List` component to receive not just a string but any element. The custom way in which the SSH modal was designed made it feel like this was needed for proper spacing. <img width="700" alt="Screenshot 2024-10-16 at 1 20 54 AM" src="https://github.com/user-attachments/assets/f2e0586b-4c9f-4497-b4cb-e90c8157512b"> Release Notes: - N/A
This commit is contained in:
Danilo Leal
GitHub
parent
b752548742
commit
b64919aa11
3 changed files with 111 additions and 84 deletions
|
|
@ -35,7 +35,7 @@ use task::RevealStrategy;
|
|||
use task::SpawnInTerminal;
|
||||
use terminal_view::terminal_panel::TerminalPanel;
|
||||
use ui::Section;
|
||||
use ui::{prelude::*, List, ListItem, ListSeparator, Modal, ModalHeader, Tooltip};
|
||||
use ui::{prelude::*, IconButtonShape, List, ListItem, ListSeparator, Modal, ModalHeader, Tooltip};
|
||||
use util::ResultExt;
|
||||
use workspace::notifications::NotificationId;
|
||||
use workspace::OpenOptions;
|
||||
|
|
@ -604,19 +604,16 @@ impl DevServerProjects {
|
|||
};
|
||||
v_flex()
|
||||
.w_full()
|
||||
.border_b_1()
|
||||
.border_color(cx.theme().colors().border_variant)
|
||||
.mb_1()
|
||||
.child(ListSeparator)
|
||||
.child(
|
||||
h_flex()
|
||||
.group("ssh-server")
|
||||
.w_full()
|
||||
.pt_0p5()
|
||||
.px_2p5()
|
||||
.px_3()
|
||||
.gap_1()
|
||||
.overflow_hidden()
|
||||
.whitespace_nowrap()
|
||||
.w_full()
|
||||
.child(
|
||||
Label::new(main_label)
|
||||
.size(LabelSize::Small)
|
||||
|
|
@ -630,68 +627,63 @@ impl DevServerProjects {
|
|||
),
|
||||
)
|
||||
.child(
|
||||
v_flex().w_full().gap_1().mb_1().child(
|
||||
List::new()
|
||||
.empty_message("No projects.")
|
||||
.children(ssh_connection.projects.iter().enumerate().map(|(pix, p)| {
|
||||
v_flex().gap_0p5().child(self.render_ssh_project(
|
||||
ix,
|
||||
&ssh_connection,
|
||||
pix,
|
||||
p,
|
||||
cx,
|
||||
))
|
||||
}))
|
||||
.child(h_flex().map(|this| {
|
||||
self.selectable_items.add_item(Box::new({
|
||||
let ssh_connection = ssh_connection.clone();
|
||||
move |this, cx| {
|
||||
this.create_ssh_project(ix, ssh_connection.clone(), cx);
|
||||
}
|
||||
}));
|
||||
let is_selected = self.selectable_items.is_selected();
|
||||
this.child(
|
||||
ListItem::new(("new-remote-project", ix))
|
||||
.selected(is_selected)
|
||||
.inset(true)
|
||||
.spacing(ui::ListItemSpacing::Sparse)
|
||||
.start_slot(Icon::new(IconName::Plus).color(Color::Muted))
|
||||
.child(Label::new("Open Folder"))
|
||||
.on_click(cx.listener({
|
||||
let ssh_connection = ssh_connection.clone();
|
||||
move |this, _, cx| {
|
||||
this.create_ssh_project(ix, ssh_connection.clone(), cx);
|
||||
}
|
||||
})),
|
||||
)
|
||||
}))
|
||||
.child(h_flex().map(|this| {
|
||||
self.selectable_items.add_item(Box::new({
|
||||
let ssh_connection = ssh_connection.clone();
|
||||
move |this, cx| {
|
||||
this.view_server_options((ix, ssh_connection.clone()), cx);
|
||||
}
|
||||
}));
|
||||
let is_selected = self.selectable_items.is_selected();
|
||||
this.child(
|
||||
ListItem::new(("server-options", ix))
|
||||
.selected(is_selected)
|
||||
.inset(true)
|
||||
.spacing(ui::ListItemSpacing::Sparse)
|
||||
.start_slot(Icon::new(IconName::Settings).color(Color::Muted))
|
||||
.child(Label::new("View Server Options"))
|
||||
.on_click(cx.listener({
|
||||
let ssh_connection = ssh_connection.clone();
|
||||
move |this, _, cx| {
|
||||
this.view_server_options(
|
||||
(ix, ssh_connection.clone()),
|
||||
cx,
|
||||
);
|
||||
}
|
||||
})),
|
||||
)
|
||||
})),
|
||||
),
|
||||
List::new()
|
||||
.empty_message("No projects.")
|
||||
.children(ssh_connection.projects.iter().enumerate().map(|(pix, p)| {
|
||||
v_flex().gap_0p5().child(self.render_ssh_project(
|
||||
ix,
|
||||
&ssh_connection,
|
||||
pix,
|
||||
p,
|
||||
cx,
|
||||
))
|
||||
}))
|
||||
.child(h_flex().map(|this| {
|
||||
self.selectable_items.add_item(Box::new({
|
||||
let ssh_connection = ssh_connection.clone();
|
||||
move |this, cx| {
|
||||
this.create_ssh_project(ix, ssh_connection.clone(), cx);
|
||||
}
|
||||
}));
|
||||
let is_selected = self.selectable_items.is_selected();
|
||||
this.child(
|
||||
ListItem::new(("new-remote-project", ix))
|
||||
.selected(is_selected)
|
||||
.inset(true)
|
||||
.spacing(ui::ListItemSpacing::Sparse)
|
||||
.start_slot(Icon::new(IconName::Plus).color(Color::Muted))
|
||||
.child(Label::new("Open Folder"))
|
||||
.on_click(cx.listener({
|
||||
let ssh_connection = ssh_connection.clone();
|
||||
move |this, _, cx| {
|
||||
this.create_ssh_project(ix, ssh_connection.clone(), cx);
|
||||
}
|
||||
})),
|
||||
)
|
||||
}))
|
||||
.child(h_flex().map(|this| {
|
||||
self.selectable_items.add_item(Box::new({
|
||||
let ssh_connection = ssh_connection.clone();
|
||||
move |this, cx| {
|
||||
this.view_server_options((ix, ssh_connection.clone()), cx);
|
||||
}
|
||||
}));
|
||||
let is_selected = self.selectable_items.is_selected();
|
||||
this.child(
|
||||
ListItem::new(("server-options", ix))
|
||||
.selected(is_selected)
|
||||
.inset(true)
|
||||
.spacing(ui::ListItemSpacing::Sparse)
|
||||
.start_slot(Icon::new(IconName::Settings).color(Color::Muted))
|
||||
.child(Label::new("View Server Options"))
|
||||
.on_click(cx.listener({
|
||||
let ssh_connection = ssh_connection.clone();
|
||||
move |this, _, cx| {
|
||||
this.view_server_options((ix, ssh_connection.clone()), cx);
|
||||
}
|
||||
})),
|
||||
)
|
||||
})),
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -762,6 +754,7 @@ impl DevServerProjects {
|
|||
.end_hover_slot::<AnyElement>(Some(
|
||||
IconButton::new("remove-remote-project", IconName::TrashAlt)
|
||||
.icon_size(IconSize::Small)
|
||||
.shape(IconButtonShape::Square)
|
||||
.on_click(
|
||||
cx.listener(move |this, _, cx| this.delete_ssh_project(server_ix, ix, cx)),
|
||||
)
|
||||
|
|
@ -1117,6 +1110,7 @@ impl DevServerProjects {
|
|||
}));
|
||||
|
||||
let is_selected = self.selectable_items.is_selected();
|
||||
|
||||
let connect_button = ListItem::new("register-dev-server-button")
|
||||
.selected(is_selected)
|
||||
.inset(true)
|
||||
|
|
@ -1130,16 +1124,21 @@ impl DevServerProjects {
|
|||
cx.notify();
|
||||
}));
|
||||
|
||||
let footer = format!("Servers: {}", ssh_connections.len() + dev_servers.len());
|
||||
let mut modal_section = v_flex()
|
||||
.id("ssh-server-list")
|
||||
.overflow_y_scroll()
|
||||
.size_full()
|
||||
.child(connect_button)
|
||||
.child(ListSeparator)
|
||||
.child(
|
||||
List::new()
|
||||
.empty_message("No dev servers registered yet.")
|
||||
.empty_message(
|
||||
v_flex()
|
||||
.child(ListSeparator)
|
||||
.child(div().px_3().child(
|
||||
Label::new("No dev servers registered yet.").color(Color::Muted),
|
||||
))
|
||||
.into_any_element(),
|
||||
)
|
||||
.children(ssh_connections.iter().cloned().enumerate().map(
|
||||
|(ix, connection)| {
|
||||
self.render_ssh_connection(ix, connection, cx)
|
||||
|
|
@ -1149,23 +1148,25 @@ impl DevServerProjects {
|
|||
)
|
||||
.into_any_element();
|
||||
|
||||
let server_count = format!("Servers: {}", ssh_connections.len() + dev_servers.len());
|
||||
|
||||
Modal::new("remote-projects", Some(self.scroll_handle.clone()))
|
||||
.header(
|
||||
ModalHeader::new().child(
|
||||
h_flex()
|
||||
.items_center()
|
||||
.justify_between()
|
||||
.child(Headline::new("Remote Projects (alpha)").size(HeadlineSize::XSmall))
|
||||
.child(Label::new(footer).size(LabelSize::Small)),
|
||||
.child(Label::new(server_count).size(LabelSize::Small)),
|
||||
),
|
||||
)
|
||||
.section(
|
||||
Section::new().padded(false).child(
|
||||
v_flex()
|
||||
.min_h(rems(28.))
|
||||
.min_h(rems(20.))
|
||||
.flex_1()
|
||||
.size_full()
|
||||
.pt_1p5()
|
||||
.border_y_1()
|
||||
.border_color(cx.theme().colors().border_variant)
|
||||
.child(ListSeparator)
|
||||
.child(
|
||||
canvas(
|
||||
|bounds, cx| {
|
||||
|
|
@ -1180,9 +1181,7 @@ impl DevServerProjects {
|
|||
modal_section.paint(cx);
|
||||
},
|
||||
)
|
||||
.size_full()
|
||||
.min_h_full()
|
||||
.flex_1(),
|
||||
.size_full(),
|
||||
),
|
||||
),
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue