Skip to content

Commit

Permalink
Add stylesheet for QMenu (ankitects#2122)
Browse files Browse the repository at this point in the history 
* Give QMenu cursor: pointer

* Darken border colors in dark theme

* Refactor cursor: pointer event filter

* Add QMenu stylesheet

* Remove min-width for QMenu item

* Add QMenuBar styles

with increased height for touchscreen users and more visible highlight color.

* Fix type

* Revert "Add QMenuBar styles"

This reverts commit 6ae405a.

* Remove strong border from QMenu checkbox style

* Keep highlight color consistent

* Adjust highlight-bg

* Increase horizontal padding and adjust checkbox margin

* Introduce border-faint var and make default border brighter in dark mode

* Fix 1px move on hover and make highlight color more subtle

* Remove win10 styles

because the properties are set in the other stylesheets anyway.

* Fix bottom border of QMenuBar not showing underneath entries

* Remove unused import

* Make border-faint one shade darker in light theme
  • Loading branch information
@kleinerpirat
kleinerpirat authored Oct 12, 2022
1 parent 3d47c95 commit dc67ed9
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 69 deletions.
33 changes: 13 additions & 20 deletions qt/aqt/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,26 +345,19 @@ def event(self, evt: QEvent) -> bool:
##################################################

def eventFilter(self, src: Any, evt: QEvent) -> bool:
if evt.type() == QEvent.Type.HoverEnter:
if (
(
isinstance(
src,
(
QPushButton,
QCheckBox,
QRadioButton,
# classes with PyQt5 compatibility proxy
without_qt5_compat_wrapper(QToolButton),
without_qt5_compat_wrapper(QTabBar),
),
)
)
and src.isEnabled()
or (
isinstance(src, without_qt5_compat_wrapper(QComboBox))
and not src.isEditable()
)
pointer_classes = (
QPushButton,
QCheckBox,
QRadioButton,
QMenu,
# classes with PyQt5 compatibility proxy
without_qt5_compat_wrapper(QToolButton),
without_qt5_compat_wrapper(QTabBar),
)
if evt.type() in [QEvent.Type.Enter, QEvent.Type.HoverEnter]:
if (isinstance(src, pointer_classes) and src.isEnabled()) or (
isinstance(src, without_qt5_compat_wrapper(QComboBox))
and not src.isEditable()
):
self.setOverrideCursor(QCursor(Qt.CursorShape.PointingHandCursor))
else:
Expand Down
2 changes: 1 addition & 1 deletion qt/aqt/data/web/css/deckbrowser.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ a.deck:hover {
}

tr.deck td {
border-bottom: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-faint);
}

tr.top-level-drag-row td {
Expand Down
92 changes: 59 additions & 33 deletions qt/aqt/stylesheets.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ def button_pressed_gradient(start: str, end: str, shadow: str) -> str:

def general_styles(tm: ThemeManager) -> str:
return f"""
QFrame {{
QFrame,
QWidget {{
background: none;
}}
QPushButton,
Expand All @@ -38,7 +39,7 @@ def general_styles(tm: ThemeManager) -> str:
QListWidget,
QTreeWidget,
QListView {{
border: 1px solid {tm.var(colors.BORDER)};
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-radius: {tm.var(props.BORDER_RADIUS)};
}}
QLineEdit {{
Expand All @@ -58,6 +59,47 @@ def general_styles(tm: ThemeManager) -> str:
"""


def menu_styles(tm: ThemeManager) -> str:
return f"""
QMenuBar {{
border-bottom: 1px solid {tm.var(colors.BORDER_FAINT)};
}}
QMenuBar::item {{
background-color: transparent;
padding: 2px 4px;
border-radius: {tm.var(props.BORDER_RADIUS)};
}}
QMenuBar::item:selected {{
background-color: {tm.var(colors.CANVAS_ELEVATED)};
}}
QMenu {{
background-color: {tm.var(colors.CANVAS_OVERLAY)};
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
padding: 4px;
}}
QMenu::item {{
background-color: transparent;
padding: 3px 14px;
margin-bottom: 4px;
}}
QMenu::item:selected {{
background-color: {tm.var(colors.CANVAS_INSET)};
color: {tm.var(colors.HIGHLIGHT_FG)};
border-radius: {tm.var(props.BORDER_RADIUS)};
}}
QMenu::separator {{
height: 1px;
background: {tm.var(colors.BORDER_SUBTLE)};
margin: 0 8px 4px 8px;
}}
QMenu::indicator {{
border: 1px solid {tm.var(colors.BORDER)};
margin-left: 6px;
margin-right: -6px;
}}
"""


def button_styles(tm: ThemeManager) -> str:
return f"""
QPushButton {{
Expand Down Expand Up @@ -184,7 +226,7 @@ def tabwidget_styles(tm: ThemeManager) -> str:
top: -15px;
padding-top: 1em;
background: {tm.var(colors.CANVAS_ELEVATED)};
border: 1px solid {tm.var(colors.BORDER)};
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-radius: {tm.var(props.BORDER_RADIUS)};
}}
QTabWidget::tab-bar {{
Expand All @@ -196,7 +238,7 @@ def tabwidget_styles(tm: ThemeManager) -> str:
min-width: 8ex;
}}
QTabBar::tab {{
border: 1px solid {tm.var(colors.BORDER)};
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
}}
QTabBar::tab:first {{
border-top-{tm.left()}-radius: {tm.var(props.BORDER_RADIUS)};
Expand Down Expand Up @@ -225,15 +267,15 @@ def table_styles(tm: ThemeManager) -> str:
return f"""
QTableView {{
border-radius: {tm.var(props.BORDER_RADIUS)};
gridline-color: {tm.var(colors.BORDER)};
gridline-color: {tm.var(colors.BORDER_SUBTLE)};
selection-background-color: {tm.var(colors.SELECTION_BG)};
selection-color: {tm.var(colors.SELECTION_FG)};
}}
QHeaderView {{
background: {tm.var(colors.CANVAS)};
}}
QHeaderView::section {{
border: 1px solid {tm.var(colors.BORDER)};
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
background: {
button_gradient(
tm.var(colors.BUTTON_GRADIENT_START),
Expand Down Expand Up @@ -261,19 +303,19 @@ def table_styles(tm: ThemeManager) -> str:
};
}}
QHeaderView::section:first {{
border-left: 1px solid {tm.var(colors.BORDER)};
border-left: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-top-left-radius: {tm.var(props.BORDER_RADIUS)};
}}
QHeaderView::section:!first {{
border-left: none;
}}
QHeaderView::section:last {{
border-right: 1px solid {tm.var(colors.BORDER)};
border-right: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-top-right-radius: {tm.var(props.BORDER_RADIUS)};
}}
QHeaderView::section:only-one {{
border-left: 1px solid {tm.var(colors.BORDER)};
border-right: 1px solid {tm.var(colors.BORDER)};
border-left: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-right: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-top-left-radius: {tm.var(props.BORDER_RADIUS)};
border-top-right-radius: {tm.var(props.BORDER_RADIUS)};
}}
Expand Down Expand Up @@ -374,16 +416,16 @@ def checkbox_styles(tm: ThemeManager) -> str:
margin: 2px 0;
}}
QCheckBox::indicator,
QRadioButton::indicator {{
QRadioButton::indicator,
QMenu::indicator {{
border: 1px solid {tm.var(colors.BUTTON_BORDER)};
border-radius: {tm.var(props.BORDER_RADIUS)};
background: {tm.var(colors.CANVAS_INSET)};
width: 16px;
height: 16px;
}}
QCheckBox::indicator {{
border-radius: {tm.var(props.BORDER_RADIUS)};
}}
QRadioButton::indicator {{
QRadioButton::indicator,
QMenu::indicator:exclusive {{
border-radius: 8px;
}}
QCheckBox::indicator:hover,
Expand All @@ -395,7 +437,8 @@ def checkbox_styles(tm: ThemeManager) -> str:
height: 14px;
}}
QCheckBox::indicator:checked,
QRadioButton::indicator:checked {{
QRadioButton::indicator:checked,
QMenu::indicator:checked {{
image: url({tm.themed_icon("mdi:check")});
}}
QCheckBox::indicator:indeterminate {{
Expand Down Expand Up @@ -445,20 +488,3 @@ def scrollbar_styles(tm: ThemeManager) -> str:
background: none;
}}
"""


def win10_styles(tm: ThemeManager) -> str:
return f"""
/* day mode is missing a bottom border; background must be
also set for border to apply */
QMenuBar {{
border-bottom: 1px solid {tm.var(colors.BORDER)};
background: {tm.var(colors.CANVAS) if tm.night_mode else "white"};
}}
/* qt bug? setting the above changes the browser sidebar
to white as well, so set it back */
QTreeWidget {{
background: {tm.var(colors.CANVAS)};
}}
"""
9 changes: 3 additions & 6 deletions qt/aqt/theme.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

import enum
import os
import platform
import re
import subprocess
from dataclasses import dataclass
Expand Down Expand Up @@ -229,29 +228,27 @@ def _apply_style(self, app: QApplication) -> None:
checkbox_styles,
combobox_styles,
general_styles,
menu_styles,
scrollbar_styles,
spinbox_styles,
table_styles,
tabwidget_styles,
win10_styles,
)

buf += "".join(
[
general_styles(self),
button_styles(self),
checkbox_styles(self),
menu_styles(self),
combobox_styles(self),
tabwidget_styles(self),
table_styles(self),
spinbox_styles(self),
checkbox_styles(self),
scrollbar_styles(self),
]
)

if is_win and platform.release() == "10":
buf += win10_styles(self)

# allow addons to modify the styling
buf = gui_hooks.style_did_init(buf)

Expand Down
22 changes: 13 additions & 9 deletions sass/_vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ $vars: (
dark: palette(darkgray, 6),
),
overlay: (
light: white,
dark: black,
light: palette(lightgray, 0),
dark: palette(darkgray, 5),
),
code: (
light: white,
Expand All @@ -67,16 +67,20 @@ $vars: (
border: (
default: (
light: palette(lightgray, 6),
dark: palette(darkgray, 7),
),
subtle: (
light: palette(lightgray, 5),
dark: palette(darkgray, 6),
dark: palette(darkgray, 4),
),
strong: (
light: palette(lightgray, 9),
dark: palette(darkgray, 1),
),
subtle: (
light: palette(lightgray, 5),
dark: palette(darkgray, 7),
),
faint: (
light: palette(lightgray, 4),
dark: palette(darkgray, 6),
),
focus: (
light: palette(blue, 5),
dark: palette(blue, 5),
Expand Down Expand Up @@ -269,8 +273,8 @@ $vars: (
),
highlight: (
bg: (
light: palette(blue, 3),
dark: palette(blue, 4),
light: color.scale(palette(blue, 3), $alpha: -33%),
dark: color.scale(palette(blue, 4), $alpha: -33%),
),
fg: (
light: black,
Expand Down

0 comments on commit dc67ed9

Please sign in to comment.