gCode Legend & Viewer Improvements

[yw4z]

CHANGES

• Made Color squares a bit smaller
• Used % instead "Percent" and removed "%" from types
• Used "Usage" instead "Filament usage". Requires translation
• Removed spaces between [Length][Unit] and [Weight][Unit]
• Used eye icon and removed "Display" from header
• Removed "color scheme" text to compact frame width. Writing on different line can be an alternative method instead hiding
• Added button for toggling gCode editor. Fixes #3136
• Increased Combo box height to prevent scrolling to reach last elements of list. Fixes #4486
• Removed background color for expand/collapse button because its not fitting well. Will try to colorize icon on hover
• Added new icons for Expand/Collapse/gCode Viewer Toggle
• Removed darker rectangle on top. That gives more clean look imo

TODO

• Check design on light mode
• Store window width to keep Expand/Collapse button on same position to prevent mouse movement requirement while toggling
• Add scroll ability to gcode editor
• Optimize code changes for less code change requirement
• Test for other languages
• Add an eye icon to header

COMPARISON

before

After - Width of legend is smaller %20 percent and allows for more screen space

before

after - Dropdown height increased to fit all contents. This prevents unnecessary scrolling

before

after

[buzzhuzz]

My question is not directly related to this PR, but have you ever considered making G-code inspector colors similar to the main widgets themes? Somewhat similar to the gizmo tool bar.

[yw4z]

thanks for indicating that point. i will look what i can do

[discip]

@yw4z
First of all:
Thank you for taking on this work! 😊
Most of the changes you make seem to make sense while some are not so understandable.

For example, why did you decide to replace the checkbox with an eye icon whose state can only be determined by the color, while the checkbox lets you know immediately if it has been checked or not, even if you cannot distinguish between colors?

The main goal of every single change should be to improve usability.

I once read a quote in another repo that went something like this:
"good UI is invisible"

However, this particular change (eye icon) makes it a bit harder to use for some than before.

In this case, please either keep the checkboxes, or make the difference between the "selected" and "unselected" states more obvious, e.g. by representing the unchecked state by a closed eye.
I prefer the checkboxes however.

kind regards

[kekkodance]

this looks nice.

[yw4z]

hi @discip
i'm not trying to remove everything. Just removing unnecessary things to get more cleaner/modern look.
I assume "Less is more" is better fits if you find a quote.
Main goal is reducing area of legend since not everyone uses 24+inch monitor.
gCode viewer toggle button also for that so people can easily hide it to get more space when it needed. Especially placed it near to expand/collapse button since their purpose is similar

here is an alternative. used boxes on non-visible items.

as you know eye icon already represents visibility on most UI's. Let's hear what people think

[buzzhuzz]

@yw4z , could you please try crossed-out gray eye for disabled items?

[discip]

@yw4z

i'm not trying to remove everything. Just removing unnecessary things to get more cleaner/modern look.

This is not what I wrote. 😊
The only thing I addressed was the eye icon.

Main goal is reducing area of legend since not everyone uses 24+inch monitor.

Yes, on that one we are on the same page. And that's one of the things I thanked you for.

here is an alternative. used boxes on non-visible items.

Mixing these themes doesn't look right, as you would expect either an empty box & one with a check mark in it, or an opened eye and a closed one. These are completely different concepts.

[yw4z]

@buzzhuzz

@discip here is example from adobe. Using boxes not completely unrelated because guides users to a clickable area or shows them as unchecked

[igiannakas]

haven't tested yet but does it adapt for a larger width when multi material prints are displayed?

[yw4z]

@igiannakas didnt saw issues when using 2 material but didnt tested further. Window width determined by bottom content and dynamic. i assume it shouldnt be a problem

Whats your opinion about icon usage on display section? shared few examples above

[igiannakas]

Awesome!

The "eye" / "not eye" I think is more consistent. It conveys the meaning of "visible" and not visible when it is greyed out. Mixing tick box and the eye icon is less continuous from a user experience. We shouldn't be changing the type of box I feel.

Hence, I vote for this one:

[igiannakas]

Also maybe ever so slightly higher spacing between the time/percent/usage columns would be a good idea for the ones with less good eyesight :)

[yw4z]

@igiannakas i didnt touched these spacings because it broke many placement when i changed before

[yw4z]

@buzzhuzz btw which os you use? eye icon looks blurry on your image on #8294 (comment)
or is that caused by screenshot quality? i draw icons with code instead svg icons. maybe i have to switch to vector icons