Draft: 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.

Comparative analysis

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.

Comparative analysis

Title and subtitle font size remained unchanged

Comparative analysis

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 the titleTopMargin
• GridItem background now is always 8px (bottom padding was 6px in some occasions)

Screencasts: before and after

Screenshots (Before and After)

Added the ExpandGridItemView QML component, which uses ExpandGridView with GridItem delegate.

Implemented a dynamic gutter size

Screenshots

Introduced maximum item-per-row limits

Screenshots (for 3440px width)

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)

Screenshots (before and after)

Keep track duration column always last at the track list view

Screenshots (before and after)

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

@chub @jagannatharjun @fuzun