I need to create a button which may contain two icons and two text label to display (on screenshots - every line such as "Email" or "Connection" is a standalone button).
From what I understood - I can't override QPushButton or QAbstractButton and I have to implement my own custom widget in order to achieve such layout. So far I'm trying to make such buttons with Qt Designer and change style of the widget using QSS and dynamic properties but for some reason stylesheet is not changing when I press the button. My code:
namespace ui
{
ViewEntryPushButton::ViewEntryPushButton(QWidget* parent)
: QWidget(parent)
, ui(new Ui::ViewEntryPushButton)
{
ui->setupUi(this);
}
ViewEntryPushButton::~ViewEntryPushButton()
{
delete ui;
}
void ViewEntryPushButton::mousePressEvent(QMouseEvent* event)
{
this->setProperty("pressed", true);
this->style()->unpolish(this);
this->style()->polish(this);
this->update();
}
void ViewEntryPushButton::mouseReleaseEvent(QMouseEvent *event)
{
this->setProperty("pressed", false);
this->style()->unpolish(this);
this->style()->polish(this);
this->update();
}
} // namespace ui
And my style sheet which I apply to the highest object in Qt Designer object view:
#ViewEntryPushButton {
background-color: transparent;
padding: 5px;
margin-left: 5px;
}
#ViewEntryPushButton[pressed="true"]{
background-color:rgb(51, 0, 255);
border-width: 3px;
border-color: rgba(255, 255, 255, 20);
border-style: inset;
}
So my questions:
1. Is my approach right or it is possible to subclass QAbstractButton and implement it like this?
2. What am I doing wrong with style sheets in this case and why style of the widget is not changing when I press my mouse?
Did you tried you change stylesheet using the setstylesheet function like this in the constructor. Well this is just another way of doing thing.
Button.setstylesheet("")
Ended up using custom widget with QStackedLayout and transparent button above all other layers, I think it is the best approach.
I created necessary labels on "low" layers of the layout and just added a button above them all with background:transparent; property in style sheets.
Also StackingMode should be set to StackAll in the layout.
Related
I am trying to change the icon of a QMenu's right arrow. The following QSS rule works
QMenu::right-arrow {
image: url(icons:icon_name.svg);
}
However, it changes the right arrows of all QMenus. I want to select only QMenus that have some property/name. I tried the following things:
/* shouldHide is a boolean property set to true */
QMenu[shouldHide="true"]::right-arrow {
image: url(icons:icon_name.svg);
}
QMenu::right-arrow[shouldHide="true"] {
image: url(icons:icon_name.svg);
}
I also tried wrapping the QMenu in a hidden QWidget and setting the stylesheet on the parent
container->setStyleSheet("QMenu::right-arrow: {image: url(icons:icon_name.svg); }");
I also attempted to set the style sheet on the menu itself in the following ways:
menu->setStyleSheet("QMenu::right-arrow: {image: url(icons:icon_name.svg); }");
menu->setStyleSheet("*::right-arrow: {image: url(icons:icon_name.svg); }");
... and none of them work.
This style will be applied for all QMenu Objects:
QMenu::right-arrow
{
image: url(icons:icon_name.svg);
}
If you want only to apply to a specific object, you could use the object name of the object:
Only Object Name:
#my_object_name::right-arrow
{
image: url(icons:icon_name.svg);
}
Object Name Of A Specefic Type
QMenu#my_object_name::right-arrow
{
image: url(icons:icon_name.svg);
}
I am trying to edit the css of a tree view model (list store), I have set everything up using this code and it works perfectly:
auto css_provider = Gtk::CssProvider::create();
css_provider->load_from_path("style.css");
Gtk::StyleContext::add_provider_for_screen
(Gdk::Screen::get_default(), css_provider,
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
This code successfully loads in the css file and I can change certain properties of the treeview, ive tested padding and that works fine, it applies padding to each row in the liststore:
treeview.view {
padding: 20px;
}
or
treeview * {
margin: 10px;
}
But if I try to reference the name of the treeview, it doesn't work (no errors or warnings):
#m_TreeView { /* or m_TreeView.view */
padding: 20px;
}
My main goal is to apply a margin between each row, but this also doesn't seem to work (no errors or warnings), I want to apply a margin to each row but reference the specific name of the tree view as I would have multiple tree views in my application:
treeview.view {
margin: 20px;
}
Tried to access the rows and tried to access the list stores children (*):
treeview row {
margin: 10px;
}
+
liststore * {
margin: 10px;
}
But if I try to reference the name of the treeview, it doesn't work (no errors or warnings):
The name you need is not the variable name. To give a name for CSS styling, you can set it by calling
void Gtk::Widget::set_name ( const Glib::ustring & name )
I have been asked if I can modify my oracle apex interactive grid to make the row selector column wider, bold and add a title is possible. I know how to do this for a column but I am not sure it is possible for an interactive grid row selector. Any help or an example would be helpful.. Thank you
Wow, this was a tricky one. I think I've figured it out (many thanks to John Snyders!). Assuming the IG has an id of 'emp', the following should work:
Add the following CSS to the page's Inline property under CSS. This will handle the styling of the checkbox, the checkmark in the checkbox, and it will show the column's header which is hidden by default. You can remove the #emp selector if you want to target all IGs on a page.
/* Style the box */
#emp .u-selector {
border: 2px solid #000;
padding: .5px;
}
/* Style the check in the box */
#emp .u-selector:before {
font-weight: 900;
color: #000;
}
/* Show the row selector column header */
#emp .a-GV-headerLabel {
position: relative;
}
#emp .a-GV-table th {
white-space: normal;
}
Next, add the following JavaScript code to the page's Execute when Page Loads property under JavaScript.
var igRegionId = 'emp';
var widgetInst = apex.region(igRegionId).call('getViews').grid.view$.data('apex-grid');
var orgRefresh = widgetInst.refresh;
widgetInst.refresh = function() {
orgRefresh.call(widgetInst);
$('.u-vh.a-GV-headerLabel').text('Hello World!');
};
widgetInst.refresh();
Finally, add the following JavaScript to the IG region > Attributes > JavaScript Initialization Code. This will resize the column as needed:
function(config) {
config.defaultGridViewOptions = {
rowHeaderWidth: 100
};
return config;
}
I have already tried to use disabled and !enabled but it doesn't work.
Here is my QSS code :
QPushButton {
background-color:#44c767;
border-radius:5px;
border:1px solid #18ab29;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
text-decoration:none;
padding-right:10px;
outline: 0;
}
QPushButton:hover:!pressed {
background-color:#54d777;
}
QPushButton: pressed {
background-color:#30b252;
}
QPushButton: disabled {
background-color:#ff0000;
}
QPushButton: !enabled {
background-color:#ff0000;
}
The documentation refers to a disabled pseudo state but without providing more information about it.
Edit
I am using QT5.3
Remove all spaces after colons (really ALL - because it invalidates the further css text) and it will work:
QPushButton:disabled {
background-color:#ff0000;
}
Actually, both disabled and !enabled works.
This is my QML file:
Rectangle {
width:640;
height:360;
Text {
text:qsTr("Agritrade");
anchors.centerIn:parent;
}//text
MouseArea {
anchors.fill:parent;
onClicked: {
Qt.quit();
}
}//mouse area
}
I wish to make the window borderless. How to set the properties for the Rectangle above?
It seems like impossible to set properties for Rectangle tag to make a borderless frame.
The only solution below is applicable (use 'setFlags' method):
//qml viewer
QtQuick2ApplicationViewer viewer;
viewer.setMainQmlFile(QStringLiteral("qml/agritrade/main.qml"));
viewer.setFlags(Qt::Window|Qt::FramelessWindowHint);
viewer.showExpanded();