-
-
Notifications
You must be signed in to change notification settings - Fork 144
Description
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.