QSpinBox setting buttons with using stylesheets

[_franko_]

Hello,

I have another question about stylesheet on complex widgets.
Documentation contains following sentence:


Note: With complex widgets such as QComboBox and QScrollBar, if one property or sub-control is customized, all the other properties or sub-controls must be customized as well.

and I can't use custom border because buttons are disappearing.

I would like to use standard images of arrows on buttons but without using 'image' property. Is it possible?
Is it possible to draw QStyle::PE_IndicatorSpinUp with using stylesheet and how?


Franko.

[_franko_]

Maybe I didn't specify my problem. I would like to change size of the spinbox buttons. I do this with


"QSpinBox::up-button { width: 32px; }"
"QSpinBox::down-button { width: 32px; }"

and it works.
Now I have a problem with background color.
I want to change only background of spinbox area (for example yellow). When I try to do it with


"QSpinBox { background-color: yellow; }"

all elements have yellow color.
How can I prevent to change colors of buttons?

Any help is appreciated :)

Thank you.

[_franko_]

OK. I found only this solution and I think I will use it:


#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);

QCommonStyle style;
ui->pushButtonBack->setIcon(style.standardIcon(QStyle::SP_ArrowBack));
ui->pushButtonSend->setIcon(style.standardIcon(QStyle::SP_DialogOkButt on));

QPalette palbut = ui->pushButtonBack->palette();
QPalette palspin = ui->spinBox->palette();
QPalette palyellow(QColor("yellow"));

// qDebug("height spinbox: %d", ui->spinBox->height());

ui->label->setStyleSheet("QLabel { border-color: yellow; border-style: inset; border-width: 5px; }");

ui->spinBox->setStyleSheet("QSpinBox { border: 3px solid red; border-radius: 5px; background-color: yellow; }"
"QSpinBox::up-arrow { border-left: 17px solid none;"
"border-right: 17px solid none; border-bottom: 17px solid black; width: 0px; height: 0px; }"
"QSpinBox::up-arrow:hover { border-left: 17px solid none;"
"border-right: 17px solid none; border-bottom: 17px solid black; width: 0px; height: 0px; }"
"QSpinBox::up-button { width: 40px; height: 37px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.25 "+getRGBhexColor(palspin.light().color())+", stop: 1 "+getRGBhexColor(palspin.midlight().color())+") }"
"QSpinBox::up-button:hover { width: 40px; height: 37px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.25 "+getRGBhexColor(palspin.light().color())+", stop: 1 "+getRGBhexColor(palspin.shadow().color())+") }"

"QSpinBox::down-arrow { border-left: 17px solid none;"
"border-right: 17px solid none; border-top: 17px solid black; width: 0px; height: 0px; }"
"QSpinBox::down-arrow:hover { border-left: 17px solid none;"
"border-right: 17px solid none; border-top: 17px solid black; width: 0px; height: 0px; }"
"QSpinBox::down-button { width: 40px; height: 37px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.25 "+getRGBhexColor(palspin.light().color())+", stop: 1 "+getRGBhexColor(palspin.midlight().color())+") }"
"QSpinBox::down-button:hover { width: 40px; height: 37px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.25 "+getRGBhexColor(palspin.light().color())+", stop: 1 "+getRGBhexColor(palspin.shadow().color())+") }"
);


QStringList list;
list.append("QPushButton { font: 75 28pt \"Serif\"; border-width: 3px; border-radius: 5px; border-style: solid; border-color: "+getRGBhexColor(palbut.mid().color())+"; "
"background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.5 "+getRGBhexColor(palbut.light().color())+", stop: 1 "+getRGBhexColor(palbut.dark().color())+") }"
"QPushButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 "+getRGBhexColor(palbut.dark().color())+", stop: 1 "+getRGBhexColor(palbut.light().color())+"); }");
list.append("QPushButton { font: 75 28pt \"Serif\"; border: 1px solid "+getRGBhexColor(palyellow.shadow().color())+"; border-radius: 5px;"
"background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.5 "+getRGBhexColor(palyellow.button().color())+", stop: 1 "+getRGBhexColor(palyellow.shadow().color())+"); min-width: 10px; }"
"QPushButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 "+getRGBhexColor(palyellow.dark().color())+", stop: 1 "+getRGBhexColor(palyellow.light().color())+"); }"
// "QPushButton:flat { border: none; }"
// "QPushButton:default { border-color: navy; }"
);

colorsStyleSheets.append(list);
colorsStyleSheets.append(list);

connect(&colorTimer, SIGNAL(timeout()), this, SLOT(sColorTimerTimeout()));
startColorTimer();
}

MainWindow::~MainWindow()
{
delete ui;
}

void MainWindow::changeEvent(QEvent *e)
{
QMainWindow::changeEvent(e);
switch (e->type()) {
case QEvent::LanguageChange:
ui->retranslateUi(this);
break;
default:
break;
}
}

void MainWindow::startColorTimer() {
QWidget* twid = this->focusWidget();
if(twid == ui->pushButtonBack)
twid->setStyleSheet(colorsStyleSheets.at(0).at(1));
else if(twid == ui->pushButtonSend)
twid->setStyleSheet(colorsStyleSheets.at(1).at(1));

colorTimer.start(1000);
}

void MainWindow::stopColorTimer() {
colorTimer.stop();
}

void MainWindow::sColorTimerTimeout() {
QWidget* twid = this->focusWidget();
QStringList tlist;
int idx = -1;
if(twid == ui->pushButtonBack)
tlist = colorsStyleSheets.at(0);
else if(twid == ui->pushButtonSend)
tlist = colorsStyleSheets.at(1);
if(twid == ui->pushButtonBack || twid == ui->pushButtonSend) {
QPushButton* tpb = qobject_cast<QPushButton*>(twid);
tpb->setFlat(false);
idx = tlist.indexOf(twid->styleSheet());
idx++;
if(idx >= tlist.size())
idx = 0;
twid->setStyleSheet(tlist.at(idx));
}
}

QString MainWindow::getRGBhexColor(const QColor color) {
QString col("#");
// qDebug("red: %x", color.red());
if(color.red() == 0)
col.append("00");
else
col.append(QString::number(color.red(), 16));
// qDebug("green: %x", color.green());
if(color.green() == 0)
col.append("00");
else
col.append(QString::number(color.green(), 16));
// qDebug("blue: %x", color.blue());
if(color.blue() == 0)
col.append("00");
else
col.append(QString::number(color.blue(), 16));
return col;
}



#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QStringList>
#include <QTimer>

#include <QCommonStyle>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow {
Q_OBJECT
public:
MainWindow(QWidget *parent = 0);
~MainWindow();

protected:
void changeEvent(QEvent *e);

private slots:
void sColorTimerTimeout();

private:
void startColorTimer();
void stopColorTimer();

QString getRGBhexColor(const QColor color);

Ui::MainWindow *ui;

QTimer colorTimer;
QList<QStringList> colorsStyleSheets;
};

#endif // MAINWINDOW_H

But still this is not what i want to achive...

When I use only this piece of code:

ui->spinBox->setStyleSheet("background-color: yellow;")
I've got spinbox which looks like on image_1_background (white frame in text area with yellow background) which I would like to achive.
But when I use code from above class I've got spinbox which looks like on image_2_whithout_frame (background color fills all content). I don't want have a color which fills background under buttons.

If anyone have an idea how can I achieve my intended effect (from first image) with changing size of buttons I will be grateful.

Thank you.
Regards for programmers.
Franko