From a7d12eea390ac10d20e8daf18013b970305863d0 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 9 Dec 2024 09:28:40 -0300
Subject: [PATCH] Enhance the Vim Mode toggle discoverability (#21589)
Closes https://github.com/zed-industries/zed/issues/21522
This PR adds an info tooltip on the Welcome screen, informing users how
Vim Mode can be toggled on and off. It also adds the Vim Mode toggle in
the Editor Controls menu. This is all so that folks who accidentally
turn it on better know how to turn it off. We're of course already able
to toggle this setting via the command palette, but that may be harder
to reach for beginners. So, maybe that's enough to close the linked
issue? Open to feedback.
(Note: I also added a max-width to the tooltip's label in this PR. I'm
confident that this won't make any tooltip look weird/broken, but if it
does, it may be because of this new property).
| Welcome Page | Editor Controls |
|--------|--------|
| 
| 
|
Release Notes:
- N/A
---------
Co-authored-by: Thorsten Ball
---
assets/icons/info.svg | 12 ++
crates/ui/src/components/icon.rs | 1 +
crates/ui/src/components/tooltip.rs | 2 +-
crates/welcome/src/welcome.rs | 48 +++--
crates/zed/src/zed.rs | 1 +
crates/zed/src/zed/quick_action_bar.rs | 236 ++++++++++++++-----------
6 files changed, 174 insertions(+), 126 deletions(-)
create mode 100644 assets/icons/info.svg
diff --git a/assets/icons/info.svg b/assets/icons/info.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7016cfe4d102f4e644755a56481d67590dd15e47
--- /dev/null
+++ b/assets/icons/info.svg
@@ -0,0 +1,12 @@
+
diff --git a/crates/ui/src/components/icon.rs b/crates/ui/src/components/icon.rs
index 03000f06387aff907d3534278e6c1c6e2e857e12..ed7c294db9ecdfb59baa8a1b1a048711153ee369 100644
--- a/crates/ui/src/components/icon.rs
+++ b/crates/ui/src/components/icon.rs
@@ -202,6 +202,7 @@ pub enum IconName {
HistoryRerun,
Indicator,
IndicatorX,
+ Info,
InlayHint,
Keyboard,
Library,
diff --git a/crates/ui/src/components/tooltip.rs b/crates/ui/src/components/tooltip.rs
index 89b89786b0dfa4fcc4b781022dcfa3ac052acb38..54609661893ebcee42c1ca8e21f138426f3f5132 100644
--- a/crates/ui/src/components/tooltip.rs
+++ b/crates/ui/src/components/tooltip.rs
@@ -88,7 +88,7 @@ impl Render for Tooltip {
el.child(
h_flex()
.gap_4()
- .child(self.title.clone())
+ .child(div().max_w_72().child(self.title.clone()))
.when_some(self.key_binding.clone(), |this, key_binding| {
this.justify_between().child(key_binding)
}),
diff --git a/crates/welcome/src/welcome.rs b/crates/welcome/src/welcome.rs
index 8dcb26bcc15f3970794155bd26833667dfb71196..f6953b944c50c75a49c44968d963eef59bf58651 100644
--- a/crates/welcome/src/welcome.rs
+++ b/crates/welcome/src/welcome.rs
@@ -11,7 +11,7 @@ use gpui::{
};
use settings::{Settings, SettingsStore};
use std::sync::Arc;
-use ui::{prelude::*, CheckboxWithLabel};
+use ui::{prelude::*, CheckboxWithLabel, Tooltip};
use vim_mode_setting::VimModeSetting;
use workspace::{
dock::DockPosition,
@@ -266,24 +266,34 @@ impl Render for WelcomePage {
.child(
v_group()
.gap_2()
- .child(CheckboxWithLabel::new(
- "enable-vim",
- Label::new("Enable Vim Mode"),
- if VimModeSetting::get_global(cx).0 {
- ui::Selection::Selected
- } else {
- ui::Selection::Unselected
- },
- cx.listener(move |this, selection, cx| {
- this.telemetry
- .report_app_event("welcome page: toggle vim".to_string());
- this.update_settings::(
- selection,
- cx,
- |setting, value| *setting = Some(value),
- );
- }),
- ))
+ .child(
+ h_flex()
+ .justify_between()
+ .child(CheckboxWithLabel::new(
+ "enable-vim",
+ Label::new("Enable Vim Mode"),
+ if VimModeSetting::get_global(cx).0 {
+ ui::Selection::Selected
+ } else {
+ ui::Selection::Unselected
+ },
+ cx.listener(move |this, selection, cx| {
+ this.telemetry
+ .report_app_event("welcome page: toggle vim".to_string());
+ this.update_settings::(
+ selection,
+ cx,
+ |setting, value| *setting = Some(value),
+ );
+ }),
+ ))
+ .child(
+ IconButton::new("vim-mode", IconName::Info)
+ .icon_size(IconSize::XSmall)
+ .icon_color(Color::Muted)
+ .tooltip(|cx| Tooltip::text("You can also toggle Vim Mode via the command palette or Editor Controls menu.", cx)),
+ )
+ )
.child(CheckboxWithLabel::new(
"enable-crash",
Label::new("Send Crash Reports"),
diff --git a/crates/zed/src/zed.rs b/crates/zed/src/zed.rs
index 2adb287b4de98dd37ab54e20003cef63be7a3f50..a52c8ec405d06723d9dec7cf3b69840703041a0d 100644
--- a/crates/zed/src/zed.rs
+++ b/crates/zed/src/zed.rs
@@ -3447,6 +3447,7 @@ mod tests {
app_state.languages.add(markdown_language());
+ vim_mode_setting::init(cx);
theme::init(theme::LoadThemes::JustBase, cx);
audio::init((), cx);
channel::init(&app_state.client, app_state.user_store.clone(), cx);
diff --git a/crates/zed/src/zed/quick_action_bar.rs b/crates/zed/src/zed/quick_action_bar.rs
index bfcd3fa39122d923d3408c1f549d1ddf4ed43776..be38502566f308ae3b2a59101ed08d590d2de54a 100644
--- a/crates/zed/src/zed/quick_action_bar.rs
+++ b/crates/zed/src/zed/quick_action_bar.rs
@@ -19,6 +19,7 @@ use ui::{
prelude::*, ButtonStyle, ContextMenu, IconButton, IconButtonShape, IconName, IconSize,
PopoverMenu, PopoverMenuHandle, Tooltip,
};
+use vim_mode_setting::VimModeSetting;
use workspace::{
item::ItemHandle, ToolbarItemEvent, ToolbarItemLocation, ToolbarItemView, Workspace,
};
@@ -154,6 +155,7 @@ impl Render for QuickActionBar {
let editor_selections_dropdown = selection_menu_enabled.then(|| {
let focus = editor.focus_handle(cx);
+
PopoverMenu::new("editor-selections-dropdown")
.trigger(
IconButton::new("toggle_editor_selections_icon", IconName::CursorIBeam)
@@ -201,34 +203,78 @@ impl Render for QuickActionBar {
});
let editor = editor.downgrade();
- let editor_settings_dropdown = PopoverMenu::new("editor-settings")
- .trigger(
- IconButton::new("toggle_editor_settings_icon", IconName::Sliders)
- .shape(IconButtonShape::Square)
- .icon_size(IconSize::Small)
- .style(ButtonStyle::Subtle)
- .selected(self.toggle_settings_handle.is_deployed())
- .when(!self.toggle_settings_handle.is_deployed(), |this| {
- this.tooltip(|cx| Tooltip::text("Editor Controls", cx))
- }),
- )
- .anchor(AnchorCorner::TopRight)
- .with_handle(self.toggle_settings_handle.clone())
- .menu(move |cx| {
- let menu = ContextMenu::build(cx, |mut menu, _| {
- if supports_inlay_hints {
+ let editor_settings_dropdown = {
+ let vim_mode_enabled = VimModeSetting::get_global(cx).0;
+
+ PopoverMenu::new("editor-settings")
+ .trigger(
+ IconButton::new("toggle_editor_settings_icon", IconName::Sliders)
+ .shape(IconButtonShape::Square)
+ .icon_size(IconSize::Small)
+ .style(ButtonStyle::Subtle)
+ .selected(self.toggle_settings_handle.is_deployed())
+ .when(!self.toggle_settings_handle.is_deployed(), |this| {
+ this.tooltip(|cx| Tooltip::text("Editor Controls", cx))
+ }),
+ )
+ .anchor(AnchorCorner::TopRight)
+ .with_handle(self.toggle_settings_handle.clone())
+ .menu(move |cx| {
+ let menu = ContextMenu::build(cx, |mut menu, _| {
+ if supports_inlay_hints {
+ menu = menu.toggleable_entry(
+ "Inlay Hints",
+ inlay_hints_enabled,
+ IconPosition::Start,
+ Some(editor::actions::ToggleInlayHints.boxed_clone()),
+ {
+ let editor = editor.clone();
+ move |cx| {
+ editor
+ .update(cx, |editor, cx| {
+ editor.toggle_inlay_hints(
+ &editor::actions::ToggleInlayHints,
+ cx,
+ );
+ })
+ .ok();
+ }
+ },
+ );
+ }
+
+ menu = menu.toggleable_entry(
+ "Selection Menu",
+ selection_menu_enabled,
+ IconPosition::Start,
+ Some(editor::actions::ToggleSelectionMenu.boxed_clone()),
+ {
+ let editor = editor.clone();
+ move |cx| {
+ editor
+ .update(cx, |editor, cx| {
+ editor.toggle_selection_menu(
+ &editor::actions::ToggleSelectionMenu,
+ cx,
+ )
+ })
+ .ok();
+ }
+ },
+ );
+
menu = menu.toggleable_entry(
- "Inlay Hints",
- inlay_hints_enabled,
+ "Auto Signature Help",
+ auto_signature_help_enabled,
IconPosition::Start,
- Some(editor::actions::ToggleInlayHints.boxed_clone()),
+ Some(editor::actions::ToggleAutoSignatureHelp.boxed_clone()),
{
let editor = editor.clone();
move |cx| {
editor
.update(cx, |editor, cx| {
- editor.toggle_inlay_hints(
- &editor::actions::ToggleInlayHints,
+ editor.toggle_auto_signature_help_menu(
+ &editor::actions::ToggleAutoSignatureHelp,
cx,
);
})
@@ -236,92 +282,70 @@ impl Render for QuickActionBar {
}
},
);
- }
- menu = menu.toggleable_entry(
- "Selection Menu",
- selection_menu_enabled,
- IconPosition::Start,
- Some(editor::actions::ToggleSelectionMenu.boxed_clone()),
- {
- let editor = editor.clone();
- move |cx| {
- editor
- .update(cx, |editor, cx| {
- editor.toggle_selection_menu(
- &editor::actions::ToggleSelectionMenu,
- cx,
- )
- })
- .ok();
- }
- },
- );
-
- menu = menu.toggleable_entry(
- "Auto Signature Help",
- auto_signature_help_enabled,
- IconPosition::Start,
- Some(editor::actions::ToggleAutoSignatureHelp.boxed_clone()),
- {
- let editor = editor.clone();
- move |cx| {
- editor
- .update(cx, |editor, cx| {
- editor.toggle_auto_signature_help_menu(
- &editor::actions::ToggleAutoSignatureHelp,
- cx,
- );
- })
- .ok();
- }
- },
- );
-
- menu = menu.separator();
-
- menu = menu.toggleable_entry(
- "Inline Git Blame",
- git_blame_inline_enabled,
- IconPosition::Start,
- Some(editor::actions::ToggleGitBlameInline.boxed_clone()),
- {
- let editor = editor.clone();
- move |cx| {
- editor
- .update(cx, |editor, cx| {
- editor.toggle_git_blame_inline(
- &editor::actions::ToggleGitBlameInline,
- cx,
- )
- })
- .ok();
- }
- },
- );
-
- menu = menu.toggleable_entry(
- "Column Git Blame",
- show_git_blame_gutter,
- IconPosition::Start,
- Some(editor::actions::ToggleGitBlame.boxed_clone()),
- {
- let editor = editor.clone();
- move |cx| {
- editor
- .update(cx, |editor, cx| {
- editor
- .toggle_git_blame(&editor::actions::ToggleGitBlame, cx)
- })
- .ok();
- }
- },
- );
-
- menu
- });
- Some(menu)
- });
+ menu = menu.separator();
+
+ menu = menu.toggleable_entry(
+ "Inline Git Blame",
+ git_blame_inline_enabled,
+ IconPosition::Start,
+ Some(editor::actions::ToggleGitBlameInline.boxed_clone()),
+ {
+ let editor = editor.clone();
+ move |cx| {
+ editor
+ .update(cx, |editor, cx| {
+ editor.toggle_git_blame_inline(
+ &editor::actions::ToggleGitBlameInline,
+ cx,
+ )
+ })
+ .ok();
+ }
+ },
+ );
+
+ menu = menu.toggleable_entry(
+ "Column Git Blame",
+ show_git_blame_gutter,
+ IconPosition::Start,
+ Some(editor::actions::ToggleGitBlame.boxed_clone()),
+ {
+ let editor = editor.clone();
+ move |cx| {
+ editor
+ .update(cx, |editor, cx| {
+ editor.toggle_git_blame(
+ &editor::actions::ToggleGitBlame,
+ cx,
+ )
+ })
+ .ok();
+ }
+ },
+ );
+
+ menu = menu.separator();
+
+ menu = menu.toggleable_entry(
+ "Vim Mode",
+ vim_mode_enabled,
+ IconPosition::Start,
+ None,
+ {
+ move |cx| {
+ let new_value = !vim_mode_enabled;
+ VimModeSetting::override_global(VimModeSetting(new_value), cx);
+ cx.refresh();
+ }
+ },
+ );
+
+ menu
+ });
+ Some(menu)
+ })
+ };
h_flex()
.id("quick action bar")