Align feedback button styles with other sidebar buttons

Mikayla Maki created 2 years ago

Make feedback button reflect whether you're in a feedback buffer

Change summary

crates/feedback/src/deploy_feedback_button.rs | 47 ++++++++++++++++----
crates/theme/src/theme.rs                     |  1 
crates/zed/src/zed.rs                         |  3 +
styles/src/styleTree/statusBar.ts             |  9 ----
4 files changed, 41 insertions(+), 19 deletions(-)

Detailed changes

crates/feedback/src/deploy_feedback_button.rs

@@ -2,39 +2,58 @@ use gpui::{elements::*, CursorStyle, Entity, MouseButton, RenderContext, View, V
 use settings::Settings;
 use workspace::{item::ItemHandle, StatusItemView};
 
-use crate::feedback_editor::GiveFeedback;
+use crate::feedback_editor::{FeedbackEditor, GiveFeedback};
 
-pub struct DeployFeedbackButton;
+pub struct DeployFeedbackButton {
+    active: bool,
+}
 
 impl Entity for DeployFeedbackButton {
     type Event = ();
 }
 
+impl DeployFeedbackButton {
+    pub fn new() -> Self {
+        DeployFeedbackButton { active: false }
+    }
+}
+
 impl View for DeployFeedbackButton {
     fn ui_name() -> &'static str {
         "DeployFeedbackButton"
     }
 
     fn render(&mut self, cx: &mut RenderContext<'_, Self>) -> ElementBox {
+        let active = self.active;
         Stack::new()
             .with_child(
                 MouseEventHandler::<Self>::new(0, cx, |state, cx| {
                     let theme = &cx.global::<Settings>().theme;
-                    let style = &theme.workspace.status_bar.feedback.style_for(state, false);
+                    let style = &theme
+                        .workspace
+                        .status_bar
+                        .sidebar_buttons
+                        .item
+                        .style_for(state, active);
+
                     Svg::new("icons/speech_bubble_12.svg")
-                        .with_color(style.color)
+                        .with_color(style.icon_color)
                         .constrained()
-                        .with_width(style.icon_width)
+                        .with_width(style.icon_size)
                         .aligned()
                         .constrained()
-                        .with_width(style.button_width)
-                        .with_height(style.button_width)
+                        .with_width(style.icon_size)
+                        .with_height(style.icon_size)
                         .contained()
                         .with_style(style.container)
                         .boxed()
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
-                .on_click(MouseButton::Left, |_, cx| cx.dispatch_action(GiveFeedback))
+                .on_click(MouseButton::Left, move |_, cx| {
+                    if !active {
+                        cx.dispatch_action(GiveFeedback)
+                    }
+                })
                 .boxed(),
             )
             .boxed()
@@ -42,5 +61,15 @@ impl View for DeployFeedbackButton {
 }
 
 impl StatusItemView for DeployFeedbackButton {
-    fn set_active_pane_item(&mut self, _: Option<&dyn ItemHandle>, _: &mut ViewContext<Self>) {}
+    fn set_active_pane_item(&mut self, item: Option<&dyn ItemHandle>, cx: &mut ViewContext<Self>) {
+        if let Some(item) = item {
+            if let Some(_) = item.downcast::<FeedbackEditor>() {
+                self.active = true;
+                cx.notify();
+                return;
+            }
+        }
+        self.active = false;
+        cx.notify();
+    }
 }

crates/theme/src/theme.rs

@@ -281,7 +281,6 @@ pub struct StatusBar {
     pub auto_update_progress_message: TextStyle,
     pub auto_update_done_message: TextStyle,
     pub lsp_status: Interactive<StatusBarLspStatus>,
-    pub feedback: Interactive<IconButton>,
     pub sidebar_buttons: StatusBarSidebarButtons,
     pub diagnostic_summary: Interactive<StatusBarDiagnosticSummary>,
     pub diagnostic_message: Interactive<ContainedText>,

crates/zed/src/zed.rs

@@ -339,10 +339,13 @@ pub fn initialize_workspace(
     let activity_indicator =
         activity_indicator::ActivityIndicator::new(workspace, app_state.languages.clone(), cx);
     let active_buffer_language = cx.add_view(|_| language_selector::ActiveBufferLanguage::new());
+    let feedback_button =
+        cx.add_view(|_| feedback::deploy_feedback_button::DeployFeedbackButton::new());
     let cursor_position = cx.add_view(|_| editor::items::CursorPosition::new());
     workspace.status_bar().update(cx, |status_bar, cx| {
         status_bar.add_left_item(diagnostic_summary, cx);
         status_bar.add_left_item(activity_indicator, cx);
+        status_bar.add_right_item(feedback_button, cx);
         status_bar.add_right_item(active_buffer_language, cx);
         status_bar.add_right_item(cursor_position, cx);
     });

styles/src/styleTree/statusBar.ts

@@ -51,15 +51,6 @@ export default function statusBar(colorScheme: ColorScheme) {
             ...text(layer, "sans"),
             hover: text(layer, "sans", "hovered"),
         },
-        feedback: {
-            margin: { left: 2 },
-            color: foreground(layer, "variant"),
-            iconWidth: 14,
-            buttonWidth: 14,
-            hover: {
-              color: foreground(layer, "on"),
-            },
-        },
         diagnosticSummary: {
             height: 20,
             iconWidth: 16,