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 <mikayla@zed.dev>
This commit is contained in:
Soroush Mirzaei 2024-05-06 17:22:56 -04:00 committed by GitHub
parent f3fffc25c4
commit da6a6ec36b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 34 additions and 6 deletions

View File

@ -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,

View File

@ -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",

View File

@ -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]
}

View File

@ -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
}

View File

@ -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(