GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 14:32:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Color Palette Patch 1 (#2073)

Browse source 
* Make several colors more faint

* Move selection-color definition out of table.py and adjust colors

* Use functions for repetitive border-gradient definitions

* Tweak QTableView and QScrollBar styles

* Use mdi icon for Qt drag handles and adjust padding in browser.ui

* Apply appropriate drag-handle icon depending on orientation

* Fix formatting

* Remove unused import

* Add right margin to browser layout

* Apply splitter styling on macOS as well (dae)

+ Remove the styling from sliders, as it was presumably not intentional.
This commit is contained in:
Matthias Metelka 2022-09-19 02:58:05 +02:00 committed by GitHub
parent 5bf031f1e3
commit 24abb06cee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 153 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
qt/aqt/browser/table/table.py
View file

@ -12,7 +12,7 @@ from anki.collection import Collection, Config, OpChanges
from anki.consts import * from anki.consts import *
from anki.notes import Note, NoteId from anki.notes import Note, NoteId
from anki.utils import is_win from anki.utils import is_win
from aqt import colors, gui_hooks from aqt import gui_hooks
from aqt.browser.table import Columns, ItemId, SearchContext from aqt.browser.table import Columns, ItemId, SearchContext
from aqt.browser.table.model import DataModel from aqt.browser.table.model import DataModel
from aqt.browser.table.state import CardState, ItemState, NoteState from aqt.browser.table.state import CardState, ItemState, NoteState
@ -61,7 +61,6 @@ class Table:
def cleanup(self) -> None: def cleanup(self) -> None:
self._save_header() self._save_header()
gui_hooks.theme_did_change.remove(self._setup_style)
# Public Methods # Public Methods
###################################################################### ######################################################################
@ -351,10 +350,8 @@ class Table:
self._view.setHorizontalScrollMode(QAbstractItemView.ScrollMode.ScrollPerPixel) self._view.setHorizontalScrollMode(QAbstractItemView.ScrollMode.ScrollPerPixel)
self._view.horizontalScrollBar().setSingleStep(10) self._view.horizontalScrollBar().setSingleStep(10)
self._update_font() self._update_font()
self._setup_style()
self._view.setContextMenuPolicy(Qt.ContextMenuPolicy.CustomContextMenu) self._view.setContextMenuPolicy(Qt.ContextMenuPolicy.CustomContextMenu)
qconnect(self._view.customContextMenuRequested, self._on_context_menu) qconnect(self._view.customContextMenuRequested, self._on_context_menu)
gui_hooks.theme_did_change.append(self._setup_style)
def _update_font(self) -> None: def _update_font(self) -> None:
# we can't choose different line heights efficiently, so we need # we can't choose different line heights efficiently, so we need
@ -367,19 +364,6 @@ class Table:
curmax = bsize curmax = bsize
self._view.verticalHeader().setDefaultSectionSize(curmax + 6) self._view.verticalHeader().setDefaultSectionSize(curmax + 6)
def _setup_style(self) -> None:
if not theme_manager.night_mode:
self._view.setStyleSheet(
"QTableView{ selection-background-color: rgba(150, 150, 150, 50); "
"selection-color: black; }"
)
elif theme_manager.macos_dark_mode():
self._view.setStyleSheet(
f"QTableView {{ gridline-color: {colors.CANVAS_INSET} }}"
)
else:
self._view.setStyleSheet("")
def _setup_headers(self) -> None: def _setup_headers(self) -> None:
vh = self._view.verticalHeader() vh = self._view.verticalHeader()
hh = self._view.horizontalHeader() hh = self._view.horizontalHeader()

4
qt/aqt/data/qt/icons/BUILD.bazel
View file

@ -37,6 +37,10 @@ copy_mdi_icons(
# QHeaderView arrows # QHeaderView arrows
"menu-up.svg", "menu-up.svg",
"menu-down.svg", "menu-down.svg",
# drag handle
"drag-vertical.svg",
"drag-horizontal.svg",
], ],
) )

4
qt/aqt/forms/browser.ui
View file

@ -26,13 +26,13 @@
<number>12</number> <number>12</number>
</property> </property>
<property name="leftMargin"> <property name="leftMargin">
<number>12</number> <number>0</number>
</property> </property>
<property name="topMargin"> <property name="topMargin">
<number>6</number> <number>6</number>
</property> </property>
<property name="rightMargin"> <property name="rightMargin">
<number>12</number> <number>6</number>
</property> </property>
<property name="bottomMargin"> <property name="bottomMargin">
<number>12</number> <number>12</number>

215
qt/aqt/stylesheets.py
View file

