dnrops
/
anki
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Experiment with labelled note view switch (#2117) 

* Swap initial letter for full label on switch.py

* Tweak note/card accent colors

* Decrease knob radius by 1px

* Make label font smaller, but bold
This commit is contained in:
Matthias Metelka 2022-10-10 10:36:11 +02:00 committed by GitHub
parent 4750962098
commit 3d47c9547a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 69 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ftl/core/browsing.ftl
View File

@ -12,6 +12,7 @@ browsing-browser-appearance = Browser Appearance
browsing-browser-options = Browser Options
browsing-buried = Buried
browsing-card = Card
browsing-cards = Cards
# Exactly one character representing 'Cards'; should differ from browsing-note-initial.
browsing-card-initial = C
browsing-card-list = Card List
@ -59,6 +60,7 @@ browsing-new-note-type = New note type:
browsing-no-flag = No Flag
browsing-no-selection = No cards or notes selected.
browsing-note = Note
browsing-notes = Notes
# Exactly one character representing 'Notes'; should differ from browsing-card-initial.
browsing-note-initial = N
browsing-optional-filter = Optional filter:

2
qt/aqt/browser/browser.py
View File

@ -496,7 +496,7 @@ class Browser(QMainWindow):
def setup_table(self) -> None:
self.table = Table(self)
self.table.set_view(self.form.tableView)
switch = Switch(11, tr.browsing_card_initial(), tr.browsing_note_initial())
switch = Switch(12, tr.browsing_cards(), tr.browsing_notes())
switch.setChecked(self.table.is_notes_mode())
switch.setToolTip(tr.browsing_toggle_showing_cards_notes())
qconnect(self.form.action_toggle_mode.triggered, switch.toggle)

83
qt/aqt/switch.py
View File

@ -8,7 +8,7 @@ from aqt.theme import theme_manager
class Switch(QAbstractButton):
"""A horizontal slider to toggle between two states which can be denoted by short strings.
"""A horizontal slider to toggle between two states which can be denoted by strings and/or QIcons.
The left state is the default and corresponds to isChecked()=False.
The suppoorted slots are toggle(), for an animated transition, and setChecked().
@ -32,9 +32,12 @@ class Switch(QAbstractButton):
self._left_color = left_color
self._right_color = right_color
self._path_radius = radius
self._knob_radius = radius - 1
self._left_position = self._position = radius
self._right_position = 3 * self._path_radius
self._knob_radius = radius - 2
self._label_padding = 4
self._left_knob_position = self._position = radius
self._right_knob_position = self.width - self._path_radius
self._left_label_position = self._label_padding / 2
self._right_label_position = 2 * self._knob_radius
@pyqtProperty(int) # type: ignore
def position(self) -> int:
@ -47,11 +50,15 @@ class Switch(QAbstractButton):
@property
def start_position(self) -> int:
return self._left_position if self.isChecked() else self._right_position
return (
self._left_knob_position if self.isChecked() else self._right_knob_position
)
@property
def end_position(self) -> int:
return self._right_position if self.isChecked() else self._left_position
return (
self._right_knob_position if self.isChecked() else self._left_knob_position
)
@property
def label(self) -> str:
@ -62,10 +69,32 @@ class Switch(QAbstractButton):
color = self._right_color if self.isChecked() else self._left_color
return theme_manager.qcolor(color)
@property
def label_width(self) -> int:
font = QFont()
font.setPixelSize(int(self._knob_radius))
font.setWeight(QFont.Weight.Bold)
fm = QFontMetrics(font)
return (
max(
fm.horizontalAdvance(self._left_label),
fm.horizontalAdvance(self._right_label),
)
+ 2 * self._label_padding
)
@property
def width(self) -> int:
return self.label_width + 2 * self._path_radius
@property
def height(self) -> int:
return 2 * self._path_radius
def sizeHint(self) -> QSize:
return QSize(
4 * self._path_radius,
2 * self._path_radius,
self.width,
self.height,
)
def setChecked(self, checked: bool) -> None:
@ -78,39 +107,55 @@ class Switch(QAbstractButton):
painter.setRenderHint(QPainter.RenderHint.Antialiasing, True)
painter.setPen(Qt.PenStyle.NoPen)
self._paint_path(painter)
self._paint_knob(painter)
self._paint_label(painter)
self._paint_knob(painter)
def _paint_path(self, painter: QPainter) -> None:
painter.setBrush(QBrush(self.path_color))
rectangle = QRectF(
def _current_path_rectangle(self) -> QRectF:
return QRectF(
0,
0,
self.width(),
self.height(),
self.width,
self.height,
)
def _current_label_rectangle(self) -> QRectF:
return QRectF(
self._left_label_position
if self.isChecked()
else self._right_label_position,
0,
self.label_width,
self.height,
)
painter.drawRoundedRect(rectangle, self._path_radius, self._path_radius)
def _current_knob_rectangle(self) -> QRectF:
return QRectF(
self.position - self._knob_radius, # type: ignore
1,
2,
2 * self._knob_radius,
2 * self._knob_radius,
)
def _paint_path(self, painter: QPainter) -> None:
painter.setBrush(QBrush(self.path_color))
painter.drawRoundedRect(
self._current_path_rectangle(), self._path_radius, self._path_radius
)
def _paint_knob(self, painter: QPainter) -> None:
color = theme_manager.qcolor(colors.BUTTON_GRADIENT_START)
painter.setPen(Qt.PenStyle.NoPen)
painter.setBrush(QBrush(color))
painter.drawEllipse(self._current_knob_rectangle())
def _paint_label(self, painter: QPainter) -> None:
painter.setPen(theme_manager.qcolor(colors.FG))
painter.setPen(theme_manager.qcolor(colors.CANVAS))
font = painter.font()
font.setPixelSize(int(1.2 * self._knob_radius))
font.setPixelSize(int(self._knob_radius))
font.setWeight(QFont.Weight.Bold)
painter.setFont(font)
painter.drawText(
self._current_knob_rectangle(), Qt.AlignmentFlag.AlignCenter, self.label
self._current_label_rectangle(), Qt.AlignmentFlag.AlignCenter, self.label
)
def mouseReleaseEvent(self, event: QMouseEvent) -> None:

4
sass/_vars.scss
View File

@ -195,8 +195,8 @@ $vars: (
),
accent: (
card: (
light: palette(blue, 3),
dark: palette(blue, 4),
light: palette(blue, 4),
dark: palette(blue, 3),
),
note: (
light: palette(green, 5),