Skip to content

Cursors for panel resizing #28

@1j01

Description

@1j01

CSS cursors should make the app feel more solid, making the act of resizing panes more familiar.

MDN docs with cursor value previews

I'd go with ew-resize (horizontal) and ns-resize (vertical).
There's also col-resize and row-resize, but they don't look as good on Windows, and it sounds like semantically they're intended for tables, like resizing column headers.


Oh yeah, and if you just apply the cursor to the resizer element, it'll have a problem where it'll flicker between cursors as the resizer element catches up with the cursor, and lags behind, alternately.
So what you can do is add a class to the body on mousedown and remove it on mouseup.
with e.g. .horizontal-resize * { pointer: ew-resize !important }

Or another option, that I'm just thinking of now, might be to add a pseudo element to the resizer on :active that's position: absolute and fills the whole page. That'd be a fun way to do it!
But um, the other way is probably more practical.

setCapture would be helpful if it had decent browser support.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions