Add additional cursors to gpui2
Co-Authored-By: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com>
This commit is contained in:
parent
0af0c5549c
commit
80ae640060
6 changed files with 276 additions and 8 deletions
|
@ -472,13 +472,27 @@ pub enum PromptLevel {
|
||||||
Critical,
|
Critical,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Change the style of the cursor (pointer)
|
||||||
#[derive(Copy, Clone, Debug)]
|
#[derive(Copy, Clone, Debug)]
|
||||||
pub enum CursorStyle {
|
pub enum CursorStyle {
|
||||||
Arrow,
|
Arrow,
|
||||||
ResizeLeftRight,
|
|
||||||
ResizeUpDown,
|
|
||||||
PointingHand,
|
|
||||||
IBeam,
|
IBeam,
|
||||||
|
Crosshair,
|
||||||
|
ClosedHand,
|
||||||
|
OpenHand,
|
||||||
|
PointingHand,
|
||||||
|
ResizeLeft,
|
||||||
|
ResizeRight,
|
||||||
|
ResizeLeftRight,
|
||||||
|
ResizeUp,
|
||||||
|
ResizeDown,
|
||||||
|
ResizeUpDown,
|
||||||
|
DisappearingItem,
|
||||||
|
IBeamCursorForVerticalLayout,
|
||||||
|
OperationNotAllowed,
|
||||||
|
DragLink,
|
||||||
|
DragCopy,
|
||||||
|
ContextualMenu,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl Default for CursorStyle {
|
impl Default for CursorStyle {
|
||||||
|
|
|
@ -724,16 +724,35 @@ impl Platform for MacPlatform {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Match cusor style to to one of the styles available
|
||||||
|
/// in macOS's [NSCursor](https://developer.apple.com/documentation/appkit/nscursor).
|
||||||
fn set_cursor_style(&self, style: CursorStyle) {
|
fn set_cursor_style(&self, style: CursorStyle) {
|
||||||
unsafe {
|
unsafe {
|
||||||
let new_cursor: id = match style {
|
let new_cursor: id = match style {
|
||||||
CursorStyle::Arrow => msg_send![class!(NSCursor), arrowCursor],
|
CursorStyle::Arrow => msg_send![class!(NSCursor), arrowCursor],
|
||||||
CursorStyle::ResizeLeftRight => {
|
|
||||||
msg_send![class!(NSCursor), resizeLeftRightCursor]
|
|
||||||
}
|
|
||||||
CursorStyle::ResizeUpDown => msg_send![class!(NSCursor), resizeUpDownCursor],
|
|
||||||
CursorStyle::PointingHand => msg_send![class!(NSCursor), pointingHandCursor],
|
|
||||||
CursorStyle::IBeam => msg_send![class!(NSCursor), IBeamCursor],
|
CursorStyle::IBeam => msg_send![class!(NSCursor), IBeamCursor],
|
||||||
|
CursorStyle::Crosshair => msg_send![class!(NSCursor), crosshairCursor],
|
||||||
|
CursorStyle::ClosedHand => msg_send![class!(NSCursor), closedHandCursor],
|
||||||
|
CursorStyle::OpenHand => msg_send![class!(NSCursor), openHandCursor],
|
||||||
|
CursorStyle::PointingHand => msg_send![class!(NSCursor), pointingHandCursor],
|
||||||
|
CursorStyle::ResizeLeft => msg_send![class!(NSCursor), resizeLeftCursor],
|
||||||
|
CursorStyle::ResizeRight => msg_send![class!(NSCursor), resizeRightCursor],
|
||||||
|
CursorStyle::ResizeLeftRight => 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::DisappearingItem => {
|
||||||
|
msg_send![class!(NSCursor), disappearingItemCursor]
|
||||||
|
}
|
||||||
|
CursorStyle::IBeamCursorForVerticalLayout => {
|
||||||
|
msg_send![class!(NSCursor), IBeamCursorForVerticalLayout]
|
||||||
|
}
|
||||||
|
CursorStyle::OperationNotAllowed => {
|
||||||
|
msg_send![class!(NSCursor), operationNotAllowedCursor]
|
||||||
|
}
|
||||||
|
CursorStyle::DragLink => msg_send![class!(NSCursor), dragLinkCursor],
|
||||||
|
CursorStyle::DragCopy => msg_send![class!(NSCursor), dragCopyCursor],
|
||||||
|
CursorStyle::ContextualMenu => msg_send![class!(NSCursor), contextualMenuCursor],
|
||||||
};
|
};
|
||||||
|
|
||||||
let old_cursor: id = msg_send![class!(NSCursor), currentCursor];
|
let old_cursor: id = msg_send![class!(NSCursor), currentCursor];
|
||||||
|
|
|
@ -101,6 +101,125 @@ pub trait Styled: Sized {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `text`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_text(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::IBeam);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `move`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_move(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::ClosedHand);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `not-allowed`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_not_allowed(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::OperationNotAllowed);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `context-menu`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_context_menu(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::ContextualMenu);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `crosshair`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_crosshair(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::Crosshair);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `vertical-text`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_vertical_text(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::IBeamCursorForVerticalLayout);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `alias`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_alias(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::DragLink);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `copy`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_copy(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::DragCopy);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `no-drop`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_no_drop(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::OperationNotAllowed);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `grab`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_grab(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::OpenHand);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `grabbing`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_grabbing(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::ClosedHand);
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
/// 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
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `n-resize`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_n_resize(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::ResizeUp);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `e-resize`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_e_resize(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::ResizeRight);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `s-resize`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_s_resize(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::ResizeDown);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Sets cursor style when hovering over an element to `w-resize`.
|
||||||
|
/// [Docs](https://tailwindcss.com/docs/cursor)
|
||||||
|
fn cursor_w_resize(mut self) -> Self {
|
||||||
|
self.style().mouse_cursor = Some(CursorStyle::ResizeLeft);
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
/// Sets the whitespace of the element to `normal`.
|
/// Sets the whitespace of the element to `normal`.
|
||||||
/// [Docs](https://tailwindcss.com/docs/whitespace#normal)
|
/// [Docs](https://tailwindcss.com/docs/whitespace#normal)
|
||||||
fn whitespace_normal(mut self) -> Self {
|
fn whitespace_normal(mut self) -> Self {
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
mod auto_height_editor;
|
mod auto_height_editor;
|
||||||
|
mod cursor;
|
||||||
mod focus;
|
mod focus;
|
||||||
mod kitchen_sink;
|
mod kitchen_sink;
|
||||||
mod picker;
|
mod picker;
|
||||||
|
@ -7,6 +8,7 @@ mod text;
|
||||||
mod z_index;
|
mod z_index;
|
||||||
|
|
||||||
pub use auto_height_editor::*;
|
pub use auto_height_editor::*;
|
||||||
|
pub use cursor::*;
|
||||||
pub use focus::*;
|
pub use focus::*;
|
||||||
pub use kitchen_sink::*;
|
pub use kitchen_sink::*;
|
||||||
pub use picker::*;
|
pub use picker::*;
|
||||||
|
|
112
crates/storybook2/src/stories/cursor.rs
Normal file
112
crates/storybook2/src/stories/cursor.rs
Normal file
|
@ -0,0 +1,112 @@
|
||||||
|
use gpui::{Div, Render, Stateful};
|
||||||
|
use story::Story;
|
||||||
|
use ui::prelude::*;
|
||||||
|
|
||||||
|
pub struct CursorStory;
|
||||||
|
|
||||||
|
impl Render for CursorStory {
|
||||||
|
type Element = Div;
|
||||||
|
|
||||||
|
fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
|
||||||
|
let all_cursors: [(&str, Box<dyn Fn(Stateful<Div>) -> Stateful<Div>>); 19] = [
|
||||||
|
(
|
||||||
|
"cursor_default",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_default()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_pointer",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_pointer()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_text",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_text()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_move",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_move()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_not_allowed",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_not_allowed()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_context_menu",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_context_menu()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_crosshair",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_crosshair()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_vertical_text",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_vertical_text()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_alias",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_alias()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_copy",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_copy()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_no_drop",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_no_drop()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_grab",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_grab()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_grabbing",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_grabbing()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_col_resize",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_col_resize()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_row_resize",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_row_resize()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_n_resize",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_n_resize()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_e_resize",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_e_resize()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_s_resize",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_s_resize()),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
"cursor_w_resize",
|
||||||
|
Box::new(|el: Stateful<Div>| el.cursor_w_resize()),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
Story::container()
|
||||||
|
.flex()
|
||||||
|
.gap_1()
|
||||||
|
.child(Story::title("cursor"))
|
||||||
|
.children(all_cursors.map(|(name, apply_cursor)| {
|
||||||
|
div().gap_1().flex().text_color(gpui::white()).child(
|
||||||
|
div()
|
||||||
|
.flex()
|
||||||
|
.items_center()
|
||||||
|
.justify_center()
|
||||||
|
.id(name)
|
||||||
|
.map(apply_cursor)
|
||||||
|
.w_64()
|
||||||
|
.h_8()
|
||||||
|
.bg(gpui::red())
|
||||||
|
.hover(|style| style.bg(gpui::blue()))
|
||||||
|
.active(|style| style.bg(gpui::green()))
|
||||||
|
.text_sm()
|
||||||
|
.child(Story::label(name)),
|
||||||
|
)
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
|
@ -17,6 +17,7 @@ pub enum ComponentStory {
|
||||||
Button,
|
Button,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
ContextMenu,
|
ContextMenu,
|
||||||
|
Cursor,
|
||||||
Disclosure,
|
Disclosure,
|
||||||
Focus,
|
Focus,
|
||||||
Icon,
|
Icon,
|
||||||
|
@ -40,6 +41,7 @@ impl ComponentStory {
|
||||||
Self::Button => cx.build_view(|_| ui::ButtonStory).into(),
|
Self::Button => cx.build_view(|_| ui::ButtonStory).into(),
|
||||||
Self::Checkbox => cx.build_view(|_| ui::CheckboxStory).into(),
|
Self::Checkbox => cx.build_view(|_| ui::CheckboxStory).into(),
|
||||||
Self::ContextMenu => cx.build_view(|_| ui::ContextMenuStory).into(),
|
Self::ContextMenu => cx.build_view(|_| ui::ContextMenuStory).into(),
|
||||||
|
Self::Cursor => cx.build_view(|_| crate::stories::CursorStory).into(),
|
||||||
Self::Disclosure => cx.build_view(|_| ui::DisclosureStory).into(),
|
Self::Disclosure => cx.build_view(|_| ui::DisclosureStory).into(),
|
||||||
Self::Focus => FocusStory::view(cx).into(),
|
Self::Focus => FocusStory::view(cx).into(),
|
||||||
Self::Icon => cx.build_view(|_| ui::IconStory).into(),
|
Self::Icon => cx.build_view(|_| ui::IconStory).into(),
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue