QLabel subclass and stylesheet Qtcreator

[gfxx]

in qt cr4eator I have these stylesheet:

QLabel{color: black; border: 3px solid #5E749C;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }
QLabel:checked{color: black; border: 5px solid #00ff00;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }

and I have subclass QLabel in these way:

#ifndef QTOGGLEABLEQLABEL_H
#define QTOGGLEABLEQLABEL_H

#include <QLabel>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QGraphicsItem>
#include <QGraphicsPolygonItem>
#include <QDesktopWidget>
#include <QDialog>
#include <QWidget>
#include <QWidgetAction>
#include <QWidgetData>
#include <QWidgetItem>
#include <QPixmap>


class QToggleableQLabel : public QLabel
{
Q_OBJECT
public:
    explicit QToggleableQLabel(QWidget* parent=0 );
    ~QToggleableQLabel();

public slots:
    void checked(bool checked);

signals:
    void clicked(bool);
protected slots:

    virtual void enterEvent ( QEvent * event );
    virtual void leaveEvent ( QEvent * event );
    virtual void mouseMoveEvent ( QMouseEvent * event );
    virtual void mousePressEvent ( QMouseEvent * event );
    virtual void mouseReleaseEvent ( QMouseEvent * event );
};

#endif // QTOGGLEABLEQLABEL_H

cpp

#include "qtoggleableqlabel.h"
#include <QDebug>

bool ToggledQLabel = false;

QToggleableQLabel::QToggleableQLabel(QWidget* parent)
    : QLabel(parent)
{
    connect(this, SIGNAL(clicked(bool)), this, SLOT(checked(bool)));

}

QToggleableQLabel::~QToggleableQLabel()
{
}

void QToggleableQLabel::checked(bool checked)
{
   qDebug() << "result:   " << checked;
}

void QToggleableQLabel::mousePressEvent(QMouseEvent * event)
{
    if(!ToggledQLabel)
    {
        emit clicked(true);
        ToggledQLabel = true;
    }
    else
    {
        emit clicked(false);
        ToggledQLabel = false;
    }

}

void QToggleableQLabel::enterEvent ( QEvent * event )
{
}

void QToggleableQLabel::leaveEvent ( QEvent * event )
{
}

void QToggleableQLabel::mouseMoveEvent ( QMouseEvent * event )
{
}


void QToggleableQLabel::mouseReleaseEvent ( QMouseEvent * event )
{
}

Into Qt creator I have promoted to QToggleableQLabel 2 QLabel but:

1)the label not change border color when touch it ... but qDebug show correct result
2) promoted QToggleableQLabel1 and QToggleableQLabel2 have the same result at the same time .... if press over QToggleableQLabel1 it become true .... but if press over QToggleableQLabel2 it become false and vice-versa ... never see QToggleableQLabel1 = true and QToggleableQLabel2 = true at the same time !!!

same result if in stylesheet changhe :

