Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[markf2748]

Lately there seems to be a lot of interest in Options Tree artwork (right side panel).  Attached is a new set I just finished for dark mode skins, largely based on the Segoe Fluent Icons font.  It has a consistent minimal line art look and feel.  Highly legible as tested on my old 1920 x 1200 monitor at MC size 100%.

If interested in trying it, save off the skin's OptionsTree.png file (may be named differently, depending on the skin, or in some cases located in the ...Data/Default Art/ directory), and replace it with attached file.   

[JimH]

Thanks, Mark!

[Awesome Donkey]

Oooooh, this looks really good and is a good fit! Thanks!

[markf2748]

Oooooh, this looks really good and is a good fit! Thanks!

Thanks.  Looking back to the dropdown menus at the top of MC's main window, I see they use a filled right chevron to open submenus.  That may be a more compatible, less intrusive symbol (but less cool?) than the 3-bar for the Options popup.  Also, the main window submenus open with a mouseover, while the Options popup submenus open with a LMB click (I smell an Options popup feature request here...).

In any case, I've attached a version which uses a similar filled right chevron, as well as a file with simple filled small circles for Tree Expand buttons.  The latter is called out in main.xml:
   <TREE> ... <Entry Name="ExpandButton" Bitmap="Tree_ExpandButton.png" NumberImages="3" /> ... </TREE>. 

[markf2748]

... I've attached a version which uses ... a file with simple filled small circles for Tree Expand buttons.  The latter is called out in main.xml:
   <TREE> ... <Entry Name="ExpandButton" Bitmap="Tree_ExpandButton.png" NumberImages="3" /> ... </TREE>. 

Clarification:  I expect you will find that most, if not all, skins use a 2-state button here (NumberImages="2").  Attached is a 2-state version of the file Tree_ExpandButton.png.

My 3-state version (posted above) is a hopeful leftover related to this feature request:
https://yabb.jriver.com/interact/index.php/topic,139972.msg970692.html#msg970692

[marko]

I think, back in the day, I was first to introduce circles to indicate tree branch expand/collapse state. They caused a bit of division, but now, they're great for really quick visual indication of what's what.

I chose them because too often, with the triangles, they were made equilateral, so it was never clear from just looking at them whether or not they were collapsed or expanded.

[markf2748]

... too often, with the triangles, they were made equilateral, so it was never clear from just looking at them whether or not they were collapsed or expanded.

Interesting.  Similar to the "confusion" I experience with the single-state downward chevron "V" often found in MC Options submenus.  That's what launched me on this quest for an alternative.  The 3-bar menu symbol resolves it with a clean contemporary look.  However, some may consider it a little heavy-handed for this application.  After all, these are really drop-down menus, not "full fledged" independent popup menus or screens.  With this in mind, the filled right chevron is attractive, probably because it is simpler and I am so conditioned to expect it to open a submenu to the right.  At least JRiver makes it relatively easy to try both, choose whatever floats your boat, and change it if you get bored. 

One might expect that the filled downward chevron, usually found in a selected view tab, would be confusing for the same reasons as the "V".  Except the drop-down menu appears immediately with a mouseover, centered below the tab, and there are no closely adjacent copies of the same static symbol, which altogether effectively resolve it for me in the view tab.

Re circles for the top level tree branch expansion - never saw your old posts in this regard, but I agree with you - immediate fast visual information, no thinking about right v.s. down pointers is required!  Though like most symbology, even circles take a little learning, especially because they are not "hinted" like arrowheads (think "Current display is big v.s. small" or "expanded v.s. collapsed" for example).  As you might guess by now, I prefer minimalist solutions!  However, further enhancement here at the Tree's top level with a gentle 3-state response would be nice to try (especially since same action artwork is shared with the main window Tree panel).  I hope it could be made backward compatible with existing 2-state treatments, only requiring that the NumberImages parameter matches the artwork.

11/28/2024 NOTE:  In addition to the main window Organization Tree and the Options popup Tree, the main.xml <TREE> section also governs the appearance of View Tab > mouseover dropdown (or main Tree view RMB) > Customize View... > Settings menu (right side).  These new icon sets work very well there.

[marko]

Indeed. I've been using 'circles' in my skins since 2008.

We've got 'mouse-over' options too now (thank you, and Matt). Oh how I wish I had the time to get them updated and added in my skins. Maybe after New Year... we shall see

[markf2748]

If anyone wants to use my CheckBoxes and Radio Buttons consistently throughout the MC UI, then it’s necessary to include further images in their skin (in addition to OptionsTree.png discussed above):

(1) Add the three attached images Unchecked.png, GrayedCheck.png, and Checked.png to your skin file smallicons.png.  A graphics program such as Gimp (free) or Photoshop is required to do this.  If you already have similar entries in smallicons.png, then replace them with the new images.  In the usual way, include their names and image position indices in the appropriate resources file images.xml.

(2) Place the attached files Frame_CheckBox.png and Frame_RadioButton.png in your skin directory.  Include the following lines (remove or update old lines if present) in the skin file main.xml, within section <FRAME> ... </FRAME>:

Code: [Select]

<Entry Name="CheckBox" Bitmap="Frame_CheckBox.png" NumberImages="8" Scale="3" /
<Entry Name="RadioButton" Bitmap="Frame_RadioButton.png" NumberImages="8" Scale="4" />
Some further details are posted here:  https://yabb.jriver.com/interact/index.php/topic,140122.0.html

12/5/2024 Minor edits for clarity.

Win 11 Pro | Win 10 Pro & Home | MC 33.0.43