Tab padding adjustment & new tab close button

[Shrinks99]

Changes

• Adjusts padding and spacing of tab names.
• Adds a new close button that offers a clearer distinction between hovered and un-hovered states.
• Tab close button is now an SVG, looks nice at 72 ppi and should be nice on higher ppi screens as well!

Screenshots & Rationale

New Tabs, the close button is now of equal visual weight as the tab name.

New Tabs with hovered close button. Hovered button is now a much more obvious change of state.

Old tabs for comparison, note the lack of breathing room and clickable area around the type, the text is also very close to the close button.

The extra breathing room also helps readability in the properties panel tabs too! Minimum tab size has been increased for more uniformity among tabs with smaller names, this should also help users in distinguishing individual clickable areas for tab shapes. Clicking on tabs with shorter names should also be easier and faster with the increased clickable area, previously this required more precision.

Old tabs for comparison.

Notable issues

• The tab bar in the properties panel still has a background colour that is darker than the background it is located on and equal to the deselected tab colour. Note the small areas between the rounded corners of the tabs.
  

EDIT: Half fixed! See below!

• The new tab close button is white and not the same colour as the rest of the text, this helps it stand out when the tab is deselected, hovered (orange), and then the tab button is hovered, however perhaps it should be adjusted to be more uniform.

EDIT: Tried this, the value of the text colour (#c7c7c7) and the selection colour is really close (contrast ratio of 1.3:1) and renders the text on the tab very hard to read when the tab is hovered. This is already a problem in the current build and perhaps out of the scope of this PR due to all the other colour inconsistencies in Natron's interaction that should be addressed at a later date.

⚠️ Changing to SVG will break existing custom user-generated .qss files, this should probably be noted in the changelog if accepted. Hopefully this will affect a minority of users.
⚠️ Changing to SVG also may not be the best choice performance wise. If we're going to switch this icon out it may be a good idea to revisit the pipeline for creating and publishing icons as a whole. For now I propose we merge as is with the SVG and change this at a later date.

[rodlie]

Remember to add image assets in Gui/GuiResources.qrc

[Shrinks99]

Fixed!

[coveralls]

Coverage remained the same at 0.0% when pulling 12c05ef on Shrinks99:tab-padding into feb2eeb on NatronGitHub:RB-2.3.

[devernay]

On which OS was it already tested?

[Shrinks99]

Fully tested on Windows, stylesheet was added in the preferences and SVGs were linked directly off the disk in the stylesheet. I have not built Natron fresh with these changes. Tested on Mac without the SVG and using the current PNG button graphic. For what it's worth I've been using this personally for a month or two now and it's worked quite nicely.

Also converting this to a draft for now until the colour of close button issue is decided upon.

[devernay]

Can someone test if it works OK on Linux? @rodlie ?
I think pure white is a bit strong (compositors are used to work in a dark environment, and UI element should avoid white). Could you change it to be the same as the text color?

[Shrinks99]

Colour changed for now to #c7c7c7 for consistency. Darkmode is helpful because it ensures that screen brightness is not overwhelming to look at in a dark room, I've been there! :P

That said, this is completely not a consideration with icons and labels because they don't contribute to overall screen brightness in a meaningful way due to the negligible amount of screen real-estate they take up. Large areas of the UI like the backgrounds of each component are significantly more important to keep dark for the reason you mentioned.

Natron's text & icon contrast ratio is quite low (3.7:1) and fails WCAG tests for everything except icons which it barely passes (for reference, Nuke's is 5.3:1). This is something I'd be willing to help address long term, better contrast between icons and text will not only make Natron accessible but should also yield advantages for everyone using the application due to the increased clarity afforded by slightly more contrast. This doesn't mean everything has to switch to white (agreed, it is a little much) but some colours and specifically greys of the UI should have some more thought put into them so that they are at least closer in-line with accessibility guidelines.

This is the worst case contrast scenario that I've found in Natron, it has a contrast ratio of 1.3:1. Minimum as defined by WCAG for "regular" sized text is 4.5.

[Shrinks99]

Selected properties panel tab is now connected to the window below! This should offer the user a clearer indicator of what is currently being viewed. This behaviour was already present in window tabs, now they both behave the same way, much cleaner!

Fixed the behind-tab background-colour issue as mentioned above but there's still this 1px border in line with the top of all the tabs and I can't find the element it is connected to. Any insight on this is appreciated, it's not QTabBar#DockablePanelTabWidget. It doesn't seem to be attached to any instance of the %4 colour in the stylesheet but it looks to be the same colour.

Once this is sorted I'm happy with everything here and merging should be good to go, nothing I've done here should be OS specific and I don't foresee Linux having any issues. After this is finished I'd like to cleanup and re-organize the stylesheet code. There's a lot of formatting inconsistencies, and I'd like to add more comments to make it easier for people to understand what they need to change.

[rodlie]

Linux (orig):

Linux (new):

The main tabs has too much padding on left/right IMHO.

off-topic:
I would use the existing style(s) available in Qt as a base (they are well tested), Nuke used Plastique when they used Qt4, on Qt5+ Fusion is the preferred style.

[Shrinks99]

Agreed, will reduce min-width of the main tabs. What do you have the font size set to? Looks quite large.

[Shrinks99]

Alright well I'm stumped. I don't think the item responsible for that 1px line is exposed in the QSS file and after cross-referencing the file submitted to that wild PR with a ridiculous amount of file changes (that doesn't have the issue but has also been completely re-written) I cannot find what causes this problem.

The good news is that this is not the fault of this PR! It's just an existing bug I'd like to have fixed. I know you're trying to push a new beta out and I'd like this to be included in it if possible. Hopefully we can revisit this as part of a larger UI rework sometime later down the road? I don't want to get too hung up on a small existing visual bug that will be ironed out in the future anyways as part of a rework / dependency upgrade, and I think overall these new tabs will provide a better experience for users until that happens. :)

I've also made some small syntax cleanups with the colons. This has been tested and the stylesheet loads without problems. Hooray for consistency!

[devernay]

⚠️ Changing to SVG will break existing custom user-generated .qss files, this should probably be noted in the changelog if accepted. Hopefully this will affect a minority of users.

Could you leave the png versions (or re-generate them from your SVGs) in the resources, which would solve the backward compat issue?

Remember to re-add them to Gui/GuiResources.qrc

Once done, I'll merge

[Shrinks99]

Good idea, done!

[devernay]

thank you!