Style context menu

Antonio Scandurra created 3 years ago

Change summary

crates/context_menu/src/context_menu.rs         | 15 ++++++----
crates/gpui/src/elements/mouse_event_handler.rs |  2 
styles/src/styleTree/contextMenu.ts             | 26 +++++++++++++-----
styles/src/styleTree/projectPanel.ts            |  2 
4 files changed, 29 insertions(+), 16 deletions(-)

Detailed changes

crates/context_menu/src/context_menu.rs

@@ -1,6 +1,6 @@
 use gpui::{
-    elements::*, geometry::vector::Vector2F, Action, Axis, Entity, RenderContext, SizeConstraint,
-    View, ViewContext,
+    elements::*, geometry::vector::Vector2F, platform::CursorStyle, Action, Axis, Entity,
+    RenderContext, SizeConstraint, View, ViewContext,
 };
 use settings::Settings;
 
@@ -138,10 +138,10 @@ impl ContextMenu {
                             }
                             ContextMenuItem::Separator => Empty::new()
                                 .collapsed()
-                                .contained()
-                                .with_style(style.separator)
                                 .constrained()
                                 .with_height(1.)
+                                .contained()
+                                .with_style(style.separator)
                                 .boxed(),
                         }
                     }))
@@ -175,16 +175,19 @@ impl ContextMenu {
                                     .flex_float()
                                     .boxed()
                                 })
+                                .contained()
+                                .with_style(style.container)
                                 .boxed()
                         })
+                        .with_cursor_style(CursorStyle::PointingHand)
                         .on_click(move |_, _, cx| cx.dispatch_any_action(action.boxed_clone()))
                         .boxed()
                     }
                     ContextMenuItem::Separator => Empty::new()
-                        .contained()
-                        .with_style(style.separator)
                         .constrained()
                         .with_height(1.)
+                        .contained()
+                        .with_style(style.separator)
                         .boxed(),
                 }
             }))

crates/gpui/src/elements/mouse_event_handler.rs

@@ -22,7 +22,7 @@ pub struct MouseEventHandler {
     padding: Padding,
 }
 
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct MouseState {
     pub hovered: bool,
     pub clicked: bool,

styles/src/styleTree/contextMenu.ts

@@ -1,26 +1,36 @@
 import Theme from "../themes/common/theme";
-import { backgroundColor, shadow, text } from "./components";
+import { backgroundColor, borderColor, shadow, text } from "./components";
 
 export default function contextMenu(theme: Theme) {
   return {
     background: backgroundColor(theme, 300, "base"),
     cornerRadius: 6,
-    padding: {
-      bottom: 2,
-      left: 6,
-      right: 6,
-      top: 2,
-    },
+    padding: 6,
     shadow: shadow(theme),
     item: {
+      padding: { left: 4, right: 4, top: 2, bottom: 2 },
+      cornerRadius: 6,
       label: text(theme, "sans", "secondary", { size: "sm" }),
       keystroke: {
         margin: { left: 60 },
         ...text(theme, "sans", "muted", { size: "sm", weight: "bold" })
       },
+      hover: {
+        background: backgroundColor(theme, 300, "hovered"),
+        text: text(theme, "sans", "primary", { size: "sm" }),
+      },
+      active: {
+        background: backgroundColor(theme, 300, "active"),
+        text: text(theme, "sans", "primary", { size: "sm" }),
+      },
+      activeHover: {
+        background: backgroundColor(theme, 300, "hovered"),
+        text: text(theme, "sans", "active", { size: "sm" }),
+      }
     },
     separator: {
-      background: "#00ff00"
+      background: borderColor(theme, "primary"),
+      margin: { top: 2, bottom: 2 }
     },
   }
 }

styles/src/styleTree/projectPanel.ts

@@ -1,6 +1,6 @@
 import Theme from "../themes/common/theme";
 import { panel } from "./app";
-import { backgroundColor, iconColor, player, shadow, text } from "./components";
+import { backgroundColor, iconColor, player, text } from "./components";
 
 export default function projectPanel(theme: Theme) {
   return {