Make widget spinners horizontal

[AaronVanGeffen]

The current spinner widgets are rather tiny, leading to unfortunate misclicks and generally making them a pain to use. I'm talking, of course, about widgets like:

We can improve them dramatically by making the buttons horizontal, thereby increasing the click areas:

It appears these buttons aren't properly vertically aligned yet, but it works as a proof of concept. If we stick with the triangles, the widgets would currently look like:

I'd like some input before I start converting all spinner widgets… Your thoughts?

[Broxzier]

Another idea:

This makes it much less likely you accidentally click the wrong button.

[AaronVanGeffen]

Hmm… I agree that would prevent more misclicks, but it would also require more horizontal movement when you do want to adjust the value… I'm not convinced yet, but I like the idea.

It would require the value paint code for each of the widgets to be adjusted for the horizontal (left) offset as well, but that's a small price to pay for usability improvement, of course.

[stavrossk]

I like @AaronVanGeffen 's idea, the buttons are much easier to click on when they are aligned horizontally! I think the up/down arrows in the first picture are too small.

[Broxzier]

Having the buttons outside of the box looks even better in my opinion, and allows them to be bigger without increasing the height too much.

[Gymnasiast]

I prefer @Broxzier 's - and + order. It's also in line with how GTK+ does it:

I have no strong preference as to where to put the - and + buttons. I do think we should use - and + symbols, and that the minus should come first.

[IntelOrca]

The + and - buttons only make sense for numerical spinners. I think the only non-numerical spinner we have is the change ride type one.

Interestingly the land tool has this style with the subtract and positive buttons being on opposite sides.

[Gymnasiast]

I think the only non-numerical spinner we have is the change ride type one.

That one is a weird hybrid of a dropdown and a spinner. It should probably just be a dropdown.

[IntelOrca]

@Gymnasiast It will require implementing scrolling for dropdowns to handle the large number of items there are.

[AaronVanGeffen]

It will require implementing scrolling for dropdowns to handle the large number of items there are.

It looks like it fits as-is:

If you prefer to keep the spinners around, we could use different captions for the ride type selection spinner, for now. Perhaps the horizontal scrollbar's?

Having the buttons outside of the box looks even better in my opinion, and allows them to be bigger without increasing the height too much.

Agreed. I would prefer them to be gapless though, like in the GTK+ example:

[IntelOrca]

@AaronVanGeffen oh yes, the grid text dropdown must have been introduced after it got changed to a spinner. It should be changed back.

[AaronVanGeffen]

Done. We also should really look into sorting the dropdown in question... It'll require some additional bookkeeping, but it's doable.

[pizza2004]

I like the idea of the buttons being at either end personally. I think it gives the best idea of taking away and adding to the box, which makes it the most intuitively pleasing in my mind.

[Gymnasiast]

@Gymnasiast It will require implementing scrolling for dropdowns to handle the large number of items there are.

No, it won't. Dropdowns can handle 128 items, there are 91 ride types (including unused slots inbetween).

@AaronVanGeffen oh yes, the grid text dropdown must have been introduced after it got changed to a spinner. It should be changed back.

Change back? It originally was a spinner. Then wolfreak99 turned it into a spinner/dropdown hybrid. It should not be changed back into a spinner, it should be changed into a normal dropdown (which Aaron has done).

[AaronVanGeffen]

Change back? It originally was a spinner. Then wolfreak99 turned it into a spinner/dropdown hybrid. It should not be changed back into a spinner, it should be changed into a normal dropdown.

That's how I took @IntelOrca's comment. See 17500ce. I'll probably split it off to another PR.

[Gymnasiast]

Removing the Apply button does increase the chance of unintended stuff happening is the user misclicks the dropdown. And since changing ride type is quite a hack, the consequences can be very annoying. I would recommend putting it back.

[AaronVanGeffen]

Hmm, but wasn't the whole reason for it to be introduced the fact that you didn't have an overview of all ride types at the time? You mentioned non-standard widget types elsewhere in the comments… We don't wait for confirmation for any other dropdowns, either. I personally don't think we should put it back.

[Gymnasiast]

I think this is a special case, though, given its consequences when one selects the wrong option.
But if I'm the only one with that opinion, I'm not going to oppose it.

[Gymnasiast]

That's how I took @IntelOrca's comment. See 17500ce. I'll probably split it off to another PR.

No need for that, it needed changing anyway, might as well do that in a PR that tackles spinners. Unless you expect this PR to take a lot longer, in which case: be my guest.

[wolfreak99]

I'll miss the idea of the spinners, it made it very useful for experimenting with ride types, especially on flat rides.
Sure, maybe if you only used it when changing a rollercoaster track to another, It would be useful to automatically select what you drop down to and the buttons would just be extra. But being able to select the ride type when on flat rides to experiment with how they react, having an option that lets you iterate to the next option reduces the need for mouse movement: You move left 40 pixels, click, move right 40 pixels, click. It therefore provides quicker changing and also more easier to do.

