Fix styles for triangular QTabBars.

Added padding to properly pad text on the tab bar. Added negative
padding to avoid clipping the close button, without it overlapping with
the border. Added highlighting for the selected tav. Added
documentation for known bugs with padding south tabs, and color/outline
for selected tabs.

Closes #48.
Closes #50.
main
Alex Huszagh 2022-05-01 12:07:07 -05:00
parent 90d9658b71
commit 9655e7da32
7 changed files with 561 additions and 0 deletions

View File

@ -426,6 +426,9 @@ Some issues cannot be fixed with stylesheets alone, or there are bugs in Qt itse
- 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 here [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.
# Debugging

View File

@ -1390,6 +1390,112 @@ QTabBar QToolButton::left-arrow:disabled
height: 0.8em;
}
/**
* Special styles for triangular QTabWidgets.
* These ignore the border attributes, and the border and
* text color seems to be set via the `QTabBar::tab` color
* property. This seemingly cannot be changed.
*
* The rounded shapes are 0-3, and the triangular ones are 4-7.
*
* The QTabBar outline doesn't respect on QTabBar::tab:
* border-color
* outline-color
*/
QTabBar[shape="4"]::tab,
QTabBar[shape="5"]::tab,
QTabBar[shape="6"]::tab,
QTabBar[shape="7"]::tab,
QTabBar[shape="4"]::tab:last,
QTabBar[shape="5"]::tab:last,
QTabBar[shape="6"]::tab:last,
QTabBar[shape="7"]::tab:last,
QTabBar[shape="4"]::tab:only-one,
QTabBar[shape="5"]::tab:only-one,
QTabBar[shape="6"]::tab:only-one,
QTabBar[shape="7"]::tab:only-one
{
/* Need a dark color without alpha channel since it affects the text. */
color: #3daee9;
background-color: #31363b;
padding: 0.23em;
}
QTabBar[shape="4"]::tab,
QTabBar[shape="5"]::tab,
QTabBar[shape="4"]::tab:last,
QTabBar[shape="5"]::tab:last,
QTabBar[shape="4"]::tab:only-one,
QTabBar[shape="5"]::tab:only-one
{
min-width: 50px;
}
QTabBar[shape="6"]::tab,
QTabBar[shape="7"]::tab,
QTabBar[shape="6"]::tab:last,
QTabBar[shape="7"]::tab:last,
QTabBar[shape="6"]::tab:only-one,
QTabBar[shape="7"]::tab:only-one
{
min-height: 50px;
}
QTabBar[shape="4"]::tab:!selected,
QTabBar[shape="5"]::tab:!selected,
QTabBar[shape="6"]::tab:!selected,
QTabBar[shape="7"]::tab:!selected
{
color: #eff0f1;
background-color: #2c3034;
}
/**
* Increase padding on the opposite side of the icon to avoid text clipping.
*
* BUG: The padding works for North in Qt5, South does not work.
* Both work in Qt6.
*/
QTabBar[shape="4"][tabsClosable="true"]::tab,
QTabBar[shape="5"][tabsClosable="true"]::tab
{
padding-left: 0.5em;
}
QTabBar[shape="6"][tabsClosable="true"]::tab
{
padding-bottom: 0.5em;
}
QTabBar[shape="7"][tabsClosable="true"]::tab
{
padding-top: 0.5em;
}
/**
* Undo the padding for the tab.
*
* Enumerated values are North, South, West, East in that order,
* from 4-7.
*
* NOTE: Any higher padding will clip the icon.
*/
QTabBar[shape="4"]::close-button,
QTabBar[shape="5"]::close-button
{
padding-left: -0.12em;
}
QTabBar[shape="6"]::close-button
{
padding-bottom: -0.18em;
}
QTabBar[shape="7"]::close-button
{
padding-top: -0.18em;
}
QDockWidget
{
background: #31363b;

View File

@ -1390,6 +1390,112 @@ QTabBar QToolButton::left-arrow:disabled
height: 0.8em;
}
/**
* Special styles for triangular QTabWidgets.
* These ignore the border attributes, and the border and
* text color seems to be set via the `QTabBar::tab` color
* property. This seemingly cannot be changed.
*
* The rounded shapes are 0-3, and the triangular ones are 4-7.
*
* The QTabBar outline doesn't respect on QTabBar::tab:
* border-color
* outline-color
*/
QTabBar[shape="4"]::tab,
QTabBar[shape="5"]::tab,
QTabBar[shape="6"]::tab,
QTabBar[shape="7"]::tab,
QTabBar[shape="4"]::tab:last,
QTabBar[shape="5"]::tab:last,
QTabBar[shape="6"]::tab:last,
QTabBar[shape="7"]::tab:last,
QTabBar[shape="4"]::tab:only-one,
QTabBar[shape="5"]::tab:only-one,
QTabBar[shape="6"]::tab:only-one,
QTabBar[shape="7"]::tab:only-one
{
/* Need a dark color without alpha channel since it affects the text. */
color: #3daef3;
background-color: #eff0f1;
padding: 0.23em;
}
QTabBar[shape="4"]::tab,
QTabBar[shape="5"]::tab,
QTabBar[shape="4"]::tab:last,
QTabBar[shape="5"]::tab:last,
QTabBar[shape="4"]::tab:only-one,
QTabBar[shape="5"]::tab:only-one
{
min-width: 50px;
}
QTabBar[shape="6"]::tab,
QTabBar[shape="7"]::tab,
QTabBar[shape="6"]::tab:last,
QTabBar[shape="7"]::tab:last,
QTabBar[shape="6"]::tab:only-one,
QTabBar[shape="7"]::tab:only-one
{
min-height: 50px;
}
QTabBar[shape="4"]::tab:!selected,
QTabBar[shape="5"]::tab:!selected,
QTabBar[shape="6"]::tab:!selected,
QTabBar[shape="7"]::tab:!selected
{
color: #31363b;
background-color: #d9d8d7;
}
/**
* Increase padding on the opposite side of the icon to avoid text clipping.
*
* BUG: The padding works for North in Qt5, South does not work.
* Both work in Qt6.
*/
QTabBar[shape="4"][tabsClosable="true"]::tab,
QTabBar[shape="5"][tabsClosable="true"]::tab
{
padding-left: 0.5em;
}
QTabBar[shape="6"][tabsClosable="true"]::tab
{
padding-bottom: 0.5em;
}
QTabBar[shape="7"][tabsClosable="true"]::tab
{
padding-top: 0.5em;
}
/**
* Undo the padding for the tab.
*
* Enumerated values are North, South, West, East in that order,
* from 4-7.
*
* NOTE: Any higher padding will clip the icon.
*/
QTabBar[shape="4"]::close-button,
QTabBar[shape="5"]::close-button
{
padding-left: -0.12em;
}
QTabBar[shape="6"]::close-button
{
padding-bottom: -0.18em;
}
QTabBar[shape="7"]::close-button
{
padding-top: -0.18em;
}
QDockWidget
{
background: #eaebec;

View File

@ -1390,6 +1390,112 @@ QTabBar QToolButton::left-arrow:disabled
height: 0.8em;
}
/**
* Special styles for triangular QTabWidgets.
* These ignore the border attributes, and the border and
* text color seems to be set via the `QTabBar::tab` color
* property. This seemingly cannot be changed.
*
* The rounded shapes are 0-3, and the triangular ones are 4-7.
*
* The QTabBar outline doesn't respect on QTabBar::tab:
* border-color
* outline-color
*/
QTabBar[shape="4"]::tab,
QTabBar[shape="5"]::tab,
QTabBar[shape="6"]::tab,
QTabBar[shape="7"]::tab,
QTabBar[shape="4"]::tab:last,
QTabBar[shape="5"]::tab:last,
QTabBar[shape="6"]::tab:last,
QTabBar[shape="7"]::tab:last,
QTabBar[shape="4"]::tab:only-one,
QTabBar[shape="5"]::tab:only-one,
QTabBar[shape="6"]::tab:only-one,
QTabBar[shape="7"]::tab:only-one
{
/* Need a dark color without alpha channel since it affects the text. */
color: #3daee9;
background-color: #31363b;
padding: 0.23em;
}
QTabBar[shape="4"]::tab,
QTabBar[shape="5"]::tab,
QTabBar[shape="4"]::tab:last,
QTabBar[shape="5"]::tab:last,
QTabBar[shape="4"]::tab:only-one,
QTabBar[shape="5"]::tab:only-one
{
min-width: 50px;
}
QTabBar[shape="6"]::tab,
QTabBar[shape="7"]::tab,
QTabBar[shape="6"]::tab:last,
QTabBar[shape="7"]::tab:last,
QTabBar[shape="6"]::tab:only-one,
QTabBar[shape="7"]::tab:only-one
{
min-height: 50px;
}
QTabBar[shape="4"]::tab:!selected,
QTabBar[shape="5"]::tab:!selected,
QTabBar[shape="6"]::tab:!selected,
QTabBar[shape="7"]::tab:!selected
{
color: #eff0f1;
background-color: #2c3034;
}
/**
* Increase padding on the opposite side of the icon to avoid text clipping.
*
* BUG: The padding works for North in Qt5, South does not work.
* Both work in Qt6.
*/
QTabBar[shape="4"][tabsClosable="true"]::tab,
QTabBar[shape="5"][tabsClosable="true"]::tab
{
padding-left: 0.5em;
}
QTabBar[shape="6"][tabsClosable="true"]::tab
{
padding-bottom: 0.5em;
}
QTabBar[shape="7"][tabsClosable="true"]::tab
{
padding-top: 0.5em;
}
/**
* Undo the padding for the tab.
*
* Enumerated values are North, South, West, East in that order,
* from 4-7.
*
* NOTE: Any higher padding will clip the icon.
*/
QTabBar[shape="4"]::close-button,
QTabBar[shape="5"]::close-button
{
padding-left: -0.12em;
}
QTabBar[shape="6"]::close-button
{
padding-bottom: -0.18em;
}
QTabBar[shape="7"]::close-button
{
padding-top: -0.18em;
}
QDockWidget
{
background: #31363b;

View File

@ -1390,6 +1390,112 @@ QTabBar QToolButton::left-arrow:disabled
height: 0.8em;
}
/**
* Special styles for triangular QTabWidgets.
* These ignore the border attributes, and the border and
* text color seems to be set via the `QTabBar::tab` color
* property. This seemingly cannot be changed.
*
* The rounded shapes are 0-3, and the triangular ones are 4-7.
*
* The QTabBar outline doesn't respect on QTabBar::tab:
* border-color
* outline-color
*/
QTabBar[shape="4"]::tab,
QTabBar[shape="5"]::tab,
QTabBar[shape="6"]::tab,
QTabBar[shape="7"]::tab,
QTabBar[shape="4"]::tab:last,
QTabBar[shape="5"]::tab:last,
QTabBar[shape="6"]::tab:last,
QTabBar[shape="7"]::tab:last,
QTabBar[shape="4"]::tab:only-one,
QTabBar[shape="5"]::tab:only-one,
QTabBar[shape="6"]::tab:only-one,
QTabBar[shape="7"]::tab:only-one
{
/* Need a dark color without alpha channel since it affects the text. */
color: #3daef3;
background-color: #eff0f1;
padding: 0.23em;
}
QTabBar[shape="4"]::tab,
QTabBar[shape="5"]::tab,
QTabBar[shape="4"]::tab:last,
QTabBar[shape="5"]::tab:last,
QTabBar[shape="4"]::tab:only-one,
QTabBar[shape="5"]::tab:only-one
{
min-width: 50px;
}
QTabBar[shape="6"]::tab,
QTabBar[shape="7"]::tab,
QTabBar[shape="6"]::tab:last,
QTabBar[shape="7"]::tab:last,
QTabBar[shape="6"]::tab:only-one,
QTabBar[shape="7"]::tab:only-one
{
min-height: 50px;
}
QTabBar[shape="4"]::tab:!selected,
QTabBar[shape="5"]::tab:!selected,
QTabBar[shape="6"]::tab:!selected,
QTabBar[shape="7"]::tab:!selected
{
color: #31363b;
background-color: #d9d8d7;
}
/**
* Increase padding on the opposite side of the icon to avoid text clipping.
*
* BUG: The padding works for North in Qt5, South does not work.
* Both work in Qt6.
*/
QTabBar[shape="4"][tabsClosable="true"]::tab,
QTabBar[shape="5"][tabsClosable="true"]::tab
{
padding-left: 0.5em;
}
QTabBar[shape="6"][tabsClosable="true"]::tab
{
padding-bottom: 0.5em;
}
QTabBar[shape="7"][tabsClosable="true"]::tab
{
padding-top: 0.5em;
}
/**
* Undo the padding for the tab.
*
* Enumerated values are North, South, West, East in that order,
* from 4-7.
*
* NOTE: Any higher padding will clip the icon.
*/
QTabBar[shape="4"]::close-button,
QTabBar[shape="5"]::close-button
{
padding-left: -0.12em;
}
QTabBar[shape="6"]::close-button
{
padding-bottom: -0.18em;
}
QTabBar[shape="7"]::close-button
{
padding-top: -0.18em;
}
QDockWidget
{
background: #eaebec;

View File

@ -1390,6 +1390,112 @@ QTabBar QToolButton::left-arrow:disabled
height: 0.8em;
}
/**
* Special styles for triangular QTabWidgets.
* These ignore the border attributes, and the border and
* text color seems to be set via the `QTabBar::tab` color
* property. This seemingly cannot be changed.
*
* The rounded shapes are 0-3, and the triangular ones are 4-7.
*
* The QTabBar outline doesn't respect on QTabBar::tab:
* border-color
* outline-color
*/
QTabBar[shape="4"]::tab,
QTabBar[shape="5"]::tab,
QTabBar[shape="6"]::tab,
QTabBar[shape="7"]::tab,
QTabBar[shape="4"]::tab:last,
QTabBar[shape="5"]::tab:last,
QTabBar[shape="6"]::tab:last,
QTabBar[shape="7"]::tab:last,
QTabBar[shape="4"]::tab:only-one,
QTabBar[shape="5"]::tab:only-one,
QTabBar[shape="6"]::tab:only-one,
QTabBar[shape="7"]::tab:only-one
{
/* Need a dark color without alpha channel since it affects the text. */
color: ^slider:foreground^;
background-color: ^tab:background:selected^;
padding: 0.23em;
}
QTabBar[shape="4"]::tab,
QTabBar[shape="5"]::tab,
QTabBar[shape="4"]::tab:last,
QTabBar[shape="5"]::tab:last,
QTabBar[shape="4"]::tab:only-one,
QTabBar[shape="5"]::tab:only-one
{
min-width: 50px;
}
QTabBar[shape="6"]::tab,
QTabBar[shape="7"]::tab,
QTabBar[shape="6"]::tab:last,
QTabBar[shape="7"]::tab:last,
QTabBar[shape="6"]::tab:only-one,
QTabBar[shape="7"]::tab:only-one
{
min-height: 50px;
}
QTabBar[shape="4"]::tab:!selected,
QTabBar[shape="5"]::tab:!selected,
QTabBar[shape="6"]::tab:!selected,
QTabBar[shape="7"]::tab:!selected
{
color: ^foreground^;
background-color: ^tab:background^;
}
/**
* Increase padding on the opposite side of the icon to avoid text clipping.
*
* BUG: The padding works for North, West, and East in Qt5, South does not
* work. All tab positions work for triangular tabs in Qt6.
*/
QTabBar[shape="4"][tabsClosable="true"]::tab,
QTabBar[shape="5"][tabsClosable="true"]::tab
{
padding-left: 0.5em;
}
QTabBar[shape="6"][tabsClosable="true"]::tab
{
padding-bottom: 0.5em;
}
QTabBar[shape="7"][tabsClosable="true"]::tab
{
padding-top: 0.5em;
}
/**
* Undo the padding for the tab.
*
* Enumerated values are North, South, West, East in that order,
* from 4-7.
*
* NOTE: Any higher padding will clip the icon.
*/
QTabBar[shape="4"]::close-button,
QTabBar[shape="5"]::close-button
{
padding-left: -0.12em;
}
QTabBar[shape="6"]::close-button
{
padding-bottom: -0.18em;
}
QTabBar[shape="7"]::close-button
{
padding-top: -0.18em;
}
QDockWidget
{
background: ^dock:background^;

View File

@ -1092,6 +1092,34 @@ def test_triangle_tabwidget_south(widget, *_):
return child
def test_closable_triangle_tabwidget_north(widget, *_):
child = _test_tabwidget(widget, North)
child.setTabShape(Triangular)
child.setTabsClosable(True)
return child
def test_closable_triangle_tabwidget_south(widget, *_):
child = _test_tabwidget(widget, South)
child.setTabShape(Triangular)
child.setTabsClosable(True)
return child
def test_closable_triangle_tabwidget_east(widget, *_):
child = _test_tabwidget(widget, East)
child.setTabShape(Triangular)
child.setTabsClosable(True)
return child
def test_closable_triangle_tabwidget_west(widget, *_):
child = _test_tabwidget(widget, West)
child.setTabShape(Triangular)
child.setTabsClosable(True)
return child
def test_button_position_tabwidget(widget, *_):
child = QtWidgets.QTabWidget(widget)
child.setTabPosition(North)