ui: add arrow icons for navigation buttons (#1016)

* ui: add arrow icons for nav buttons

* ui: use arrow icons for pagination buttons

src/tagstudio/qt/main_window.py

@@ -8,9 +8,10 @@ from collections.abc import Callable
 from pathlib import Path
 
 import structlog
+from PIL import Image, ImageQt
 from PySide6 import QtCore
 from PySide6.QtCore import QMetaObject, QSize, QStringListModel, Qt
-from PySide6.QtGui import QAction
+from PySide6.QtGui import QAction, QPixmap
 from PySide6.QtWidgets import (
     QComboBox,
     QCompleter,
@@ -36,8 +37,10 @@ from tagstudio.core.enums import ShowFilepathOption
 from tagstudio.core.library.alchemy.enums import SortingModeEnum
 from tagstudio.qt.controller.widgets.preview_panel_controller import PreviewPanel
 from tagstudio.qt.flowlayout import FlowLayout
+from tagstudio.qt.helpers.color_overlay import theme_fg_overlay
 from tagstudio.qt.pagination import Pagination
 from tagstudio.qt.platform_strings import trash_term
+from tagstudio.qt.resource_manager import ResourceManager
 from tagstudio.qt.translations import Translations
 from tagstudio.qt.widgets.landing import LandingWidget
 
@@ -430,6 +433,7 @@ class MainWindow(QMainWindow):
 
     def __init__(self, driver: "QtDriver", parent: QWidget | None = None) -> None:
         super().__init__(parent)
+        self.rm = ResourceManager()
 
         # region Type declarations for variables that will be initialized in methods
         # initialized in setup_search_bar
@@ -514,23 +518,27 @@ class MainWindow(QMainWindow):
 
     def setup_search_bar(self):
         """Sets up Nav Buttons, Search Field, Search Button."""
-        nav_button_style = "font-size:14;font-weight:bold;"
         self.search_bar_layout = QHBoxLayout()
         self.search_bar_layout.setObjectName("search_bar_layout")
         self.search_bar_layout.setSizeConstraint(QLayout.SizeConstraint.SetMinimumSize)
 
-        self.back_button = QPushButton("<", self.central_widget)
+        self.back_button = QPushButton(self.central_widget)
+        back_icon: Image.Image = self.rm.get("bxs-left-arrow")  # pyright: ignore[reportAssignmentType]
+        back_icon = theme_fg_overlay(back_icon, use_alpha=False)
+        self.back_button.setIcon(QPixmap.fromImage(ImageQt.ImageQt(back_icon)))
         self.back_button.setObjectName("back_button")
-        self.back_button.setMinimumSize(QSize(0, 32))
+        self.back_button.setMinimumSize(QSize(32, 32))
         self.back_button.setMaximumSize(QSize(32, 16777215))
-        self.back_button.setStyleSheet(nav_button_style)
         self.search_bar_layout.addWidget(self.back_button)
 
-        self.forward_button = QPushButton(">", self.central_widget)
+        self.forward_button = QPushButton(self.central_widget)
+        forward_icon: Image.Image = self.rm.get("bxs-right-arrow")  # pyright: ignore[reportAssignmentType]
+        forward_icon = theme_fg_overlay(forward_icon, use_alpha=False)
+        self.forward_button.setIcon(QPixmap.fromImage(ImageQt.ImageQt(forward_icon)))
+        self.forward_button.setIconSize(QSize(16, 16))
         self.forward_button.setObjectName("forward_button")
-        self.forward_button.setMinimumSize(QSize(0, 32))
+        self.forward_button.setMinimumSize(QSize(32, 32))
         self.forward_button.setMaximumSize(QSize(32, 16777215))
-        self.forward_button.setStyleSheet(nav_button_style)
         self.search_bar_layout.addWidget(self.forward_button)
 
         self.search_field = QLineEdit(self.central_widget)

src/tagstudio/qt/pagination.py

@@ -5,11 +5,14 @@
 
 """A pagination widget created for TagStudio."""
 
+from PIL import Image, ImageQt
 from PySide6.QtCore import QObject, QSize, Signal
-from PySide6.QtGui import QIntValidator
+from PySide6.QtGui import QIntValidator, QPixmap
 from PySide6.QtWidgets import QHBoxLayout, QLabel, QLineEdit, QSizePolicy, QWidget
 
+from tagstudio.qt.helpers.color_overlay import theme_fg_overlay
 from tagstudio.qt.helpers.qbutton_wrapper import QPushButtonWrapper
+from tagstudio.qt.resource_manager import ResourceManager
 
 
 class Pagination(QWidget, QObject):
@@ -19,6 +22,7 @@ class Pagination(QWidget, QObject):
 
     def __init__(self, parent=None) -> None:
         super().__init__(parent)
+        self.rm = ResourceManager()
         self.page_count: int = 0
         self.current_page_index: int = 0
         self.buffer_page_count: int = 4
@@ -39,7 +43,10 @@ class Pagination(QWidget, QObject):
 
         # [<] ----------------------------------
         self.prev_button = QPushButtonWrapper()
-        self.prev_button.setText("<")
+        prev_icon: Image.Image = self.rm.get("bxs-left-arrow")  # pyright: ignore[reportAssignmentType]
+        prev_icon = theme_fg_overlay(prev_icon, use_alpha=False)
+        self.prev_button.setIcon(QPixmap.fromImage(ImageQt.ImageQt(prev_icon)))
+        self.prev_button.setIconSize(QSize(12, 12))
         self.prev_button.setMinimumSize(self.button_size)
         self.prev_button.setMaximumSize(self.button_size)
 
@@ -89,7 +96,10 @@ class Pagination(QWidget, QObject):
 
         # ---------------------------------- [>]
         self.next_button = QPushButtonWrapper()
-        self.next_button.setText(">")
+        next_icon: Image.Image = self.rm.get("bxs-right-arrow")  # pyright: ignore[reportAssignmentType]
+        next_icon = theme_fg_overlay(next_icon, use_alpha=False)
+        self.next_button.setIcon(QPixmap.fromImage(ImageQt.ImageQt(next_icon)))
+        self.next_button.setIconSize(QSize(12, 12))
         self.next_button.setMinimumSize(self.button_size)
         self.next_button.setMaximumSize(self.button_size)
 

src/tagstudio/qt/resources.json

@@ -122,5 +122,13 @@
   "thumb_loading": {
     "path": "qt/images/thumb_loading.png",
     "mode": "pil"
+  },
+  "bxs-left-arrow": {
+    "path": "qt/images/bxs-left-arrow.png",
+    "mode": "pil"
+  },
+  "bxs-right-arrow": {
+    "path": "qt/images/bxs-right-arrow.png",
+    "mode": "pil"
   }
 }