[Gymnasiast]

@wolfreak99 The thing is that it is a very non-standard widget. I don't think your scenario will be very common, and for most cases having a recognisable widget that works as one would expect will save for more time.

[Broxzier]

@IntelOrca's comment gave me an idea, but maybe it deserved its own PR. Scrolling while hovering over a spinner could increase and decrease its value, much like how the land and water tool change the tool size.

[AaronVanGeffen]

No need for that, it needed changing anyway, might as well do that in a PR that tackles spinners. Unless you expect this PR to take a lot longer, in which case: be my guest.

Thing is, there's still some ongoing discussion about the spinners' appearance, which this distracts from. I'd also like to tackle the list being ordered orthographically as well (depending on the language, of course), which would fit with such a PR.

Scrolling while hovering over a spinner could increase and decrease its value, much like how the land and water tool change the tool size.

I like the idea! Probably best in its own PR, yes — although it's likely to conflict with this, and perhaps #5993 …

[AaronVanGeffen]

The work on the ride type selection widget has been split off to its own PR, #7581. Let's get the focus for this PR back to the spinners. We need to settle on a style. As far as I can tell, the main contenders are:

1. 

2. 

3. 

4. 

Feel free to debate. I'm hoping we'll reach a consensus, but if not, I'd like to wrap up and change the spinners in accordance with whichever is the most popular one after a few days.

[qwertychouskie]

I like how the buttons are in the area in the 3rd one (looks more polished) though not sure about having the buttons on opposite sides. EDIT: Looks like there is now a fourth option which is basically what I described. I vote 4 :)

[janzev]

I would prefer the fourth option. There the buttons have a "clickable" size and it looks quite similar to the original buttons. But I would suggest to change the position of "+" and "-" so that the "-" comes first.

[wolfreak99]

I like the 4th. The 3rd is too much mouse movement, unless the size of the text portion was reduced down to maybe 30% the original size.

[Gymnasiast]

I tested a lot of spinners. Most of them work correctly.
It looks like you forgot to modify one:

[AaronVanGeffen]

@Gymnasiast Nice catch! I've pushed a fix.

Note to self: squash some commits before merging.

[Gymnasiast]

Getest en goed bevonden. ^^

[marijnvdwerf]

Not a fan of calling it a 'spinner'. In present-day interaction design that sounds more like some progress indicator than a numeric input. Apple's HIG uses the term 'stepper', and Microsofts Fluent guidelines have no mention of a 'Spinner' either.

I'd be fine with something like 'numeric input' or 'numeric stepper', but 'spinner' is too vague for me.

[AaronVanGeffen]

@marijnvdwerf That's a little surprising, considering we've been calling the widgets such for years. I'm not against renaming the lot to 'stepper', though. Calling them 'numeric stepper' doesn't quite cover it, though, as it's used for non-numeric (but enumerable) things like months as well.

[IntelOrca]

@marijnvdwerf but that is what they are called:
https://en.wikipedia.org/wiki/Spinner_(computing)

Microsoft call them up down controls which is not as nice to say or write.

[Gymnasiast]

The only people who have to understand what a spinner is are people touching the code, not the general public. Just keep it as 'spinner'.

[AaronVanGeffen]

I do see @marijnvdwerf 's point, though. The spinner terminology makes sense for the up/down widgets, but not for the widgets we've implemented now. From what I can tell, he's right that 'spinner' is a common term for the new ones.

It's a small change that I don't mind making. Should be relatively painless.

[marijnvdwerf]

@IntelOrca That article has no sources. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number talks about the same control, but 'spinner' is never mentioned.

@AaronVanGeffen It seems rather odd to use a +/- control to select a month; wouldn't a dropdown be more suited for that?

[AaronVanGeffen]

It seems rather odd to use a +/- control to select a month; wouldn't a dropdown be more suited for that?

I agree that it would, but I also think that's a change for another PR.

[IntelOrca]

We can just vote for it. Thumbs up for Spinner, thumbs down for Stepper.

[qwertychouskie]

Gotta have them [w/f]idget spinners :)

[Gymnasiast]

This is ridiculous. ONE person is in favour of changing to 'stepper', many are against it, and you still changed it.

[AaronVanGeffen]

I, for one, thought Ted was joking when he proposed a vote. The terminology change really isn't a big deal to me. It'd be equally farcical to revert it now. Can we please just let this go?

[Gymnasiast]

Even before Ted proposed a vote (joking or not), it was Marijn in favour, Ted and I against. More people against than in favour.

[AaronVanGeffen]

Evidently I thought the idea had merit, otherwise I wouldn't have changed it… At worst, that's a tie. The spinner analogy works for vertical widgets, not horizontal ones, I think.

I really didn't want to drag this PR on for a terminology change, though. If I have merged it too quickly, I apologise.