Specific QPushButton style - c++

How can I customize the look of a QPushButton or QToolButton to look something like elementaryos's webpage "buttons"?
All I really want is the characteristic image position and the text on it's side, maybe if i'm lucky i can also get a border like that, but i don't really need the little description below the title :)
Can i do it only with StyleSheets, or do i have to subclass QPushButton/QAbstractButton/Something like that? I already searched everywhere but didn't found that level of customization without things like painting something in a fixed place, which is exactly what i don't want.
EDIT:
I really would like a solution that would get me a customizable button, not a fixed image one, something in the tracks of
MainWindowButton(QString(title), /*opt*/QString(description), QImage(icon));

There are a number of approaches that may work.
You might first consider trying to compose a solution with a normal QPushButton with a QVBoxLayout on it. You could add three QLabels; one for the title text, one for the caption text and one for the image. Some CSS could probably be used to render the background image of the button for up and down and more CSS to style the text in the two labels and position the image on the third but you would then find that the labels don't shift down when the button is clicked.
I think the best solution involves direct painting. You could do this by sub classing a QWidget and overriding the paintEvent(). Render everything for the up state and shift everything over and down a bit for the down state.
You could achieve this without sub classing by rendering the up and down states to a QImage and styling a QPushbutton with them using CSS.
There are a number of combinations of these approaches too.

You can set the background as white with the icon in the right corner with some creative use of the border-image stylesheet property where the bottom border is as tall as the icon and the top, left and right borders are 0 pixels wide. You'll need to make a custom image that basically looks like the icon with a couple pixels width on the left and top that are white
http://doc.qt.digia.com/qq/qq20-qss.html#theboxmodel
The text you may have to do overriding paintEvent.

Related

Multiple Layers in Widget

I currently need a small ImageViewer in my project, where you can zoom in and go to next or previous image. These buttons should be fixed at right bottom corner like in this picture:
In this case I have q QLabel which has a Layout with some buttons. But now it should be zoomable, so I need QScrollArea, like explained here. But how I add my buttons again in this example? It is possible to archive this view just with QtDesigner?
Maybe QToolBar will suite your needs. It will make a floating panel over your graphics view. An example. If you need to achieve the background of the toolbar transparent while its buttons are semi-transparent then it is doable as well. But first you need to decide if toolbar works for you.

How can I create a QPushButton with a custom (triangular) shape in Qt 5.5?

How can I create a triangular pushbutton in Qt? What is the most simplest way of executing this? I use the designer to create buttons and not code.
Also, I read somewhere that shapes may be changed as long as the frame of the button is still rectangular but I want the frame to adjust according to the shape as well. How can I achieve this?
More detail: I want to place lots of small triangular buttons next to each other with every other triangle flipped. Each triangle button has it's own function, etc (no overlapping borders accepted). Can anyone give me a descriptive explanation for how I might go about this?
The geometry on a QWidget is always a rectangle.
It would be possible to create a QPushButton derivative, override its paintevent and do some nasty painting considering its neighborhood etc. but it would be really a pain...
it is much easier to use a QGraphicsView, QGraphicsScene and add appropriate QGraphicsItem (maybe the QGraphicsPolygonItem?), add them and use their signals/slots or create a derived class for your purposes.
It is not that hard to override the mouseevents to recognize clicks and you can even use the QStyleSheets to let the "button" look like it gets pressed.

How to prevent an icon being highlighted?

I have a listwidget with items which have icons. When the item is selected both the text and the icon are highlighted. My problem is that when the icon is highlighted it just goes entirely black because I'm using only two colours. Is there a way to prevent the icon from being selected?
You can add additional images to the QIcon, depending on it's state:
QIcon icon(...);
icon.addFile("selected.png", size, QIcon::Selected);
See also the documentation of QIcon::addFile().
Best solution was to make your own qstyle which handled the painting of the backgrounds of listitem sub controls and draw the icons qrect as white
Another possibility would be to reimplement QListWidgetItem... You could therefore have a bigger control on how things gets done during the process of selection and painting...
Of course, it's a lot more work...

Qt: Dragging a widget to scroll the widget's parent QScrollArea?

I've got a long horizontal QLabel displaying a png (the image shows a signal/time graph). Under that, I've got a QTableWidget. Both of these are in a QScrollArea because I want them to stay vertically aligned (the cells in the table correspond with the signal seen directly above them). I'm trying to add a handler to the QLabel such that the user can use the picture itself to scroll the scrollarea, rather than having to use the scrollbar. Is there a tried-and-tested way to do this? Directly setting the scrollarea's sliderPosition inside the QLabel's dragMoveEvent doesn't seem smart, because when the scrollarea scrolls it also leads to another dragMoveEvent on the (moving) QLabel.
I would suggest wrapping the combination (including the scroll area) in their own widget, and overriding the dragMoveEvent() on that widget. The dragMoveEvent() shouldn't be triggered when you change the scroll position if you are doing it this way, I wouldn't think, although I haven't actually tested it.

QTabBar icon position

Is there a way to change the alignment of the icon or text of a tab in Qt? Specifically, I would like the text to appear below the icon. By default the icon sits to the left of the text, but that's not appropriate for all situations (especially when you start styling your tabs with stylesheets) It would seem very odd to me that this aspect would be so restricted when I can completely alter the look and feel of the rest of the tab.
Thanks for any suggestions!
The only way I can see is to create a subclass of QTabBar that implements your own painting algorithm. Then you'd need to subclass QTabWidget to set your own version of the tab bar. It doesn't look like a lot of fun to me.