Add design improvements to the LSP popover (#33485)
Not the ideal design just yet as that will probably require a different approach altogether, but am pushing here just some reasonably small UI adjustments that will make this feel slightly nicer! Release Notes: - N/A
This commit is contained in:
Danilo Leal
GitHub
parent
343f155ab9
commit
2823771c06
7 changed files with 90 additions and 71 deletions
3
assets/icons/bolt_filled_alt.svg
Normal file
3
assets/icons/bolt_filled_alt.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.75776 5.50003H8.49988C8.70769 5.50003 8.89518 5.62971 8.95455 5.82346C9.04049 6.01876 8.9858 6.23906 8.82956 6.37656L4.82971 9.87643C4.65315 10.0295 4.39488 10.042 4.20614 9.90455C4.01724 9.76705 3.94849 9.51706 4.04052 9.30301L5.24219 6.49999H3.48601C3.2918 6.49999 3.10524 6.37031 3.03197 6.17657C2.9587 5.98126 3.014 5.76096 3.1708 5.62346L7.17018 2.12375C7.34674 1.97001 7.60454 1.95829 7.7936 2.09547C7.98265 2.23275 8.0514 2.48218 7.95922 2.69695L6.75776 5.50003Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 601 B |
12
assets/icons/lsp_debug.svg
Normal file
12
assets/icons/lsp_debug.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 3L7 4" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 4L10 3" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.002 6V5.51658C5.98992 5.32067 6.03266 5.12502 6.12762 4.94143C6.22259 4.75784 6.36781 4.59012 6.55453 4.44839C6.74125 4.30666 6.9656 4.19386 7.21403 4.1168C7.46246 4.03973 7.72983 4 8 4C8.27017 4 8.53754 4.03973 8.78597 4.1168C9.0344 4.19386 9.25875 4.30666 9.44547 4.44839C9.63219 4.59012 9.77741 4.75784 9.87238 4.94143C9.96734 5.12502 10.0101 5.32067 9.998 5.51658V6" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8 13C6.35 13 5 11.5462 5 9.76923V8.15385C5 7.58261 5.21071 7.03477 5.58579 6.63085C5.96086 6.22692 6.46957 6 7 6H9C9.53043 6 10.0391 6.22692 10.4142 6.63085C10.7893 7.03477 11 7.58261 11 8.15385V9.76923C11 11.5462 9.65 13 8 13Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 6.16663C3.90652 6.06663 3 5.21663 3 4.16663" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 9H3" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3 13C3 11.95 3.89474 11.05 5 11" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 4C13 5.05 12.0857 5.9 11 6" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 9H11" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11 11C12.1053 11.05 13 11.95 13 13" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
4
assets/icons/lsp_restart.svg
Normal file
4
assets/icons/lsp_restart.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.84265 10.7778C4.39206 11.6001 5.17295 12.241 6.08658 12.6194C7.00021 12.9978 8.00555 13.0969 8.97545 12.9039C9.94535 12.711 10.8363 12.2348 11.5355 11.5355C12.2348 10.8363 12.711 9.94535 12.9039 8.97545C13.0969 8.00555 12.9978 7.00021 12.6194 6.08658C12.241 5.17295 11.6001 4.39206 10.7778 3.84265C9.9556 3.29324 8.9889 3 8 3C6.60219 3.00526 5.26054 3.55068 4.25556 4.52222L3 5.77778" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3 3V6H6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 685 B |
4
assets/icons/lsp_stop.svg
Normal file
4
assets/icons/lsp_stop.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 5L11 11" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 409 B |
|
|
@ -45,6 +45,7 @@ pub enum IconName {
|
|||
Blocks,
|
||||
Bolt,
|
||||
BoltFilled,
|
||||
BoltFilledAlt,
|
||||
Book,
|
||||
BookCopy,
|
||||
BookPlus,
|
||||
|
|
@ -163,6 +164,9 @@ pub enum IconName {
|
|||
ListX,
|
||||
LoadCircle,
|
||||
LockOutlined,
|
||||
LspDebug,
|
||||
LspRestart,
|
||||
LspStop,
|
||||
MagnifyingGlass,
|
||||
MailOpen,
|
||||
Maximize,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ use lsp::{LanguageServerId, LanguageServerName, LanguageServerSelector};
|
|||
use picker::{Picker, PickerDelegate, popover_menu::PickerPopoverMenu};
|
||||
use project::{LspStore, LspStoreEvent, project_settings::ProjectSettings};
|
||||
use settings::{Settings as _, SettingsStore};
|
||||
use ui::{Context, IconButtonShape, Indicator, Tooltip, Window, prelude::*};
|
||||
use ui::{Context, Indicator, Tooltip, Window, prelude::*};
|
||||
|
||||
use workspace::{StatusItemView, Workspace};
|
||||
|
||||
|
|
@ -181,16 +181,19 @@ impl LspPickerDelegate {
|
|||
|
||||
buffer_servers.sort_by_key(|data| data.name().clone());
|
||||
other_servers.sort_by_key(|data| data.name().clone());
|
||||
|
||||
let mut other_servers_start_index = None;
|
||||
let mut new_lsp_items =
|
||||
Vec::with_capacity(buffer_servers.len() + other_servers.len() + 2);
|
||||
|
||||
if !buffer_servers.is_empty() {
|
||||
new_lsp_items.push(LspItem::Header(SharedString::new("Current Buffer")));
|
||||
new_lsp_items.push(LspItem::Header(SharedString::new("This Buffer")));
|
||||
new_lsp_items.extend(buffer_servers.into_iter().map(ServerData::into_lsp_item));
|
||||
}
|
||||
|
||||
if !other_servers.is_empty() {
|
||||
other_servers_start_index = Some(new_lsp_items.len());
|
||||
new_lsp_items.push(LspItem::Header(SharedString::new("Other Active Servers")));
|
||||
new_lsp_items.push(LspItem::Header(SharedString::new("Other Servers")));
|
||||
new_lsp_items.extend(other_servers.into_iter().map(ServerData::into_lsp_item));
|
||||
}
|
||||
|
||||
|
|
@ -346,11 +349,13 @@ impl PickerDelegate for LspPickerDelegate {
|
|||
let is_other_server = self
|
||||
.other_servers_start_index
|
||||
.map_or(false, |start| ix >= start);
|
||||
|
||||
let server_binary_status;
|
||||
let server_health;
|
||||
let server_message;
|
||||
let server_id;
|
||||
let server_name;
|
||||
|
||||
match self.items.get(ix)? {
|
||||
LspItem::WithHealthCheck(
|
||||
language_server_id,
|
||||
|
|
@ -372,9 +377,14 @@ impl PickerDelegate for LspPickerDelegate {
|
|||
}
|
||||
LspItem::Header(header) => {
|
||||
return Some(
|
||||
h_flex()
|
||||
.justify_center()
|
||||
.child(Label::new(header.clone()))
|
||||
div()
|
||||
.px_2p5()
|
||||
.mb_1()
|
||||
.child(
|
||||
Label::new(header.clone())
|
||||
.size(LabelSize::Small)
|
||||
.color(Color::Muted),
|
||||
)
|
||||
.into_any_element(),
|
||||
);
|
||||
}
|
||||
|
|
@ -389,10 +399,12 @@ impl PickerDelegate for LspPickerDelegate {
|
|||
let can_stop = server_binary_status.is_none_or(|status| {
|
||||
matches!(status.status, BinaryStatus::None | BinaryStatus::Starting)
|
||||
});
|
||||
|
||||
// TODO currently, Zed remote does not work well with the LSP logs
|
||||
// https://github.com/zed-industries/zed/issues/28557
|
||||
let has_logs = lsp_store.read(cx).as_local().is_some()
|
||||
&& lsp_logs.read(cx).has_server_logs(&server_selector);
|
||||
|
||||
let status_color = server_binary_status
|
||||
.and_then(|binary_status| match binary_status.status {
|
||||
BinaryStatus::None => None,
|
||||
|
|
@ -414,27 +426,28 @@ impl PickerDelegate for LspPickerDelegate {
|
|||
|
||||
Some(
|
||||
h_flex()
|
||||
.w_full()
|
||||
.px_1()
|
||||
.gap_1()
|
||||
.justify_between()
|
||||
.gap_2()
|
||||
.child(
|
||||
h_flex()
|
||||
.id("server-status-indicator")
|
||||
.px_2()
|
||||
.gap_2()
|
||||
.child(Indicator::dot().color(status_color))
|
||||
.child(Label::new(server_name.0.clone()))
|
||||
.when_some(server_message.clone(), |div, server_message| {
|
||||
div.tooltip(move |_, cx| Tooltip::simple(server_message.clone(), cx))
|
||||
div.tooltip(Tooltip::text(server_message.clone()))
|
||||
}),
|
||||
)
|
||||
.child(
|
||||
h_flex()
|
||||
.gap_1()
|
||||
.when(has_logs, |div| {
|
||||
div.child(
|
||||
IconButton::new("debug-language-server", IconName::MessageBubbles)
|
||||
.icon_size(IconSize::XSmall)
|
||||
.tooltip(|_, cx| Tooltip::simple("Debug Language Server", cx))
|
||||
.when(has_logs, |button_list| {
|
||||
button_list.child(
|
||||
IconButton::new("debug-language-server", IconName::LspDebug)
|
||||
.icon_size(IconSize::Small)
|
||||
.alpha(0.8)
|
||||
.tooltip(Tooltip::text("Debug Language Server"))
|
||||
.on_click({
|
||||
let workspace = workspace.clone();
|
||||
let lsp_logs = lsp_logs.downgrade();
|
||||
|
|
@ -454,11 +467,12 @@ impl PickerDelegate for LspPickerDelegate {
|
|||
}),
|
||||
)
|
||||
})
|
||||
.when(can_stop, |div| {
|
||||
div.child(
|
||||
IconButton::new("stop-server", IconName::Stop)
|
||||
.when(can_stop, |button_list| {
|
||||
button_list.child(
|
||||
IconButton::new("stop-server", IconName::LspStop)
|
||||
.icon_size(IconSize::Small)
|
||||
.tooltip(|_, cx| Tooltip::simple("Stop server", cx))
|
||||
.alpha(0.8)
|
||||
.tooltip(Tooltip::text("Stop Server"))
|
||||
.on_click({
|
||||
let lsp_store = lsp_store.downgrade();
|
||||
let server_selector = server_selector.clone();
|
||||
|
|
@ -479,9 +493,10 @@ impl PickerDelegate for LspPickerDelegate {
|
|||
)
|
||||
})
|
||||
.child(
|
||||
IconButton::new("restart-server", IconName::Rerun)
|
||||
.icon_size(IconSize::XSmall)
|
||||
.tooltip(|_, cx| Tooltip::simple("Restart server", cx))
|
||||
IconButton::new("restart-server", IconName::LspRestart)
|
||||
.icon_size(IconSize::Small)
|
||||
.alpha(0.8)
|
||||
.tooltip(Tooltip::text("Restart Server"))
|
||||
.on_click({
|
||||
let state = self.state.clone();
|
||||
let workspace = workspace.clone();
|
||||
|
|
@ -558,7 +573,6 @@ impl PickerDelegate for LspPickerDelegate {
|
|||
}),
|
||||
),
|
||||
)
|
||||
.cursor_default()
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
|
|
@ -573,49 +587,28 @@ impl PickerDelegate for LspPickerDelegate {
|
|||
}
|
||||
|
||||
fn render_footer(&self, _: &mut Window, cx: &mut Context<Picker<Self>>) -> Option<AnyElement> {
|
||||
if self.items.is_empty() {
|
||||
Some(
|
||||
h_flex()
|
||||
.w_full()
|
||||
.border_color(cx.theme().colors().border_variant)
|
||||
.child(
|
||||
Button::new("stop-all-servers", "Stop all servers")
|
||||
.disabled(true)
|
||||
.on_click(move |_, _, _| {})
|
||||
.full_width(),
|
||||
)
|
||||
.into_any_element(),
|
||||
)
|
||||
} else {
|
||||
let lsp_store = self.state.read(cx).lsp_store.clone();
|
||||
Some(
|
||||
h_flex()
|
||||
.w_full()
|
||||
.border_color(cx.theme().colors().border_variant)
|
||||
.child(
|
||||
Button::new("stop-all-servers", "Stop all servers")
|
||||
.on_click({
|
||||
move |_, _, cx| {
|
||||
lsp_store
|
||||
.update(cx, |lsp_store, cx| {
|
||||
lsp_store.stop_all_language_servers(cx);
|
||||
})
|
||||
.ok();
|
||||
}
|
||||
})
|
||||
.full_width(),
|
||||
)
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
}
|
||||
let lsp_store = self.state.read(cx).lsp_store.clone();
|
||||
|
||||
fn separators_after_indices(&self) -> Vec<usize> {
|
||||
if self.items.is_empty() {
|
||||
Vec::new()
|
||||
} else {
|
||||
vec![self.items.len() - 1]
|
||||
}
|
||||
Some(
|
||||
div()
|
||||
.p_1()
|
||||
.border_t_1()
|
||||
.border_color(cx.theme().colors().border_variant)
|
||||
.child(
|
||||
Button::new("stop-all-servers", "Stop All Servers")
|
||||
.disabled(self.items.is_empty())
|
||||
.on_click({
|
||||
move |_, _, cx| {
|
||||
lsp_store
|
||||
.update(cx, |lsp_store, cx| {
|
||||
lsp_store.stop_all_language_servers(cx);
|
||||
})
|
||||
.ok();
|
||||
}
|
||||
}),
|
||||
)
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -911,13 +904,12 @@ impl Render for LspTool {
|
|||
div().child(
|
||||
PickerPopoverMenu::new(
|
||||
lsp_picker.clone(),
|
||||
IconButton::new("zed-lsp-tool-button", IconName::Bolt)
|
||||
IconButton::new("zed-lsp-tool-button", IconName::BoltFilledAlt)
|
||||
.when_some(indicator, IconButton::indicator)
|
||||
.shape(IconButtonShape::Square)
|
||||
.icon_size(IconSize::XSmall)
|
||||
.icon_size(IconSize::Small)
|
||||
.indicator_border_color(Some(cx.theme().colors().status_bar_background)),
|
||||
move |_, cx| Tooltip::simple("Language servers", cx),
|
||||
Corner::BottomRight,
|
||||
move |_, cx| Tooltip::simple("Language Servers", cx),
|
||||
Corner::BottomLeft,
|
||||
cx,
|
||||
)
|
||||
.render(window, cx),
|
||||
|
|
|
|||
|
|
@ -332,8 +332,8 @@ pub fn initialize_workspace(
|
|||
cx.new(|_| go_to_line::cursor_position::CursorPosition::new(workspace));
|
||||
workspace.status_bar().update(cx, |status_bar, cx| {
|
||||
status_bar.add_left_item(search_button, window, cx);
|
||||
status_bar.add_left_item(diagnostic_summary, window, cx);
|
||||
status_bar.add_left_item(lsp_tool, window, cx);
|
||||
status_bar.add_left_item(diagnostic_summary, window, cx);
|
||||
status_bar.add_left_item(activity_indicator, window, cx);
|
||||
status_bar.add_right_item(edit_prediction_button, window, cx);
|
||||
status_bar.add_right_item(active_buffer_language, window, cx);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue