Background color of a specific tab of QTabBar (QTabWidget)

Goutye

Hello,

I want to assign a specific background color to a specific tab header when the user receives a message from another user.
Here is a screen-shot of what I did to achieve the trick:
Image of the application

To achieve the trick, I set "disabled = true" to get the orange color on a "new message received" tab.

"QTabBar::tab:disabled {"
                         "background-color: #CC3300;"
                     "}"

However, we cannot click anymore on the tab because the tab is disabled. But it was the only way I found to identify the "new message received" tab and set a background color because there is no "setTabBackgroundColor" function.

Can I set an Object Name or something to identify this kind of tab? (For example QTabBar::tab#notification is what I want).
If yes, how can I do it?

Thank you in advance!

SGaist

Hi and welcome to devnet,

You can try this with e.g. dynamic properties

Hope it helps

Goutye

@SGaist Hi, and Thanks for your answer.

However, the problem is "Where can I put this property?".
In fact, I have no access to the tab of the QTabBar, just the whole QTabBar.
I can identify a tab of a QTabBar by using setTabEnabled(int index, bool b) and :disabled in the Qt Style Sheet. I cannot set a property of a particular tab of a QTabBar because there is only the setProperty function which is on the QTabBar and not on a specific tab of a QTabBar (such as setTabProperty which doesn't exist).

How can I identify this? A possibility can be continue to use :disabled to identify the tab but I want to cancel the effect of disabling a tab in this case.

Thank again in advance!

EDIT: Another possibility would be to find the whole code source of QTabBar and see how I can do it on my own by surcharging or create my own QTabBar. But I have to find it.

Goutye

@Goutye
To bring some new explanation, here is the way to access a specific tab of a QTabBar official code source:

const QTabBarPrivate::Tab &tab = d->tabList.at(tabIndex);

More information can be found here: http://code.woboq.org/qt5/qtbase/src/widgets/widgets/qtabbar.cpp.html

The problem is QTabBarPrivate is... obviously private. I cannot use setProperty on this specific tab because I don't have any access to QTabBarPrivate functions. The structure of QTabBarPrivate::tab is private as well so unable to modify anything.

Is there a way to deal with this case? I just want a background-color for the tabs that received a new message. Particularly complicated as I can see.

EDIT: As well, the children of a QTabBar are the QCloseButton added to the 2 QToolButton necessary for browsing the tabs when there are too many of them. I am quite stuck.

SGaist

Looks like you would need to re-implement paintEvent and there you will be able to change the color of the tabs that needs it

Goutye

@SGaist Thank you again for your answer!

That's exactly what I wanted to try. However, regarding the source code of QTabBar::paintEvent(QPaintEvent *), it seems really complicated to re-implement exactly the whole system because of the private state of QTabBarPrivate.
So then, I will have to re-implement a large part of the whole QPaintEvent to get a result close to the original.
I will try tomorrow to see if I can get something working, but it is my first time using a QPaintEvent at this depth, so it will take certainly a lot of time.

alex_malyu

Have you considered change text color instead?
Another work around may be creating custom widget for such tab.
void QTabBar::setTabButton ( int index, ButtonPosition position, QWidget * widget )

Goutye

@alex_malyu Thank you for your answer!
My specifications required to change the color of the background, that is why I will not change the text color instead.

Regarding the setTabButton, the problem is the button will be place on the left or right inside the tab and will not take the whole place.

Goutye

I succeeded in implementing the trick. However, a new problem just appeared. A kind of gray bar is drawn under the tab on the top appeared.

https://i.gyazo.com/55a99a8e4261252d88081c1b0bf35e25.png

I searched a bit and find that it is due to the
p.drawPrimitive(QStyle::PE_FrameTabBarBase, optTabBase);
of the original paintEvent.

The strategy I use to draw the notified tab is the following one:

I call the QTabBar::paintEvent(event) to have the original tab drawn. (The weird gray bar appears at this step)
I draw the notified tabs over the existent tabs and redraw the dragged tab.

Is there a way to fix this weird bar? I will continue to search and post the whole code after.

SGaist

What OS are you running ?

Goutye

@SGaist Currently Windows, this bar doesn't appear on a normal QTabBar.

SGaist

It could be a simple question of matching colors. Take a look at the QCommonStyle for the drawing part

Goutye

Thanks for the answer. I was really busy until now. That doesn't seem to be related to QCommonStyle, but if it is, I do not know how to figure it out.

However, for the moment, I have something that's working well because we changed the designed for something more "material design".
Thanks for the answers!

Dariusz

Hey @Goutye
Had the same problem recently.
Here is one "clear" solution that might help you... should not break anything funky!
It relay on using as much of native logic as possible.

class ColoredTabBar(QTabBar):
    def tabColor(self, index):
        if index in [0, 3]:
            return QColor(60, 90, 70)
        return QColor(0, 0, 0, 0)

    def paintEvent(self, event):
        painter = QStylePainter(self)
        for index in range(self.count()):
            opt = QStyleOptionTab()
            self.initStyleOption(opt, index)

            opt.palette.setColor(QPalette.ColorRole.Window, self.tabColor(index))
            painter.drawControl(QStyle.ControlElement.CE_TabBarTabShape, opt)
            painter.drawControl(QStyle.ControlElement.CE_TabBarTabLabel, opt)

9 years later.... LOL

sapvi

@Dariusz 9 years later is just in time for me LOL