From da6a6ec36b2ae376c0ac083a5bc5e715d3c0467d Mon Sep 17 00:00:00 2001 From: Soroush Mirzaei Date: Mon, 6 May 2024 17:22:56 -0400 Subject: [PATCH] Add col/row resize cursor styles (#11406) 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 --- 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(-) diff --git a/crates/gpui/src/platform.rs b/crates/gpui/src/platform.rs index 6c234c3c34fea7f1f5fda9806de6d710ab26b4b4..cc4f23cff285ca25ece24253c6f289e8b710d921 100644 --- a/crates/gpui/src/platform.rs +++ b/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, diff --git a/crates/gpui/src/platform/linux/platform.rs b/crates/gpui/src/platform/linux/platform.rs index c1f6df1593bbb191cf84c463c214c81822087a99..1b5e739928b8d19f96258cc4de4f5cd1ce099f51 100644 --- a/crates/gpui/src/platform/linux/platform.rs +++ b/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", diff --git a/crates/gpui/src/platform/mac/platform.rs b/crates/gpui/src/platform/mac/platform.rs index 32d49cccbd833ac50e26252e15fb0d3685f557ac..b5b220d942a780d859847ccddda93b5d23ba19a8 100644 --- a/crates/gpui/src/platform/mac/platform.rs +++ b/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] } diff --git a/crates/gpui/src/styled.rs b/crates/gpui/src/styled.rs index 9705f4dd13e138b4f983303cd475ffaa9d62f4cd..c5ddd1f8f8499953ac1c2eebac21edf9d54813e0 100644 --- a/crates/gpui/src/styled.rs +++ b/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 } diff --git a/crates/workspace/src/pane_group.rs b/crates/workspace/src/pane_group.rs index 1c9e1ef9f06056c66691937d396436eeda4e1f29..1a057bc20aaf7d131afddab9369cfcc967a1191d 100644 --- a/crates/workspace/src/pane_group.rs +++ b/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(