UI Styling Update

tagstudio/src/qt/helpers/qbutton_wrapper.py

@@ -4,7 +4,6 @@
 
 from PySide6.QtWidgets import QPushButton
 
-
 class QPushButtonWrapper(QPushButton):
     """
     This is a customized implementation of the PySide6 QPushButton that allows to suppress the warning that is triggered

tagstudio/src/qt/helpers/theming.py

@@ -0,0 +1,5 @@
+from pathlib import Path
+
+def get_style(style: str) -> str:
+    current_file = Path(__file__).resolve()
+    return (current_file.parent.parent / "style" / f"{style}.qss").read_text()

tagstudio/src/qt/main_window.py

@@ -16,22 +16,22 @@
 import logging
 import typing
 from PySide6.QtCore import (QCoreApplication, QMetaObject, QRect,QSize, Qt)
-from PySide6.QtGui import QFont
+from PySide6.QtGui import QFont, QIcon
 from PySide6.QtWidgets import (QComboBox, QFrame, QGridLayout,
                                QHBoxLayout, QVBoxLayout, QLayout, QLineEdit, QMainWindow,
                                QPushButton, QScrollArea, QSizePolicy,
                                QStatusBar, QWidget, QSplitter, QCheckBox,
                                QSpacerItem)
 from src.qt.pagination import Pagination
 from src.qt.widgets.landing import LandingWidget
+from src.qt.helpers.theming import get_style
 
 # Only import for type checking/autocompletion, will not be imported at runtime.
 if typing.TYPE_CHECKING:
     from src.qt.ts_qt import QtDriver
 
 logging.basicConfig(format="%(message)s", level=logging.INFO)
 
-
 class Ui_MainWindow(QMainWindow):
 
     def __init__(self, driver: "QtDriver", parent=None) -> None:
@@ -52,9 +52,10 @@ def __init__(self, driver: "QtDriver", parent=None) -> None:
         # # self.setStyleSheet(
         # # 	'background:#EE000000;'
         # # 	)
-
 
     def setupUi(self, MainWindow):
+        self.setStyleSheet(get_style("GenericStyle"))
+
         if not MainWindow.objectName():
             MainWindow.setObjectName(u"MainWindow")
         MainWindow.resize(1300, 720)
@@ -138,24 +139,26 @@ def setupUi(self, MainWindow):
         self.horizontalLayout_2.setSizeConstraint(QLayout.SetMinimumSize)
         self.backButton = QPushButton(self.centralwidget)
         self.backButton.setObjectName(u"backButton")
-        self.backButton.setMinimumSize(QSize(0, 32))
+        self.backButton.setMinimumSize(QSize(32, 32))
         self.backButton.setMaximumSize(QSize(32, 16777215))
         font = QFont()
         font.setPointSize(14)
         font.setBold(True)
         self.backButton.setFont(font)
+        self.backButton.setStyleSheet(get_style("QPushButtonUnpadded"))
 
         self.horizontalLayout_2.addWidget(self.backButton)
 
         self.forwardButton = QPushButton(self.centralwidget)
         self.forwardButton.setObjectName(u"forwardButton")
-        self.forwardButton.setMinimumSize(QSize(0, 32))
+        self.forwardButton.setMinimumSize(QSize(32, 32))
         self.forwardButton.setMaximumSize(QSize(32, 16777215))
         font1 = QFont()
         font1.setPointSize(14)
         font1.setBold(True)
         font1.setKerning(True)
         self.forwardButton.setFont(font1)
+        self.forwardButton.setStyleSheet(get_style("QPushButtonUnpadded"))
 
         self.horizontalLayout_2.addWidget(self.forwardButton)
 

tagstudio/src/qt/modals/add_field.py

@@ -14,6 +14,7 @@
 )
 
 from src.core.library import Library
+from src.qt.helpers.theming import get_style
 
 
 class AddFieldModal(QWidget):
@@ -24,6 +25,7 @@ def __init__(self, library: "Library"):
         # - OR -
         # [Cancel] [Save]
         super().__init__()
+        self.setStyleSheet(get_style("GenericStyle"))
         self.is_connected = False
         self.lib = library
         self.setWindowTitle(f"Add Field")
@@ -71,6 +73,7 @@ def __init__(self, library: "Library"):
 
         self.save_button = QPushButton()
         self.save_button.setText("Add")
+        self.save_button.setStyleSheet(get_style("QPushButtonAccented"))
         # self.save_button.setAutoDefault(True)
         self.save_button.setDefault(True)
         self.save_button.clicked.connect(self.hide)

tagstudio/src/qt/modals/build_tag.py

@@ -24,6 +24,7 @@
 from src.qt.widgets.panel import PanelWidget, PanelModal
 from src.qt.widgets.tag import TagWidget
 from src.qt.modals.tag_search import TagSearchPanel
+from src.qt.helpers.theming import get_style
 
 
 ERROR = f"[ERROR]"
@@ -37,6 +38,7 @@ class BuildTagPanel(PanelWidget):
     on_edit = Signal(Tag)
 
     def __init__(self, library, tag_id: int = -1):
+        self.setStyleSheet(get_style("GenericStyle"))
         super().__init__()
         self.lib: Library = library
         # self.callback = callback

tagstudio/src/qt/modals/delete_unlinked.py

@@ -19,6 +19,7 @@
 from src.qt.helpers.custom_runnable import CustomRunnable
 from src.qt.helpers.function_iterator import FunctionIterator
 from src.qt.widgets.progress import ProgressWidget
+from src.qt.helpers.theming import get_style
 
 # Only import for type checking/autocompletion, will not be imported at runtime.
 if typing.TYPE_CHECKING:
@@ -30,6 +31,7 @@ class DeleteUnlinkedEntriesModal(QWidget):
 
     def __init__(self, library: "Library", driver: "QtDriver"):
         super().__init__()
+        self.setStyleSheet(get_style("GenericStyle"))
         self.lib = library
         self.driver = driver
         self.setWindowTitle("Delete Unlinked Entries")
@@ -63,6 +65,7 @@ def __init__(self, library: "Library", driver: "QtDriver"):
 
         self.delete_button = QPushButton()
         self.delete_button.setText("&Delete")
+        self.delete_button.setStyleSheet(get_style("QPushButtonCritical"))
         self.delete_button.clicked.connect(self.hide)
         self.delete_button.clicked.connect(lambda: self.delete_entries())
         self.button_layout.addWidget(self.delete_button)

tagstudio/src/qt/modals/file_extension.py

@@ -19,6 +19,7 @@
 
 from src.core.library import Library
 from src.qt.widgets.panel import PanelWidget
+from src.qt.helpers.theming import get_style
 
 
 class FileExtensionItemDelegate(QStyledItemDelegate):
@@ -34,6 +35,7 @@ class FileExtensionModal(PanelWidget):
 
     def __init__(self, library: "Library"):
         super().__init__()
+        self.setStyleSheet(get_style("GenericStyle"))
         # Initialize Modal =====================================================
         self.lib = library
         self.setWindowTitle("File Extensions")

tagstudio/src/qt/modals/fix_dupes.py

@@ -18,6 +18,7 @@
 
 from src.core.library import Library
 from src.qt.modals.mirror_entities import MirrorEntriesModal
+from src.qt.helpers.theming import get_style
 
 # Only import for type checking/autocompletion, will not be imported at runtime.
 if typing.TYPE_CHECKING:
@@ -28,6 +29,7 @@ class FixDupeFilesModal(QWidget):
     # done = Signal(int)
     def __init__(self, library: "Library", driver: "QtDriver"):
         super().__init__()
+        self.setStyleSheet(get_style("GenericStyle"))
         self.lib = library
         self.driver = driver
         self.count = -1

tagstudio/src/qt/modals/fix_unlinked.py

@@ -16,6 +16,7 @@
 from src.qt.modals.relink_unlinked import RelinkUnlinkedEntries
 from src.qt.modals.merge_dupe_entries import MergeDuplicateEntries
 from src.qt.widgets.progress import ProgressWidget
+from src.qt.helpers.theming import get_style
 
 # Only import for type checking/autocompletion, will not be imported at runtime.
 if typing.TYPE_CHECKING:
@@ -32,6 +33,7 @@
 class FixUnlinkedEntriesModal(QWidget):
     def __init__(self, library: "Library", driver: "QtDriver"):
         super().__init__()
+        self.setStyleSheet(get_style("GenericStyle"))
         self.lib = library
         self.driver = driver
         self.missing_count = -1
@@ -100,6 +102,7 @@ def __init__(self, library: "Library", driver: "QtDriver"):
 
         self.delete_button = QPushButton()
         self.delete_modal = DeleteUnlinkedEntriesModal(self.lib, self.driver)
+        self.delete_button.setStyleSheet(get_style("QPushButtonCritical"))
         self.delete_modal.done.connect(
             lambda: self.set_missing_count(len(self.lib.missing_files))
         )

tagstudio/src/qt/modals/folders_to_tags.py

@@ -22,6 +22,7 @@
 from src.core.library import Library, Tag
 from src.core.palette import ColorType, get_tag_color
 from src.qt.flowlayout import FlowLayout
+from src.qt.helpers.theming import get_style
 
 # Only import for type checking/autocompletion, will not be imported at runtime.
 if typing.TYPE_CHECKING:
@@ -161,6 +162,7 @@ class FoldersToTagsModal(QWidget):
     # done = Signal(int)
     def __init__(self, library: "Library", driver: "QtDriver"):
         super().__init__()
+        self.setStyleSheet(get_style("GenericStyle"))
         self.library = library
         self.driver = driver
         self.count = -1

tagstudio/src/qt/modals/mirror_entities.py

@@ -21,6 +21,7 @@
 from src.qt.helpers.function_iterator import FunctionIterator
 from src.qt.helpers.custom_runnable import CustomRunnable
 from src.qt.widgets.progress import ProgressWidget
+from src.qt.helpers.theming import get_style
 
 # Only import for type checking/autocompletion, will not be imported at runtime.
 if typing.TYPE_CHECKING:
@@ -32,6 +33,7 @@ class MirrorEntriesModal(QWidget):
 
     def __init__(self, library: "Library", driver: "QtDriver"):
         super().__init__()
+        self.setStyleSheet(get_style("GenericStyle"))
         self.lib = library
         self.driver = driver
         self.setWindowTitle(f"Mirror Entries")

tagstudio/src/qt/resources_rc.py

@@ -1,6 +1,6 @@
 # Resource object code (Python 3)
 # Created by: object code
-# Created by: The Resource Compiler for Qt version 6.6.3
+# Created by: The Resource Compiler for Qt version 6.7.1
 # WARNING! All changes made in this file will be lost!
 
 from PySide6 import QtCore
@@ -16232,15 +16232,15 @@
 \x00\x00\x00\x00\x00\x02\x00\x00\x00\x05\x00\x00\x00\x02\
 \x00\x00\x00\x00\x00\x00\x00\x00\
 \x00\x00\x00\x96\x00\x00\x00\x00\x00\x01\x00\x03\xca\xbe\
-\x00\x00\x01\x8a\xfb\xb4\xd6\xbe\
+\x00\x00\x01\x91\x81%\x9a\x1d\
 \x00\x00\x00b\x00\x00\x00\x00\x00\x01\x00\x03\xb8\x1a\
-\x00\x00\x01\x8a\xfb\xc6t\x9f\
+\x00\x00\x01\x91\x81%\x99\xde\
 \x00\x00\x00\xca\x00\x00\x00\x00\x00\x01\x00\x03\xe4\x99\
-\x00\x00\x01\x8a\xfb\xb4\xc1\x95\
+\x00\x00\x01\x91\x81%\x99\xdb\
 \x00\x00\x00\x12\x00\x00\x00\x00\x00\x01\x00\x00\x00\x00\
-\x00\x00\x01\x8a\xfb\xc6\x86\xda\
+\x00\x00\x01\x91\x81%\x9a\x1f\
 \x00\x00\x00H\x00\x00\x00\x00\x00\x01\x00\x00\x22\x83\
-\x00\x00\x01\x8e\xfd%\xc3\xc7\
+\x00\x00\x01\x91\x81%\x99\xed\
 "
 
 def qInitResources():

tagstudio/src/qt/style/Empty.qss

@@ -0,0 +1,12 @@
+QPushButton {
+    background: #00000000; 
+    color: white; 
+    border-radius: 6px;
+    padding: 6px 12px;
+}
+QPushButton:hover {
+    background: #00000000;
+}
+QPushButton:pressed {
+    background: #00000000;
+}

tagstudio/src/qt/style/GenericStyle.qss

@@ -0,0 +1,61 @@
+QLineEdit {
+    background: #1a1a1a; 
+    border: 2px solid #343434 inset; 
+    color: white; border-radius: 6px; 
+    padding: 0px 8px;
+}
+QPushButton {
+    background: #343434; 
+    color: white; 
+    border-radius: 6px;
+    padding: 6px 12px;
+}
+QPushButton:hover {
+    background: #3f3f3f;
+}
+QPushButton:pressed {
+    background: #2f2f2f;
+}
+QPushButton:disabled {
+    background: #2f2f2f;
+    color: #aaaaaa;
+}
+
+QComboBox {
+    background: #343434; 
+    color: white; 
+    border-radius: 6px;
+    padding: 6px 12px;
+    border: 0px solid #000000;
+}
+QComboBox:hover {
+    background: #3f3f3f;
+}
+QComboBox:pressed {
+    background: #2f2f2f;
+}
+QComboBox:disabled {
+    background: #2f2f2f;
+    color: #aaaaaa;
+}
+/* Styling for the Dropdown Arrow, currently very broken so it's commented out. */
+/* QComboBox::down-arrow {
+    image: url(resources/qt/images/Dropdown.png);
+}
+QComboBox::drop-down {
+    subcontrol-origin: padding;
+    subcontrol-position: top right;
+    width: 16px;
+    border: 0px solid #00000000;
+    border-radius: 6px;
+} */
+QComboBox QAbstractItemView { /* This is the popup */
+    background: #343434; 
+    border: 2px solid #3f3f3f;
+    color: white; 
+    border-radius: 6px;
+    padding: 6px 12px;
+}
+QComboBox:on {
+    background: #00000000;
+}

tagstudio/src/qt/style/QLineEdit.qss

@@ -0,0 +1,6 @@
+QLineEdit {
+    background: #1a1a1a; 
+    border: 2px solid #343434 inset; 
+    color: white; border-radius: 6px; 
+    padding: 0px 8px;
+}

tagstudio/src/qt/style/QPushButton.qss

@@ -0,0 +1,12 @@
+QPushButton {
+    background: #343434; 
+    color: white; 
+    border-radius: 6px;
+    padding: 6px 12px;
+}
+QPushButton:hover {
+    background: #3f3f3f;
+}
+QPushButton:pressed {
+    background: #2f2f2f;
+}

tagstudio/src/qt/style/QPushButtonAccented.qss

@@ -0,0 +1,15 @@
+QPushButton {
+    background: hsl(250, 100%, 60%);
+    color: white; 
+    border-radius: 6px;
+    padding: 6px 12px;
+}
+QPushButton:hover {
+    background: hsl(250, 100%, 65%);
+}
+QPushButton:pressed {
+    background: hsl(250, 100%, 55%);
+}
+QPushButton:disabled {
+    background: hsl(250, 50%, 65%);
+}

tagstudio/src/qt/style/QPushButtonCritical.qss

@@ -0,0 +1,15 @@
+QPushButton {
+    background: hsl(0, 100%, 60%);
+    color: white; 
+    border-radius: 6px;
+    padding: 6px 12px;
+}
+QPushButton:hover {
+    background: hsl(0, 100%, 65%);
+}
+QPushButton:pressed {
+    background: hsl(0, 100%, 55%);
+}
+QPushButton:disabled {
+    background: hsl(0, 50%, 55%);
+}