@ -4,6 +4,28 @@ from aqt import colors, props
from aqt.theme import ThemeManager from aqt.theme import ThemeManager
def button_gradient(start: str, end: str) -> str:
return f"""
qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25,
stop:0 {start},
stop:1 {end}
);
"""
def button_pressed_gradient(start: str, end: str, shadow: str) -> str:
return f"""
qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
stop:0 {shadow},
stop:0.1 {start},
stop:0.9 {end},
stop:1 {shadow}
);
"""
def general_styles(tm: ThemeManager, buf: str) -> str: def general_styles(tm: ThemeManager, buf: str) -> str:
buf += f""" buf += f"""
QFrame {{ QFrame {{
@ -45,37 +67,56 @@ def button_styles(tm: ThemeManager, buf: str) -> str:
QPushButton, QPushButton,
QTabBar::tab:!selected, QTabBar::tab:!selected,
QComboBox:!editable {{ QComboBox:!editable {{
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, button_gradient(
stop:0 {tm.var(colors.BUTTON_GRADIENT_START)}, tm.var(colors.BUTTON_GRADIENT_START),
stop:1 {tm.var(colors.BUTTON_GRADIENT_END)} tm.var(colors.BUTTON_GRADIENT_END)
); )
};
}} }}
QPushButton:hover, QPushButton:hover,
QTabBar::tab:hover, QTabBar::tab:hover,
QComboBox:!editable:hover {{ QComboBox:!editable:hover {{
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25, button_gradient(
stop:0 {tm.var(colors.BUTTON_HOVER_GRADIENT_START)}, tm.var(colors.BUTTON_HOVER_GRADIENT_START),
stop:1 {tm.var(colors.BUTTON_HOVER_GRADIENT_END)} tm.var(colors.BUTTON_HOVER_GRADIENT_END)
); )
};
}} }}
QPushButton:pressed, QPushButton:pressed,
QComboBox:!editable:pressed {{ QComboBox:!editable:pressed {{
border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)}; border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)};
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, button_pressed_gradient(
stop:0 {tm.var(colors.BUTTON_PRESSED_SHADOW)}, tm.var(colors.BUTTON_GRADIENT_START),
stop:0.1 {tm.var(colors.BUTTON_GRADIENT_START)}, tm.var(colors.BUTTON_GRADIENT_END),
stop:0.9 {tm.var(colors.BUTTON_GRADIENT_END)}, tm.var(colors.BUTTON_PRESSED_SHADOW)
stop:1 {tm.var(colors.BUTTON_PRESSED_SHADOW)}, )
); };
}} }}
""" """
return buf return buf
def splitter_styles(tm: ThemeManager, buf: str) -> str:
buf += """
QSplitter::handle,
QMainWindow::separator {
height: 16px;
}
QSplitter::handle:vertical,
QMainWindow::separator:horizontal {
image: url(icons:drag-horizontal.svg);
}
QSplitter::handle:horizontal,
QMainWindow::separator:vertical {
image: url(icons:drag-vertical.svg);
}
"""
return buf
def combobox_styles(tm: ThemeManager, buf: str) -> str: def combobox_styles(tm: ThemeManager, buf: str) -> str:
buf += f""" buf += f"""
QComboBox {{ QComboBox {{
@ -118,18 +159,20 @@ QComboBox::down-arrow {{
image: url(icons:chevron-down.svg); image: url(icons:chevron-down.svg);
}} }}
QComboBox::drop-down {{ QComboBox::drop-down {{
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, button_gradient(
stop:0 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_START)}, tm.var(colors.BUTTON_PRIMARY_GRADIENT_START),
stop:1 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_END)} tm.var(colors.BUTTON_PRIMARY_GRADIENT_END)
); )
};
}} }}
QComboBox::drop-down:hover {{ QComboBox::drop-down:hover {{
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25, button_gradient(
stop:0 {tm.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_START)}, tm.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_START),
stop:1 {tm.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_END)} tm.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_END)
); )
};
}} }}
""" """
return buf return buf
@ -145,7 +188,7 @@ QTabWidget::pane {{
top: -15px; top: -15px;
padding-top: 1em; padding-top: 1em;
background: {tm.var(colors.CANVAS_ELEVATED)}; background: {tm.var(colors.CANVAS_ELEVATED)};
border: 1px solid {tm.var(colors.BORDER_SUBTLE)}; border: 1px solid {tm.var(colors.BORDER)};
border-radius: {tm.var(props.BORDER_RADIUS)}; border-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
QTabWidget::tab-bar {{ QTabWidget::tab-bar {{
@ -157,7 +200,7 @@ QTabBar::tab {{
min-width: 8ex; min-width: 8ex;
}} }}
QTabBar::tab {{ QTabBar::tab {{
border: 1px solid {tm.var(colors.BORDER_SUBTLE)}; border: 1px solid {tm.var(colors.BORDER)};
}} }}
QTabBar::tab:first {{ QTabBar::tab:first {{
border-top-left-radius: {tm.var(props.BORDER_RADIUS)}; border-top-left-radius: {tm.var(props.BORDER_RADIUS)};
@ -172,11 +215,12 @@ QTabBar::tab:last {{
}} }}
QTabBar::tab:selected {{ QTabBar::tab:selected {{
color: white; color: white;
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, button_gradient(
stop:0 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_START)}, tm.var(colors.BUTTON_PRIMARY_GRADIENT_START),
stop:1 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_END)} tm.var(colors.BUTTON_PRIMARY_GRADIENT_END)
); )
};
}} }}
""" """
return buf return buf
@ -185,43 +229,43 @@ QTabBar::tab:selected {{
def table_styles(tm: ThemeManager, buf: str) -> str: def table_styles(tm: ThemeManager, buf: str) -> str:
buf += f""" buf += f"""
QTableView {{ QTableView {{
background: none;
top: 2px;
border-left: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-radius: {tm.var(props.BORDER_RADIUS)}; border-radius: {tm.var(props.BORDER_RADIUS)};
gridline-color: {tm.var(colors.BORDER_SUBTLE)}; gridline-color: {tm.var(colors.BORDER)};
selection-background-color: {tm.var(colors.SELECTION_BG)};
selection-color: {tm.var(colors.SELECTION_FG)};
}} }}
QHeaderView {{ QHeaderView {{
background: {tm.var(colors.CANVAS)}; background: {tm.var(colors.CANVAS)};
}} }}
QHeaderView::section {{ QHeaderView::section {{
border: 1px solid {tm.var(colors.BORDER_SUBTLE)}; border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, button_gradient(
stop:0 {tm.var(colors.BUTTON_GRADIENT_START)}, tm.var(colors.BUTTON_GRADIENT_START),
stop:1 {tm.var(colors.BUTTON_GRADIENT_END)} tm.var(colors.BUTTON_GRADIENT_END)
); )
};
}} }}
QHeaderView::section:pressed {{ QHeaderView::section:pressed,
QHeaderView::section:pressed:!first {{
border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)}; border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)};
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, button_pressed_gradient(
stop:0 {tm.var(colors.BUTTON_PRESSED_SHADOW)}, tm.var(colors.BUTTON_GRADIENT_START),
stop:0.1 {tm.var(colors.BUTTON_GRADIENT_START)}, tm.var(colors.BUTTON_GRADIENT_END),
stop:0.9 {tm.var(colors.BUTTON_GRADIENT_END)}, tm.var(colors.BUTTON_PRESSED_SHADOW)
stop:1 {tm.var(colors.BUTTON_PRESSED_SHADOW)}, )
); }
}} }}
QHeaderView::section:hover {{ QHeaderView::section:hover {{
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25, button_gradient(
stop:0 {tm.var(colors.BUTTON_HOVER_GRADIENT_START)}, tm.var(colors.BUTTON_HOVER_GRADIENT_START),
stop:1 {tm.var(colors.BUTTON_HOVER_GRADIENT_END)} tm.var(colors.BUTTON_HOVER_GRADIENT_END)
); )
};
}} }}
QHeaderView::section:first {{ QHeaderView::section:first {{
margin-left: -1px;
border-top: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-left: 1px solid {tm.var(colors.BORDER_SUBTLE)}; border-left: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-top-left-radius: {tm.var(props.BORDER_RADIUS)}; border-top-left-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
@ -229,20 +273,12 @@ QHeaderView::section:!first {{
border-left: none; border-left: none;
}} }}
QHeaderView::section:last {{ QHeaderView::section:last {{
border-top: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-right: 1px solid {tm.var(colors.BORDER_SUBTLE)}; border-right: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-top-right-radius: {tm.var(props.BORDER_RADIUS)}; border-top-right-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
QHeaderView::section:next-selected {{
border-right: none;
}}
QHeaderView::section:previous-selected {{
border-left: none;
}}
QHeaderView::section:only-one {{ QHeaderView::section:only-one {{
border-left: 1px solid {tm.var(colors.BORDER_SUBTLE)}; border-left: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-top: 1px solid {tm.var(colors.BORDER_SUBTLE)}; border-right: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-right: 1px solid {tm.var(colors.CANVAS)};
border-top-left-radius: {tm.var(props.BORDER_RADIUS)}; border-top-left-radius: {tm.var(props.BORDER_RADIUS)};
border-top-right-radius: {tm.var(props.BORDER_RADIUS)}; border-top-right-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
@ -268,30 +304,32 @@ QSpinBox::down-button {{
subcontrol-origin: border; subcontrol-origin: border;
width: 16px; width: 16px;
border: 1px solid {tm.var(colors.BUTTON_BORDER)}; border: 1px solid {tm.var(colors.BUTTON_BORDER)};
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, button_gradient(
stop:0 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_START)}, tm.var(colors.BUTTON_PRIMARY_GRADIENT_START),
stop:1 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_END)} tm.var(colors.BUTTON_PRIMARY_GRADIENT_END)
); )
};
}} }}
QSpinBox::up-button:pressed, QSpinBox::up-button:pressed,
QSpinBox::down-button:pressed {{ QSpinBox::down-button:pressed {{
border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)}; border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)};
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, button_pressed_gradient(
stop:0 {tm.var(colors.BUTTON_PRESSED_SHADOW)}, tm.var(colors.BUTTON_PRIMARY_GRADIENT_START),
stop:0.1 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_START)}, tm.var(colors.BUTTON_PRIMARY_GRADIENT_END),
stop:0.9 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_END)}, tm.var(colors.BUTTON_PRESSED_SHADOW)
stop:1 {tm.var(colors.BUTTON_PRESSED_SHADOW)}, )
); }
}} }}
QSpinBox::up-button:hover, QSpinBox::up-button:hover,
QSpinBox::down-button:hover {{ QSpinBox::down-button:hover {{
background: qlineargradient( background: {
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25, button_gradient(
stop:0 {tm.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_START)}, tm.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_START),
stop:1 {tm.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_END)} tm.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_END)
); )
};
}} }}
QSpinBox::up-button {{ QSpinBox::up-button {{
margin-bottom: -1px; margin-bottom: -1px;
@ -338,7 +376,8 @@ QAbstractScrollArea::corner {{
border: none; border: none;
}} }}
QScrollBar {{ QScrollBar {{
background-color: {tm.var(colors.CANVAS)}; subcontrol-origin: content;
background-color: transparent;
}} }}
QScrollBar::handle {{ QScrollBar::handle {{
border-radius: {tm.var(props.BORDER_RADIUS)}; border-radius: {tm.var(props.BORDER_RADIUS)};
@ -354,13 +393,13 @@ QScrollBar:horizontal {{
height: 12px; height: 12px;
}} }}
QScrollBar::handle:horizontal {{ QScrollBar::handle:horizontal {{
min-width: 50px; min-width: 60px;
}} }}
QScrollBar:vertical {{ QScrollBar:vertical {{
width: 12px; width: 12px;
}} }}
QScrollBar::handle:vertical {{ QScrollBar::handle:vertical {{
min-height: 50px; min-height: 60px;
}} }}
QScrollBar::add-line {{ QScrollBar::add-line {{
border: none; border: none;

4
qt/aqt/theme.py
View file

@ -186,7 +186,9 @@ class ThemeManager:
gui_hooks.theme_did_change() gui_hooks.theme_did_change()
def _apply_style(self, app: QApplication) -> None: def _apply_style(self, app: QApplication) -> None:
buf = "" from aqt.stylesheets import splitter_styles
buf = splitter_styles(self, "")
if not is_mac: if not is_mac:
from aqt.stylesheets import ( from aqt.stylesheets import (

22
sass/_vars.scss
View file

@ -60,8 +60,8 @@ $vars: (
), ),
border: ( border: (
default: ( default: (
light: palette(lightgray, 7), light: palette(lightgray, 6),
dark: palette(darkgray, 7), dark: palette(darkgray, 6),
), ),
subtle: ( subtle: (
light: palette(lightgray, 5), light: palette(lightgray, 5),
@ -108,7 +108,7 @@ $vars: (
dark: palette(darkgray, 2), dark: palette(darkgray, 2),
), ),
end: ( end: (
light: palette(lightgray, 3), light: palette(lightgray, 4),
dark: palette(darkgray, 3), dark: palette(darkgray, 3),
), ),
), ),
@ -149,15 +149,15 @@ $vars: (
scrollbar: ( scrollbar: (
bg: ( bg: (
default: ( default: (
light: palette(lightgray, 6), light: palette(lightgray, 5),
dark: palette(darkgray, 4), dark: palette(darkgray, 4),
), ),
hover: ( hover: (
light: palette(lightgray, 7), light: palette(lightgray, 6),
dark: palette(darkgray, 3), dark: palette(darkgray, 3),
), ),
active: ( active: (
light: palette(lightgray, 8), light: palette(lightgray, 7),
dark: palette(darkgray, 1), dark: palette(darkgray, 1),
), ),
), ),
@ -263,6 +263,16 @@ $vars: (
dark: white, dark: white,
), ),
), ),
selection: (
bg: (
light: color.scale(palette(lightgray, 5), $alpha: -50%),
dark: color.scale(palette(blue, 3), $alpha: -50%),
),
fg: (
light: black,
dark: white,
),
),
), ),
); );