stashapp
[RFC/WIP] Overhaul of top-level scenes/images/galleries pages
The ItemList control has needed unsnarling for a long time, and this is an attempt at refactoring the concept while also overhauling the general flow of the top-level list pages.
This restructures the scenes/images/galleries pages to use a collapsible filter sidebar and a list header.
The sidebar includes the search field, the saved filters list (with an explicit Save filter button), a customisable list of criteria, a list of the filters current criteria (excluding criteria shown in the sidebar), and an Edit Filter button which opens the existing edit filter dialog.
The page now has a header bar which stays visible when scrolling. This design was inspired by the Plex interface. It holds the page size selector, a compact pagination control, buttons to view the first or random scene, the sort, zoom and display mode selectors (the latter of which has been made more compact as well).
When items are selected, the header bar is replaced with operations related to the selected items.
It shows the number of items selected, a select all button, and the operation buttons, as well as a button to deselect all.
The Edit Filter dialog has been changed to allow reordering of criteria and the select which criteria are shown in the sidebar.
I'm seeking feedback on the usability of this change.
Caveats and known issues:
- this is still in the prototype stage and will likely have bugs and missing functionality
- the current iteration of the pagination control is regressive imo and I'm still exploring ideas - ideas welcomed!
- keep in mind that criteria order/sidebar visibility is not currently persisted
- the modifier selectors need to be condensed when in the sidebar
- this design has been based around higher resolution viewports and hasn't yet been optimised for compact viewports
Glad to see this pull request up. I had to drop what I was doing to respond to this pull request, so my feedback may come off as a bit rushed. Looking at the change, it's clear this is very much a prototype. Here are some comments on the UI design from my quick time with the change.
- The zoom slider, at this point, is a bit of an eye sore on the page. It stands out too much. We can put the zoom options in the view drop-down as text (1x, 2x, 3x, ...). Also, the view button currently stands out. The drop-down designs should use a consistent style.
- The play and shuffle buttons look very out of place. Relocating them should help.
- The pagination is a downgrade. I will be suggesting an alternative.
- I'm not happy with the state of the collapse/expand mechanism. I don't think it's intuitive. I was thinking perhaps it should be a divider similar to the one we have on the scene player page, but I'm not sure how good that will look. For some inspiration, I've provided an image showing how Gamma's sites handle this. See the image labeled
Wicked.
Wicked Image:
The image below illustrates some of the improvements I'm suggesting. One of the improvements is a more sophisticated pagination that highlights the current page number and the total number of pages available. The user can take the drop-down and select a specific page number or potentially type one out.
I'm sure you are aware this UI list page is broken on mobile with these changes. I will need to mock something up for mobile.
Made changes based on discussion on Discord:
- rearranged the list header buttons
- temporarily removed the zoom slider pending further design
- added borders and padding around the criteria options
- use a different colour for criteria that are populated in the filter
- changed the styling of the edit filter button and moved the saved filter button below it
- changed the collapse buttons to be similar to the scene page divider design
Note: the pagination refactoring is still pending
Screenshots of the current state:
The biggest issue with the current design imo is that it is currently not possible to see at a glance what the current filtering is. This should be visible in both the collapsed and uncollapsed state. This will need to be addressed.
changed the collapse buttons to be similar to the scene page divider design
That one is actually pretty annoying on touch screen. This gives me idea I should add custom CSS for it. But while you're working on it - you can also think about touch screen users.
I'm moving this here so it doesn't get lost on Discord.
This could be the design for mobile. The filter button would open the content, previously available in the sidebar for desktop, on the center of the mobile screen for users to interact with. When users apply filters, the badge pill will be there on the filters button to indicate filters are applied. The pagination would be on the top and the bottom of the list like before (to give people the option to hide one if they choose). Given the limited screen real estate, I don't think the toolbar should be sticky like it is on the desktop site. I also don't think the play and shuffle buttons need to take up screen real estate on mobile, but they could be included in the previous ... button if necessary. I think this design could apply to both the top-level and secondary-level (details page) list pages, assuming it's not too much trouble to do this in both places on mobile with the new code updates.
As a reminder, this is the mobile site today, even before the sidebar redesign.
Per https://discord.com/channels/559159668438728723/644934273459290145/1196335545702424637
I've been playing with this WIP version for >30 minutes now. I love the new slick design, imo it's a huge improvement. However, I'm not sure I prefer the sidebar functionality. To access the filter or bookmarks I have to toggle the sidebar, type my filter query or click a saved filter, then collapse the bar again. For anyone who might prefer the sidebar collapsed this adds a lot of inefficiency.
But maybe there's a compromise while keeping this new filter pane/sidebar. Including the option for both new and old views?
Would it add a lot of complexity to take a page out of the Windows File Explorer by adding an option in the View Modes dropdown to enable/disable a sidebar -- in this case a Filter pane (sidebar). When the Filter pane is disabled, the old filter/search box is viewable next to the playback buttons. When enabled the old search/filter box becomes hidden.
I understand that now it once again adds more buttons into the header area. Maybe this can be skirted by making the width of the search/filter box much smaller? And again, the playback buttons can be consolidated into one drop button again with no text label.
Windows File Explorer > View Modes > Option to toggle panes located after horizontal separator
View Modes in Stash
Header area with Filter pane disabled showing legacy search box (buttons placed inside search box to save space). Playback buttons inside the legacy overflow menu again.
Stash does not retain a persistent state of the Filter Pane sidebar when it is collapsed.
To reproduce:
- Collapse Filter Pane sidebar
- Navigate to a different page, such as Settings
- Navigate back to prior page (the Filter Pane will be expanded)
The current behavior will be suboptimal for users who want the Filter Pane collapsed as the default state.
Just checked out your latest changes. I see you addressed some of the issues I meant to mention from the previous build. There are a few things I wanted to bring to your attention from your latest commits.
- The top toolbar, when an item is selected, still needs some work. I wanted to bring that up since I haven't heard of any mention of making those improvements.
- I see you've started working on the mobile page. Currently, I see that pagination is only at the top of the page. I think it would be helpful to have a pagination at the button as well for users who naturally hit the button pagination after scrolling through all the items on the page. This will also enable the option for users to hide the top pagination to reduce clutter on these smaller mobile screens.
The selected items header should now be less broken.
For now I've added a scroll to top button which only appears on mobile devices. I'm not completely happy with the selected items header in general, particularly on mobile devices, but it is at least functional currently.
There remains an issue with text-based criteria in the sidebar. This might need some further work on the criterion editor controls.
There remains an issue with text-based criteria in the sidebar
Could you clarify what the issue here is? The issue is not immediately clear to me.
Now that the search box for the list items is no longer in the sidebar. I think we could add the search bar for filters to the sidebar, similar to filter dialog menu. That would be useful for users who pin most or all the filters to the sidebar.
Could you clarify what the issue here is? The issue is not immediately clear to me.
Typing in data is slow because the criterion is being updated on every key press. Additionally, if you clear the text field, the old value is left in the filter. The workflow for manual inputs needs to be improved in general here. There should either be a confirm button on the control, or it should update on blur.
Now that the search box for the list items is no longer in the sidebar. I think we could add the search bar for filters to the sidebar, similar to filter dialog menu. That would be useful for users who pin most or all the filters to the sidebar.
I disagree. The sidebar is intended as a quick way to filter with the most frequently used criteria, with less often used criteria relegated to the filter dialog. Pinning all or most criteria to the sidebar isn't a practice I want to encourage, and I certainly don't want to dedicate screen space to accommodating such a practice. I suppose we could add the filter control and hide it by default.
Typing in data is slow because the criterion is being updated on every key press. Additionally, if you clear the text field, the old value is left in the filter. The workflow for manual inputs needs to be improved in general here. There should either be a confirm button on the control, or it should update on blur.
Oh, okay, I see what you mean. Placing the query button to the right of the text field should be intuitive.
I disagree. The sidebar is intended as a quick way to filter with the most frequently used criteria, with less often used criteria relegated to the filter dialog. Pinning all or most criteria to the sidebar isn't a practice I want to encourage, and I certainly don't want to dedicate screen space to accommodating such a practice. I suppose we could add the filter control and hide it by default.
As I think about it, a search bar there likely won't be visually appealing either since it would be too close to the list search bar.
Text input issue has been improved, though there's still some weird flashing going on occasionally that I need to investigate.
Other pending issues:
- pinning/unpinning while filtering the criteria in the edit filter dialog looks like it's wiping the pinned state
- overflow button shows an empty menu when there are no results on the scenes page
I've been running this on my production system to test out. Here's some self-feedback from the mobile experience:
- (existing bug) opening the filter dialog focuses the search filter and brings up the on-screen keyboard - this should be disabled on touch devices
- (existing bug) grid card check boxes should be visible always on touch devices - they should probably be larger too
- pin/unpin buttons should be visible always in the edit filter dialog on touch devices
- there's no next/previous page buttons on mobile
- the selected toolbar should be sticky on mobile - having to scroll up to access the operations or de-select is onerous
- similarly at least the pagination control should be stuck to the top on mobile. Access to the filter (sidebar and dialog) should probably be available too.