I have the following pushbutton stylesheet:
QPushButton:hover{
background: qlineargradient(x1 : 0, y1 : 0, x2 : 0, y2 : 1, stop : 0.0 #ffd9aa,
stop : 0.5 #ffbb6e, stop : 0.55 #feae42, stop : 1.0 #fedb74);
}
QPushButton {
border: 1px solid #6593cf;
border-radius: 2px;
padding: 5px 15px 2px 5px;
background: qlineargradient(x1 : 0, y1 : 0, x2 : 0, y2 : 1, stop : 0.0 #f5f9ff,
stop : 0.5 #c7dfff, stop : 0.55 #afd2ff, stop : 1.0 #c0dbff);
color: #006aff;
font: bold large "Arial";
height: 30px;
}
QPushButton:pressed {
background: qlineargradient(x1 : 0, y1 : 0, x2 : 0, y2 : 1, stop : 0.0 #c0dbff,
stop : 0.5 #cfd26f, stop : 0.55 #c7df6f, stop : 1.0 #f5f9ff);
padding-top: 2px;
padding-left: 3px;
}
QPushButton:on {
background: qlineargradient(x1 : 0, y1 : 0, x2 : 0, y2 : 1, stop : 0.0 #5AA72D,
stop : 0.5 #B3E296, stop : 0.55 #B3E296, stop : 1.0 #f5f9ff);
padding-top: 2px;
padding-left: 3px;
}
QPushButton:disabled {
background: transparent #e5e9ee;
padding-top: 2px;
padding-left: 3px;
color: black;
}
I have a button. When it's pressed a side widget is resized. Thus the button gets the pressed style, when I release it gets the hover style. Furthermore the widget is resized and the button "follows" the widget. The problem is that the button keeps the hover state and loses it when I do some movement with the mouse. Is this a bug from qt or I miss something in the stylesheet code.
I did a animated gif showing the situation:
Thanks
You can say that it's a bug in Qt. I would say it's a kind of bugs caused by right logic. Judge for yourself. Hover state is defined by WA_UnderMouse widget attribute. This attribute is set by the application:
if ((e->type() == QEvent::Enter || e->type() == QEvent::DragEnter) ...
widget->setAttribute(Qt::WA_UnderMouse, true);
else if (e->type() == QEvent::Leave || e->type() == QEvent::DragLeave)
widget->setAttribute(Qt::WA_UnderMouse, false);
QEvent::Enter and QEvent::Leave events are only sent when the application receives mouse event from OS.
You don't move mouse, the application doesn't receive any mouse event and so WA_UnderMouse attribute is not changed.
One of the ways to fix that is to set Qt::WA_UnderMouse attribute to the right value by yourself when moving the button widget.
Related
Here is my sample code.
Please find my working sample code here
I need to set triangle on right top corner in mat-dialog box - Angular.
I am getting top right corner triangle dialog box using static css on last row.
But here not able to get on each row on change request button click.
The below code is for the Dialog box Component
openDialog(Id, Currency, Amount, Reason, StatusDescription, payment, event) {
let targetAttr = event.target.getBoundingClientRect();
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {
Id: Id,
Reason: Reason,
StatusDescription: StatusDescription
};
dialogConfig.position = {
top: targetAttr.y + targetAttr.height + 10 + "px",
left: targetAttr.x - targetAttr.width - 20 + "px"
};
dialogConfig.panelClass = ['my-panel','arrow-top'];
const dialogRef = this.dialog.open(EditingDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(
data => {
console.log("Dialog output:", data)
}
);
}
The Below code is from style.scss
/* Add application styles & imports to this file! */
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
.my-panel {
overflow: hidden !important;
border-radius: 5px !important;
padding: 0px !important;
color: #fff;
}
.my-panel.arrow-top {
margin-top: 40px;
}
.my-panel.arrow-top:after {
content: " ";
position: absolute;
right: 100px;
top: 365px;
border-top: none;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid gray;
}
I am getting like this.
But I want dialog box with upper arrow on each row under change request button click event
I have tried to style some checkboxes but now I can't click on/ activate/ check them. Radio buttons that are mostly styled the same way do work.
$(document).ready(function() {
var $selection = $('.sc-checkbox');
$selection.each(function() {
var $this = $(this),
$id = $this.attr('id');
$this.after( '<label for="' + $id + '"></label>' );
});
});
input[type="checkbox"].sc-checkbox {
-webkit-opacity: 0;
opacity: 0;
left: -102%;
position: absolute
}
input[type="checkbox"].sc-checkbox+label{
padding: 0 5px 0 10px;
}
input[type="checkbox"].sc-checkbox+label:before {
content: '';
display: inline-block;
background: transparent;
border: .14286rem solid rgba(0, 0, 0, 0.54);
width: .92857rem;
height: .92857rem;
border-radius: .14286rem;
font-family: 'Material Icons';
position: relative;
vertical-align: middle;
left: 0;
line-height: .92857rem;
-webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1)
}
input[type="checkbox"].sc-checkbox:checked+label:before {
background: #3f51b5;
border: .14286rem solid #3f51b5;
content: '\E5CA';
color: #fff
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<input type="checkbox" class="sc-checkbox" id="test"></label><label for="test">Test</label>
<input type="checkbox" class="sc-checkbox" id="test1" checked></label><label for="test1">Test1</label>
When you run the example everything works but on my website it doesn't work.
I have fiddled around with positions, paddings and margins on the :before but nothing seems to be working.
I hope someone can help me make the checkboxes work again.
Thanks in advance.
You have a code that fixes a bug when text field isn't selected when label is clicked:
textfields.js, line 30:
// Fix bug that text field isn't selected when label is clicked
$('label').click(function() {
var $id = $(this).attr('for');
$('#'+$id).trigger('click');
});
However this code cause your click on the label to be triggered twice, so you get two clicks on the checkbox (which causes your checkbox to be checked and then unchecked immediately, or the opposite).
I'm not sure if you really need this code or not, but you can change your fix-bug to something like this:
// Fix bug that text field isn't selected when label is clicked
$('label').click(function() {
var $id = $(this).attr('for');
if ($('#'+$id).is(':checkbox')) {
return;
}
$('#'+$id).trigger('click');
});
When a user 'tabs over' to an input, I want the focus effect to be normally displayed, but on click, I don't want it to be visible.
User hits tab, now focussed on toggle button, I would like the toggle button to have slight glowing outline, which I'm currently able to do.
Now,
User clicks on the toggle button or it's associated label, toggle changes as usual,
BUT, I want the glow to never appear in the first place, or to disappear as quickly as possible.
I know about .blur(), and right now I'm having to use a setTimeout for a lazy fix, but I'd like to know if there's a better way to accomplish this, or if there's possibly a CSS only solution
I think a lot of front-end developers struggle to find a balance between aesthetics and the best-practices for accessibility. This seems like a great compromise.
Here's how I do it. The idea is to toggle outlining on when the user uses the tab key and turn it back off when they click.
JS
document.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
$('body').addClass('show-focus-outlines');
}
});
document.addEventListener('click', function(e) {
$('body').removeClass('show-focus-outlines');
});
Styles
body:not(.show-focus-outlines) button:focus,
body:not(.show-focus-outlines) [tabindex]:focus {
outline: none;
}
I'm currently doing something similar for my company. Unfortunately you must use JavaScript since CSS doesn't support this use case.
Here's what I've done.
var btns = document.querySelectorAll('button');
var onMouseDown = function (evt) {
evt.target.dataset.pressed = 'true';
};
var onMouseUp = function (evt) {
evt.target.dataset.pressed = 'false';
};
var onFocus = function (evt) {
var element = evt.target;
if (element.dataset.pressed !== 'true') {
element.classList.add('focus');
}
};
var onBlur = function (evt) {
evt.target.classList.remove('focus');
};
for(var i = 0, l = btns.length; i < l; i++) {
btns[i].addEventListener('mousedown', onMouseDown);
btns[i].addEventListener('mouseup', onMouseUp);
btns[i].addEventListener('focus', onFocus);
btns[i].addEventListener('blur', onBlur);
}
* { box-sizing: border-box; }
body { background-color: white; }
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 100px;
margin: 0 1px;
padding: 12px 10px;
font-size: 15px;
color: white;
background-color: #646e7c;
border: none;
border-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
button:focus { outline: none; }
button:active {
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
}
button.focus {
font-weight: bold;
}
button.primary { background-color: #2093d0; }
button.success { background-color: #71a842; }
button.danger { background-color: #ef4448; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button>Default</button>
<button class="primary">Primary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
</body>
</html>
Basically instead of relying on browser's native focus I add/remove a focus class on my button depending on the situation.
If you use the what-input.js plugin you can apply styles specifically for keyboard users. You can use the following code to highlight a button that has been tabbed to. I've found what-input to be a reliable plugin (comes bundled with Zurb Foundation) and is currently regularly maintained.
// scss
body[data-whatinput="keyboard"] {
button {
&:focus {
// other highlight code here
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
}
}
or
/* vanilla css */
body[data-whatinput="keyboard"] button:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
I am trying to set up a method for theming with external files. Currently, I have a file being read and put into a QString, then being placed inside of "qApp->setStyleSheet(string);, this seems to work,however, when i color the background of a button it doesn't seem to work. The same css works directly inside of qt designer too.
Function:
void SeniorProject::themer(QString theme_name)
{
qDebug() << theme_name;
QString file = QCoreApplication::applicationDirPath()
+ "/themes/" + "default" + "/theme.style";
qDebug() << "file = " + file;
QFile themeFile(file);
QString themeStyle;
if (themeFile.open(QIODevice::ReadOnly))
{
QTextStream in (&themeFile);
themeStyle = in.readAll();
themeFile.close();
}
else
{
qDebug() << "error";
}
qApp->setStyleSheet(themeStyle);
update();
}
CSS File
QPushButton#exit {
color: rgb(220, 0, 0);
border: none;
outline: none;
}
QPushButton#exit:hover {
color: rgb(255, 8, 0);
}
QPushButton#exit:Pressed {
color: rgb(150, 0, 0);
}
QFrame#mainbox QPushButton {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgba(122,188,255,1), stop: 0.44 rgba(96,171,248,1), stop: 1 rgba(64,150,238,1));
border: .1px outset rgb(122, 188, 255);
border-radius:4px;
}
QFrame#mainbox QPushButton:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgba(147,201,255,1), stop: 0.44 rgba(133,190,247,1), stop: 1 rgba(90,163,237,1));
border: .1px outset rgb(122, 188, 255);
border-radius:4px;
}
QFrame#mainbox QPushButton:pressed {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgba(84,169,255,1), stop: 0.44 rgba(66,155,244,1), stop: 1 rgba(45,141,237,1));
border: .1px outset rgb(122, 188, 255);
border-radius:4px;
}
The background in the QPushButtons is my currently problem, the stylesheet loads correctly and updates (I can tell because the borders on the buttons actually change to what I want), but the background does not seem to be working. Can anyone help me? Thanks.
I figured out why the background was not working. If you have the background previously set of the entire widget that is the parent of the item you are trying to style through QT Designer will not be able to have a background when it is not set with QT Designer.
I'm experimenting a bit with CSS for making a cool user interface for my QT application.
I have this problem: I have a QPushButton and when it is on focus it has a rectangle on it that I want to remove. Here some screen-shot:
Normal button:
Focused button:
I have tried to add something (backgroundcolor, text-decoration, etc)
QPushButton:focus
but it keeps on highlighting..
Some hints?
here is the QPushButton css code:
QPushButton
{
color: #b1b1b1;
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
border-width: 1px;
border-color: #1e1e1e;
border-style: solid;
border-radius: 6;
padding: 3px;
font-size: 12px;
padding-left: 5px;
padding-right: 5px;
}
QPushButton:pressed
{
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
}
QPushButton:hover
{
border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}
QPushButton:focus {
/*background-color: red;*/
}
ps. I'm on Ubuntu 12.04,with Qt 4.8 and I'm using this wonderfull css: http://www.yasinuludag.com/darkorange.stylesheet
For some reason the accepted answer doesn't seem to work (at least on Qt5.6). This makes the work for me:
QPushButton:focus {
border: none;
outline: none;
}
The highlighted rectangle may be the QStyle::PE_FrameFocusRect styling. The only way to get rid of it is by implementing a custom style. Fortunately, Qt provides a way to implement just a proxy, which uses another style in the general case. For the focus rectangle you'd implement:
class Style_tweaks : public QProxyStyle
{
public:
void drawPrimitive(PrimitiveElement element, const QStyleOption *option,
QPainter *painter, const QWidget *widget) const
{
/* do not draw focus rectangles - this permits modern styling */
if (element == QStyle::PE_FrameFocusRect)
return;
QProxyStyle::drawPrimitive(element, option, painter, widget);
}
};
qApp->setStyle(new Style_tweaks);
One more alternative (works in windows and in ubuntu), for simplicity I use solid colors:
ui->pushButton->setStyleSheet(
"QPushButton { background-color: #0188cc; color: #ffffff; outline: none }"
);
Note "outline: none" property - it removes focus rectangle from the button.
And one more related tip for checkable buttons: by default checked buttons drawed with dot pattern, not solid color as I expected for
"QPushButton:checked { background-color: #0188cc; color: #ffffff; }".
I added "border: none" to the button stylesheet:
"QPushButton:checked { background-color: #0188cc; color: #ffffff; border: none }",
and dotted pattern disappeared! Now my checked buttons are clean, as I expected with solid background style.
I ran this snippet of code both on Windows 7 (Qt5) and on Ubuntu 12 (Qt4.8). There are no problems with it:
QFile file("style.css");
if(file.open(QIODevice::ReadOnly))
{
QString data = file.readAll();
// "this" is the derived QMainWindow class
this->setStyleSheet(data);
}
And alternatively...
ui->pushButton->setStyleSheet("QPushButton"
"{"
"color: #b1b1b1;"
"background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);"
"border-width: 1px;"
"border-color: #1e1e1e;"
"border-style: solid;"
"border-radius: 6;"
"padding: 3px;"
"font-size: 12px;"
"padding-left: 5px;"
"padding-right: 5px;"
"}"
"QPushButton:pressed"
"{"
"background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);"
"}"
"QPushButton:hover"
"{"
"border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);"
"}"
);
qDebug() << ui->pushButton->styleSheet();
Thanks to Huytard's answer I have found out that is not a Qt CSS problem but it is the normal behavior of my Ubuntu Appearance setting to add an Orange rect on focused buttons.
The theme Ambiance is the default theme in Ubuntu 12.04 and it has the graphical behavior of enhancing focused elements with an orange inner rectangle.
If I change the theme the effect I posted about and I thought was QT CSS problem is gone away. So.. it is not a QT CSS problem but Ubuntu. If someone is interested in that.. http://askubuntu.com is full of information about changing the main theme color.