Improve UI and Refactor UI Codebase #515

VasigaranAndAngel · 2024-09-18T17:55:18Z

Hi,
I'm working on cleaning up and improving the UI code. This is a draft PR, so I'll be pushing changes bit by bit as I go.

Here’s what I’m aiming for:

Refactor the existing UI code.
Break things into more modular, reusable components.
Optimize performance where possible.
Improve overall UI/UX for better responsiveness and accessibility.

Feel free to drop any feedback or suggestions as I push updates. Would love to hear your thoughts as this evolves!

Tnx ❤️.

main_window.py: put driver to application property and update theme palette. qt_logger.py: contains a logger which will be used in ui related codes. theme.py: New theme management system. test_theme.py: tests for theme management system.

line_edit_widgets: New line edit widget. main_window.py: Using new line edits.

…l/TagStudio into ui-improvements

yedpodtrzitko

I assume things are subject to change, but here's a few comments I noticed on the first read-through

yedpodtrzitko · 2024-09-19T01:20:35Z

tagstudio/src/qt/main_window.py

@@ -18,13 +18,16 @@
 from PySide6.QtCore import (QCoreApplication, QMetaObject, QRect,QSize, Qt)


see the comment on top of the file - this file is autogenerated, so any changes here are irrelevant and they will be lost

so how do I add the widget to the main window? i can't use home.ui to add and recompile because a lot of lines change after compiling, and those changes will be lost if i recompile. i haven't seen any other .ui files in the repository. am i missing something? btw this is temporary and i will refactor this file.

yedpodtrzitko · 2024-09-19T02:25:50Z

tagstudio/tests/qt/test_theme.py

+    # region NOTE: temporary solution for test by making fake driver to use QSettings
+    from PySide6.QtCore import QSettings
+    from PySide6.QtWidgets import QApplication
+
+    app = QApplication.instance() or QApplication([])
+
+    class Driver:
+        settings = QSettings(str(settings_file), QSettings.Format.IniFormat, app)
+
+    app.setProperty("driver", Driver)


there's a driver fixture defined in conftest.py, would it be possible to re-use it here, or adjust it in a way that it would be reusable?

TagStudio/tagstudio/tests/conftest.py

Lines 99 to 120 in 073d517

@pytest.fixture

def qt_driver(qtbot, library):

with TemporaryDirectory() as tmp_dir:

class Args:

config_file = pathlib.Path(tmp_dir) / "tagstudio.ini"

open = pathlib.Path(tmp_dir)

ci = True

with patch("src.qt.ts_qt.Consumer"), patch("src.qt.ts_qt.CustomRunnable"):

driver = QtDriver(backend, Args())

driver.main_window = Mock()

driver.preview_panel = Mock()

driver.flow_container = Mock()

driver.item_thumbs = []

driver.lib = library

# TODO - downsize this method and use it

# driver.start()

driver.frame_content = list(library.get_entries())

yield driver

I'm not familiar with pytest fixtures and mock, so i'm not sure how to do this. in this test, I’m creating a new settings file and writing values to test the functions that use these settings. how can I achieve that using this fixture (or adjust)?

tagstudio/src/qt/widgets/line_edit_widgets/base_line_edit.py

yedpodtrzitko · 2024-09-19T02:29:52Z

tagstudio/src/qt/widgets/line_edit_widgets/base_line_edit.py

+# NOTE: ProxyStyle is used to customize the drawing of the line edit widget's background. Overriding
+# the repaint method would be overly complex as it would require reimplementing the calculation
+# of the cursor, text, alignment, margins, selected text highlight, index of the text when
+# clicked on, and click and drag to select, etc. By using ProxyStyle, we only need to customize
+# the background drawing. The widget will take care of the other aspects.


make this a docstring instead perhaps?

It's explaining why ProxyStyle is used, not what ProxyStyle does. that's why i decided to write it as a comment instead of docstring of ProxyStyle. should i add this to the BaseLineEdit class docstring?

tagstudio/src/qt/theme.py

Co-authored-by: yed <yedpodtrzitko@users.noreply.github.com>

button_widgets: added BasePushButton widget. main_window.py, landing.py: using BasePushButton instead of QPushButton base_line_edit.py: - refactor - update color on setDisabled(), setPalette(), setStyleSheet() - set placeholder text on painting

Focus indicators added to base button and base line edit widgets. Minor improvements.

Fixed most of the type hint issues and formatted the code with Ruff.

Fixed most of the type hint issues.

…vements

theme.py, test_library.py: mypy improvements.

seakrueger · 2024-11-15T21:26:14Z

Hi, personally I feel this PR is doing a lot at once and that makes it hard to review keep up with main. I think this is best reflected in the non descriptive PR title. Personally, I'd love to see this broken up into several PRs that can be merged independently. Stuff like refactoring, shortcut manager, and theming

VasigaranAndAngel · 2024-11-16T01:21:59Z

Theme management and the settings window are part of my 'Improve overall UI/UX for better responsiveness and accessibility' list.

Hi, personally I feel this PR is doing a lot at once and that makes it hard to review keep up with main.

