Scroll Bars in Leo

34 views
Skip to first unread message

Thomas Passin

unread,
Oct 29, 2022, 10:00:50 AM10/29/22
to leo-editor
I have an issue with Leo's scroll bars, especially the vertical scrollbar for the outline view.  Most of the more recent themes don't show an arrow at the ends of the scrollbar region.  
Scroll bars normally have two clickable regions, the line-by-line region and the page-by-page region.  The line-by-line region usually shows an arrow to click, except for these Leo themes.  The page-by-page region is everywhere in the scollbar area that isn't the handle or the arrows.

With invisible arrows, I can't always tell if I'm clicking in the page-by-page or the line-by-line, so sometimes the outline will unexpectedly jump by a page when I wanted a line.  I really dislike that.  This happens with the newer "solarized"-based themes including Leo's default theme, and my own themes (the ones with "tbp" in their names) that are derived from the default.

I have experimented with the CSS styles for the parts of the scrollbars, and it's very tricky.  There are very few CSS properties that you can change and still have the arrows.  Basically, without adding CSS properties to the stylesheets, Qt figures out the right colors, etc., to match your page colors, and sets up arrows and borders to suit.  But change one color, padding, margin, etc, and then Qt gives up and makes you specify everything yourself.  And you won't get an arrow.  You can arrange to have a box with a dot where the arrow normally is, and you can provide your own arrow image.  It's tricky but doable to get that set up.

The two exceptions I have found are that you can change the background color of the page-by-page regions, and you can change the width of the scrollbars.

To avoid making this post even longer, I'll give examples in my next post, and then ask readers for their opinions and suggestions.

Thomas Passin

unread,
Oct 29, 2022, 10:21:00 AM10/29/22
to leo-editor
Here is a screen shot of the default Leo theme, showing the scrollbars with no arrows (default_scroll_bars.png).  Next is the same theme with all CSS styling removed ( default-theme-no-scrollbar-css).  Apparently Qt could not match the background color so it provided a hatched appearance for the page-by-page areas.  Qt applies a reasonable solid color for some themes but hatched like this for others.  Notice that we now have arrows at the ends.

Next is the same theme but has specified a color for the page-by-page areas (default-theme-page-by-page-color.png).

I have also added an image from a Qt tutorial on styling scrollbars (stylesheet-scrollbar.png).  It's for a horizontal scrollbar and shows the line-by-line areas but not with actual arrows.  Leo themes could do something similar - I have worked out the combination of margins and heights to make it work - but I like arrows better.


stylesheet-scrollbar1[1].png
default_scroll_bars.png
default-theme-page-by-page-color.png
default-theme-no-scrollbar-css.png

Thomas Passin

unread,
Oct 29, 2022, 10:41:25 AM10/29/22
to leo-editor
I would like to discuss what, if anything, Leo's standard themes should do about the arrow issue.  Of course, it's always possible to modify any theme and put it into your own .leo/themes directory, but I'd like to improve a new or non-developer user's experience with Leo.  That makes me want to have something visible in the line-by-line areas.

A full solution would require supplying our own arrows and styling all the parts of the scrollbars.  I don't especially want to personally create up-, down-, left- and right- arrowhead images (maybe with various colors to suit various themes), and I would be reasonably well satisfied with the style shown in default-theme-page-by-page-color screenshot, which I'm repeating here.  An alternative would be to style all the scrollbar pieces ourselves and accept having a line-by-line region with a dot but not an arrow.

If there is some agreement, I would update the following themes in Leo's directory:

- DefaultTheme.leo
- EKRDark.leo
- minimal-ui-tbp_dark_solarized.leo
- minimal-ui-tbp_light_quasi-solarized.leo
- minimal-ui-tbp_light_solarized.leo
- tbp_dark.leo

I would leave the tbp-xxx-solarized themes alone.  They look the same as the current minimal-ui-tbp-xxx-solarized themes (although their overall CSS is more detailed than it needs to be), so anyone who uses the tbp-solarized themes but prefers the current scrollbar appearance could use them.

Please reply with your opinions and suggestions.
default-theme-page-by-page-color.png

Edward K. Ream

unread,
Oct 29, 2022, 9:22:14 PM10/29/22
to leo-e...@googlegroups.com
On Sat, Oct 29, 2022 at 9:41 AM Thomas Passin <tbp1...@gmail.com> wrote:

I would like to discuss what, if anything, Leo's standard themes should do about the arrow issue. 

The arrows seem like a waste of space to me. But I suppose the arrows do give a bit more control.

I would rather not change the existing stylesheets, but feel free to create one or more PRs that add new themes.

Edward

Thomas Passin

unread,
Oct 30, 2022, 12:09:56 AM10/30/22
to leo-editor
The arrows are standard everywhere else, and there's something to be said for being consistent with normal practice.  At first I liked the look with them not present.  It's just that I've had too much trouble clicking in an inactive place, or having the pane jump by a page when I expected a line or vice-versa.  That's what got me looking at it again.

I'll wait for a bit to see if anyone else wants to comment before deciding what to do.  If nobody cares, I can just change my own versions of these outlines in ~/.leo/themes.

Reply all
Reply to author
Forward
0 new messages