Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve UI and Refactor UI Codebase #515

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

VasigaranAndAngel
Copy link
Contributor

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.
Copy link
Collaborator

@yedpodtrzitko yedpodtrzitko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@VasigaranAndAngel VasigaranAndAngel Sep 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines +66 to +75
# 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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

@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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines +21 to +25
# 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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make this a docstring instead perhaps?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 Outdated Show resolved Hide resolved
@CyanVoxel 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
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Refactor Code that needs to be restructured or cleaned up Type: UI/UX User interface and/or user experience
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants