Ticket #4256 (new enhancement)

Opened 3 months ago

Last modified 3 months ago

[PATCH] Panel scrollbars + prettier scrollbars in dialogs

Reported by: kybl Owned by:
Priority: minor Milestone: Future Releases
Component: mc-core Version: master
Keywords: Cc:
Blocked By: Blocking:
Branch state: no branch Votes for changeset:

Description

Hi, I'm coming with a patch with improving UI regarding scrollbars. It actually brings two things:

1) Improved scrollbar in a list box

The current scrollbar in a list box is just an asterisk. My proposal is to change them to be all more useful + nicer + consistent with scrollbars from other programs:

  • instead of one asterisk character, the scrollbar is a proper line created with Unicode block characters (in ASCII mode, it is replaced by # char)
  • the scroll box length is proportional to the window size and the number of items. The more we can see, the longer is the scroll box. For example, if there are 30 items and we can see 10 items, the scroll box will take 1/3 of the window height. This is consistent with how usual GUI programs show scrollbars.
  • position of the current asterisk is based on the current cursor position. In this patch, the position of the scroll box is based on the window view position. This is also for consistency with other programs (and usability as well)
  • for more smoothness, the scroll box uses half-box Unicode character as well. So in the one physical character, there could be a full box, half box, or no box at all.

2) Scrollbars in the main panels

This patch also brings a scrollbar on the right side, next to each main panel. The main purpose is better UX; one could quickly say if there are 20, 100 or 1000 files in the directory and the cursor is now.

Scrollbar has similar properties as a scrollbar in the list box, except the "grey" background created with Unicode block characters (it would not be so nice to not have the background there), and no half-boxes (because of the background). I was inspired by Far Manager here.

Scrollbars in the main panels can be turned off or on in the "Layout" preferences. Currently, it is on by default.

Others

From the technical point of view, it introduces a new widget WScrollbar.

See screenshot before:after here.

Opinions?

Attachments

scrollbars_improvements.patch (20.8 KB) - added by kybl 3 months ago.
Patch
scrollbars-comparison.png (176.8 KB) - added by kybl 3 months ago.
Comparison of the current state (top) and the new one (bottom)
far-command-history.png (26.1 KB) - added by zaytsev 3 months ago.
another-types.png (42.3 KB) - added by kybl 3 months ago.
Different types of listbox scrollbars
listbox-3-4-char.png (27.0 KB) - added by kybl 3 months ago.
Scrollbar with 3/4 chars

Change History

Changed 3 months ago by kybl

Patch

Changed 3 months ago by kybl

Comparison of the current state (top) and the new one (bottom)

Changed 3 months ago by zaytsev

comment:1 Changed 3 months ago by zaytsev

I very much like the scrollbars in the panels! The look very nice and are useful to see at a glance how much files are there.

By contrast, the scrollbars of the listbox I don't think are an improvement (visually). Please check the screenshot of FAR, which I actually quite like. You will see that their scrollbars are almost like the current mc scrollbars, only then have an arguably nicer indicator - a dark block instead of star and light blocks as background. The arrows are positioned at the top - 1 and bottom + 1 (you moved them to top & bottom), and the scrollbar itself is on the dialog border, and not inside the dialog (as before). You also don't have light/dark blocks there.

Is there any reason that I don't understand as to why you didn't do the same as you did for panels? I thought this would have been really great...

comment:2 in reply to: ↑ description ; follow-up: ↓ 4 Changed 3 months ago by andrew_b

Replying to kybl:

  • instead of one asterisk character, the scrollbar is a proper line created with Unicode block characters

[...]

  • for more smoothness, the scroll box uses half-box Unicode character as well. So in the one physical character, there could be a full box, half box, or no box at all.

Please avoid any hardcoded Unicode characters for decoration. Use skin engine instead.

2) Scrollbars in the main panels

#1483.

From the technical point of view, it introduces a new widget WScrollbar.

That's a correct way. But WScrollbar is a standalone widget. It's used with another standalone widget. Both those widgets should be joined to a group.

For example, WPanel should be reimplemented as a group with at least two widgets: WFileList and one of two WScrollbar(s). WListbox too: say WListView and one or two WScrollbar(s).

Changed 3 months ago by kybl

Different types of listbox scrollbars

comment:3 Changed 3 months ago by kybl

Replying to zaytsev:

