Author Topic: Improve Scrollbars  (Read 17032 times)

redwing

  • Guest
Read some posts catching up how the request of auto-open scrollbars has turned into the current narrow-scrollbar option. I think the user setting for unobtrusive scrollbars is definitely a great addition to v3. But there's still some room for improvement.

1.
for scrollbars i have added support for lowlighting inactive scrollbar sliders ie. the lowlight colours will show unless you click on the slider and drag it

With all due respect, testing this out, I don't see a big use for this in the current state.
The lowlight color determines the visibility of the scrollbar and where you can 'grab' it.
Only after you 'managed' that, the color changes to highlight. I honestly don't see a big advantage in that.

An idea coming up, is that this could be a lot more useful if the state would go from lowlight to highlight, as soon as your mouse enters the corresponding pane.
Then by default the scrollbars could be unobtrusive lowlight (or theoretically even invisible), and become clearly visible and grabbable at hover-over.

the scrollbars are done in the way iTunes does. Personally i cant stand the way windows flashes the scrollbars when you mouse over and much prefer the iTunes approach.
Even if you dont agree with that, the lowlight in combnation with the new scrollbar ScrollBarLowlightNarrowOnly setting is still useful if you only want to blend scrollbars more into the panel when configured using narrow scrollbars

I don't think that reasoning makes much sense. iTunes uses thick scrollbars on its sole "light" skin: completely different for MB's dark skins with narrow scrollbar. Compare scrollbars of iTunes (left) and DarkRed Flat skin (right):



MB users first have to find scrollbar slider to grab it. Thus the slider needs to highlight not after it's grabbed as of now but whenever the mouse cursor moves around any (invisible) part of scrollbar or panel. This functionality would allow skinners to make the scrollbars more blended into the background without worrying about their visibility to users. Then it would create more unobtrusive look for MB with regard to scrollbars. Also if skinners use too bright highlight color, users would complain about flashing.

2. For skins with the value of ScrollbarMargin setting greater than 5, enabling narrow scrollbar option actually results in a thicker scrollbar. Default (left) and narrow scrollbar option (right):
 


3.
With MB v2, the element id="ScrollBarMargin" makes it possible to have a (visually) thinner scroll bar, but it doesn't affect the background of the scroll bar which will keep the same width as it had before.
It would be nice for v3 that when the scroll bar is set to be thinner, it's background gets thinner too.
while that would be possible for v3, i feel its too much to do/ risky for introducing bugs at this point

I fully understand the risk, especially with completely flexible placement of panels with v3. But how about simply drawing it narrowly keeping the original width instead of physically making scrollbars thinner?



Because of the fixed width of the background, skinners currently have to choose either think ones with background or narrower ones without background. It would provide more choices in the middle.

redwing

  • Guest
Regarding #2, the reason was bdr of Panel.ScrollBar.Default was the same as the panel background. If it's different, the width of scrollbar is the same 3px both with normal and narrow scrollbar setting.

Bee-liever

  • Member
  • Sr. Member
  • *****
  • Posts: 3840
  • MB Version: 3.6.8878 P
to help clarify what I said here - http://getmusicbee.com/forum/index.php?topic=15050.msg104284#msg104284

Using Arsenic skin as example, what I'd like to have for my lowlight scrollbars, becomes too light when turned into narrow scrollbars


If I then use the values for 'default' as my 'lowlight' values, and some stronger contrasts for my default scrollbars, I get narrow scrollbars that work well, but are nowhere near close to blending in for standard scrollbars


And of course, this is what you get in 2.5 if you were to use those values
Last Edit: February 12, 2016, 04:20:49 AM by Bee-liever
MusicBee and my library - Making bee-utiful music together

redwing

  • Guest
what I'd like to have for my lowlight scrollbars, becomes too light when turned into narrow scrollbars

But that's what the setting is supposed to do: blend it more into the bg of the panel. What if the proposed new functionality was implemented and the users had no problem finding the slider when they want to grab it? Would that be still an issue?

Bee-liever

  • Member
  • Sr. Member
  • *****
  • Posts: 3840
  • MB Version: 3.6.8878 P
what I'd like to have for my lowlight scrollbars, becomes too light when turned into narrow scrollbars

But that's what the setting is supposed to do: blend it more into the bg of the panel. What if the proposed new functionality was implemented and the users had no problem finding the slider when they want to grab it? Would that be still an issue?

As you have suggested, having the scrollbar change to the default colouring when mousing over the panel is a good idea, although I would limit it to mouse-over of the scroll bar background.
But that doesn't fix the problem that lowlight colours picked to blend into the background with normal scrollbars become almost invisible when narrow scrollbars are activated.

