Improving tab style in Breeze
Closed, ResolvedPublic

Description

The style of tabs can be improved in Breeze, to make it obvious which tab is currently selected, as well as responding to the users current colorscheme. This could be apart of the breeze evolution.

Test Plan:

Before:

After:

PS: I made the mockup with a stylesheet, so some of the other graphical elements may have come out unstyled, like the progressbar at the bottom.

Details

Differential Revisions
D29264: New tabs for Breeze
abstractdevelop updated the task description. (Show Details)
abstractdevelop triaged this task as Wishlist priority.Mar 21 2020, 5:43 PM
abstractdevelop updated the task description. (Show Details)

I'm not too keen on that mockup. It looks like the tab and the tab contents are no longer connected.

abstractdevelop added a subscriber: ondrejk.EditedMar 21 2020, 9:06 PM

Here's another mockup with framed tabs, @onvitaik :-)

EDIT:
Here are some more variants, with the underline at the top rather than the bottom:


ngraham added a subscriber: ngraham.

to be flatter and look more modern

We're not really trying to make Breeze flatter and more modern, and I'm afraid I don't find the first mockup to be superior; to my eyes it's worse since it's no longer "tab-like". It feels like it's a Google/Material tab, but that's not the Breeze design language.

The second set of mockups is better IMO, since it preserves the tab-like appearance. I like the incorporation of a colored line at the top, as this solves a genuine usability issue where it's hard to tell which tab is active when there are only two tabs. However I don't really like the square corners, which don't feel consistent with the rest of the Breeze widgets. And I think using the color scheme color for the whole background is kind of overkill. In general I think a "less is more" approach makes sense for color.

abstractdevelop added a comment.EditedMar 23 2020, 5:27 PM

And I think using the color scheme color for the whole background is kind of overkill.

Ok, here are some more mockups for the second kind of tabbed interface, with a lighter background.

However I don't really like the square corners, which don't feel consistent with the rest of the Breeze widgets.

I would have liked to make the corners round, but I can't do that in Qt stylesheets, because you can't just make one edge round. I can try to work on a breeze patch for them instead, then I'll have the maximum flexibility with those things.

Thank you Nate for giving me feedback. :) I really like all of the things which you have done to Plasma, and they has made it my favorite desktop environment and the only one which I ever use.

You're welcome! :)

We don't use Qt stylesheets, we use raw QPainter, and it's possibly to draw anything you can imagine (within reason of course), so rounded corners are of course possible, as evidenced by the fact that the current style has rounded corners.

I probably shouldn't be discussing this here but in a separate patch, but anyways I patched Breeze so the tabs look like this:



Should I submit a patch, or do you still think there are design changes to be made, @ngraham ?

I like the blue bar on top as it solves a usability issue, but I notice you've removed the darkened background effect for inactive tabs and squared the corners. As I said before, I don't think square corners are really appropriate here. Removing the background darkening effect doesn't seem necessary either. IMO there's nothing particularly offensive about it and it helps you to visually pick out the current tab.

Sorry I forgot about the rounded corners again. :/ I agree with you about the darkened background.
Here is my new version:

I only left the first and last tabs rounded because now there is a border separating each tab. However, when the first or last tab is selected, the roundness is lost:

I was making this with manueljlin's dolphin mockups in mind, for comparison:

jfyi that mockup used that type of tab only because rounded corners touching the toolbar and sidebar lines would look bad, not to actually change it. I'm not against this tab style but the blue highlight could be a bit more subtle (1-2px imo) and have rounded corners that still look round at 1x

rekols added a subscriber: rekols.Apr 8 2020, 5:56 PM

this is allright.

Sorry I forgot about this one. I'm still working on it, but soon I'll be ready to submit the patch.

epopov added a subscriber: epopov.May 19 2020, 1:24 PM

What about something like this?

We currently draw a blue underline under the text to show that that tab has focus (focus is different from active). If we do that for the active tab, we would need to come up with a different thing for indicating focus.

manueljlin closed this task as Resolved.Feb 4 2022, 10:46 PM

oops, we forgot to mark this one as resolved it seems