From 6e37ff880f616f7128c09e567af22c4ee46c3cd7 Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Fri, 10 Mar 2023 17:02:52 +0100 Subject: [PATCH] Replace "Give Feedback" with an icon and move it to the left This is so we can show the current language in the status bar on the right, and having two pieces of text sitting next to each other felt too busy. Co-Authored-By: Nathan Sobo --- assets/icons/speech_bubble_12.svg | 3 +++ crates/feedback/src/deploy_feedback_button.rs | 20 ++++++++++++------- crates/theme/src/theme.rs | 2 +- crates/zed/src/zed.rs | 2 +- styles/src/styleTree/statusBar.ts | 8 ++++++-- 5 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 assets/icons/speech_bubble_12.svg diff --git a/assets/icons/speech_bubble_12.svg b/assets/icons/speech_bubble_12.svg new file mode 100644 index 0000000000000000000000000000000000000000..f5f330056a34f1261d31416b688bcc86dcdf8bf1 --- /dev/null +++ b/assets/icons/speech_bubble_12.svg @@ -0,0 +1,3 @@ + + + diff --git a/crates/feedback/src/deploy_feedback_button.rs b/crates/feedback/src/deploy_feedback_button.rs index 8fcafdfedee101458f0513d145d504831bfbdb34..7519d2d06e649164cdd742dca4d3dc92e51d7899 100644 --- a/crates/feedback/src/deploy_feedback_button.rs +++ b/crates/feedback/src/deploy_feedback_button.rs @@ -1,7 +1,4 @@ -use gpui::{ - elements::{MouseEventHandler, ParentElement, Stack, Text}, - CursorStyle, Element, ElementBox, Entity, MouseButton, RenderContext, View, ViewContext, -}; +use gpui::{elements::*, CursorStyle, Entity, MouseButton, RenderContext, View, ViewContext}; use settings::Settings; use workspace::{item::ItemHandle, StatusItemView}; @@ -23,9 +20,18 @@ impl View for DeployFeedbackButton { .with_child( MouseEventHandler::::new(0, cx, |state, cx| { let theme = &cx.global::().theme; - let theme = &theme.workspace.status_bar.feedback; - - Text::new("Give Feedback", theme.style_for(state, true).clone()).boxed() + let style = &theme.workspace.status_bar.feedback.style_for(state, false); + Svg::new("icons/speech_bubble_12.svg") + .with_color(style.color) + .constrained() + .with_width(style.icon_width) + .aligned() + .constrained() + .with_width(style.button_width) + .with_height(style.button_width) + .contained() + .with_style(style.container) + .boxed() }) .with_cursor_style(CursorStyle::PointingHand) .on_click(MouseButton::Left, |_, cx| cx.dispatch_action(GiveFeedback)) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 484c542edeffce8b22c8f2f29ae4f672c0693399..56ef87e0af3e3ca6b955d75e9adf843ef6cff833 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -280,7 +280,7 @@ pub struct StatusBar { pub auto_update_progress_message: TextStyle, pub auto_update_done_message: TextStyle, pub lsp_status: Interactive, - pub feedback: Interactive, + pub feedback: Interactive, pub sidebar_buttons: StatusBarSidebarButtons, pub diagnostic_summary: Interactive, pub diagnostic_message: Interactive, diff --git a/crates/zed/src/zed.rs b/crates/zed/src/zed.rs index 79a6f67f621804b0f5d0193b62875c418c5c818d..f853e41c0429cddc1cb1c5fcee14dff429cfb3a9 100644 --- a/crates/zed/src/zed.rs +++ b/crates/zed/src/zed.rs @@ -342,10 +342,10 @@ pub fn initialize_workspace( let feedback_button = cx.add_view(|_| feedback::deploy_feedback_button::DeployFeedbackButton {}); workspace.status_bar().update(cx, |status_bar, cx| { + status_bar.add_left_item(feedback_button, cx); status_bar.add_left_item(diagnostic_summary, cx); status_bar.add_left_item(activity_indicator, cx); status_bar.add_right_item(cursor_position, cx); - status_bar.add_right_item(feedback_button, cx); }); auto_update::notify_of_any_new_update(cx.weak_handle(), cx); diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index a60a55df1ecaae3ce52edfc82c90222db30718cb..eb72346788a78b62be63600587eefc981676dc7d 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -45,8 +45,12 @@ export default function statusBar(colorScheme: ColorScheme) { hover: text(layer, "sans", "hovered"), }, feedback: { - ...text(layer, "sans", "variant"), - hover: text(layer, "sans", "hovered"), + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + hover: { + color: foreground(layer, "on"), + }, }, diagnosticSummary: { height: 20,