Further fixes to QToolButton padding.
Added `hasMenu` property so the user can manually override the padding on QToolButtons. Updated the `QToolBar` to remove `min-height` and `min-width` so the icons can pack closer to together, and specified custom padding rules for the regular icons and those with the drop-down menus. These are narrowly selected via `QDialog QToolBar QToolButton`, and can be manually overridden via `hasMenu`, so they're unlikely to affect anything other than `QFileDialog`. Likewise, updated the rules for `QToolButton` padding to ensure the button is padded only if it is not auto-raised and it has text. Likewise, this can be manually overridden via the `hasMenu` property. These rules are extensively described in the stylesheet comments. Further improves the patches to #22, #28, and #47.main
parent
acc1beba4a
commit
267d6544cd
27
README.md
27
README.md
|
@ -12,7 +12,6 @@ BreezeStyleSheets is a set of beautiful light and dark stylesheets that render c
|
||||||
- [Features](#features)
|
- [Features](#features)
|
||||||
- [Plugins](#plugins)
|
- [Plugins](#plugins)
|
||||||
- [Extending Stylesheets](#extending-stylesheets)
|
- [Extending Stylesheets](#extending-stylesheets)
|
||||||
- [Known Issues](#known-issues)
|
|
||||||
- [Installing](#installing)
|
- [Installing](#installing)
|
||||||
- [CMake Installation](#cmake-installation)
|
- [CMake Installation](#cmake-installation)
|
||||||
- [QMake Installation](#qmake-installation)
|
- [QMake Installation](#qmake-installation)
|
||||||
|
@ -24,6 +23,7 @@ BreezeStyleSheets is a set of beautiful light and dark stylesheets that render c
|
||||||
- [Testing](#testing)
|
- [Testing](#testing)
|
||||||
- [Distribution Files](#distribution-files)
|
- [Distribution Files](#distribution-files)
|
||||||
- [Git Ignore](#git-ignore)
|
- [Git Ignore](#git-ignore)
|
||||||
|
- [Known Issues](#known-issues)
|
||||||
- [License](#license)
|
- [License](#license)
|
||||||
- [Contributing](#contributing)
|
- [Contributing](#contributing)
|
||||||
- [Acknowledgements](#acknowledgements)
|
- [Acknowledgements](#acknowledgements)
|
||||||
|
@ -207,18 +207,6 @@ The limitations of stylesheets include:
|
||||||
|
|
||||||
For an example of using QCommonStyle to override standard icons in a PyQt application, see [standard_icons.py](/example/standard_icons.py). An extensive reference can be found [here](https://doc.qt.io/qt-5/style-reference.html). A reference of QStyle, and the default styles Qt provides can be found [here](https://doc.qt.io/qt-5/qstyle.html).
|
For an example of using QCommonStyle to override standard icons in a PyQt application, see [standard_icons.py](/example/standard_icons.py). An extensive reference can be found [here](https://doc.qt.io/qt-5/style-reference.html). A reference of QStyle, and the default styles Qt provides can be found [here](https://doc.qt.io/qt-5/qstyle.html).
|
||||||
|
|
||||||
# Known Issues
|
|
||||||
|
|
||||||
Some issues cannot be fixed with stylesheets alone, or there are bugs in Qt itself that prevent these issues from being fixed.
|
|
||||||
|
|
||||||
- Placeholder Text color: for the widgets `QTextEdit`, `QPlainTextEdit`, and `QLineEdit`, you can set placeholder text for when no text is present. In Qt5, this is correctly grayed out when the placeholder text is present, which is not respected in Qt6 (as of Qt version 6.3.0). An example of a workaround [placeholder_text.py](/example/placeholder_text.py), which only works currently for Qt5. Using the native stylesheet shows it uses hard-coded colors for Qt6, so this is almost certainly a Qt bug. This is likely referenced in [QTBUG-92947](https://bugreports.qt.io/browse/QTBUG-92947) and [QTCREATORBUG-25444](https://bugreports.qt.io/browse/QTCREATORBUG-25444).
|
|
||||||
- `QSlider` ticks disappear when using stylesheets, which is a known bug referenced in [QTBUG-3304](https://bugreports.qt.io/browse/QTBUG-3304) and [QTBUG-3564](https://bugreports.qt.io/browse/QTBUG-3564). An example of how to style a `QSlider` is available in [slider.py](/example/slider.py), however, this does not work with a stylesheet applied to a `QSlider`.
|
|
||||||
- Triangular QTabBar text and border colors must be the same.
|
|
||||||
- Triangular QTabBars do not have hover events for non-selected widgets.
|
|
||||||
- Custom padding for triangular QTabBars on the bottom is ignored. All other tab positions work.
|
|
||||||
- `QDial` cannot be customized via a stylesheet, which is a known bug in [QTBUG-1160](https://bugreports.qt.io/browse/QTBUG-1160). An example of how to style a `QDial` is available in [dial.py](/example/dial.py). This works out-of-the-box, and can be a drop-in replacement for `QDial`.
|
|
||||||
- `QCompleter` doesn't have a hover event in Qt5 on the drop-down menu. This works fine in Qt6, and changing rules for `QListView` (the drop-down menu) changes the drop-down menu in Qt6, but not Qt5.
|
|
||||||
|
|
||||||
# Installing
|
# Installing
|
||||||
|
|
||||||
Here are detailed instructions on how to install Breeze Style Sheets for a variety of build systems and programming languages.
|
Here are detailed instructions on how to install Breeze Style Sheets for a variety of build systems and programming languages.
|
||||||
|
@ -529,6 +517,19 @@ git add .gitignore
|
||||||
git commit -m "..."
|
git commit -m "..."
|
||||||
```
|
```
|
||||||
|
|
||||||
|
# Known Issues
|
||||||
|
|
||||||
|
Some issues cannot be fixed with stylesheets alone, or there are bugs in Qt itself that prevent these issues from being fixed.
|
||||||
|
|
||||||
|
- Placeholder Text color: for the widgets `QTextEdit`, `QPlainTextEdit`, and `QLineEdit`, you can set placeholder text for when no text is present. In Qt5, this is correctly grayed out when the placeholder text is present, which is not respected in Qt6 (as of Qt version 6.3.0). An example of a workaround [placeholder_text.py](/example/placeholder_text.py), which only works currently for Qt5. Using the native stylesheet shows it uses hard-coded colors for Qt6, so this is almost certainly a Qt bug. This is likely referenced in [QTBUG-92947](https://bugreports.qt.io/browse/QTBUG-92947) and [QTCREATORBUG-25444](https://bugreports.qt.io/browse/QTCREATORBUG-25444).
|
||||||
|
- `QSlider` ticks disappear when using stylesheets, which is a known bug referenced in [QTBUG-3304](https://bugreports.qt.io/browse/QTBUG-3304) and [QTBUG-3564](https://bugreports.qt.io/browse/QTBUG-3564). An example of how to style a `QSlider` is available in [slider.py](/example/slider.py), however, this does not work with a stylesheet applied to a `QSlider`.
|
||||||
|
- Triangular QTabBar text and border colors must be the same.
|
||||||
|
- Triangular QTabBars do not have hover events for non-selected widgets.
|
||||||
|
- Custom padding for triangular QTabBars on the bottom is ignored. All other tab positions work.
|
||||||
|
- `QDial` cannot be customized via a stylesheet, which is a known bug in [QTBUG-1160](https://bugreports.qt.io/browse/QTBUG-1160). An example of how to style a `QDial` is available in [dial.py](/example/dial.py). This works out-of-the-box, and can be a drop-in replacement for `QDial`.
|
||||||
|
- `QCompleter` doesn't have a hover event in Qt5 on the drop-down menu. This works fine in Qt6, and changing rules for `QListView` (the drop-down menu) changes the drop-down menu in Qt6, but not Qt5.
|
||||||
|
- `QToolButton` may have extra padding or clip the menu indicator in some cases. Auto-raised QToolButtons will clip the menu indicator, as will QToolButtons without text. Other cases will always add padding, whether there is a menu indicator or not. In order to force padding or no-padding for the menu indicator, set the Qt property of `hasMenu` to `true` or `false`. For example, to force additional padding for a menu indicator, use `button->setProperty("hasMenu", true);`.
|
||||||
|
|
||||||
# License
|
# License
|
||||||
|
|
||||||
MIT, see [license](/LICENSE.md).
|
MIT, see [license](/LICENSE.md).
|
||||||
|
|
9069
breeze_resources.py
9069
breeze_resources.py
File diff suppressed because it is too large
Load Diff
|
@ -715,8 +715,6 @@ QToolBar::separator:vertical
|
||||||
QToolBar QToolButton
|
QToolBar QToolButton
|
||||||
{
|
{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
min-height: 1em;
|
|
||||||
min-width: 2em;
|
|
||||||
border: 0.04em transparent black;
|
border: 0.04em transparent black;
|
||||||
padding-left: 0.2em;
|
padding-left: 0.2em;
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
|
@ -735,6 +733,26 @@ QToolBar QToolButton:pressed
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Special rules for a QFileDialog.
|
||||||
|
*
|
||||||
|
* Due to the widgets, we get rid of the min sizes to allow them
|
||||||
|
* to pack closer together, and ensure we have enough padding for
|
||||||
|
* the drop-down menu in the popup.
|
||||||
|
*/
|
||||||
|
QDialog QToolBar QToolButton[popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[popupMode="1"]
|
||||||
|
{
|
||||||
|
padding-left: 0.1em;
|
||||||
|
padding-right: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
QDialog QToolBar QToolButton[popupMode="2"]
|
||||||
|
{
|
||||||
|
padding-left: 0.1em;
|
||||||
|
padding-right: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
QPushButton
|
QPushButton
|
||||||
{
|
{
|
||||||
color: #eff0f1;
|
color: #eff0f1;
|
||||||
|
@ -1848,31 +1866,63 @@ QSlider::sub-page:vertical
|
||||||
/* QToolButton */
|
/* QToolButton */
|
||||||
/**
|
/**
|
||||||
* QToolButton's that have a push button need to be styled differently,
|
* QToolButton's that have a push button need to be styled differently,
|
||||||
* and auto-raise is automatically disabled if there is a push button,
|
* depending on whether there are actions (a menu) associated with it.
|
||||||
* IE, there is no arrow attached to the text in the QToolButton.
|
* This is signaled by a drop-down arrow on the right of the push button.
|
||||||
* Note that this is not affected by the following:
|
* Unfortunately, there's no good property to determine this. The property
|
||||||
|
* we need is `QWidget::actions`, however, it's a method and not a
|
||||||
|
* property.Note that the drop-down menu is not signaled by any of the
|
||||||
|
* following:
|
||||||
* popupMode: any pop-up mode does not affect the right arrow style.
|
* popupMode: any pop-up mode does not affect the right arrow style.
|
||||||
* arrowType: only replaces the icon.
|
* arrowType: only replaces the icon.
|
||||||
* toolButtonStyle: this is almost always set to icon only, even with text.
|
* toolButtonStyle: this is almost always set to icon only, even with text.
|
||||||
|
* text: can have a drop-down menu with or without text.
|
||||||
*
|
*
|
||||||
* This particularly affects QFileDialog, but also affects anything with
|
* Notably, we need to ensure we don't pad the widgets in the following
|
||||||
* auto-raise set to true. Therefore, our styles should only be set when
|
* cases:
|
||||||
* auto-raise is false.
|
* 1. If the QToolButton is auto-raised.
|
||||||
|
* This adds undesired padding in`QFileDialog`. These widgets
|
||||||
|
* have text, even though no text is visible. This is not the
|
||||||
|
* default, so it won't affect most situations.
|
||||||
|
* 2. If the QToolButton does not have text.
|
||||||
|
* Normally, text-less buttons do not have a menu, and this
|
||||||
|
* is required for #47, since the padding affects the scroll
|
||||||
|
* bar icons in QTabBar. This causes major issues in the
|
||||||
|
* UI, so disable the padding by default.
|
||||||
*
|
*
|
||||||
* The affected issues are #22 and #28.
|
* The padding can affect the placement of icons and other things
|
||||||
|
* inside the toolbutton: near the menu-button in QFileDialog,
|
||||||
|
* the clear text icon is misplaced vertically, making it nearly
|
||||||
|
* illegible.
|
||||||
|
*
|
||||||
|
* We provide special styles for a custom, dynamic property to
|
||||||
|
* override the padding decisions with or without a menu.
|
||||||
|
* To force styling as if there is a menu, set the `hasMenu` property
|
||||||
|
* to true. Setting `hasMenu` to false will style as if there is no menu.
|
||||||
|
* You can use `QWidget::setProperty` to set this property dynamically.
|
||||||
|
*
|
||||||
|
* The affected issues are #22, #28, #47.
|
||||||
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/22
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/22
|
||||||
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/28
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/28
|
||||||
*
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/47
|
||||||
* The invalid clear text icon in issue #28 still has:
|
|
||||||
* autoRaise: false
|
|
||||||
* arrowType: 0
|
|
||||||
* toolButtonStyle: 0
|
|
||||||
*
|
|
||||||
* Do not have padding if we have no text: it affects the styling of
|
|
||||||
* QTabBar and leads to an ugly padding in the icons-only QToolButtons.
|
|
||||||
*
|
|
||||||
* This affects issue #47.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Use an overly specific selector here to ensure no margins,
|
||||||
|
* or for the default QToolButton. We must have `autoRaise="false"`
|
||||||
|
* and `text` to have padding, so just add a `hasMenu="false"` to
|
||||||
|
* undo the padding in that case. Also add selectors for QDialog
|
||||||
|
* if a menu is explicitly forbidden.
|
||||||
|
*/
|
||||||
|
QToolButton,
|
||||||
|
QToolButton[hasMenu="false"][autoRaise="false"][text],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="1"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="2"]
|
||||||
|
{
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]
|
QToolButton[autoRaise="false"]
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
@ -1880,15 +1930,18 @@ QToolButton[autoRaise="false"]
|
||||||
border-radius: 0.09em;
|
border-radius: 0.09em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
QToolButton[autoRaise="true"]
|
||||||
* Need to add padding to the right if we have text and an indicator.
|
{
|
||||||
* Unfortunately, this applies to all QToolButtons with text, and
|
background-color: transparent;
|
||||||
* not just those with an indicator, but it's a small price to pay.
|
border: 0.04em solid transparent;
|
||||||
*
|
}
|
||||||
* We can't select on any property: the only item that could be relevant
|
|
||||||
* is `QWidget::actions`, but this is a method and not a property.
|
/* Add selectors for the QDialog if a menu is explicitly requested. */
|
||||||
*/
|
QToolButton[hasMenu="true"],
|
||||||
QToolButton[autoRaise="false"][text]
|
QToolButton[autoRaise="false"][text],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="1"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="2"]
|
||||||
{
|
{
|
||||||
margin: 0.23em;
|
margin: 0.23em;
|
||||||
padding: 0.23em;
|
padding: 0.23em;
|
||||||
|
@ -1896,59 +1949,55 @@ QToolButton[autoRaise="false"][text]
|
||||||
padding-right: 1.2em;
|
padding-right: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::right-arrow,
|
QToolButton:hover
|
||||||
QToolButton[autoRaise="false"]::left-arrow,
|
|
||||||
QToolButton[autoRaise="false"]::up-arrow,
|
|
||||||
QToolButton[autoRaise="false"]::down-arrow
|
|
||||||
{
|
{
|
||||||
subcontrol-origin: margin;
|
border: 0.04em solid #3daee9;
|
||||||
subcontrol-position: right;
|
}
|
||||||
|
|
||||||
|
QToolButton:checked,
|
||||||
|
QToolButton:pressed
|
||||||
|
{
|
||||||
|
border: 0.04em solid #3daee9;
|
||||||
|
background-color: #3daee9;
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolButton::right-arrow,
|
||||||
|
QToolButton::left-arrow,
|
||||||
|
QToolButton::up-arrow,
|
||||||
|
QToolButton::down-arrow
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Do not set the arrow width/height here. It causes
|
||||||
|
* small icons in Qt6, and doesn't affect the styling
|
||||||
|
* in Qt5. Both look ideal without manually specified sizes.
|
||||||
|
*/
|
||||||
|
subcontrol-origin: content;
|
||||||
|
subcontrol-position: center;
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::right-arrow
|
QToolButton::right-arrow
|
||||||
{
|
{
|
||||||
image: url(dark:right_arrow.svg);
|
image: url(dark:right_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::left-arrow
|
QToolButton::left-arrow
|
||||||
{
|
{
|
||||||
image: url(dark:left_arrow.svg);
|
image: url(dark:left_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::up-arrow
|
QToolButton::up-arrow
|
||||||
{
|
{
|
||||||
image: url(dark:up_arrow.svg);
|
image: url(dark:up_arrow.svg);
|
||||||
height: 0.8em;
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::down-arrow
|
QToolButton::down-arrow
|
||||||
{
|
{
|
||||||
image: url(dark:down_arrow.svg);
|
image: url(dark:down_arrow.svg);
|
||||||
height: 0.8em;
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]:hover
|
QToolButton::menu-indicator
|
||||||
{
|
|
||||||
border: 0.04em solid #3daee9;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]:checked,
|
|
||||||
QToolButton[autoRaise="false"]:pressed
|
|
||||||
{
|
|
||||||
border: 0.04em solid #3daee9;
|
|
||||||
background-color: #3daee9;
|
|
||||||
padding: 0.23em;
|
|
||||||
padding-right: 1.2em;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-indicator
|
|
||||||
{
|
{
|
||||||
border-image: none;
|
border-image: none;
|
||||||
image: url(dark:down_arrow.svg);
|
image: url(dark:down_arrow.svg);
|
||||||
|
@ -1967,7 +2016,16 @@ QToolButton[autoRaise="false"]::menu-indicator
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-arrow
|
/**
|
||||||
|
* Special rule for the drop-down indicator in a QFileDialog.
|
||||||
|
* We want these to be more compact, hence the smaller padding.
|
||||||
|
*/
|
||||||
|
QDialog QToolBar QToolButton[popupMode="2"]::menu-indicator
|
||||||
|
{
|
||||||
|
padding-right: -0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolButton::menu-arrow
|
||||||
{
|
{
|
||||||
border-image: none;
|
border-image: none;
|
||||||
image: url(dark:down_arrow.svg);
|
image: url(dark:down_arrow.svg);
|
||||||
|
@ -1977,7 +2035,7 @@ QToolButton[autoRaise="false"]::menu-arrow
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button
|
QToolButton::menu-button
|
||||||
{
|
{
|
||||||
border-top-right-radius: 0.5em;
|
border-top-right-radius: 0.5em;
|
||||||
border-bottom-right-radius: 0.5em;
|
border-bottom-right-radius: 0.5em;
|
||||||
|
@ -1987,42 +2045,24 @@ QToolButton[autoRaise="false"]::menu-button
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button::menu-arrow
|
QToolButton::menu-button::menu-arrow
|
||||||
{
|
{
|
||||||
left: -0.09em;
|
left: -0.09em;
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button:hover
|
QToolButton::menu-button:hover
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button:pressed
|
QToolButton::menu-button:pressed
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 0.23em;
|
padding: 0.23em;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]
|
|
||||||
{
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0.04em solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]:hover
|
|
||||||
{
|
|
||||||
border: 0.04em solid #3daee9;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]:checked,
|
|
||||||
QToolButton[autoRaise="true"]:pressed
|
|
||||||
{
|
|
||||||
border: 0.04em solid #3daee9;
|
|
||||||
background-color: #3daee9;
|
|
||||||
}
|
|
||||||
|
|
||||||
QTableView
|
QTableView
|
||||||
{
|
{
|
||||||
border: 0em solid black;
|
border: 0em solid black;
|
||||||
|
|
|
@ -715,8 +715,6 @@ QToolBar::separator:vertical
|
||||||
QToolBar QToolButton
|
QToolBar QToolButton
|
||||||
{
|
{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
min-height: 1em;
|
|
||||||
min-width: 2em;
|
|
||||||
border: 0.04em transparent black;
|
border: 0.04em transparent black;
|
||||||
padding-left: 0.2em;
|
padding-left: 0.2em;
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
|
@ -735,6 +733,26 @@ QToolBar QToolButton:pressed
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Special rules for a QFileDialog.
|
||||||
|
*
|
||||||
|
* Due to the widgets, we get rid of the min sizes to allow them
|
||||||
|
* to pack closer together, and ensure we have enough padding for
|
||||||
|
* the drop-down menu in the popup.
|
||||||
|
*/
|
||||||
|
QDialog QToolBar QToolButton[popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[popupMode="1"]
|
||||||
|
{
|
||||||
|
padding-left: 0.1em;
|
||||||
|
padding-right: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
QDialog QToolBar QToolButton[popupMode="2"]
|
||||||
|
{
|
||||||
|
padding-left: 0.1em;
|
||||||
|
padding-right: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
QPushButton
|
QPushButton
|
||||||
{
|
{
|
||||||
color: #31363b;
|
color: #31363b;
|
||||||
|
@ -1848,31 +1866,63 @@ QSlider::sub-page:vertical
|
||||||
/* QToolButton */
|
/* QToolButton */
|
||||||
/**
|
/**
|
||||||
* QToolButton's that have a push button need to be styled differently,
|
* QToolButton's that have a push button need to be styled differently,
|
||||||
* and auto-raise is automatically disabled if there is a push button,
|
* depending on whether there are actions (a menu) associated with it.
|
||||||
* IE, there is no arrow attached to the text in the QToolButton.
|
* This is signaled by a drop-down arrow on the right of the push button.
|
||||||
* Note that this is not affected by the following:
|
* Unfortunately, there's no good property to determine this. The property
|
||||||
|
* we need is `QWidget::actions`, however, it's a method and not a
|
||||||
|
* property.Note that the drop-down menu is not signaled by any of the
|
||||||
|
* following:
|
||||||
* popupMode: any pop-up mode does not affect the right arrow style.
|
* popupMode: any pop-up mode does not affect the right arrow style.
|
||||||
* arrowType: only replaces the icon.
|
* arrowType: only replaces the icon.
|
||||||
* toolButtonStyle: this is almost always set to icon only, even with text.
|
* toolButtonStyle: this is almost always set to icon only, even with text.
|
||||||
|
* text: can have a drop-down menu with or without text.
|
||||||
*
|
*
|
||||||
* This particularly affects QFileDialog, but also affects anything with
|
* Notably, we need to ensure we don't pad the widgets in the following
|
||||||
* auto-raise set to true. Therefore, our styles should only be set when
|
* cases:
|
||||||
* auto-raise is false.
|
* 1. If the QToolButton is auto-raised.
|
||||||
|
* This adds undesired padding in`QFileDialog`. These widgets
|
||||||
|
* have text, even though no text is visible. This is not the
|
||||||
|
* default, so it won't affect most situations.
|
||||||
|
* 2. If the QToolButton does not have text.
|
||||||
|
* Normally, text-less buttons do not have a menu, and this
|
||||||
|
* is required for #47, since the padding affects the scroll
|
||||||
|
* bar icons in QTabBar. This causes major issues in the
|
||||||
|
* UI, so disable the padding by default.
|
||||||
*
|
*
|
||||||
* The affected issues are #22 and #28.
|
* The padding can affect the placement of icons and other things
|
||||||
|
* inside the toolbutton: near the menu-button in QFileDialog,
|
||||||
|
* the clear text icon is misplaced vertically, making it nearly
|
||||||
|
* illegible.
|
||||||
|
*
|
||||||
|
* We provide special styles for a custom, dynamic property to
|
||||||
|
* override the padding decisions with or without a menu.
|
||||||
|
* To force styling as if there is a menu, set the `hasMenu` property
|
||||||
|
* to true. Setting `hasMenu` to false will style as if there is no menu.
|
||||||
|
* You can use `QWidget::setProperty` to set this property dynamically.
|
||||||
|
*
|
||||||
|
* The affected issues are #22, #28, #47.
|
||||||
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/22
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/22
|
||||||
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/28
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/28
|
||||||
*
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/47
|
||||||
* The invalid clear text icon in issue #28 still has:
|
|
||||||
* autoRaise: false
|
|
||||||
* arrowType: 0
|
|
||||||
* toolButtonStyle: 0
|
|
||||||
*
|
|
||||||
* Do not have padding if we have no text: it affects the styling of
|
|
||||||
* QTabBar and leads to an ugly padding in the icons-only QToolButtons.
|
|
||||||
*
|
|
||||||
* This affects issue #47.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Use an overly specific selector here to ensure no margins,
|
||||||
|
* or for the default QToolButton. We must have `autoRaise="false"`
|
||||||
|
* and `text` to have padding, so just add a `hasMenu="false"` to
|
||||||
|
* undo the padding in that case. Also add selectors for QDialog
|
||||||
|
* if a menu is explicitly forbidden.
|
||||||
|
*/
|
||||||
|
QToolButton,
|
||||||
|
QToolButton[hasMenu="false"][autoRaise="false"][text],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="1"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="2"]
|
||||||
|
{
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]
|
QToolButton[autoRaise="false"]
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
@ -1880,15 +1930,18 @@ QToolButton[autoRaise="false"]
|
||||||
border-radius: 0.09em;
|
border-radius: 0.09em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
QToolButton[autoRaise="true"]
|
||||||
* Need to add padding to the right if we have text and an indicator.
|
{
|
||||||
* Unfortunately, this applies to all QToolButtons with text, and
|
background-color: transparent;
|
||||||
* not just those with an indicator, but it's a small price to pay.
|
border: 0.04em solid transparent;
|
||||||
*
|
}
|
||||||
* We can't select on any property: the only item that could be relevant
|
|
||||||
* is `QWidget::actions`, but this is a method and not a property.
|
/* Add selectors for the QDialog if a menu is explicitly requested. */
|
||||||
*/
|
QToolButton[hasMenu="true"],
|
||||||
QToolButton[autoRaise="false"][text]
|
QToolButton[autoRaise="false"][text],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="1"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="2"]
|
||||||
{
|
{
|
||||||
margin: 0.23em;
|
margin: 0.23em;
|
||||||
padding: 0.23em;
|
padding: 0.23em;
|
||||||
|
@ -1896,59 +1949,55 @@ QToolButton[autoRaise="false"][text]
|
||||||
padding-right: 1.2em;
|
padding-right: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::right-arrow,
|
QToolButton:hover
|
||||||
QToolButton[autoRaise="false"]::left-arrow,
|
|
||||||
QToolButton[autoRaise="false"]::up-arrow,
|
|
||||||
QToolButton[autoRaise="false"]::down-arrow
|
|
||||||
{
|
{
|
||||||
subcontrol-origin: margin;
|
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
||||||
subcontrol-position: right;
|
}
|
||||||
|
|
||||||
|
QToolButton:checked,
|
||||||
|
QToolButton:pressed
|
||||||
|
{
|
||||||
|
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
||||||
|
background-color: rgba(51, 164, 223, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolButton::right-arrow,
|
||||||
|
QToolButton::left-arrow,
|
||||||
|
QToolButton::up-arrow,
|
||||||
|
QToolButton::down-arrow
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Do not set the arrow width/height here. It causes
|
||||||
|
* small icons in Qt6, and doesn't affect the styling
|
||||||
|
* in Qt5. Both look ideal without manually specified sizes.
|
||||||
|
*/
|
||||||
|
subcontrol-origin: content;
|
||||||
|
subcontrol-position: center;
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::right-arrow
|
QToolButton::right-arrow
|
||||||
{
|
{
|
||||||
image: url(light:right_arrow.svg);
|
image: url(light:right_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::left-arrow
|
QToolButton::left-arrow
|
||||||
{
|
{
|
||||||
image: url(light:left_arrow.svg);
|
image: url(light:left_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::up-arrow
|
QToolButton::up-arrow
|
||||||
{
|
{
|
||||||
image: url(light:up_arrow.svg);
|
image: url(light:up_arrow.svg);
|
||||||
height: 0.8em;
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::down-arrow
|
QToolButton::down-arrow
|
||||||
{
|
{
|
||||||
image: url(light:down_arrow.svg);
|
image: url(light:down_arrow.svg);
|
||||||
height: 0.8em;
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]:hover
|
QToolButton::menu-indicator
|
||||||
{
|
|
||||||
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]:checked,
|
|
||||||
QToolButton[autoRaise="false"]:pressed
|
|
||||||
{
|
|
||||||
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
|
||||||
background-color: rgba(51, 164, 223, 0.5);
|
|
||||||
padding: 0.23em;
|
|
||||||
padding-right: 1.2em;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-indicator
|
|
||||||
{
|
{
|
||||||
border-image: none;
|
border-image: none;
|
||||||
image: url(light:down_arrow.svg);
|
image: url(light:down_arrow.svg);
|
||||||
|
@ -1967,7 +2016,16 @@ QToolButton[autoRaise="false"]::menu-indicator
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-arrow
|
/**
|
||||||
|
* Special rule for the drop-down indicator in a QFileDialog.
|
||||||
|
* We want these to be more compact, hence the smaller padding.
|
||||||
|
*/
|
||||||
|
QDialog QToolBar QToolButton[popupMode="2"]::menu-indicator
|
||||||
|
{
|
||||||
|
padding-right: -0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolButton::menu-arrow
|
||||||
{
|
{
|
||||||
border-image: none;
|
border-image: none;
|
||||||
image: url(light:down_arrow.svg);
|
image: url(light:down_arrow.svg);
|
||||||
|
@ -1977,7 +2035,7 @@ QToolButton[autoRaise="false"]::menu-arrow
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button
|
QToolButton::menu-button
|
||||||
{
|
{
|
||||||
border-top-right-radius: 0.5em;
|
border-top-right-radius: 0.5em;
|
||||||
border-bottom-right-radius: 0.5em;
|
border-bottom-right-radius: 0.5em;
|
||||||
|
@ -1987,42 +2045,24 @@ QToolButton[autoRaise="false"]::menu-button
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button::menu-arrow
|
QToolButton::menu-button::menu-arrow
|
||||||
{
|
{
|
||||||
left: -0.09em;
|
left: -0.09em;
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button:hover
|
QToolButton::menu-button:hover
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button:pressed
|
QToolButton::menu-button:pressed
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 0.23em;
|
padding: 0.23em;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]
|
|
||||||
{
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0.04em solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]:hover
|
|
||||||
{
|
|
||||||
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]:checked,
|
|
||||||
QToolButton[autoRaise="true"]:pressed
|
|
||||||
{
|
|
||||||
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
|
||||||
background-color: rgba(51, 164, 223, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
QTableView
|
QTableView
|
||||||
{
|
{
|
||||||
border: 0em solid black;
|
border: 0em solid black;
|
||||||
|
|
|
@ -715,8 +715,6 @@ QToolBar::separator:vertical
|
||||||
QToolBar QToolButton
|
QToolBar QToolButton
|
||||||
{
|
{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
min-height: 1em;
|
|
||||||
min-width: 2em;
|
|
||||||
border: 0.04em transparent black;
|
border: 0.04em transparent black;
|
||||||
padding-left: 0.2em;
|
padding-left: 0.2em;
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
|
@ -735,6 +733,26 @@ QToolBar QToolButton:pressed
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Special rules for a QFileDialog.
|
||||||
|
*
|
||||||
|
* Due to the widgets, we get rid of the min sizes to allow them
|
||||||
|
* to pack closer together, and ensure we have enough padding for
|
||||||
|
* the drop-down menu in the popup.
|
||||||
|
*/
|
||||||
|
QDialog QToolBar QToolButton[popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[popupMode="1"]
|
||||||
|
{
|
||||||
|
padding-left: 0.1em;
|
||||||
|
padding-right: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
QDialog QToolBar QToolButton[popupMode="2"]
|
||||||
|
{
|
||||||
|
padding-left: 0.1em;
|
||||||
|
padding-right: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
QPushButton
|
QPushButton
|
||||||
{
|
{
|
||||||
color: #eff0f1;
|
color: #eff0f1;
|
||||||
|
@ -1848,31 +1866,63 @@ QSlider::sub-page:vertical
|
||||||
/* QToolButton */
|
/* QToolButton */
|
||||||
/**
|
/**
|
||||||
* QToolButton's that have a push button need to be styled differently,
|
* QToolButton's that have a push button need to be styled differently,
|
||||||
* and auto-raise is automatically disabled if there is a push button,
|
* depending on whether there are actions (a menu) associated with it.
|
||||||
* IE, there is no arrow attached to the text in the QToolButton.
|
* This is signaled by a drop-down arrow on the right of the push button.
|
||||||
* Note that this is not affected by the following:
|
* Unfortunately, there's no good property to determine this. The property
|
||||||
|
* we need is `QWidget::actions`, however, it's a method and not a
|
||||||
|
* property.Note that the drop-down menu is not signaled by any of the
|
||||||
|
* following:
|
||||||
* popupMode: any pop-up mode does not affect the right arrow style.
|
* popupMode: any pop-up mode does not affect the right arrow style.
|
||||||
* arrowType: only replaces the icon.
|
* arrowType: only replaces the icon.
|
||||||
* toolButtonStyle: this is almost always set to icon only, even with text.
|
* toolButtonStyle: this is almost always set to icon only, even with text.
|
||||||
|
* text: can have a drop-down menu with or without text.
|
||||||
*
|
*
|
||||||
* This particularly affects QFileDialog, but also affects anything with
|
* Notably, we need to ensure we don't pad the widgets in the following
|
||||||
* auto-raise set to true. Therefore, our styles should only be set when
|
* cases:
|
||||||
* auto-raise is false.
|
* 1. If the QToolButton is auto-raised.
|
||||||
|
* This adds undesired padding in`QFileDialog`. These widgets
|
||||||
|
* have text, even though no text is visible. This is not the
|
||||||
|
* default, so it won't affect most situations.
|
||||||
|
* 2. If the QToolButton does not have text.
|
||||||
|
* Normally, text-less buttons do not have a menu, and this
|
||||||
|
* is required for #47, since the padding affects the scroll
|
||||||
|
* bar icons in QTabBar. This causes major issues in the
|
||||||
|
* UI, so disable the padding by default.
|
||||||
*
|
*
|
||||||
* The affected issues are #22 and #28.
|
* The padding can affect the placement of icons and other things
|
||||||
|
* inside the toolbutton: near the menu-button in QFileDialog,
|
||||||
|
* the clear text icon is misplaced vertically, making it nearly
|
||||||
|
* illegible.
|
||||||
|
*
|
||||||
|
* We provide special styles for a custom, dynamic property to
|
||||||
|
* override the padding decisions with or without a menu.
|
||||||
|
* To force styling as if there is a menu, set the `hasMenu` property
|
||||||
|
* to true. Setting `hasMenu` to false will style as if there is no menu.
|
||||||
|
* You can use `QWidget::setProperty` to set this property dynamically.
|
||||||
|
*
|
||||||
|
* The affected issues are #22, #28, #47.
|
||||||
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/22
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/22
|
||||||
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/28
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/28
|
||||||
*
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/47
|
||||||
* The invalid clear text icon in issue #28 still has:
|
|
||||||
* autoRaise: false
|
|
||||||
* arrowType: 0
|
|
||||||
* toolButtonStyle: 0
|
|
||||||
*
|
|
||||||
* Do not have padding if we have no text: it affects the styling of
|
|
||||||
* QTabBar and leads to an ugly padding in the icons-only QToolButtons.
|
|
||||||
*
|
|
||||||
* This affects issue #47.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Use an overly specific selector here to ensure no margins,
|
||||||
|
* or for the default QToolButton. We must have `autoRaise="false"`
|
||||||
|
* and `text` to have padding, so just add a `hasMenu="false"` to
|
||||||
|
* undo the padding in that case. Also add selectors for QDialog
|
||||||
|
* if a menu is explicitly forbidden.
|
||||||
|
*/
|
||||||
|
QToolButton,
|
||||||
|
QToolButton[hasMenu="false"][autoRaise="false"][text],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="1"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="2"]
|
||||||
|
{
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]
|
QToolButton[autoRaise="false"]
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
@ -1880,15 +1930,18 @@ QToolButton[autoRaise="false"]
|
||||||
border-radius: 0.09em;
|
border-radius: 0.09em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
QToolButton[autoRaise="true"]
|
||||||
* Need to add padding to the right if we have text and an indicator.
|
{
|
||||||
* Unfortunately, this applies to all QToolButtons with text, and
|
background-color: transparent;
|
||||||
* not just those with an indicator, but it's a small price to pay.
|
border: 0.04em solid transparent;
|
||||||
*
|
}
|
||||||
* We can't select on any property: the only item that could be relevant
|
|
||||||
* is `QWidget::actions`, but this is a method and not a property.
|
/* Add selectors for the QDialog if a menu is explicitly requested. */
|
||||||
*/
|
QToolButton[hasMenu="true"],
|
||||||
QToolButton[autoRaise="false"][text]
|
QToolButton[autoRaise="false"][text],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="1"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="2"]
|
||||||
{
|
{
|
||||||
margin: 0.23em;
|
margin: 0.23em;
|
||||||
padding: 0.23em;
|
padding: 0.23em;
|
||||||
|
@ -1896,59 +1949,55 @@ QToolButton[autoRaise="false"][text]
|
||||||
padding-right: 1.2em;
|
padding-right: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::right-arrow,
|
QToolButton:hover
|
||||||
QToolButton[autoRaise="false"]::left-arrow,
|
|
||||||
QToolButton[autoRaise="false"]::up-arrow,
|
|
||||||
QToolButton[autoRaise="false"]::down-arrow
|
|
||||||
{
|
{
|
||||||
subcontrol-origin: margin;
|
border: 0.04em solid #3daee9;
|
||||||
subcontrol-position: right;
|
}
|
||||||
|
|
||||||
|
QToolButton:checked,
|
||||||
|
QToolButton:pressed
|
||||||
|
{
|
||||||
|
border: 0.04em solid #3daee9;
|
||||||
|
background-color: #3daee9;
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolButton::right-arrow,
|
||||||
|
QToolButton::left-arrow,
|
||||||
|
QToolButton::up-arrow,
|
||||||
|
QToolButton::down-arrow
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Do not set the arrow width/height here. It causes
|
||||||
|
* small icons in Qt6, and doesn't affect the styling
|
||||||
|
* in Qt5. Both look ideal without manually specified sizes.
|
||||||
|
*/
|
||||||
|
subcontrol-origin: content;
|
||||||
|
subcontrol-position: center;
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::right-arrow
|
QToolButton::right-arrow
|
||||||
{
|
{
|
||||||
image: url(:/dark/right_arrow.svg);
|
image: url(:/dark/right_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::left-arrow
|
QToolButton::left-arrow
|
||||||
{
|
{
|
||||||
image: url(:/dark/left_arrow.svg);
|
image: url(:/dark/left_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::up-arrow
|
QToolButton::up-arrow
|
||||||
{
|
{
|
||||||
image: url(:/dark/up_arrow.svg);
|
image: url(:/dark/up_arrow.svg);
|
||||||
height: 0.8em;
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::down-arrow
|
QToolButton::down-arrow
|
||||||
{
|
{
|
||||||
image: url(:/dark/down_arrow.svg);
|
image: url(:/dark/down_arrow.svg);
|
||||||
height: 0.8em;
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]:hover
|
QToolButton::menu-indicator
|
||||||
{
|
|
||||||
border: 0.04em solid #3daee9;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]:checked,
|
|
||||||
QToolButton[autoRaise="false"]:pressed
|
|
||||||
{
|
|
||||||
border: 0.04em solid #3daee9;
|
|
||||||
background-color: #3daee9;
|
|
||||||
padding: 0.23em;
|
|
||||||
padding-right: 1.2em;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-indicator
|
|
||||||
{
|
{
|
||||||
border-image: none;
|
border-image: none;
|
||||||
image: url(:/dark/down_arrow.svg);
|
image: url(:/dark/down_arrow.svg);
|
||||||
|
@ -1967,7 +2016,16 @@ QToolButton[autoRaise="false"]::menu-indicator
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-arrow
|
/**
|
||||||
|
* Special rule for the drop-down indicator in a QFileDialog.
|
||||||
|
* We want these to be more compact, hence the smaller padding.
|
||||||
|
*/
|
||||||
|
QDialog QToolBar QToolButton[popupMode="2"]::menu-indicator
|
||||||
|
{
|
||||||
|
padding-right: -0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolButton::menu-arrow
|
||||||
{
|
{
|
||||||
border-image: none;
|
border-image: none;
|
||||||
image: url(:/dark/down_arrow.svg);
|
image: url(:/dark/down_arrow.svg);
|
||||||
|
@ -1977,7 +2035,7 @@ QToolButton[autoRaise="false"]::menu-arrow
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button
|
QToolButton::menu-button
|
||||||
{
|
{
|
||||||
border-top-right-radius: 0.5em;
|
border-top-right-radius: 0.5em;
|
||||||
border-bottom-right-radius: 0.5em;
|
border-bottom-right-radius: 0.5em;
|
||||||
|
@ -1987,42 +2045,24 @@ QToolButton[autoRaise="false"]::menu-button
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button::menu-arrow
|
QToolButton::menu-button::menu-arrow
|
||||||
{
|
{
|
||||||
left: -0.09em;
|
left: -0.09em;
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button:hover
|
QToolButton::menu-button:hover
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button:pressed
|
QToolButton::menu-button:pressed
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 0.23em;
|
padding: 0.23em;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]
|
|
||||||
{
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0.04em solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]:hover
|
|
||||||
{
|
|
||||||
border: 0.04em solid #3daee9;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]:checked,
|
|
||||||
QToolButton[autoRaise="true"]:pressed
|
|
||||||
{
|
|
||||||
border: 0.04em solid #3daee9;
|
|
||||||
background-color: #3daee9;
|
|
||||||
}
|
|
||||||
|
|
||||||
QTableView
|
QTableView
|
||||||
{
|
{
|
||||||
border: 0em solid black;
|
border: 0em solid black;
|
||||||
|
|
|
@ -715,8 +715,6 @@ QToolBar::separator:vertical
|
||||||
QToolBar QToolButton
|
QToolBar QToolButton
|
||||||
{
|
{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
min-height: 1em;
|
|
||||||
min-width: 2em;
|
|
||||||
border: 0.04em transparent black;
|
border: 0.04em transparent black;
|
||||||
padding-left: 0.2em;
|
padding-left: 0.2em;
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
|
@ -735,6 +733,26 @@ QToolBar QToolButton:pressed
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Special rules for a QFileDialog.
|
||||||
|
*
|
||||||
|
* Due to the widgets, we get rid of the min sizes to allow them
|
||||||
|
* to pack closer together, and ensure we have enough padding for
|
||||||
|
* the drop-down menu in the popup.
|
||||||
|
*/
|
||||||
|
QDialog QToolBar QToolButton[popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[popupMode="1"]
|
||||||
|
{
|
||||||
|
padding-left: 0.1em;
|
||||||
|
padding-right: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
QDialog QToolBar QToolButton[popupMode="2"]
|
||||||
|
{
|
||||||
|
padding-left: 0.1em;
|
||||||
|
padding-right: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
QPushButton
|
QPushButton
|
||||||
{
|
{
|
||||||
color: #31363b;
|
color: #31363b;
|
||||||
|
@ -1848,31 +1866,63 @@ QSlider::sub-page:vertical
|
||||||
/* QToolButton */
|
/* QToolButton */
|
||||||
/**
|
/**
|
||||||
* QToolButton's that have a push button need to be styled differently,
|
* QToolButton's that have a push button need to be styled differently,
|
||||||
* and auto-raise is automatically disabled if there is a push button,
|
* depending on whether there are actions (a menu) associated with it.
|
||||||
* IE, there is no arrow attached to the text in the QToolButton.
|
* This is signaled by a drop-down arrow on the right of the push button.
|
||||||
* Note that this is not affected by the following:
|
* Unfortunately, there's no good property to determine this. The property
|
||||||
|
* we need is `QWidget::actions`, however, it's a method and not a
|
||||||
|
* property.Note that the drop-down menu is not signaled by any of the
|
||||||
|
* following:
|
||||||
* popupMode: any pop-up mode does not affect the right arrow style.
|
* popupMode: any pop-up mode does not affect the right arrow style.
|
||||||
* arrowType: only replaces the icon.
|
* arrowType: only replaces the icon.
|
||||||
* toolButtonStyle: this is almost always set to icon only, even with text.
|
* toolButtonStyle: this is almost always set to icon only, even with text.
|
||||||
|
* text: can have a drop-down menu with or without text.
|
||||||
*
|
*
|
||||||
* This particularly affects QFileDialog, but also affects anything with
|
* Notably, we need to ensure we don't pad the widgets in the following
|
||||||
* auto-raise set to true. Therefore, our styles should only be set when
|
* cases:
|
||||||
* auto-raise is false.
|
* 1. If the QToolButton is auto-raised.
|
||||||
|
* This adds undesired padding in`QFileDialog`. These widgets
|
||||||
|
* have text, even though no text is visible. This is not the
|
||||||
|
* default, so it won't affect most situations.
|
||||||
|
* 2. If the QToolButton does not have text.
|
||||||
|
* Normally, text-less buttons do not have a menu, and this
|
||||||
|
* is required for #47, since the padding affects the scroll
|
||||||
|
* bar icons in QTabBar. This causes major issues in the
|
||||||
|
* UI, so disable the padding by default.
|
||||||
*
|
*
|
||||||
* The affected issues are #22 and #28.
|
* The padding can affect the placement of icons and other things
|
||||||
|
* inside the toolbutton: near the menu-button in QFileDialog,
|
||||||
|
* the clear text icon is misplaced vertically, making it nearly
|
||||||
|
* illegible.
|
||||||
|
*
|
||||||
|
* We provide special styles for a custom, dynamic property to
|
||||||
|
* override the padding decisions with or without a menu.
|
||||||
|
* To force styling as if there is a menu, set the `hasMenu` property
|
||||||
|
* to true. Setting `hasMenu` to false will style as if there is no menu.
|
||||||
|
* You can use `QWidget::setProperty` to set this property dynamically.
|
||||||
|
*
|
||||||
|
* The affected issues are #22, #28, #47.
|
||||||
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/22
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/22
|
||||||
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/28
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/28
|
||||||
*
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/47
|
||||||
* The invalid clear text icon in issue #28 still has:
|
|
||||||
* autoRaise: false
|
|
||||||
* arrowType: 0
|
|
||||||
* toolButtonStyle: 0
|
|
||||||
*
|
|
||||||
* Do not have padding if we have no text: it affects the styling of
|
|
||||||
* QTabBar and leads to an ugly padding in the icons-only QToolButtons.
|
|
||||||
*
|
|
||||||
* This affects issue #47.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Use an overly specific selector here to ensure no margins,
|
||||||
|
* or for the default QToolButton. We must have `autoRaise="false"`
|
||||||
|
* and `text` to have padding, so just add a `hasMenu="false"` to
|
||||||
|
* undo the padding in that case. Also add selectors for QDialog
|
||||||
|
* if a menu is explicitly forbidden.
|
||||||
|
*/
|
||||||
|
QToolButton,
|
||||||
|
QToolButton[hasMenu="false"][autoRaise="false"][text],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="1"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="2"]
|
||||||
|
{
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]
|
QToolButton[autoRaise="false"]
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
@ -1880,15 +1930,18 @@ QToolButton[autoRaise="false"]
|
||||||
border-radius: 0.09em;
|
border-radius: 0.09em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
QToolButton[autoRaise="true"]
|
||||||
* Need to add padding to the right if we have text and an indicator.
|
{
|
||||||
* Unfortunately, this applies to all QToolButtons with text, and
|
background-color: transparent;
|
||||||
* not just those with an indicator, but it's a small price to pay.
|
border: 0.04em solid transparent;
|
||||||
*
|
}
|
||||||
* We can't select on any property: the only item that could be relevant
|
|
||||||
* is `QWidget::actions`, but this is a method and not a property.
|
/* Add selectors for the QDialog if a menu is explicitly requested. */
|
||||||
*/
|
QToolButton[hasMenu="true"],
|
||||||
QToolButton[autoRaise="false"][text]
|
QToolButton[autoRaise="false"][text],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="1"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="2"]
|
||||||
{
|
{
|
||||||
margin: 0.23em;
|
margin: 0.23em;
|
||||||
padding: 0.23em;
|
padding: 0.23em;
|
||||||
|
@ -1896,59 +1949,55 @@ QToolButton[autoRaise="false"][text]
|
||||||
padding-right: 1.2em;
|
padding-right: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::right-arrow,
|
QToolButton:hover
|
||||||
QToolButton[autoRaise="false"]::left-arrow,
|
|
||||||
QToolButton[autoRaise="false"]::up-arrow,
|
|
||||||
QToolButton[autoRaise="false"]::down-arrow
|
|
||||||
{
|
{
|
||||||
subcontrol-origin: margin;
|
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
||||||
subcontrol-position: right;
|
}
|
||||||
|
|
||||||
|
QToolButton:checked,
|
||||||
|
QToolButton:pressed
|
||||||
|
{
|
||||||
|
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
||||||
|
background-color: rgba(51, 164, 223, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolButton::right-arrow,
|
||||||
|
QToolButton::left-arrow,
|
||||||
|
QToolButton::up-arrow,
|
||||||
|
QToolButton::down-arrow
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Do not set the arrow width/height here. It causes
|
||||||
|
* small icons in Qt6, and doesn't affect the styling
|
||||||
|
* in Qt5. Both look ideal without manually specified sizes.
|
||||||
|
*/
|
||||||
|
subcontrol-origin: content;
|
||||||
|
subcontrol-position: center;
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::right-arrow
|
QToolButton::right-arrow
|
||||||
{
|
{
|
||||||
image: url(:/light/right_arrow.svg);
|
image: url(:/light/right_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::left-arrow
|
QToolButton::left-arrow
|
||||||
{
|
{
|
||||||
image: url(:/light/left_arrow.svg);
|
image: url(:/light/left_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::up-arrow
|
QToolButton::up-arrow
|
||||||
{
|
{
|
||||||
image: url(:/light/up_arrow.svg);
|
image: url(:/light/up_arrow.svg);
|
||||||
height: 0.8em;
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::down-arrow
|
QToolButton::down-arrow
|
||||||
{
|
{
|
||||||
image: url(:/light/down_arrow.svg);
|
image: url(:/light/down_arrow.svg);
|
||||||
height: 0.8em;
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]:hover
|
QToolButton::menu-indicator
|
||||||
{
|
|
||||||
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]:checked,
|
|
||||||
QToolButton[autoRaise="false"]:pressed
|
|
||||||
{
|
|
||||||
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
|
||||||
background-color: rgba(51, 164, 223, 0.5);
|
|
||||||
padding: 0.23em;
|
|
||||||
padding-right: 1.2em;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-indicator
|
|
||||||
{
|
{
|
||||||
border-image: none;
|
border-image: none;
|
||||||
image: url(:/light/down_arrow.svg);
|
image: url(:/light/down_arrow.svg);
|
||||||
|
@ -1967,7 +2016,16 @@ QToolButton[autoRaise="false"]::menu-indicator
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-arrow
|
/**
|
||||||
|
* Special rule for the drop-down indicator in a QFileDialog.
|
||||||
|
* We want these to be more compact, hence the smaller padding.
|
||||||
|
*/
|
||||||
|
QDialog QToolBar QToolButton[popupMode="2"]::menu-indicator
|
||||||
|
{
|
||||||
|
padding-right: -0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolButton::menu-arrow
|
||||||
{
|
{
|
||||||
border-image: none;
|
border-image: none;
|
||||||
image: url(:/light/down_arrow.svg);
|
image: url(:/light/down_arrow.svg);
|
||||||
|
@ -1977,7 +2035,7 @@ QToolButton[autoRaise="false"]::menu-arrow
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button
|
QToolButton::menu-button
|
||||||
{
|
{
|
||||||
border-top-right-radius: 0.5em;
|
border-top-right-radius: 0.5em;
|
||||||
border-bottom-right-radius: 0.5em;
|
border-bottom-right-radius: 0.5em;
|
||||||
|
@ -1987,42 +2045,24 @@ QToolButton[autoRaise="false"]::menu-button
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button::menu-arrow
|
QToolButton::menu-button::menu-arrow
|
||||||
{
|
{
|
||||||
left: -0.09em;
|
left: -0.09em;
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button:hover
|
QToolButton::menu-button:hover
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button:pressed
|
QToolButton::menu-button:pressed
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 0.23em;
|
padding: 0.23em;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]
|
|
||||||
{
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0.04em solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]:hover
|
|
||||||
{
|
|
||||||
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]:checked,
|
|
||||||
QToolButton[autoRaise="true"]:pressed
|
|
||||||
{
|
|
||||||
border: 0.04em solid rgba(51, 164, 223, 0.5);
|
|
||||||
background-color: rgba(51, 164, 223, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
QTableView
|
QTableView
|
||||||
{
|
{
|
||||||
border: 0em solid black;
|
border: 0em solid black;
|
||||||
|
|
|
@ -715,8 +715,6 @@ QToolBar::separator:vertical
|
||||||
QToolBar QToolButton
|
QToolBar QToolButton
|
||||||
{
|
{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
min-height: 1em;
|
|
||||||
min-width: 2em;
|
|
||||||
border: 0.04em transparent black;
|
border: 0.04em transparent black;
|
||||||
padding-left: 0.2em;
|
padding-left: 0.2em;
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
|
@ -735,6 +733,26 @@ QToolBar QToolButton:pressed
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Special rules for a QFileDialog.
|
||||||
|
*
|
||||||
|
* Due to the widgets, we get rid of the min sizes to allow them
|
||||||
|
* to pack closer together, and ensure we have enough padding for
|
||||||
|
* the drop-down menu in the popup.
|
||||||
|
*/
|
||||||
|
QDialog QToolBar QToolButton[popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[popupMode="1"]
|
||||||
|
{
|
||||||
|
padding-left: 0.1em;
|
||||||
|
padding-right: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
QDialog QToolBar QToolButton[popupMode="2"]
|
||||||
|
{
|
||||||
|
padding-left: 0.1em;
|
||||||
|
padding-right: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
QPushButton
|
QPushButton
|
||||||
{
|
{
|
||||||
color: ^foreground^;
|
color: ^foreground^;
|
||||||
|
@ -1848,31 +1866,63 @@ QSlider::sub-page:vertical
|
||||||
/* QToolButton */
|
/* QToolButton */
|
||||||
/**
|
/**
|
||||||
* QToolButton's that have a push button need to be styled differently,
|
* QToolButton's that have a push button need to be styled differently,
|
||||||
* and auto-raise is automatically disabled if there is a push button,
|
* depending on whether there are actions (a menu) associated with it.
|
||||||
* IE, there is no arrow attached to the text in the QToolButton.
|
* This is signaled by a drop-down arrow on the right of the push button.
|
||||||
* Note that this is not affected by the following:
|
* Unfortunately, there's no good property to determine this. The property
|
||||||
|
* we need is `QWidget::actions`, however, it's a method and not a
|
||||||
|
* property.Note that the drop-down menu is not signaled by any of the
|
||||||
|
* following:
|
||||||
* popupMode: any pop-up mode does not affect the right arrow style.
|
* popupMode: any pop-up mode does not affect the right arrow style.
|
||||||
* arrowType: only replaces the icon.
|
* arrowType: only replaces the icon.
|
||||||
* toolButtonStyle: this is almost always set to icon only, even with text.
|
* toolButtonStyle: this is almost always set to icon only, even with text.
|
||||||
|
* text: can have a drop-down menu with or without text.
|
||||||
*
|
*
|
||||||
* This particularly affects QFileDialog, but also affects anything with
|
* Notably, we need to ensure we don't pad the widgets in the following
|
||||||
* auto-raise set to true. Therefore, our styles should only be set when
|
* cases:
|
||||||
* auto-raise is false.
|
* 1. If the QToolButton is auto-raised.
|
||||||
|
* This adds undesired padding in`QFileDialog`. These widgets
|
||||||
|
* have text, even though no text is visible. This is not the
|
||||||
|
* default, so it won't affect most situations.
|
||||||
|
* 2. If the QToolButton does not have text.
|
||||||
|
* Normally, text-less buttons do not have a menu, and this
|
||||||
|
* is required for #47, since the padding affects the scroll
|
||||||
|
* bar icons in QTabBar. This causes major issues in the
|
||||||
|
* UI, so disable the padding by default.
|
||||||
*
|
*
|
||||||
* The affected issues are #22 and #28.
|
* The padding can affect the placement of icons and other things
|
||||||
|
* inside the toolbutton: near the menu-button in QFileDialog,
|
||||||
|
* the clear text icon is misplaced vertically, making it nearly
|
||||||
|
* illegible.
|
||||||
|
*
|
||||||
|
* We provide special styles for a custom, dynamic property to
|
||||||
|
* override the padding decisions with or without a menu.
|
||||||
|
* To force styling as if there is a menu, set the `hasMenu` property
|
||||||
|
* to true. Setting `hasMenu` to false will style as if there is no menu.
|
||||||
|
* You can use `QWidget::setProperty` to set this property dynamically.
|
||||||
|
*
|
||||||
|
* The affected issues are #22, #28, #47.
|
||||||
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/22
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/22
|
||||||
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/28
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/28
|
||||||
*
|
* https://github.com/Alexhuszagh/BreezeStyleSheets/issues/47
|
||||||
* The invalid clear text icon in issue #28 still has:
|
|
||||||
* autoRaise: false
|
|
||||||
* arrowType: 0
|
|
||||||
* toolButtonStyle: 0
|
|
||||||
*
|
|
||||||
* Do not have padding if we have no text: it affects the styling of
|
|
||||||
* QTabBar and leads to an ugly padding in the icons-only QToolButtons.
|
|
||||||
*
|
|
||||||
* This affects issue #47.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Use an overly specific selector here to ensure no margins,
|
||||||
|
* or for the default QToolButton. We must have `autoRaise="false"`
|
||||||
|
* and `text` to have padding, so just add a `hasMenu="false"` to
|
||||||
|
* undo the padding in that case. Also add selectors for QDialog
|
||||||
|
* if a menu is explicitly forbidden.
|
||||||
|
*/
|
||||||
|
QToolButton,
|
||||||
|
QToolButton[hasMenu="false"][autoRaise="false"][text],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="1"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="false"][popupMode="2"]
|
||||||
|
{
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]
|
QToolButton[autoRaise="false"]
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
@ -1880,15 +1930,18 @@ QToolButton[autoRaise="false"]
|
||||||
border-radius: 0.09em;
|
border-radius: 0.09em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
QToolButton[autoRaise="true"]
|
||||||
* Need to add padding to the right if we have text and an indicator.
|
{
|
||||||
* Unfortunately, this applies to all QToolButtons with text, and
|
background-color: transparent;
|
||||||
* not just those with an indicator, but it's a small price to pay.
|
border: 0.04em solid transparent;
|
||||||
*
|
}
|
||||||
* We can't select on any property: the only item that could be relevant
|
|
||||||
* is `QWidget::actions`, but this is a method and not a property.
|
/* Add selectors for the QDialog if a menu is explicitly requested. */
|
||||||
*/
|
QToolButton[hasMenu="true"],
|
||||||
QToolButton[autoRaise="false"][text]
|
QToolButton[autoRaise="false"][text],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="0"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="1"],
|
||||||
|
QDialog QToolBar QToolButton[hasMenu="true"][popupMode="2"]
|
||||||
{
|
{
|
||||||
margin: 0.23em;
|
margin: 0.23em;
|
||||||
padding: 0.23em;
|
padding: 0.23em;
|
||||||
|
@ -1896,59 +1949,55 @@ QToolButton[autoRaise="false"][text]
|
||||||
padding-right: 1.2em;
|
padding-right: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::right-arrow,
|
QToolButton:hover
|
||||||
QToolButton[autoRaise="false"]::left-arrow,
|
|
||||||
QToolButton[autoRaise="false"]::up-arrow,
|
|
||||||
QToolButton[autoRaise="false"]::down-arrow
|
|
||||||
{
|
{
|
||||||
subcontrol-origin: margin;
|
border: 0.04em solid ^highlight^;
|
||||||
subcontrol-position: right;
|
}
|
||||||
|
|
||||||
|
QToolButton:checked,
|
||||||
|
QToolButton:pressed
|
||||||
|
{
|
||||||
|
border: 0.04em solid ^highlight^;
|
||||||
|
background-color: ^highlight^;
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolButton::right-arrow,
|
||||||
|
QToolButton::left-arrow,
|
||||||
|
QToolButton::up-arrow,
|
||||||
|
QToolButton::down-arrow
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Do not set the arrow width/height here. It causes
|
||||||
|
* small icons in Qt6, and doesn't affect the styling
|
||||||
|
* in Qt5. Both look ideal without manually specified sizes.
|
||||||
|
*/
|
||||||
|
subcontrol-origin: content;
|
||||||
|
subcontrol-position: center;
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::right-arrow
|
QToolButton::right-arrow
|
||||||
{
|
{
|
||||||
image: url(^style^right_arrow.svg);
|
image: url(^style^right_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::left-arrow
|
QToolButton::left-arrow
|
||||||
{
|
{
|
||||||
image: url(^style^left_arrow.svg);
|
image: url(^style^left_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::up-arrow
|
QToolButton::up-arrow
|
||||||
{
|
{
|
||||||
image: url(^style^up_arrow.svg);
|
image: url(^style^up_arrow.svg);
|
||||||
height: 0.8em;
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton::down-arrow
|
QToolButton::down-arrow
|
||||||
{
|
{
|
||||||
image: url(^style^down_arrow.svg);
|
image: url(^style^down_arrow.svg);
|
||||||
height: 0.8em;
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]:hover
|
QToolButton::menu-indicator
|
||||||
{
|
|
||||||
border: 0.04em solid ^highlight^;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]:checked,
|
|
||||||
QToolButton[autoRaise="false"]:pressed
|
|
||||||
{
|
|
||||||
border: 0.04em solid ^highlight^;
|
|
||||||
background-color: ^highlight^;
|
|
||||||
padding: 0.23em;
|
|
||||||
padding-right: 1.2em;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-indicator
|
|
||||||
{
|
{
|
||||||
border-image: none;
|
border-image: none;
|
||||||
image: url(^style^down_arrow.svg);
|
image: url(^style^down_arrow.svg);
|
||||||
|
@ -1967,7 +2016,16 @@ QToolButton[autoRaise="false"]::menu-indicator
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-arrow
|
/**
|
||||||
|
* Special rule for the drop-down indicator in a QFileDialog.
|
||||||
|
* We want these to be more compact, hence the smaller padding.
|
||||||
|
*/
|
||||||
|
QDialog QToolBar QToolButton[popupMode="2"]::menu-indicator
|
||||||
|
{
|
||||||
|
padding-right: -0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolButton::menu-arrow
|
||||||
{
|
{
|
||||||
border-image: none;
|
border-image: none;
|
||||||
image: url(^style^down_arrow.svg);
|
image: url(^style^down_arrow.svg);
|
||||||
|
@ -1977,7 +2035,7 @@ QToolButton[autoRaise="false"]::menu-arrow
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button
|
QToolButton::menu-button
|
||||||
{
|
{
|
||||||
border-top-right-radius: 0.5em;
|
border-top-right-radius: 0.5em;
|
||||||
border-bottom-right-radius: 0.5em;
|
border-bottom-right-radius: 0.5em;
|
||||||
|
@ -1987,42 +2045,24 @@ QToolButton[autoRaise="false"]::menu-button
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button::menu-arrow
|
QToolButton::menu-button::menu-arrow
|
||||||
{
|
{
|
||||||
left: -0.09em;
|
left: -0.09em;
|
||||||
subcontrol-position: right;
|
subcontrol-position: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button:hover
|
QToolButton::menu-button:hover
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="false"]::menu-button:pressed
|
QToolButton::menu-button:pressed
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 0.23em;
|
padding: 0.23em;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]
|
|
||||||
{
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0.04em solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]:hover
|
|
||||||
{
|
|
||||||
border: 0.04em solid ^highlight^;
|
|
||||||
}
|
|
||||||
|
|
||||||
QToolButton[autoRaise="true"]:checked,
|
|
||||||
QToolButton[autoRaise="true"]:pressed
|
|
||||||
{
|
|
||||||
border: 0.04em solid ^highlight^;
|
|
||||||
background-color: ^highlight^;
|
|
||||||
}
|
|
||||||
|
|
||||||
QTableView
|
QTableView
|
||||||
{
|
{
|
||||||
border: 0em solid black;
|
border: 0em solid black;
|
||||||
|
|
36
test/ui.py
36
test/ui.py
|
@ -1455,6 +1455,42 @@ def test_toolbutton_style(widget, window, *_):
|
||||||
|
|
||||||
return child, layout_type
|
return child, layout_type
|
||||||
|
|
||||||
|
def test_toolbutton_menu(widget, window, *_):
|
||||||
|
layout_type = 'horizontal'
|
||||||
|
child = [
|
||||||
|
QtWidgets.QToolButton(widget),
|
||||||
|
QtWidgets.QToolButton(widget),
|
||||||
|
QtWidgets.QToolButton(widget),
|
||||||
|
QtWidgets.QToolButton(widget),
|
||||||
|
]
|
||||||
|
window.setTabOrder(child[0], child[1])
|
||||||
|
window.setTabOrder(child[1], child[2])
|
||||||
|
window.setTabOrder(child[2], child[3])
|
||||||
|
child[0].setText('Button 1')
|
||||||
|
child[1].setText('Button 2')
|
||||||
|
child[2].setText('Button 3')
|
||||||
|
child[3].setText('Button 4')
|
||||||
|
child[1].addActions([
|
||||||
|
QAction('&Action 5', window),
|
||||||
|
QAction('&Action 6', window),
|
||||||
|
])
|
||||||
|
child[2].setPopupMode(MenuButtonPopup)
|
||||||
|
child[2].addActions([
|
||||||
|
QAction('&Action 9', window),
|
||||||
|
QAction('&Action 10', window),
|
||||||
|
])
|
||||||
|
child[3].setPopupMode(InstantPopup)
|
||||||
|
child[3].addActions([
|
||||||
|
QAction('&Action 11', window),
|
||||||
|
QAction('&Action 12', window),
|
||||||
|
])
|
||||||
|
child[0].setProperty('hasMenu', False)
|
||||||
|
# Incorrectly trims this normally... but set hasMenu true
|
||||||
|
child[1].setAutoRaise(True)
|
||||||
|
child[1].setProperty('hasMenu', True)
|
||||||
|
|
||||||
|
return child, layout_type
|
||||||
|
|
||||||
def test_pushbutton(widget, *_):
|
def test_pushbutton(widget, *_):
|
||||||
layout_type = 'horizontal'
|
layout_type = 'horizontal'
|
||||||
child = []
|
child = []
|
||||||
|
|
Loading…
Reference in New Issue