Color ComboBox

[ioannis]

Hi everybody,

I would like to build a combobox for selecting colors, like the one used in MS Excel when you select for example the color of a line. I have already tested wysota's QwwColorComboBox. However, I would prefer the color to cover the whole width of the combobox and only a small part of it. Any hints?

Thanks in advance...

[spirit]

take a look at this example. I think it should help you.

[ioannis]

Thanks for the reply. However, in this case the color only occupies a small rectangle in the left side of the combobox. I would like the color to occupy the whole of the combobox.

[spirit]

try this

QComboBox *cb = new QComboBox(this);
const QStringList colorNames = QColor::colorNames();
int index = 0;
foreach (const QString &colorName, colorNames) {
	const QColor color(colorName);
	cb->addItem(colorName, color);
	const QModelIndex idx = cb->model()->index(index++, 0);
	cb->model()->setData(idx, color, Qt::BackgroundColorRole);
}

QComboBox *cb = new QComboBox(this);
const QStringList colorNames = QColor::colorNames();
int index = 0;
foreach (const QString &colorName, colorNames) {
	const QColor color(colorName);
	cb->addItem(colorName, color);
	const QModelIndex idx = cb->model()->index(index++, 0);
	cb->model()->setData(idx, color, Qt::BackgroundColorRole);
}

To copy to clipboard, switch view to plain text mode 

hope you've got idea.

[wysota]

I would like to build a combobox for selecting colors, like the one used in MS Excel when you select for example the color of a line. I have already tested wysota's QwwColorComboBox. However, I would prefer the color to cover the whole width of the combobox and only a small part of it. Any hints?

It's only a matter of using another item delegate. There is also an implementation of a colour combobox as a Qt Solution but I don't know if it covers the whole area of the widget or not.

[ioannis]

Thanks wysota. Can you give me a minimal example?

Thanks in advance.

[wysota]

Something like:

class Delegate : public QItemDelegate {
//...
 
  void paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const {
    painter->fillRect(option.rect, qvariant_cast<QColor>(index.data(Qt::DecorationRole)));
  }
};

class Delegate : public QItemDelegate {
//...

  void paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const {
    painter->fillRect(option.rect, qvariant_cast<QColor>(index.data(Qt::DecorationRole)));
  }
};

To copy to clipboard, switch view to plain text mode 

[spirit]

so, what is difference between your code and my? in both case current line have own background color.

[wysota]

I don't modify the model I didn't say my code was better than yours, I have only shown how to make my color combobox display colors in a different way. Many ways may lead to the same result, there is no point in discussing the differences.

[spirit]

I don't modify the model I didn't say my code was better than yours, I have only shown how to make my color combobox display colors in a different way. Many ways may lead to the same result, there is no point in discussing the differences.

but any way you have to get colors from model
ok, agree with this "Many ways may lead to the same result".

[San_Cou]

Hi,

I tried the spirit's idea. It works fine for the menu but the selected option does not display the background color.
How can I put the color in the background of the actual index?

Thank you very much!

[San_Cou]

When the index changes I need to set the base with the color of the current index:

QColor color = qvariant_cast<QColor>(model()->index(index, 0).data(Qt::BackgroundColorRole));
 
QPalette pal = palette();
pal.setColor(QPalette::Base, color);
setPalette(pal);

QColor color = qvariant_cast<QColor>(model()->index(index, 0).data(Qt::BackgroundColorRole));

QPalette pal = palette();
pal.setColor(QPalette::Base, color);
setPalette(pal);

To copy to clipboard, switch view to plain text mode 

This works very well, I have the correct color in the right place... but, the highlight mess it up. I don't need the highlight since I'm working with colors.
Is there a way to simple remove the highlight?

I had tried this:

pal.setColor(QPalette::Highlight, Qt::transparent);

pal.setColor(QPalette::Highlight, Qt::transparent);

To copy to clipboard, switch view to plain text mode 

but it's not transparent, it's white.

[San_Cou]

I did a workaround. The idea was make the highlight with the same color of the item.

Connect the highlighted signal from QComboBox:

ComboBoxColor( QWidget *parent = 0 ) : QComboBox( parent )
{
    connect( this, SIGNAL(highlighted(int)), this, SLOT(slotHighlight(int)) );
}

ComboBoxColor( QWidget *parent = 0 ) : QComboBox( parent )
{
    connect( this, SIGNAL(highlighted(int)), this, SLOT(slotHighlight(int)) );
}

To copy to clipboard, switch view to plain text mode 

The slot will set the correct color for the current item:

void ComboBoxColor::slotHighlight(int index)
{
    const QStringList colorNames = QColor::colorNames();
    QColor color(colorNames.at(index));
 
    QPalette palette = this->palette();
    palette.setColor(QPalette::Highlight, color);
    setPalette(palette);
}

void ComboBoxColor::slotHighlight(int index)
{
    const QStringList colorNames = QColor::colorNames();
    QColor color(colorNames.at(index));

    QPalette palette = this->palette();
    palette.setColor(QPalette::Highlight, color);
    setPalette(palette);
}

To copy to clipboard, switch view to plain text mode 

[farouk]

spirit

Default Re: Color ComboBox
take a look at this example. I think it should help you.

plzzzzzzzzzzz any body sent me that code iam in deep need to it

whin i open the above link it dosnt open

[Ginsengelf]

Hi, see here:
http://doc.qt.io/qt-4.8/qt-itemviews...y-example.html

Ginsengelf