Make Qt stylesheets fully responsive to RTL (#2114)

* Make Qt stylesheets fully responsive to RTL

* Fix typing
This commit is contained in:
Matthias Metelka 2022-10-10 05:29:09 +02:00 committed by GitHub
parent b4293573dd
commit b97fabb677
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 10 deletions

View file

@ -117,7 +117,7 @@ QMainWindow::separator:vertical {{
def combobox_styles(tm: ThemeManager) -> str: def combobox_styles(tm: ThemeManager) -> str:
return f""" return f"""
QComboBox {{ QComboBox {{
padding: 1px 4px 2px 6px; padding: {"1px 6px 2px 4px" if tm.rtl() else "1px 4px 2px 6px"};
}} }}
QComboBox:editable:on, QComboBox:editable:on,
QComboBox:editable:focus, QComboBox:editable:focus,
@ -149,8 +149,8 @@ QComboBox::drop-down {{
width: 16px; width: 16px;
subcontrol-position: top right; subcontrol-position: top right;
border: 1px solid {tm.var(colors.BUTTON_BORDER)}; border: 1px solid {tm.var(colors.BUTTON_BORDER)};
border-top-right-radius: {tm.var(props.BORDER_RADIUS)}; border-top-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
border-bottom-right-radius: {tm.var(props.BORDER_RADIUS)}; border-bottom-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
QComboBox::down-arrow {{ QComboBox::down-arrow {{
image: url({tm.themed_icon("mdi:chevron-down")}); image: url({tm.themed_icon("mdi:chevron-down")});
@ -199,15 +199,15 @@ QTabBar::tab {{
border: 1px solid {tm.var(colors.BORDER)}; border: 1px solid {tm.var(colors.BORDER)};
}} }}
QTabBar::tab:first {{ QTabBar::tab:first {{
border-top-left-radius: {tm.var(props.BORDER_RADIUS)}; border-top-{tm.left()}-radius: {tm.var(props.BORDER_RADIUS)};
border-bottom-left-radius: {tm.var(props.BORDER_RADIUS)}; border-bottom-{tm.left()}-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
QTabBar::tab:!first {{ QTabBar::tab:!first {{
margin-left: -1px; margin-{tm.left()}: -1px;
}} }}
QTabBar::tab:last {{ QTabBar::tab:last {{
border-top-right-radius: {tm.var(props.BORDER_RADIUS)}; border-top-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
border-bottom-right-radius: {tm.var(props.BORDER_RADIUS)}; border-bottom-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
QTabBar::tab:selected {{ QTabBar::tab:selected {{
color: white; color: white;
@ -328,12 +328,12 @@ QSpinBox::down-button:hover {{
QSpinBox::up-button {{ QSpinBox::up-button {{
margin-bottom: -1px; margin-bottom: -1px;
subcontrol-position: top right; subcontrol-position: top right;
border-top-right-radius: {tm.var(props.BORDER_RADIUS)}; border-top-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
QSpinBox::down-button {{ QSpinBox::down-button {{
margin-top: -1px; margin-top: -1px;
subcontrol-position: bottom right; subcontrol-position: bottom right;
border-bottom-right-radius: {tm.var(props.BORDER_RADIUS)}; border-bottom-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
QSpinBox::up-arrow {{ QSpinBox::up-arrow {{
image: url({tm.themed_icon("mdi:chevron-up")}); image: url({tm.themed_icon("mdi:chevron-up")});

View file

@ -11,7 +11,9 @@ import subprocess
from dataclasses import dataclass from dataclasses import dataclass
from typing import Callable, List, Tuple from typing import Callable, List, Tuple
import anki.lang
import aqt import aqt
from anki.lang import is_rtl
from anki.utils import is_lin, is_mac, is_win from anki.utils import is_lin, is_mac, is_win
from aqt import QApplication, colors, gui_hooks from aqt import QApplication, colors, gui_hooks
from aqt.qt import ( from aqt.qt import (
@ -57,6 +59,15 @@ class ThemeManager:
default_palette: QPalette | None = None default_palette: QPalette | None = None
_default_style: str | None = None _default_style: str | None = None
def rtl(self) -> bool:
return is_rtl(anki.lang.current_lang)
def left(self) -> str:
return "right" if self.rtl() else "left"
def right(self) -> str:
return "left" if self.rtl() else "right"
# Qt applies a gradient to the buttons in dark mode # Qt applies a gradient to the buttons in dark mode
# from about #505050 to #606060. # from about #505050 to #606060.
DARK_MODE_BUTTON_BG_MIDPOINT = "#555555" DARK_MODE_BUTTON_BG_MIDPOINT = "#555555"