Closed sonic2kk closed 6 months ago
sonic2kk
commented
7 months ago Making a couple of UI tweaks to handle the search icon case, I think disabling it for an empty ctmod games list is better UX. I also have to make a slight tweak to the UI design as I think I put a spacer in the wrong place for the search box.
sonic2kk
commented
7 months ago Updated how we handle the search button in 2e414d2.
update_game_list_ui (called on ctinfo load and refresh button clicked)setup_ui, we now conditionally execute the connected method based on whether the search button is enabled or not, so the shortcut is always bound but does nothing unless the search button is enabled.
main)
Opened based on discussion in #314.
Overview
This PR makes a change to the CtInfo dialog when no games are found. Instead of displaying an empty games list, it hides this list, disables the "Batch update" button, and displays some text that says "No games".
If a game is set to use this ctmod after the dialog is opened, pressing the "refresh" button will correctly update the dialog to hide the text, toggle the batch update button, and show the games list. Vice versa also applies, if a compat tool is then unset for a game and becomes unused, refreshing will once again hide the game list, show the "No games" text, and disable "Batch Update".
For ctmods without "Batch Update", there is no change to this button, see the example of Luxtorpeda below:
Implementation
UI Design
Inspiration
I chose the design of this UI element largely based on a similar UI found on KDE's Dolphin file manager (also based on Qt, though with KDE-specific frameworks and libraries under the hood, and even custom Qt patches). When there are no files in a directory, it displays "Folder is empty" as below:
In Dolphin's case, it displays this inside of the table view, however I chose not to do this for a couple of reasons. First off, I wasn't sure how easily we could implement a centered label overtop a table. We would also have to disable some columns, note how Dolphin only displays the "Name" column, so we would have to have more conditional logic to manage the table.
I do really like how Dolphin displays it centered in the dark frame, but I'm not sure if we could easily implement this. If it's really desired, though, we could go for it. We could potentially add an empty frame and layout to center this label inside of, and then show/hide that, to achieve the same effect that KDE have, but without the column names along the top. Perhaps this is overkill though :sweat_smile:
Font Sizing & Color
I achieved this text effect in the CtInfo dialog by adding a label, with the default Noto Sans font, using Size 18, and the grey effect was achieved by marking the label as "Disabled". This should hopefully the color consistent across themes and is a cleaner way of doing this imo compared to specifying a color :-)
I also put some effort into centering the label as much as possible, achieved using spacers. I believe I used them correctly but please let me know if I need to adjust something here.
I experimented with a couple of different font sizes before landing on Size 18 as my preferred option. I felt larger was too big, and smaller was too small. Originally, I tested with Size 26, but decided that was way too big. We only want a subtle indicator that there are no games, not something that "yells", if that makes sense. I'll give some examples below.
Put in spoilers so as not to take up this PR with too many images
Sizing increments were chosen based on the ones list in Qt Designer. Size 18 was just my preference but if you want Size 16 or Size 20, or a different size altogether, feel free to comment :-) It's just my opinion that Size 18 strikes the right proportional balance of using up enough of the space in the dialog without looking like there is too much empty space. ### Size 20 (Slightly Too Big imo)  ### Size 18 (This PR)  ### Size 16 (Slightly Too Small imo) Show/Hide Logic
We handle this show/hide/enable/disable logic using a new method in the CtInfo dialog called
update_game_list_ui, which we call when updating the games list. This manages toggling these widgets using conditional checks based on the length ofself.games. This method is called on dialog open, and also when the refresh button is pressed, which is why I put it inPupguiCtInfoDialog#update_game_list, so that the call is only coded in one place.Remaining Work
When writing this PR I noticed the logic for the search search isn't quite right. If we open the dialog with no games, the search button is hidden. But it doesn't show/hide on refresh if the games list becomes populated/empty.
I should be able to tackle this in this PR, probably in
update_game_list_ui, and I'll look into it after opening this PR.Future Work
The label in this PR could be changed to display a message when a tool is marked as global, once #314 is merged. Since there is little reason to display the games list when no games are used and also when it is the default tool where the tool is not explicitly used, it would make sense to re-use the functionality in this PR to display a label giving a visual indicator on the CtInfo dialog that a tool is marked as global.
If #314 is merged first and you would like me to tackle the global ctmod message in this PR though, I can do that no problem :-)
I'm no UI expert so all feedback is appreciated here.
Thanks! :-)