Make chevrons and lightning bolt interactive

Mikayla Maki created 2 years ago

Change summary

crates/editor/src/editor.rs    | 21 +++++++++++----------
crates/editor/src/element.rs   |  4 +++-
crates/theme/src/theme.rs      | 11 +++++++----
styles/src/styleTree/editor.ts | 29 ++++++++++++++++++++++++++---
4 files changed, 47 insertions(+), 18 deletions(-)

Detailed changes

crates/editor/src/editor.rs

@@ -2669,14 +2669,15 @@ impl Editor {
     pub fn render_code_actions_indicator(
         &self,
         style: &EditorStyle,
+        active: bool,
         cx: &mut RenderContext<Self>,
     ) -> Option<ElementBox> {
         if self.available_code_actions.is_some() {
             enum CodeActions {}
             Some(
-                MouseEventHandler::<CodeActions>::new(0, cx, |_, _| {
+                MouseEventHandler::<CodeActions>::new(0, cx, |state, _| {
                     Svg::new("icons/bolt_8.svg")
-                        .with_color(style.code_actions.indicator)
+                        .with_color(style.code_actions.indicator.style_for(state, active).color)
                         .boxed()
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
@@ -2697,7 +2698,7 @@ impl Editor {
         &self,
         fold_data: Option<Vec<(u32, FoldStatus)>>,
         style: &EditorStyle,
-        gutter_hovered: bool,
+        _gutter_hovered: bool,
         cx: &mut RenderContext<Self>,
     ) -> Option<Vec<(u32, ElementBox)>> {
         enum FoldIndicators {}
@@ -2712,24 +2713,24 @@ impl Editor {
                         MouseEventHandler::<FoldIndicators>::new(
                             fold_location as usize,
                             cx,
-                            |_, _| -> ElementBox {
+                            |mouse_state, _| -> ElementBox {
                                 Svg::new(match fold_status {
                                     FoldStatus::Folded => "icons/chevron_right_8.svg",
                                     FoldStatus::Foldable => "icons/chevron_down_8.svg",
                                 })
                                 .with_color(
-                                    if gutter_hovered || fold_status == FoldStatus::Folded {
-                                        style.folds.indicator
-                                    } else {
-                                        style.folds.faded_indicator
-                                    },
+                                    style
+                                        .folds
+                                        .indicator
+                                        .style_for(mouse_state, fold_status == FoldStatus::Folded)
+                                        .color,
                                 )
                                 .boxed()
                             },
                         )
                         .with_cursor_style(CursorStyle::PointingHand)
                         .with_padding(Padding::uniform(3.))
-                        .on_down(MouseButton::Left, {
+                        .on_click(MouseButton::Left, {
                             move |_, cx| {
                                 cx.dispatch_any_action(match fold_status {
                                     FoldStatus::Folded => Box::new(UnfoldAt {

crates/editor/src/element.rs

@@ -1818,8 +1818,10 @@ impl Element for EditorElement {
                         view.render_context_menu(newest_selection_head, style.clone(), cx);
                 }
 
+                let active = matches!(view.context_menu, Some(crate::ContextMenu::CodeActions(_)));
+
                 code_actions_indicator = view
-                    .render_code_actions_indicator(&style, cx)
+                    .render_code_actions_indicator(&style, active, cx)
                     .map(|indicator| (newest_selection_head.row(), indicator));
             }
 

crates/theme/src/theme.rs

@@ -635,18 +635,21 @@ pub struct FieldEditor {
 #[derive(Clone, Deserialize, Default)]
 pub struct CodeActions {
     #[serde(default)]
-    pub indicator: Color,
+    pub indicator: Interactive<Indicator>,
     pub vertical_scale: f32,
 }
 
 #[derive(Clone, Deserialize, Default)]
 pub struct Folds {
-    #[serde(default)]
-    pub indicator: Color,
-    pub faded_indicator: Color,
+    pub indicator: Interactive<Indicator>,
     pub fold_background: Color,
 }
 
+#[derive(Clone, Deserialize, Default)]
+pub struct Indicator {
+    pub color: Color,
+}
+
 #[derive(Clone, Deserialize, Default)]
 pub struct DiffStyle {
     pub inserted: Color,

styles/src/styleTree/editor.ts

@@ -44,12 +44,35 @@ export default function editor(colorScheme: ColorScheme) {
         activeLineBackground: withOpacity(background(layer, "on"), 0.75),
         highlightedLineBackground: background(layer, "on"),
         codeActions: {
-            indicator: foreground(layer, "variant"),
+            indicator: {
+                color: foreground(layer, "variant"),
+
+                clicked: {
+                    color: foreground(layer, "base"),
+                },
+                hover: {
+                    color: foreground(layer, "on"),
+                },
+                active: {
+                    color: foreground(layer, "on"),
+                },
+            },
             verticalScale: 0.55,
         },
         folds: {
-            indicator: foreground(layer, "variant"),
-            fadedIndicator: background(layer, "on"),
+            indicator: {
+                color: foreground(layer, "variant"),
+
+                clicked: {
+                    color: foreground(layer, "base"),
+                },
+                hover: {
+                    color: foreground(layer, "on"),
+                },
+                active: {
+                    color: foreground(layer, "on"),
+                },
+            },
             foldBackground: foreground(layer, "variant"),
         },
         diff: {