Cursors for panel resizing

[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.

[mr21]

Hi :), thanks a lot for your attention, you have understood very well the problem! (having cursor: on the element is not enough).

I'm trying to avoid * CSS operator as much as possible. It's probably not optimised... and having one * per cursor seems to me not good... Too magic to not be CPU expensive...

The transparent <div> covering the app with the a dynamic cursor, is the best idea to me, but it will add some code.. and it can bring some bug with ondrop events etc. I don't know.

But i'm agree, having some cursors will be great :D

[1j01]

I tried out the pseudo element solution I mentioned, and it works: https://jsfiddle.net/1j01/2d267n4z/
(just needs fixed, not absolute like I said)

I'd actually recommend it, it's pretty simple:

.resize-handle:active::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

Although z-indexes might be a problem, in which case you might have to go with a <div>...
Something like so: https://jsfiddle.net/1j01/t2y2rhgr/
(or another solution, such as with the * selectors)

[mr21]

Well thank you a lot :)
Funny to see that you can send your jsfiddle to jsfiddle (because they have the same issue..)

I will have to add these changes in this folder https://github.com/gridsound/gs-ui-components/tree/master/gsuiPanels.
You are obviously welcome to performs a PR if you want and have the time.

I don't understand this comment of your jsfiddle

// don't e.preventDefault() here; that way we get mousemove events outside the window,
// so dragging to the edge of the page will land it at the max

[1j01]

Funny to see that you can send your jsfiddle to jsfiddle (because they have the same issue..)

I know, right? 😃

I don't understand this comment of your jsfiddle

By default the browser* will give you mousemove and mouseup events outside the window (or iframe) for the duration of a mouse gesture, but if you call preventDefault() on mousedown it doesn't.
So your mouse leaving the window can be a problem when the the window isn't maximized:

*unless that browser is IE. But IE has setCapture.

And by "landing at max", I mean dragging a resizer maximally towards the edge of the window, generally minimizing a pane. Your UI is actually rather resilient to this problem by simply having large minimum pane sizes / distances from the edges of the window:

Windows actually has this problem worse, with the taskbar - because even though they have a minimum width, they inexplicably don't respond to mouse movement within that minimum range:

😖 ...I need to switch operating systems.

[mr21]

Hi @1j01, to be able to catch the mousemove/up events outside the window, I have just put the events directly on document instead of document.body and it's works fine :)

[mr21]

Thanks again for your help, your animated screeshots and jsfiddle are very helpful!