Clipping of (OR maybe background colour of) QToolbar Icons

Perdrix

I have a toolbar that does this in its ctor:

constexpr int radius = 27;
   :
QColor colour = palette().window().color(); 
 colour = colour.lighter(300);
 colour.setAlpha(205);
 QString styleSheet(QString(
            "QToolBar "
            "{background-color: %1; "
            "border-radius: %2px;}; "
        )
            .arg(colour.name(QColor::HexArgb))
            .arg(radius)
        );
 setStyleSheet(styleSheet);

I thought that this would clip the icons to the new outline but what I get is:

So the icons aren't being clipped to the new shape.

Should I expect that to work?

The png files that define the icons have their background set to transparent (outside the circle in the centre).

JonB

@Perdrix
I know nothing :) But (provided I understand right) I would expect:

QToolButton{border: none; background-color: transparent;}

(I assume you have the correct transparency on your icons. Perhaps you should confirm this?)

Just OOI isn't that what https://stackoverflow.com/questions/69755056/how-to-set-qaction-to-have-transparent-background-inside-qtoolbar says and is similar enough to yours??

Perdrix

Update: They aren't buttons, they are icons.

I'm guessing that the paint method is filling the background with "window" colour before it paints the icon image (set with setFile()).

Is there an easy way to get them to prefill with transparent colour so the toolbar shows through except where the icon itself is non-transparent?

It's only the currently active icon that does this ...
Thanks
David

Perdrix

Anyone have any ideas?

mrjj

@Perdrix
Hi
As far as I know, QToolButtons are auto-created when you insert icons.

Settings a round border will not clip anything as the clipping is the Widgets area and
even if the frame/border is drawn round, the actual area is still square.

Try setting QToolbuttons background

QToolButton {
background-color:transparent;
}

Perdrix

@mrjj I changed the ctor so it starts with:

        constexpr int radius = 27;
        
                QColor colour = palette().window().color();
                colour = colour.lighter(300);
                colour.setAlpha(205);
                QString styleSheet(QString(
                    "QToolButton {background - color:transparent;} "
                    "QToolBar "
                    "{background-color: %1; "
                    "border-radius: %2px;}"
                )
                    .arg(colour.name(QColor::HexArgb))
                    .arg(radius)
                );
                setStyleSheet(styleSheet);

Unfortunately, it didn't seem to help any:

mrjj

@Perdrix
Ah, its when you hover / click it ?

Its due to the auto raise feature, i believe.

Perdrix

@mrjj The top three icons are checkable. So if I click the second icon and hover over the third one I see:

JonB

@Perdrix said in Clipping of (OR maybe background colour of) QToolbar Icons:

{background - color:transparent;}

This may be quite orthogonal to your issue, but are you sure this is acceptable written like that?

Perdrix

@JonB I wasn't sure so I changed it. And this is what I now see:

So changing it to:

QString styleSheet(QString(
"QToolButton {background-color:transparent;} "

did change things and not for the better :(

So "background - color" was wrong!

JoeCFD

@Perdrix can not you add round radius to that button only on the top part?

Stylesheet: border-top-left-radius: *px; border-top-right-radius: *px;

JonB

@Perdrix
I know nothing :) But (provided I understand right) I would expect:

QToolButton{border: none; background-color: transparent;}

(I assume you have the correct transparency on your icons. Perhaps you should confirm this?)

Just OOI isn't that what https://stackoverflow.com/questions/69755056/how-to-set-qaction-to-have-transparent-background-inside-qtoolbar says and is similar enough to yours??

mrjj

@Perdrix

If anything else fails, then you can try setMask
If does make the area round/as the icon but can a bit annoying to align.
More over, the checked default drawing might not be visible.

#include "QBitmap" // must have to use setmask
....
   setStyleSheet(styleSheet);

    auto list = ui->toolBar->findChildren<QToolButton *>();
    for (auto *w : list) {
        w->setAutoRaise(false);
        QIcon ico = w->icon();
        QPixmap pix = ico.pixmap(ui->toolBar->iconSize());
        w->setMask(pix.mask());
    }

alt text

Perdrix

@JonB Pretty sure the background of my icons are correct:

Here's one of them to play with:

Perdrix

@JonB You sir, are a star! border:none; made the difference!!!

So:

QToolButton {border: none; background-color: transparent;}

worked a treat!

Why did adding border:none; fix it please?

JonB

@Perdrix said in Clipping of (OR maybe background colour of) QToolbar Icons:

Why did adding border:none; fix it please?

QSS magic/guess/example/makes sense to remove anything not needed.