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

ftl/core/browsing.ftl

@@ -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:

qt/aqt/browser/browser.py

@@ -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)

qt/aqt/switch.py

@@ -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._knob_radius = radius - 2
-        self._left_position = self._position = radius
+        self._label_padding = 4
-        self._right_position = 3 * self._path_radius
+        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,
+            self.width,
-            2 * self._path_radius,
+            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:
+    def _current_path_rectangle(self) -> QRectF:
-        painter.setBrush(QBrush(self.path_color))
+        return QRectF(
-        rectangle = QRectF(
             0,
             0,
-            self.width(),
+            self.width,
-            self.height(),
+            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:

sass/_vars.scss

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