Add Zoom button to assistant panel

Nathan Sobo created 2 years ago

Change summary

crates/ai/src/assistant.rs        | 33 ++++++++++++++++++++++++++++++++-
crates/theme/src/theme.rs         |  2 ++
styles/src/styleTree/assistant.ts | 26 ++++++++++++++++++++++++++
3 files changed, 60 insertions(+), 1 deletion(-)

Detailed changes

crates/ai/src/assistant.rs

@@ -46,7 +46,7 @@ use util::{
 use workspace::{
     dock::{DockPosition, Panel},
     item::Item,
-    Save, Workspace,
+    Save, ToggleZoom, Workspace,
 };
 
 const OPENAI_API_URL: &'static str = "https://api.openai.com/v1";
@@ -364,6 +364,36 @@ impl AssistantPanel {
             })
     }
 
+    fn render_zoom_button(
+        &self,
+        style: &AssistantStyle,
+        cx: &mut ViewContext<Self>,
+    ) -> impl Element<Self> {
+        enum ToggleZoomButton {}
+
+        let style = if self.zoomed {
+            &style.zoom_out_button
+        } else {
+            &style.zoom_in_button
+        };
+
+        MouseEventHandler::<ToggleZoomButton, _>::new(0, cx, |_, _| {
+            Svg::for_style(style.icon.clone())
+                .contained()
+                .with_style(style.container)
+        })
+        .with_cursor_style(CursorStyle::PointingHand)
+        .on_click(MouseButton::Left, |_, this, cx| {
+            if this.zoomed {
+                cx.emit(AssistantPanelEvent::ZoomOut)
+            } else {
+                this.has_focus = true; // Hack: Because focus_in is processed last, we need to set this here.
+                cx.focus_self();
+                cx.emit(AssistantPanelEvent::ZoomIn);
+            }
+        })
+    }
+
     fn render_saved_conversation(
         &mut self,
         index: usize,
@@ -510,6 +540,7 @@ impl View for AssistantPanel {
                                 .aligned()
                                 .flex_float(),
                         )
+                        .with_child(self.render_zoom_button(&style, cx).aligned().flex_float())
                         .contained()
                         .with_style(theme.workspace.tab_bar.container)
                         .expanded()

crates/theme/src/theme.rs

@@ -995,6 +995,8 @@ pub struct TerminalStyle {
 pub struct AssistantStyle {
     pub container: ContainerStyle,
     pub hamburger_button: IconStyle,
+    pub zoom_in_button: IconStyle,
+    pub zoom_out_button: IconStyle,
     pub plus_button: IconStyle,
     pub title: ContainedText,
     pub message_header: ContainerStyle,

styles/src/styleTree/assistant.ts

@@ -27,6 +27,32 @@ export default function assistant(colorScheme: ColorScheme) {
             margin: { left: 12 },
           }
         },
+        zoomInButton: {
+          icon: {
+            color: text(layer, "sans", "default", { size: "sm" }).color,
+            asset: "icons/maximize_8.svg",
+            dimensions: {
+              width: 12,
+              height: 12,
+            },
+          },
+          container: {
+            margin: { right: 12 },
+          }
+        },
+        zoomOutButton: {
+          icon: {
+            color: text(layer, "sans", "default", { size: "sm" }).color,
+            asset: "icons/minimize_8.svg",
+            dimensions: {
+              width: 12,
+              height: 12,
+            },
+          },
+          container: {
+            margin: { right: 12 },
+          }
+        },
         plusButton: {
           icon: {
             color: text(layer, "sans", "default", { size: "sm" }).color,