tabs: move side tabs horizontal with nav sidebar

[alessio-attilio]

When the nav sidebar is active, SideTabWidget pages (Settings, Store, Integrations, GameDetails) now render their sub-tabs horizontally at the top instead of vertically on the left, eliminating the double-sidebar empty space. Also refines sidebar styling with accent borders and flat buttons.

Fixes: #776

[alessio-attilio]

Much cleaner and neater; I really like it!

[alessio-attilio]

But if Rare's accent color is cyan, why is the app purple?

[loathingKernel]

I have had a cursory look and a few things stand out immediately

• This should overall follow the existing colors and theming style in Rare. If a different theme is wanted, that should be separate.
• It should not do any color and widget styling in static_css, the static css is also applied when no theme is selected, this is overriding user colors and theming. Only absolutely necessary changes go in there to achieve a certain look with respect to the platform's native theming, or for completely custom theming on widgets.
• The NavBar should preferably be a re-implementation of QTabBar and implement method overrides where necessary to achieve the result it wants. If you need to make it a QWidget, it should implement enough to be set through setTabBar and work correctly.
• MainTabWidget has no need to know of what a NavEntry is, adding entries should be delegated to an appropriate NavSideBar method which returns the index of the entry. This is about proper class encapsulation and keeps things neat.
• Similarly, if your NavTab is a QTabBar you won't need any of the custom signaling, which is messy.

And a nitpick, I would prefer for the Class names to be complete words, for example NavSideBar -> NavigationBar (there is no other navigation element in Rare so this is unique enough)

[loathingKernel]

But if Rare's accent color is cyan, why is the app purple?

This does not matter right now. This theme uses purple, another separate theme could be made at some point to use cyan. But this is not relevant right now. All this should be designed without any theming in mind or using any themes or color schemes. It should first and foremost look appropriate when using Qt's Fusion theme without any or minimal styling.

[alessio-attilio]

Nothing is static anymore; it's all in the Python code. I hope this is okay.
I think I'll add some text to the hamburger icon, too; there's too much space there.

[loathingKernel]

I'll give yours a try, but this just doesn't feel right to me, especially on smaller screens or windowed mode while trying it here.

I have been trying various permutations of this design to see what fits, and I can't find one that will work nicely with what I am planning for the library design. I'll need to think about this.

[loathingKernel]

I didn't look at it yet, but there is a serious problem with the current state of this PR, the moment I opened Rare the window started growing vertically. It grew so large to the point that my session hanged and I had to forcibly reboot.

Additionally this still doesn't follow this theme's design language. Just don't touch the theme at all. I will figure that part out if this gets merged. Post screenshots without any themeing if need be. It's better to have something that looks good without theming first.

I will comment on the code later.

[alessio-attilio]

The problem was a feedback loop in the NavigationBar's sizeHint: the spacer line uses self.height() inside tabSizeHint/sizeHint, so the hint returns the current height, and with every relayout, the window grows indefinitely. I think I've fixed the problem.

I removed the theme components I had added.

[loathingKernel]

After using your latest iteration a bit, I have to say that it works ok-ish. The code still needs some cleaning, so I will start a review on that.

[alessio-attilio]

I've left-aligned the text; I like it better that way, and it also looks "less empty."

[loathingKernel]

Before you continue with all the painter changes, I should mention that none of that will remain if this is merged. This is too much custom painting to make sure that will work on all platforms, and too much custom painting for something that is basically an existing widget. Fusion should look and feel like fusion. QSS should look and fee like QSS, Windows like Windows and MacOS like MacOS. Custom painting goes very much against that.

The existing SideTabBar already has issues with KDE's Oxygen and Breeze themes for example due to the custom painting and that's why Rare is constraint to Fusion and QSS

[alessio-attilio]

So if I can't use Painter or QSS, how do I make the sidebar flat or custom? Am I missing something?

By default, it looks awful. In my opinion, it needs to be flat; rendered without opacity or depth.
For a sidebar, this is a best practice: it’s always clean and keeps the focus on the element, not the button.

[loathingKernel]

So if I can't use Painter or QSS, how do I make the sidebar flat or custom? Am I missing something?

That's exactly my point, you should not make it flat. It should follow the current theme, and judged based on how that looks first and foremost. I have said so previously. Of course you can use some custom painting if that's absolutely necessary but it should be the absolutely minimum required painting.

For example, your flat top tabs do not look like Fusion tabs. They should look like fusion tabs when the theme in use is fusion. Otherwise it's and inconsistent interface design, and since not everyone likes the same things for their desktop, at the very least the application itself should remain consistent within itself.

The theme being flat or not is again irrelevant to how the application interface is structured.

By default, it looks awful. In my opinion, it needs to be flat; rendered without opacity or depth.
For a sidebar, this is a best practice: it’s always clean and keeps the focus on the element, not the button.

If it cannot work for any theme and any platform, then it is not a good design, is it? This isn't an application that runs only on Linux and KDE, it runs on other desktop environments, it runs on Windows and it runs on MacOS too. And it has to have consistent look on all of them.

As I mentioned before, first make the interface work, then reduce the changes to the absolutely necessary, and after that if the experience works, it can be made pretty.

FWIW, I am not saying that the flat theme looks bad. But this PR absolutely needs to be segmented and partitioned properly. First the UI's structure it made and then any custom theming comes later.

[alessio-attilio]

What do you think about this?

I had to use custom painting just a little bit for the horizontal label, which is necessary for the content-focused look.

[loathingKernel]

This looks more plain, this is a better starting point, thank you. I think I will merge this into a separate branch and shape it up, because there are a few subtle issues with it and it would be tiring for both of us to try and fix them cooperatively. TBH, I'll have to undo some things, maybe generalize some existing things, but overall I do like the result until I get to redesigning the library.

[alessio-attilio]

I've resolved the numerous conflicts that were in the PR.

I've also reverted the last change that hadn't been pulled; everything should be okay now. If it isn't, let me know and I'll update it.

[loathingKernel]

Please stop re-adding things I have removed. Let me clean this up. There is no reason to add a "horizontal" attribute to a class named "SideTabWidget" when it is basically a default QTabWidget. There are better ways to do this. Let me fix it.