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

ssh: Add UI refinements to the remote modals (#19558)

Browse source 
This PR polishes spacing, borders, header design, font size, etc.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2024-10-22 16:33:59 -03:00 • committed by GitHub
parent 6dcec47235
commit 23ad470daf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 106 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

70
crates/recent_projects/src/ssh_connections.rs
View file

@ -5,7 +5,7 @@ use auto_update::AutoUpdater;
use editor::Editor;
use futures::channel::oneshot;
use gpui::{
percentage, px, Animation, AnimationExt, AnyWindowHandle, AsyncAppContext, DismissEvent,
percentage, Animation, AnimationExt, AnyWindowHandle, AsyncAppContext, DismissEvent,
EventEmitter, FocusableView, ParentElement as _, PromptLevel, Render, SemanticVersion,
SharedString, Task, TextStyleRefinement, Transformation, View,
};
@ -20,9 +20,8 @@ use serde::{Deserialize, Serialize};
use settings::{Settings, SettingsSources};
use theme::ThemeSettings;
use ui::{
div, h_flex, prelude::*, v_flex, ActiveTheme, Color, Icon, IconName, IconSize,
InteractiveElement, IntoElement, Label, LabelCommon, Styled, ViewContext, VisualContext,
WindowContext,
prelude::*, ActiveTheme, Color, Icon, IconName, IconSize, InteractiveElement, IntoElement,
Label, LabelCommon, Styled, ViewContext, VisualContext, WindowContext,
};
use workspace::{AppState, ModalView, Workspace};
@ -52,6 +51,7 @@ impl SshSettings {
})
.next()
}
pub fn nickname_for(
&self,
host: &str,
@ -86,6 +86,7 @@ pub struct SshConnection {
#[serde(default)]
pub args: Vec<String>,
}
impl From<SshConnection> for SshConnectionOptions {
fn from(val: SshConnection) -> Self {
SshConnectionOptions {
@ -205,15 +206,17 @@ impl SshPrompt {
impl Render for SshPrompt {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let cx = cx.window_context();
let theme = cx.theme();
v_flex()
.key_context("PasswordPrompt")
.py_2()
.px_3()
.size_full()
.text_buffer(cx)
.when_some(self.status_message.clone(), |el, status_message| {
el.child(
h_flex()
.p_2()
.flex()
.gap_1()
.child(
Icon::new(IconName::ArrowCircle)
.size(IconSize::Medium)
@ -225,9 +228,12 @@ impl Render for SshPrompt {
},
),
)
.child(div().ml_1().text_ellipsis().overflow_x_hidden().child(
Label::new(format!("{}…", status_message)).size(LabelSize::Small),
)),
.child(
div()
.text_ellipsis()
.overflow_x_hidden()
.child(format!("{}…", status_message)),
),
)
})
.when_some(self.prompt.as_ref(), |el, prompt| {
@ -235,11 +241,6 @@ impl Render for SshPrompt {
div()
.size_full()
.overflow_hidden()
.p_4()
.border_t_1()
.border_color(theme.colors().border_variant)
.font_buffer(cx)
.text_buffer(cx)
.child(prompt.0.clone())
.child(self.editor.clone()),
)
@ -292,29 +293,18 @@ impl RenderOnce for SshConnectionHeader {
};
h_flex()
.p_1()
.px(Spacing::XLarge.rems(cx))
.pt(Spacing::Large.rems(cx))
.pb(Spacing::Small.rems(cx))
.rounded_t_md()
.w_full()
.gap_2()
.justify_center()
.border_b_1()
.border_color(theme.colors().border_variant)
.bg(header_color)
.gap_1p5()
.child(Icon::new(IconName::Server).size(IconSize::XSmall))
.child(
h_flex()
.gap_1()
.child(
Label::new(main_label)
.size(ui::LabelSize::Small)
.single_line(),
)
.children(meta_label.map(|label| {
Label::new(label)
.size(ui::LabelSize::Small)
.single_line()
.color(Color::Muted)
})),
.child(Headline::new(main_label).size(HeadlineSize::XSmall))
.children(meta_label.map(|label| Label::new(label).color(Color::Muted))),
)
}
}
@ -323,18 +313,18 @@ impl Render for SshConnectionModal {
fn render(&mut self, cx: &mut ui::ViewContext<Self>) -> impl ui::IntoElement {
let nickname = self.prompt.read(cx).nickname.clone();
let connection_string = self.prompt.read(cx).connection_string.clone();
let theme = cx.theme();
let theme = cx.theme().clone();
let body_color = theme.colors().editor_background;
v_flex()
.elevation_3(cx)
.w(rems(34.))
.border_1()
.border_color(theme.colors().border)
.track_focus(&self.focus_handle(cx))
.on_action(cx.listener(Self::dismiss))
.on_action(cx.listener(Self::confirm))
.w(px(500.))
.border_1()
.border_color(theme.colors().border)
.child(
SshConnectionHeader {
connection_string,
@ -343,10 +333,12 @@ impl Render for SshConnectionModal {
.render(cx),
)
.child(
h_flex()
.rounded_b_md()
.bg(body_color)
div()
.w_full()
.rounded_b_lg()
.bg(body_color)
.border_t_1()
.border_color(theme.colors().border_variant)
.child(self.prompt.clone()),
)
}