Author Topic: New default skin for v3.3 and "slim" icons  (Read 6569 times)

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 30007
For v3.3 I am in the process of changing the default skin which is now based on an older Threshold skin from Alumni and of course endeavour1934 for many of the icons and design.
I have added a new skin setting:
Code
<element id="SlimIcons">true</element>


which causes some aspects of the layout to change, such as the default player icons, progress bar and some of the stock icons.
I think some skins would benefit from it. You are still in control of the icons that are overridable.

I would be interested in feedback about the new default skin so far and also whether the "slim icons" setting might be useful

https://getmusicbee.com/patches/MusicBee33_Patched.zip
unzip into the musicbee folder
run MusicBee33.exe and then choose the skin "MusicBee3Test"
Last Edit: September 25, 2018, 06:18:52 PM by Steven

redwing

  • Guest
Buttons (including Windows close button) are misaligned in preferences and some popup panels.
Yes, I think the slim icons give a more consistent look with other icons. But the progress bar is a little hard to tell from the background.

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 30007
Buttons (including Windows close button) are misaligned in preferences and some popup panels.
Yes, I think the slim icons give a more consistent look with other icons. But the progress bar is a little hard to tell from the background.
fixed now - same link


zkhcohen

  • Sr. Member
  • ****
  • Posts: 250
I don't have a test environment set up atm.

Screenshots of the skin?

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 30007
You can unzip the files into an existing install without touching the existing MB install - there is no need to set up a separate test environment.

Here is a screenshot anyway:
Last Edit: September 25, 2018, 06:28:11 PM by Steven

Alumni

  • Hero Member
  • *****
  • Posts: 1007
Nice to see the default skin being refreshed. I like the new look.
As for the icons and buttons, will they be SVG based?
How about the addition of a default "dark" skin?

redwing

  • Guest
I think this can be a good opportunity to add some improvements to the player bar UI.

1. Support hh:mm:ss format for long tracks

Two ideas:
- Add time format to "Configure Fields" setting under Preferences> Tags (2) settings
- Or clicking on a time column value could toggle to mmm:ss and hh:mm:ss format with progress bar cursor display simply following it.

2. Show the currently set volume level on tooltip when the mouse is over the volume slider

3. Some more noticeable indicators of whether the player is currently on (play/pause rather than stop)

- An optional skin element that sets the bg color of the display panel when it's on
- An optional spectrum visualizer mode that displays it on the background of display panel (yes, short and wide)

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 30007
As for the icons and buttons, will they be SVG based?
no, i wont implement direct loading of SVG images into MusicBee ie. only via the skin creator tool for the player panel.
However if anyone is willing to create 150% images for the icons then i would incorporate those

How about the addition of a default "dark" skin?
you mean when windows has dark mode enabled. Thats a good idea, but i would only do that if someone created a default dark skin thats similar to the new default skin as I simply dont have the time or skill to be good at it.


Also to provide some more clarity around this new "SlimIcons" setting. You can use it on any skin, and what it will (eventually) do is:
- use the same single px icons from the new default skin unless an override is provided
- use the new single px player controls for standard skins
- use single px icons where the icon cant be overriden eg. left/right panel collapse/expand icon
- narrow the progress bar
- adjust the fonts from Bold to Regular in various places (panel headers, default player panel text, etc)

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 30007
I think this can be a good opportunity to add some improvements to the player bar UI.

1. Support hh:mm:ss format for long tracks

Two ideas:
- Add time format to "Configure Fields" setting under Preferences> Tags (2) settings
- Or clicking on a time column value could toggle to mmm:ss and hh:mm:ss format with progress bar cursor display simply following it.

2. Show the currently set volume level on tooltip when the mouse is over the volume slider

3. Some more noticeable indicators of whether the player is currently on (play/pause rather than stop)

- An optional skin element that sets the bg color of the display panel when it's on
- An optional spectrum visualizer mode that displays it on the background of display panel (yes, short and wide)
i think i am fine with the first 2, but not sure what you mean with point 3
could you explain both of those some more?
For the spectrum visualiser, would the player controls layout overlap - i guess not so you would imagine the panel being higher (something like zune? not that i know how they did that fuzz effect)

redwing

  • Guest
Something like the following mockups:

Stop / Playing / Spectrum on the background


Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 30007
All Alumni/ endeavour1934's single px icons have now been incorporated directly into MB, so just by setting <element id="SlimIcons">true</element> will load the icons without the need to provide them in your skin.
Additionally it also includes 150% versions of the icons, so will look much sharper at high DPI resolutions

Lastly if anyone is interested, i could add a skin element to recolour the icons eg. you want to use them on a dark skin. But i wont do that unless someone says they want it



http://www.mediafire.com/file/p4tr75b8dt1bkr6/MusicBee33.zip
unzip into the musicbee folder
run MusicBee33.exe and then choose the skin "MusicBee3Test"
Last Edit: September 18, 2018, 09:58:54 PM by Steven

redwing

  • Guest
i could add a skin element to recolour the icons eg. you want to use them on a dark skin

That would be very useful when creating a skin in various background colors. I would assume it would work not just for the default icons but for custom icons (for inbox, music, etc) as well.

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 30007
I would assume it would work not just for the default icons but for custom icons (for inbox, music, etc) as well.
I only had in mind the new single px icons that would be the default for the slimicons setting. Thats because they are all the same colour and hence safe to recolour.