QToggleableQLabell{color: black; border: 3px solid #5E749C;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }
QToggleableQLabel:checked{color: black; border: 5px solid #00ff00;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }

Where is the error??

regards
Giorgio

[SGaist]

Hi,

The error is that you're using a static variable for a class internal state. Make ToggledQLabel a class member.

[gfxx]

@SGaist Re:

#ifndef QTOGGLEABLEQLABEL_H
#define QTOGGLEABLEQLABEL_H

#include <QLabel>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QGraphicsItem>
#include <QGraphicsPolygonItem>
#include <QDesktopWidget>
#include <QDialog>
#include <QWidget>
#include <QWidgetAction>
#include <QWidgetData>
#include <QWidgetItem>
#include <QPixmap>


class QToggleableQLabel : public QLabel
{
Q_OBJECT
public:
    explicit QToggleableQLabel(QWidget* parent=0);
    ~QToggleableQLabel();


public slots:
    void setchecked(bool checked);

signals:
    void clicked(bool);
protected slots:
    virtual void enterEvent ( QEvent * event );
    virtual void leaveEvent ( QEvent * event );
    virtual void mouseMoveEvent ( QMouseEvent * event );
    virtual void mousePressEvent ( QMouseEvent * event );
    virtual void mouseReleaseEvent ( QMouseEvent * event );
private:
    bool ToggledQLabel;

};

#endif // QTOGGLEABLEQLABEL_H

The right code .... but Qt Designer stylesheed not change style at QToggleableQLabel:checked !!! why?

Regards
Giorgio

[mostefa]

Hi @gfxx

There is something that intrigues me in your code qt stylesheet,

QLabel:checked{color: black; border: 5px solid #00ff00;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }

you have QLabel:checked

are you sure that checked property are available with QLabel?? I do not think so.

on Qt stylesheet list of properties

http://doc.qt.io/qt-4.8/stylesheet-reference.html#list-of-properties

it is marked that checked property is for QAbstractButton (and then child)

and in QLabel doc ,i do not find any checked , member

http://doc.qt.io/qt-4.8/qlabel-members.html

Maybe i am wrong , but for me this the problem , this line is not ok :

QLabel:checked{color: black; border: 5px solid #00ff00;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }

[gfxx]

@mostefa Thank for your answer .... but I subclass the Qlabel for obtain cheched state or isOn state for use it on stylesheet .... for sure something of wrong there is ... for you is because there are not these property support for QLabel? SO I can subclass for obtain custom slot/signal but not for change stylesheet??

#ifndef QTOGGLEABLEQLABEL_H
#define QTOGGLEABLEQLABEL_H

#include <QLabel>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QGraphicsItem>
#include <QGraphicsPolygonItem>
#include <QDesktopWidget>
#include <QDialog>
#include <QWidget>
#include <QWidgetAction>
#include <QWidgetData>
#include <QWidgetItem>
#include <QPixmap>


class QToggleableQLabel : public QLabel
{
Q_OBJECT
public:
    explicit QToggleableQLabel(QWidget* parent=0);
    ~QToggleableQLabel();


public slots:
    void setchecked(bool checked);

signals:
    void clicked(bool);
protected slots:
    virtual void enterEvent ( QEvent * event );
    virtual void leaveEvent ( QEvent * event );
    virtual void mouseMoveEvent ( QMouseEvent * event );
    virtual void mousePressEvent ( QMouseEvent * event );
    virtual void mouseReleaseEvent ( QMouseEvent * event );
private:
    bool ToggledQLabel;

};

#endif // QTOGGLEABLEQLABEL_H

Regards
giorgio

[J.Hilk]

@gfxx

I'm not sure, if you can create your own subclass for QSytlesheet, at least I haven't done that jet.

But you can work around that problem, for example:
In class QToggleableQLabel add

public:
void setStyleToggeled(QString s1){ sStyle1 = s1;}
void setStyleUnToggeled(QString s2){ sStyle2 = s2;}

private:
QString sStyle1, sStyle2;

void QToggleableQLabel::mousePressEvent(QMouseEvent * event)
{
    if(!ToggledQLabel)
    {
        emit clicked(true);
        ToggledQLabel = true;
        this->setStyleSheet(sStyle1);
    }
    else
    {
        emit clicked(false);
        ToggledQLabel = false;
        this->setStyleSheet(sStyle2);
    }
}

it now changes on clicking the style between sSytle1 and sStyle2

[mostefa]

@J.Hilk said in QLabel subclass and stylesheet Qtcreator:

@gfxx

I'm not sure, if you can create your own subclass for QSytlesheet, at least I haven't done that jet.

But you can work around that problem, for example:
In class QToggleableQLabel add

public:
void setStyleToggeled(QString s1){ sStyle1 = s1;}
void setStyleUnToggeled(QString s2){ sStyle2 = s2;}

private:
QString sStyle1, sStyle2;

void QToggleableQLabel::mousePressEvent(QMouseEvent * event)
{
    if(!ToggledQLabel)
    {
        emit clicked(true);
        ToggledQLabel = true;
        this->setStyleSheet(sStyle1);
    }
    else
    {
        emit clicked(false);
        ToggledQLabel = false;
        this->setStyleSheet(sStyle2);
    }
}

it now changes on clicking the style between sSytle1 and sStyle2

I do not think that you are using a good approach, you have to use dynamic stylesheet properties,

Using Dynamic properties with stylesheet

You can add custom properties : you have to do things like that :

void QToggleableQLabel::mousePressEvent(QMouseEvent * event)
{
if(!ToggledQLabel)
{
emit clicked(true);
ToggledQLabel = true;
/*** here you tell to your stylesheet that you have dynamic properties called checked, and it's enabled (=true)/
this->setProperty("checked", true);
this->style()->unpolish(this);
this->style()->polish(this);
/**********************************************************************************************************************/

}
else
{
    emit clicked(false);
    /*** here you tell to your stylesheet that you have dynamic properties called checked, and it's enabled (=true)***/
    ToggledQLabel = false;
     this->setProperty("checked", false);
    this->style()->unpolish(this);
    this->style()->polish(this);
    /*************************************************************************************************************************/

}

}

And you have to change your stylesheet as follows :

QToggleableQLabel[checked=false]
{
	color: red;// you can add custom stylesheet as you want
}

QToggleableQLabel[checked=true] {
  color: blue;//you can add custom stylesheet as you want
}

With this example , everything should be ok.

Reading the doc is very important , i advise you to read to following links:

Qt stylesheet syntax

Qt Stylesheet-Reference

Hope this can help ,

Best regards !

[J.Hilk]

@mostefa

a much better approach! Thanks for sharing.
I'll most defenitly will look into it myself more.

[gfxx]

@mostefa Very Thanks ... I was just studying precisely these things right now ... so has simplified my life.

Thank you owe two beers ... (assuming they are your favorite beverage .... otherwise one).

[mostefa]

@gfxx

Haha =) , you are welcome !

[gfxx]

@J.Hilk Your method is fine if you do not use QT Creator for style ... the best thing is to use it in GuiThread ... with these subclass I have a ToggledQLabel var ... so in mainwindow:

if(ToggledQLabel){
ui->myToggledQLabel1->setstylesheet("ToggledQLabel{..............};");}
else{
ui->myToggledQLabel1->setstylesheet("ToggledQLabel{......other style........};");}

but I try to have

I do not think that you are using a good approach, you have to use dynamic stylesheet properties,
Using Dynamic properties with stylesheet
You can add custom properties : you have to do things like that :

simply I did not know it existed or their name .... the link on my abstracbutton addressed.