Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

QDockWidget float/close button hover images

Is there a way to change the hover/pressed icons for a QDockWidget(Qt 4.8) in a stylesheet? I'm using this style to change the button image for the default state:

QDockWidget{
    font-weight: bold;
    titlebar-close-icon: url(:/icons/ui-dock-close-off.png);
    titlebar-normal-icon: url(:/icons/ui-dock-float-off.png);
}

I've tried a couple of different ways, but none of them seem to be working.

QDockWidget::float-button:hover{
    image: url(:/icons/icons/ui-dock-float-hover.png);
}

QAbstractButton#qt_dockwidget_floatbutton{
    image: url(:/icons/icons/ui-dock-float-hover.png);
}
like image 615
mfessenden Avatar asked Aug 21 '15 16:08

mfessenden


1 Answers

I just had to make this work, myself. I'm finding the qss behavior for QDockWidget's default title bar to be very bizarre in behavior.

At the bottom is the final result that works for me, but first there's some explaining to do.

The first thing is that using the "image" setting to set an icon doesn't allow for setting the size of the icon, and it ends up being scaled down to the minimum. Because of this, I couldn't use "titlebar-close-icon: none" the way that I wanted to.

The second is that you won't be able to use the "image" setting for the "QDockWidget::close-button:hover" paired with the "titlebar-close-icon" setting because the "hover" image will be drawn behind the icon. This is likely why you were not seeing the results you expected in your given examples.

What I ended up doing below was setting a "blank" (completely transparent) png as the icon, which means I can then control the size of the button using the "icon-size" setting. I then set the "image" for the buttons, and made use of the "hover" sub-setting to handle my highlighted icon.

Lastly, I've found that (at least in my environment) the icon changes don't stick unless the widget is floated and then redocked, at which time the icons are all present and accounted for. What I did to get around this was just to call setFloating(True) and then setFloating(False) after applying the style. There's no visible flicker or anything that I can see, so I'm going with it.

QDockWidget { 
    background: rgb(36,38,41);
    titlebar-close-icon: url(:icons/blank.png);
    titlebar-normal-icon: url(:icons/blank.png);
}

QDockWidget::title {
    background: transparent; 
    color: transparent; 
    text-align: center;
    border: none;
}

QDockWidget::close-button, QDockWidget::float-button {
    border: none;
    background: transparent;
    icon-size: 12px;
    padding: 1px;
}

QDockWidget::float-button {
    image: url(:icons/undock.png);
}

QDockWidget::close-button {
    image: url(:icons/close.png);
}

QDockWidget::float-button:hover {
    image: url(:icons/undock_hover.png);
}

QDockWidget::close-button:hover {
    image: url(:icons/close_hover.png);
}
like image 150
jbee Avatar answered Nov 15 '22 08:11

jbee