Add col/row resize cursor styles (#11406)

Soroush Mirzaei and Mikayla created 2 years ago

This PR fixes a small issue I noticed with resize cursors. The
column/row resize cursors were missing and in a few places we were using
`ew-resize` and `ns-resize` even though the documentation mentions
`col-resize` and `row-resize`.

Finally updated the panes in the workspace to use the new column/row
resize cursors.

Before:

![Screenshot_20240505_111515](https://github.com/zed-industries/zed/assets/829535/50f28a1b-33e2-431a-8fc8-5048d89c8f7b)

![Screenshot_20240505_111521](https://github.com/zed-industries/zed/assets/829535/45856f7e-4ca9-4b39-9f8c-144934e9d41e)

After:

![Screenshot_20240505_110606](https://github.com/zed-industries/zed/assets/829535/2b247ec1-44ef-4293-87b3-7fda4b2ebf8f)

![Screenshot_20240505_110611](https://github.com/zed-industries/zed/assets/829535/b558e1ce-3e08-4de3-8a11-6a80184d84fe)



Release Notes:

- Added column/row resize cursor styles to GPUI
- Fixed the existing references that were incorrectly using `ew-resize`
for column resize and `ns-resize` for row resize
- Updated panes to use column/row resize cursors instead on `ew-resize`
and `ns-resize`

---------

Co-authored-by: Mikayla <mikayla@zed.dev>

Change summary

crates/gpui/src/platform.rs                | 12 ++++++++++--
crates/gpui/src/platform/linux/platform.rs |  4 ++++
crates/gpui/src/platform/mac/platform.rs   |  2 ++
crates/gpui/src/styled.rs                  | 18 ++++++++++++++++--
crates/workspace/src/pane_group.rs         |  4 ++--
5 files changed, 34 insertions(+), 6 deletions(-)

Detailed changes

crates/gpui/src/platform.rs 🔗

@@ -733,7 +733,7 @@ pub enum CursorStyle {
     ResizeRight,
 
     /// A resize cursor to the left and right
-    /// corresponds to the CSS cursor value `col-resize`
+    /// corresponds to the CSS cursor value `ew-resize`
     ResizeLeftRight,
 
     /// A resize up cursor
@@ -745,9 +745,17 @@ pub enum CursorStyle {
     ResizeDown,
 
     /// A resize cursor directing up and down
-    /// corresponds to the CSS cursor value `row-resize`
+    /// corresponds to the CSS cursor value `ns-resize`
     ResizeUpDown,
 
+    /// A cursor indicating that the item/column can be resized horizontally.
+    /// corresponds to the CSS curosr value `col-resize`
+    ResizeColumn,
+
+    /// A cursor indicating that the item/row can be resized vertically.
+    /// corresponds to the CSS curosr value `row-resize`
+    ResizeRow,
+
     /// A cursor indicating that something will disappear if moved here
     /// Does not correspond to a CSS cursor value
     DisappearingItem,

crates/gpui/src/platform/linux/platform.rs 🔗

@@ -507,6 +507,8 @@ impl CursorStyle {
             CursorStyle::ResizeUp => Shape::NResize,
             CursorStyle::ResizeDown => Shape::SResize,
             CursorStyle::ResizeUpDown => Shape::NsResize,
+            CursorStyle::ResizeColumn => Shape::ColResize,
+            CursorStyle::ResizeRow => Shape::RowResize,
             CursorStyle::DisappearingItem => Shape::Grabbing, // todo(linux) - couldn't find equivalent icon in linux
             CursorStyle::IBeamCursorForVerticalLayout => Shape::VerticalText,
             CursorStyle::OperationNotAllowed => Shape::NotAllowed,
@@ -533,6 +535,8 @@ impl CursorStyle {
             CursorStyle::ResizeUp => "n-resize",
             CursorStyle::ResizeDown => "s-resize",
             CursorStyle::ResizeUpDown => "ns-resize",
+            CursorStyle::ResizeColumn => "col-resize",
+            CursorStyle::ResizeRow => "row-resize",
             CursorStyle::DisappearingItem => "grabbing", // todo(linux) - couldn't find equivalent icon in linux
             CursorStyle::IBeamCursorForVerticalLayout => "vertical-text",
             CursorStyle::OperationNotAllowed => "not-allowed",

crates/gpui/src/platform/mac/platform.rs 🔗

@@ -781,9 +781,11 @@ impl Platform for MacPlatform {
                 CursorStyle::ResizeLeft => msg_send![class!(NSCursor), resizeLeftCursor],
                 CursorStyle::ResizeRight => msg_send![class!(NSCursor), resizeRightCursor],
                 CursorStyle::ResizeLeftRight => msg_send![class!(NSCursor), resizeLeftRightCursor],
+                CursorStyle::ResizeColumn => msg_send![class!(NSCursor), resizeLeftRightCursor],
                 CursorStyle::ResizeUp => msg_send![class!(NSCursor), resizeUpCursor],
                 CursorStyle::ResizeDown => msg_send![class!(NSCursor), resizeDownCursor],
                 CursorStyle::ResizeUpDown => msg_send![class!(NSCursor), resizeUpDownCursor],
+                CursorStyle::ResizeRow => msg_send![class!(NSCursor), resizeUpDownCursor],
                 CursorStyle::DisappearingItem => {
                     msg_send![class!(NSCursor), disappearingItemCursor]
                 }

crates/gpui/src/styled.rs 🔗

@@ -176,17 +176,31 @@ pub trait Styled: Sized {
         self
     }
 
+    /// Sets cursor style when hovering over an element to `ew-resize`.
+    /// [Docs](https://tailwindcss.com/docs/cursor)
+    fn cursor_ew_resize(mut self) -> Self {
+        self.style().mouse_cursor = Some(CursorStyle::ResizeLeftRight);
+        self
+    }
+
+    /// Sets cursor style when hovering over an element to `ns-resize`.
+    /// [Docs](https://tailwindcss.com/docs/cursor)
+    fn cursor_ns_resize(mut self) -> Self {
+        self.style().mouse_cursor = Some(CursorStyle::ResizeUpDown);
+        self
+    }
+
     /// Sets cursor style when hovering over an element to `col-resize`.
     /// [Docs](https://tailwindcss.com/docs/cursor)
     fn cursor_col_resize(mut self) -> Self {
-        self.style().mouse_cursor = Some(CursorStyle::ResizeLeftRight);
+        self.style().mouse_cursor = Some(CursorStyle::ResizeColumn);
         self
     }
 
     /// Sets cursor style when hovering over an element to `row-resize`.
     /// [Docs](https://tailwindcss.com/docs/cursor)
     fn cursor_row_resize(mut self) -> Self {
-        self.style().mouse_cursor = Some(CursorStyle::ResizeUpDown);
+        self.style().mouse_cursor = Some(CursorStyle::ResizeRow);
         self
     }

crates/workspace/src/pane_group.rs 🔗

@@ -914,8 +914,8 @@ mod element {
             for (ix, child) in &mut layout.children.iter_mut().enumerate() {
                 if let Some(handle) = child.handle.as_mut() {
                     let cursor_style = match self.axis {
-                        Axis::Vertical => CursorStyle::ResizeUpDown,
-                        Axis::Horizontal => CursorStyle::ResizeLeftRight,
+                        Axis::Vertical => CursorStyle::ResizeRow,
+                        Axis::Horizontal => CursorStyle::ResizeColumn,
                     };
                     cx.set_cursor_style(cursor_style, &handle.hitbox);
                     cx.paint_quad(gpui::fill(