diff --git a/README.md b/README.md index 7f53e04..d885810 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/dist/pyqt6/dark/stylesheet.qss b/dist/pyqt6/dark/stylesheet.qss index 8827c70..e29a63e 100644 --- a/dist/pyqt6/dark/stylesheet.qss +++ b/dist/pyqt6/dark/stylesheet.qss @@ -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; diff --git a/dist/pyqt6/light/stylesheet.qss b/dist/pyqt6/light/stylesheet.qss index 4c7be4e..be130e0 100644 --- a/dist/pyqt6/light/stylesheet.qss +++ b/dist/pyqt6/light/stylesheet.qss @@ -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; diff --git a/dist/qrc/dark/stylesheet.qss b/dist/qrc/dark/stylesheet.qss index 053bd59..fb5ab31 100644 --- a/dist/qrc/dark/stylesheet.qss +++ b/dist/qrc/dark/stylesheet.qss @@ -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; diff --git a/dist/qrc/light/stylesheet.qss b/dist/qrc/light/stylesheet.qss index afd1f45..8bb968f 100644 --- a/dist/qrc/light/stylesheet.qss +++ b/dist/qrc/light/stylesheet.qss @@ -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; diff --git a/template/stylesheet.qss.in b/template/stylesheet.qss.in index 1a9acfb..a0a8319 100644 --- a/template/stylesheet.qss.in +++ b/template/stylesheet.qss.in @@ -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^; diff --git a/test/ui.py b/test/ui.py index 7c301a0..04590b2 100644 --- a/test/ui.py +++ b/test/ui.py @@ -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)