My idea suggestion of having
<element id="ScrollBarBorderNarrowOnly">true</element>
would allow you to have a bright contrasting border show up when grabbing the narrow scrollbar that won't show when using the standard scrollbar.
Unfortunately, it doesn't help in MB2.5 or if you still use scrollbar thumbs.
The only way around that, that I can see anyway, is to scrap the Lowlight element, return to using default as the main view and add a Highlight element that shows when grabbing the scrollbar.

As it currently stands, you basically have to decide if want the skin to use standard scrollbars, narrow scrollbars or have compatibility with 2.5.  Because you can't have a skin that works well in all three areas.
MusicBee and my library - Making bee-utiful music together

redwing

  • Guest
My idea suggestion of having
<element id="ScrollBarBorderNarrowOnly">true</element>
would allow you to have a bright contrasting border show up when grabbing the narrow scrollbar that won't show when using the standard scrollbar.

Do you mean something like this, if combined with my proposal?



If that's what you mean, I'd welcome such two-step highlighting functionality. Actually some apps like firefox are already using it: light slider color gets darker with the mouse over and then more darker when grabbed. Maybe it even can be a default setting, giving skinners optional overrides.

As for the 2.5 compatibility issue, what causes it? Is that because v3 allows more flexible panel arrangement?

Bee-liever

  • Member
  • Sr. Member
  • *****
  • Posts: 3840
  • MB Version: 3.6.8878 P
Do you mean something like this, if combined with my proposal?
No I didn't.  Mine was a proposed work-around to the keep the standard width scrollbars reasonably coloured but allow the narrow scrollbars to be brighter.
But your suggestion sure looks good.

As for the 2.5 compatibility issue, what causes it? Is that because v3 allows more flexible panel arrangement?

Nothing to do with v3 panel arrangements, it's the problem of v2.5 using
<element id="Panel.ScrollBar.Default" bg="XXX" bg2="XXX" bdr="XXXX" />
as the main colours while v3 uses
<element id="Panel.ScrollBar.Lowlight" bg="XXX" bg2="XXX" bdr="XXXX" />
for theses colours (if used).

The ScrollBar.Default colours in v3 tend to brighter than you would normally use, so they can be seen properly when using narrow scrollbars.
MusicBee and my library - Making bee-utiful music together

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34406
i will look at this after some other enhancements i was planning, so probably next weekend

redwing

  • Guest
i will look at this after some other enhancements i was planning, so probably next weekend

Thanks!

endeavour1934

  • Full Member
  • ***
  • Posts: 207
In the newest version of DarkRED I've made the scrollbars thicker and more visible, because now I believe that superthin scrollbars only make sense if they become thicker on mouseover.

Now I actually like them more, and with the lowlight (normal=highlight) the user feedback is enough, at least for me.

redwing

  • Guest
In the newest version of DarkRED I've made the scrollbars thicker and more visible

Just checked your latest version, but it's the same as the screenshot in my post (it's the one for thumbnail browser). The screenshot is when narrow scrollbar option is enabled because that's the main focus of the discussion.

because now I believe that superthin scrollbars only make sense if they become thicker on mouseover.

Yes, that's another option to consider as I noticed thin ones on the right sidebar are hard to grab. Or they can highlight on the mouseover and then become thicker when grabbed.

AvikB

  • Sr. Member
  • ****
  • Posts: 945
Do you mean something like this, if combined with my proposal?

If that's what you mean, I'd welcome such two-step highlighting functionality. Actually some apps like firefox are already using it: light slider color gets darker with the mouse over and then more darker when grabbed. Maybe it even can be a default setting, giving skinners optional overrides.
+1, also functionality to ONLY show scrollbar when mouse over to that panel.

hiccup

  • Sr. Member
  • ****
  • Posts: 7937
+1, also functionality to ONLY show scrollbar when mouse over to that panel.

If so, it then must be possible to overrule invisible skinned scrollbars in the preferences settings, since otherwise users on touchscreens/tablets will have a problem.

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34406
i've made the following two changes for the next update:
- new setting "ScrollPanelMargin" which reduces the entire width of the skinned scrollbar (this differs from "ScrollBarMargin" which narrows the slider but the scrollbar itself stays the same width of 17px). The value is capped at 10
- mouse over now has the same colouring behavior as gripping the slider. For the colours to change you need to define the relevant ScrollBar.Lowlight colours and:
  1. the user has chosen narrow scrollbars
  2. or when that option is not chosen (the default), you need to have set "ScrollPanelMargin" > 0 in your skin so the default scrollbars are a bit narrower
  - if neither of those conditions is true then the default colours always show (current behavior)
  - i appreciate it wont be obvious why the scrollbars need to be a bit narrower for the lowlight behavior to take effect but its so some skins are not affected by the change
Last Edit: February 28, 2016, 10:54:59 AM by Steven