From 62a890fb7fc4afc963f7236a89e4097c36b5d82e Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 24 Jul 2024 10:39:05 -0300 Subject: [PATCH] Increase size of icon buttons within the inline editor (#15051) This PR increases the size of the the icon buttons within the inline editors, both within the buffer and on the terminal. I also added properties to make sure they always render as a square, as well as tweaking the stop icon SVG, adding an alternative sparkle icon that fit the same grid as the close (14x14) icon, and adding a bit more right padding on the buffer's case so it doesn't collide with the scrollbar. End result is that they have a bit of an easier target space area and normalized sizes. --- Release Notes: - N/A --- assets/icons/sparkle_alt.svg | 3 +++ assets/icons/stop.svg | 4 ++-- crates/assistant/src/inline_assistant.rs | 21 ++++++++----------- .../src/terminal_inline_assistant.rs | 19 +++++++---------- crates/ui/src/components/icon.rs | 2 ++ 5 files changed, 24 insertions(+), 25 deletions(-) create mode 100644 assets/icons/sparkle_alt.svg diff --git a/assets/icons/sparkle_alt.svg b/assets/icons/sparkle_alt.svg new file mode 100644 index 0000000000..d5c227b105 --- /dev/null +++ b/assets/icons/sparkle_alt.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/stop.svg b/assets/icons/stop.svg index 3beabd5394..6291a34c08 100644 --- a/assets/icons/stop.svg +++ b/assets/icons/stop.svg @@ -1,3 +1,3 @@ - - + + diff --git a/crates/assistant/src/inline_assistant.rs b/crates/assistant/src/inline_assistant.rs index 64e4f7bd3d..c3a31fb94a 100644 --- a/crates/assistant/src/inline_assistant.rs +++ b/crates/assistant/src/inline_assistant.rs @@ -1328,15 +1328,14 @@ impl Render for PromptEditor { vec![ IconButton::new("cancel", IconName::Close) .icon_color(Color::Muted) - .size(ButtonSize::None) + .shape(IconButtonShape::Square) .tooltip(|cx| Tooltip::for_action("Cancel Assist", &menu::Cancel, cx)) .on_click( cx.listener(|_, _, cx| cx.emit(PromptEditorEvent::CancelRequested)), ), - IconButton::new("start", IconName::Sparkle) + IconButton::new("start", IconName::SparkleAlt) .icon_color(Color::Muted) - .size(ButtonSize::None) - .icon_size(IconSize::XSmall) + .shape(IconButtonShape::Square) .tooltip(|cx| Tooltip::for_action("Transform", &menu::Confirm, cx)) .on_click( cx.listener(|_, _, cx| cx.emit(PromptEditorEvent::StartRequested)), @@ -1347,15 +1346,14 @@ impl Render for PromptEditor { vec![ IconButton::new("cancel", IconName::Close) .icon_color(Color::Muted) - .size(ButtonSize::None) + .shape(IconButtonShape::Square) .tooltip(|cx| Tooltip::text("Cancel Assist", cx)) .on_click( cx.listener(|_, _, cx| cx.emit(PromptEditorEvent::CancelRequested)), ), IconButton::new("stop", IconName::Stop) .icon_color(Color::Error) - .size(ButtonSize::None) - .icon_size(IconSize::XSmall) + .shape(IconButtonShape::Square) .tooltip(|cx| { Tooltip::with_meta( "Interrupt Transformation", @@ -1373,7 +1371,7 @@ impl Render for PromptEditor { vec![ IconButton::new("cancel", IconName::Close) .icon_color(Color::Muted) - .size(ButtonSize::None) + .shape(IconButtonShape::Square) .tooltip(|cx| Tooltip::for_action("Cancel Assist", &menu::Cancel, cx)) .on_click( cx.listener(|_, _, cx| cx.emit(PromptEditorEvent::CancelRequested)), @@ -1381,8 +1379,7 @@ impl Render for PromptEditor { if self.edited_since_done { IconButton::new("restart", IconName::RotateCw) .icon_color(Color::Info) - .icon_size(IconSize::XSmall) - .size(ButtonSize::None) + .shape(IconButtonShape::Square) .tooltip(|cx| { Tooltip::with_meta( "Restart Transformation", @@ -1397,7 +1394,7 @@ impl Render for PromptEditor { } else { IconButton::new("confirm", IconName::Check) .icon_color(Color::Info) - .size(ButtonSize::None) + .shape(IconButtonShape::Square) .tooltip(|cx| Tooltip::for_action("Confirm Assist", &menu::Confirm, cx)) .on_click(cx.listener(|_, _, cx| { cx.emit(PromptEditorEvent::ConfirmRequested); @@ -1466,7 +1463,7 @@ impl Render for PromptEditor { .child( h_flex() .gap_2() - .pr_4() + .pr_6() .children(self.render_token_count(cx)) .children(buttons), ) diff --git a/crates/assistant/src/terminal_inline_assistant.rs b/crates/assistant/src/terminal_inline_assistant.rs index b2314fc532..cbd33f38a5 100644 --- a/crates/assistant/src/terminal_inline_assistant.rs +++ b/crates/assistant/src/terminal_inline_assistant.rs @@ -452,15 +452,14 @@ impl Render for PromptEditor { vec![ IconButton::new("cancel", IconName::Close) .icon_color(Color::Muted) - .size(ButtonSize::None) + .shape(IconButtonShape::Square) .tooltip(|cx| Tooltip::for_action("Cancel Assist", &menu::Cancel, cx)) .on_click( cx.listener(|_, _, cx| cx.emit(PromptEditorEvent::CancelRequested)), ), - IconButton::new("start", IconName::Sparkle) + IconButton::new("start", IconName::SparkleAlt) .icon_color(Color::Muted) - .size(ButtonSize::None) - .icon_size(IconSize::XSmall) + .shape(IconButtonShape::Square) .tooltip(|cx| Tooltip::for_action("Generate", &menu::Confirm, cx)) .on_click( cx.listener(|_, _, cx| cx.emit(PromptEditorEvent::StartRequested)), @@ -471,15 +470,14 @@ impl Render for PromptEditor { vec![ IconButton::new("cancel", IconName::Close) .icon_color(Color::Muted) - .size(ButtonSize::None) + .shape(IconButtonShape::Square) .tooltip(|cx| Tooltip::text("Cancel Assist", cx)) .on_click( cx.listener(|_, _, cx| cx.emit(PromptEditorEvent::CancelRequested)), ), IconButton::new("stop", IconName::Stop) .icon_color(Color::Error) - .size(ButtonSize::None) - .icon_size(IconSize::XSmall) + .shape(IconButtonShape::Square) .tooltip(|cx| { Tooltip::with_meta( "Interrupt Generation", @@ -497,7 +495,7 @@ impl Render for PromptEditor { vec![ IconButton::new("cancel", IconName::Close) .icon_color(Color::Muted) - .size(ButtonSize::None) + .shape(IconButtonShape::Square) .tooltip(|cx| Tooltip::for_action("Cancel Assist", &menu::Cancel, cx)) .on_click( cx.listener(|_, _, cx| cx.emit(PromptEditorEvent::CancelRequested)), @@ -505,8 +503,7 @@ impl Render for PromptEditor { if self.edited_since_done { IconButton::new("restart", IconName::RotateCw) .icon_color(Color::Info) - .icon_size(IconSize::XSmall) - .size(ButtonSize::None) + .shape(IconButtonShape::Square) .tooltip(|cx| { Tooltip::with_meta( "Restart Generation", @@ -521,7 +518,7 @@ impl Render for PromptEditor { } else { IconButton::new("confirm", IconName::Play) .icon_color(Color::Info) - .size(ButtonSize::None) + .shape(IconButtonShape::Square) .tooltip(|cx| { Tooltip::for_action("Execute generated command", &menu::Confirm, cx) }) diff --git a/crates/ui/src/components/icon.rs b/crates/ui/src/components/icon.rs index 26a5d93083..2b5ea51767 100644 --- a/crates/ui/src/components/icon.rs +++ b/crates/ui/src/components/icon.rs @@ -228,6 +228,7 @@ pub enum IconName { Snip, Space, Sparkle, + SparkleAlt, SparkleFilled, Spinner, Split, @@ -378,6 +379,7 @@ impl IconName { IconName::Snip => "icons/snip.svg", IconName::Space => "icons/space.svg", IconName::Sparkle => "icons/sparkle.svg", + IconName::SparkleAlt => "icons/sparkle_alt.svg", IconName::SparkleFilled => "icons/sparkle_filled.svg", IconName::Spinner => "icons/spinner.svg", IconName::Split => "icons/split.svg",