i felt the same, but that was intentional.
i thought it could be reviewed commit by commit as i made changes, but i realize now that approach isn’t ideal. i’ll try to break this into several smaller PRs."

tnx 😊

VasigaranAndAngel · 2024-11-27T17:00:37Z

This PR broke into smaller PRs.

VasigaranAndAngel added 4 commits September 18, 2024 23:06

New theme management system

204bc0a

main_window.py: put driver to application property and update theme palette. qt_logger.py: contains a logger which will be used in ui related codes. theme.py: New theme management system. test_theme.py: tests for theme management system.

New LIne edit widget

c38c1a7

line_edit_widgets: New line edit widget. main_window.py: Using new line edits.

😁

9fcbc45

Merge branch 'ui-improvements' of https://github.com/VasigaranAndAnge…

287028a

…l/TagStudio into ui-improvements

yedpodtrzitko reviewed Sep 19, 2024

View reviewed changes

CyanVoxel added Type: Refactor Code that needs to be restructured or cleaned up Type: UI/UX User interface and/or user experience labels Sep 19, 2024

VasigaranAndAngel and others added 4 commits September 21, 2024 00:30

Update tagstudio/src/qt/theme.py

ad3e0a9

Co-authored-by: yed <yedpodtrzitko@users.noreply.github.com>

Added docstring for BaseLineEdit class in base_line_edit.py

104717d

New Push button widget implemented

b9b9b0a

button_widgets: added BasePushButton widget. main_window.py, landing.py: using BasePushButton instead of QPushButton base_line_edit.py: - refactor - update color on setDisabled(), setPalette(), setStyleSheet() - set placeholder text on painting

Merge branch 'TagStudioDev:main' into ui-improvements

45c8aa8

CyanVoxel mentioned this pull request Oct 25, 2024

Change item select to press instead of release (click) #556

Merged

VasigaranAndAngel added 8 commits October 26, 2024 14:08

Minor improvements (Focus Indicator)

daa514c

Focus indicators added to base button and base line edit widgets. Minor improvements.

Refactor

0f44667

Fixed most of the type hint issues and formatted the code with Ruff.

Refector

e079f8a

Fixed most of the type hint issues.

Merge commit 'd3c3e634b93353750c9fc810af9973e64e21de71' into ui-impro…

ffeb2e0

…vements

mypy fixes

948f927

mypy fixes

3be66e9

pytest fixes

6a1ef71

Shortcut manager implementation

b16ef09

theme.py, test_library.py: mypy improvements.

Merge branch 'TagStudioDev:main' into ui-improvements

693da38

VasigaranAndAngel closed this Nov 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve UI and Refactor UI Codebase #515

Improve UI and Refactor UI Codebase #515

VasigaranAndAngel commented Sep 18, 2024

yedpodtrzitko left a comment

yedpodtrzitko Sep 19, 2024

VasigaranAndAngel Sep 20, 2024 •

edited

Loading

yedpodtrzitko Sep 19, 2024

VasigaranAndAngel Sep 20, 2024

yedpodtrzitko Sep 19, 2024

VasigaranAndAngel Sep 20, 2024

seakrueger commented Nov 15, 2024

VasigaranAndAngel commented Nov 16, 2024

VasigaranAndAngel commented Nov 27, 2024

		@@ -18,13 +18,16 @@
		from PySide6.QtCore import (QCoreApplication, QMetaObject, QRect,QSize, Qt)

	@pytest.fixture
	def qt_driver(qtbot, library):
	with TemporaryDirectory() as tmp_dir:

	class Args:
	config_file = pathlib.Path(tmp_dir) / "tagstudio.ini"
	open = pathlib.Path(tmp_dir)
	ci = True

	with patch("src.qt.ts_qt.Consumer"), patch("src.qt.ts_qt.CustomRunnable"):
	driver = QtDriver(backend, Args())

	driver.main_window = Mock()
	driver.preview_panel = Mock()
	driver.flow_container = Mock()
	driver.item_thumbs = []

	driver.lib = library
	# TODO - downsize this method and use it
	# driver.start()
	driver.frame_content = list(library.get_entries())
	yield driver

Improve UI and Refactor UI Codebase #515

Improve UI and Refactor UI Codebase #515

Conversation

VasigaranAndAngel commented Sep 18, 2024

yedpodtrzitko left a comment

Choose a reason for hiding this comment

yedpodtrzitko Sep 19, 2024

Choose a reason for hiding this comment

VasigaranAndAngel Sep 20, 2024 • edited Loading

Choose a reason for hiding this comment

yedpodtrzitko Sep 19, 2024

Choose a reason for hiding this comment

VasigaranAndAngel Sep 20, 2024

Choose a reason for hiding this comment

yedpodtrzitko Sep 19, 2024

Choose a reason for hiding this comment

VasigaranAndAngel Sep 20, 2024

Choose a reason for hiding this comment

seakrueger commented Nov 15, 2024

VasigaranAndAngel commented Nov 16, 2024

VasigaranAndAngel commented Nov 27, 2024

VasigaranAndAngel Sep 20, 2024 •

edited

Loading