Gradient Buttons (+/-) for lists on Mac OS X, others



  • Hello,

    I am attempting to write an application in Qt for both Mac OS X and Windows. In Cocoa on Mac OS X, there is something that Apple calls "Gradient Buttons". They are used for manipulating lists and column views, and are "standard" (OS-provided) buttons on that platform. They are "described in the Apple HIG":http://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGControls/XHIGControls.html#//apple_ref/doc/uid/TP30000359-SW12 and I was wondering if Qt provided anything similar. I searched all of: the Internet (using keywords "gradient button qt" and "add and delete standard buttons in qt"), these forums, and Qt Assistant, and came up empty-handed.

    What I personally think would be best is something like QPushButtons with QPixmaps of the + and - symbols, at least on Windows. My concern is that on Mac OS X they will not be square or aligned as they are in the Apple HIG and then the app will not look 'native'.

    My question is: Does Qt provide something similar to Apple's gradient buttons? Or would I be able to set up a QPushButton so that it is at least very similar-looking on the Mac OS X platform?

    Thank you for your time.



  • I just read the HIG, and I am not sure what is so special about them really. To be honest, I think they look a bit alien to OSX in the examples shown on that page, if you ask me (and I know you don't). I think a QToolButton can work just as well? If you want to manipulate their shape, you might want to look into Qt Style Sheets.



  • I would go with QToolBar, as AndrĂ© already suggested. It comes closest and is provided by Qt. Some styling should do the trick.



  • When there are several buttons in a strip of gradient buttons on OS X, they have a single-line frame between them. Because of that, they look like segments of a single control.

    To make this kind of buttons, I used QToolButton (not a QToolBar, just buttons in layouts), and styled them.

    I used 4 styles:

    the first (left) button in a strip.

    buttons in the middle in a strip.

    the last (right) button in a strip.

    a standalone button.

    These 4 styles draw different frames.

    This is what I did:

    1. A fragment of the style that I assign to the instance of QApplication (these styles use stretchable images that you need to draw or grab from OS X)

    @//
    // == QToolButton: segmented
    //
    "QToolButton[sgm_single="true"] { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrSUp.png) 4 4 4 4 ; "
    "} "
    "QToolButton[sgm_single="true"]:pressed { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrSDown.png) 4 4 4 4 ; "
    "} "
    "QToolButton[sgm_left="true"] { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrLUp.png) 4 4 4 4 ; "
    "} "
    "QToolButton[sgm_left="true"]:pressed { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrLDown.png) 4 4 4 4 ; "
    "} "
    "QToolButton[sgm_left="true"]:checked { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrLChecked.png) 4 4 4 4 ; "
    " color: white; "
    "} "
    "QToolButton[sgm_middle="true"] { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrMUp.png) 4 4 4 4 ; "
    "} "
    "QToolButton[sgm_middle="true"]:pressed { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrMDown.png) 4 4 4 4 ; "
    "} "
    "QToolButton[sgm_middle="true"]:checked { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrMChecked.png) 4 4 4 4 ; "
    " color: white; "
    "} "
    "QToolButton[sgm_right="true"] { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrRUp.png) 4 4 4 4 ; "
    "} "
    "QToolButton[sgm_right="true"]:pressed { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrRDown.png) 4 4 4 4 ; "
    "} "
    "QToolButton[sgm_right="true"]:checked { "
    " border-width: 4px; "
    " border-image: url(:/img/BPicTbrRChecked.png) 4 4 4 4 ; "
    " color: white; "
    "} "
    @

    1. In a constructor of a dialog with these special buttons

    @
    // a single button
    ui->btnWkPerfInfo->setProperty("sgm_single", true);
    //
    // 3 buttons in a strip
    ui->btnDayAdd->setProperty("sgm_left", true);
    ui->btnDayCopy->setProperty("sgm_middle", true);
    ui->btnDayDelete->setProperty("sgm_right", true);
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.