By contrast, the scrollbars of the listbox I don't think are an improvement (visually). Please check the screenshot of FAR, which I actually quite like. You will see that their scrollbars are almost like the current mc scrollbars, only then have an arguably nicer indicator - a dark block instead of star and light blocks as background. The arrows are positioned at the top - 1 and bottom + 1 (you moved them to top & bottom), and the scrollbar itself is on the dialog border, and not inside the dialog (as before). You also don't have light/dark blocks there.
Is there any reason that I don't understand as to why you didn't do the same as you did for panels? I thought this would have been really great...

Thanks for the comment! The reason why I made it in this way is Far Manager dialog has padding. So the scrollbar is not directly on the side, it is clear it is a scrollbar. In Midnight Commander, there is no window padding so the black scroll box can look weird (for example next to shadow).

However, it is quite a good idea to make the same style as in the panel. There is not possible to use granularity though but I like it more as well.

See the new screenshot: On the left is your proposal but with the current style. The center is the same with the same style as the panel (so actually exactly your proposal). On the right, there is the same as the center one but from top-1 to bottom+1. Personally, I like the center and right style.

Last edited 3 months ago by kybl (previous) (diff)

comment:4 in reply to: ↑ 2 ; follow-up: ↓ 5 Changed 3 months ago by kybl

Replying to andrew_b:

Replying to kybl:

  • instead of one asterisk character, the scrollbar is a proper line created with Unicode block characters

[...]

  • for more smoothness, the scroll box uses half-box Unicode character as well. So in the one physical character, there could be a full box, half box, or no box at all.

Please avoid any hardcoded Unicode characters for decoration. Use skin engine instead.

You are right. I'll do that.

2) Scrollbars in the main panels

#1483.

Whoa! That is a really old try. I hope I could finish this.

From the technical point of view, it introduces a new widget WScrollbar.

That's a correct way. But WScrollbar is a standalone widget. It's used with another standalone widget. Both those widgets should be joined to a group.

For example, WPanel should be reimplemented as a group with at least two widgets: WFileList and one of two WScrollbar(s). WListbox too: say WListView and one or two WScrollbar(s).

Yeah, that could be better. Not sure if I'm familiar enough how to do that but I can try :-)

comment:5 in reply to: ↑ 4 Changed 3 months ago by andrew_b

Replying to kybl:

For example, WPanel should be reimplemented as a group with at least two widgets: WFileList and one of two WScrollbar(s). WListbox too: say WListView and one or two WScrollbar(s).

Yeah, that could be better. Not sure if I'm familiar enough how to do that but I can try :-)

As an exercise, you can play with the WChattrBoxes object (src/filemanager/chattr.c). WChattrBoxes is an a group of WCheck buttons, and I believe it's no so hard to add a scrollbar there.

comment:6 Changed 3 months ago by ossi

the "displaced" scroll bar looks really weird.
but it's true that the one in the frame doesn't compose well with the shadow. so instead of the full block you could try left-three-quarters (0x258A) (and inverse lower-one-quarter (0x2582) at the bottom, if used anywhere).

don't put the arrows outside the area the scrollbar applies to (as you did in the panels) - that looks weird and unnecessarily interferes with the frame drawing.

btw, at least redhat-based distros have been carrying some scrollbars patch for a very long time.

comment:7 Changed 3 months ago by zaytsev

Visually, I really like the center version. I think it looks totally awesome. But now I understand your logic. Maybe you could indeed try the suggestion by ossi - would be interesting to see if it looks better or not?

And in as far as panels are concerned, yes, the bottom part overlaps with the widget and it feels weird, I didn't notice this initially, but the top one I think is OK and looks good?

Changed 3 months ago by kybl

Scrollbar with 3/4 chars

comment:8 Changed 3 months ago by kybl

Thanks for all the comments. I tried the ossi's idea with 3/4 but it seems weird because it is misplaced (see screenshot; not sure if I understood right the idea).

don't put the arrows outside the area the scrollbar applies to (as you did in the panels) - that looks weird and unnecessarily interferes with the frame drawing.

Ok, I did not agree initially but when I'm looking onto it more, I agree :-)

Visually, I really like the center version.

It seems it is the winner of this mini-poll :-) I'm going to implement this version.

comment:9 Changed 3 months ago by ossi

yeah, you're right - the arrows emphasize the asymmetry to an unbearable level. you could try 0x275A instead and see whether it's wide enough in a selection of fonts.
one could also try entirely different shapes, e.g. 0x2666.

another way to approach this is to fix the shadow problem at the root: by adding padding. there isn't really a reason for the combo box popups to have none - in fact, the history popups in the various dialogs look kinda jarring due to the inconsistency once i start paying attention.

Note: See TracTickets for help on using tickets.