Responsive Layout Design
This MR focuses on achieving responsiveness according to the window size, and subsequently consistency, in grid and table views.
For GridItems we distinquish the following properties:
Research Results
Dynamic sizing:
- Gutter (horizontal spacing of grid items) is now dynamic based on the number of items per row (26px when 2 items, 28px when 3 items, and 32px when 4+ items)
- Introduced maximum item-per-row limits (6 for videos, 10 for music and services, 12 for 'Browse') to align with popular streaming platforms designs.
- Layout margins have a gradual shift from 16px to 24px when the window size is between 600 and 1000.
The GridItem subtitleTopMargin
was decreased by 2px. The GridItem titleTopMargin
was increased by 2px for 'Videos' and standarized for all views, except for the MusicAllArtists
view, where it was set 4px more from all the other views.
Title and subtitle font size remained unchanged
Grid View Enhancements (ExpandGridView & KeyNavigableListView):
Introduced the GridSizeHelper
QML component, enabling dynamic cell dimensions for GridItem based on available content width.
- Use a constant grid image source size, in order to not generate new thumbnails every window pixel resize
- Removed hardcoded
gridItem_music/video/network
properties from VLCStyle - GridItem
cellHeight
, now properly takes into account thetitleTopMargin
- GridItem background now is always 8px (bottom padding was 6px in some occasions)
Added the ExpandGridItemView
QML component, which uses ExpandGridView
with GridItem delegate.
Implemented a dynamic gutter size
Introduced maximum item-per-row limits
Removed obsolete property playCoverBorderWidth
Table View Enhancements (KeyNavigableTableView):
Columns are now resized instantly instead of relying on periodic window resizing intervals. (before and after)
Properly positioned the contextButton
(before and after)
Reduced the column span of the thumbnail, track duration, and number of tracks columns by half (which allows for the context button to be more close to the last column)
Keep track duration column always last at the track list view
Layouts Margins:
Adjusted layout margins for both grid and table views to maintain consistency. Instead of the left margin increasing until the nbItemPerRow (of the grid view) increases, now both left/right margins remain constant with a gradual shift from 16px to 24px when the window size is between 600 and 1000. (before and after)
Known Issues:
-
Resizing the window, reloads/recreates a doubleShadow
for each grid element. -
Rebase and test with Qt6 -
Fix scaling in/out bug