Tuesday, November 19, 2013

Suggestions for default-button at oxygen style

 I really like KDE Oxygen style. However, Oxygen style does not provide any hint for default buttons. I find this annoying and an important usability issue. The issue is known (thanks, Hugo):



Hugo points out that there is no a visual representation idea for that. I suggest several visual representations here:

Inverted gradient

Inverted gradient
I really like this one.  I think it is a hint which does not interfere with other visual hints.


Mouse over-like
Using the mouse-over visuals to highlight the default button. A different color might be used, respect the mouse-over case.

Tinted button

Tint the button
This is what other styles, as polyester do. Also gnome's Cleanlooks and Murrine do like this. Sorry for my clumsy edition at Gimp, however the idea is clear

A la Motif
A la Motif
I don't really like this one much, but I like that Motif makes very clear when a default button exists. Other styles (for instance the Windows 9x style) do a tight color box frame around the button, which could also be an option. That would be similar to the mouse over-like case, but using a dark color instead the selection color.


As a matter of fact, this tint thing can be easily tested or workarounded using a proxy style:

class OxygenStylefix: public QProxyStyle

    OxygenStylefix(QStyle *baseStyle=0):QProxyStyle(baseStyle){
        setObjectName("oxygen fix");

    virtual void drawControl(QStyle::ControlElement element,
                             const QStyleOption *option,
                             QPainter *painter,
                             const QWidget *widget) const
        if( element == QStyle::CE_PushButton &&
            widget && option)
            const QPushButton *pb = qobject_cast<const QPushButton*>(widget);
            if( pb && pb->isDefault() )
                const QStyleOptionButton * sob = (QStyleOptionButton *) option;
                QStyleOptionButton option2(*sob);

                const QColor & btn_color =

                const QColor & hig_color =

                                // Blending parameters
                const int f=90; // Percentage of button color to use
                const int q=100-f;
                QColor new_color(
                            (f*btn_color.red()  +q*hig_color.red()  )/100,
                            (f*btn_color.blue() +q*hig_color.blue() )/100,


                return QProxyStyle::drawControl(element,&option2,


        return QProxyStyle::drawControl(element,option,painter,widget);


No comments: