Skip to content

qml: Enhancements for layouts consistency

Leon Vitanos requested to merge leon.vitanos/vlc:layout-consistency into master

This MR focuses on achieving concistency in layouts (grid and table view), in preparation for the responsive-design MR

Changes regarding to the title of layouts:

Added the ViewHeader QML component, to avoid code duplication, and maintain consistent padding across all layouts. This component provides a title for layouts and includes a "See All" button when necessary. As a result, the BrowseDeviceHeader component has been removed.

Example of a padding inconsistency paddingCorrect paddingWrong
"See All" missalignment in the previous BrowseDeviceHeader seeAllMissalignemnt

Introduced a title header to all Video and Music views (+discovery).

Example before & after musicDoesNotHaveTitle layoutsTitle.png

Increased top padding of the first layout's title by 4px, and the bottom padding of every layout's title by 2px

Example grid&list padding, before&after: gridOld gridNew

listOld listNew

Reasoning: A comparison with other apps/websites

Title font size is OK.


Top padding seems to be too low


Bottom padding seems to be too low


For the table view at the Video page, the ListView.InlineHeader is now only used when we are at the Video page, and there are recent videos (basically titles can be scrollable when there are 2 vertically aligned tables)

before & after of seeing all recent videos page titleScrolls titleDoesNotScroll

Spacing between layouts:

Standardized spacing between vertically-aligned grid and list layouts, resolving inconsistencies on the Videos and Browse pages.

Example grid/list spacing difference: griddistance listdistance
Consistent 42px spacing in grid/list at Videos/Browse: spacingVideosGrid spacingVideosList

spacingBrowseGrid spacingBrowseList

Comparison with other apps/websites:

Spacing between vertically-aligned layouts is now the same in Videos/Browse spacing


Adjusted the playlistview topPadding to match the layout's padding for uniformity.

Before playqueue

@chub @jagannatharjun @fuzun

Edited by Leon Vitanos

Merge request reports