modules/gui/qt/Makefile.am

@@ -931,7 +931,6 @@ libqt_plugin_la_QML = \
 	menus/qml/Menubar.qml \
 	menus/qml/ShortcutExt.qml \
 	network/qml/AddressbarButton.qml \
-	network/qml/BrowseDeviceHeader.qml \
 	network/qml/BrowseDeviceView.qml \
 	network/qml/BrowseDisplay.qml \
 	network/qml/BrowseHomeDisplay.qml \
@@ -1108,7 +1107,8 @@ libqt_plugin_la_QML = \
 	widgets/qml/FadingEdge.qml \
 	widgets/qml/FadingEdgeForListView.qml \
 	widgets/qml/PopupIconToolButton.qml \
-	widgets/qml/PartialEffect.qml
+        widgets/qml/PartialEffect.qml \
+        widgets/qml/ViewHeader.qml
 
 lib_qt_plugin_la_QRC = vlc.qrc
 

modules/gui/qt/maininterface/qml/MainDisplay.qml

@@ -373,7 +373,7 @@ FocusScope {
                     focus: true
 
                     rightPadding: VLCStyle.applicationHorizontalMargin
-                    topPadding: VLCStyle.margin_xlarge // NOTE: why the design mandates such large top padding?
+                    topPadding: VLCStyle.layoutTitle_top_padding
                     bottomPadding: VLCStyle.margin_normal + Math.max(VLCStyle.applicationVerticalMargin - g_mainDisplay.displayMargin, 0)
 
                     Navigation.parentItem: mainColumn

modules/gui/qt/medialibrary/qml/MediaGroupDisplay.qml

@@ -54,15 +54,9 @@ VideoAll {
 
     contextMenu: Util.MLContextMenu { model: modelVideo; showPlayAsAudioAction: true }
 
-    header: Widgets.SubtitleLabel {
-        width: root.width
+    header: Widgets.ViewHeader {
+        view: root
 
-        // NOTE: We want this to be properly aligned with the grid items.
-        leftPadding: root.contentMargin
-        topPadding: VLCStyle.margin_large
-        bottomPadding: VLCStyle.margin_normal
-
-        text: root.title
-        color: root.colorContext.fg.primary
+        text: view.title
     }
 }

modules/gui/qt/medialibrary/qml/MusicAlbums.qml

@@ -31,12 +31,11 @@ MainInterface.MainViewLoader {
 
     // Properties
 
-    property int gridViewMarginTop: VLCStyle.margin_large
     property var gridViewRowX: Helpers.get(currentItem, "rowX", 0)
 
     readonly property var currentIndex: Helpers.get(currentItem, "currentIndex", - 1)
 
-    property Component header: Item {}
+    property Component header: null
     readonly property Item headerItem: Helpers.get(currentItem, "headerItem", null)
 
     readonly property int contentLeftMargin: Helpers.get(currentItem, "contentLeftMargin", 0)
@@ -100,7 +99,6 @@ MainInterface.MainViewLoader {
             id: gridView_id
 
             activeFocusOnTab:true
-            topMargin: root.gridViewMarginTop
             cellWidth: VLCStyle.gridItem_music_width
             cellHeight: VLCStyle.gridItem_music_height
 
@@ -241,7 +239,6 @@ MainInterface.MainViewLoader {
             header: root.header
             dragItem: albumDragItem
             rowHeight: VLCStyle.tableCoverRow_height
-            headerTopPadding: VLCStyle.margin_normal
 
             sortModel: (availableRowWidth < VLCStyle.colWidth(4)) ? _modelSmall
                                                                   : _modelMedium

modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml

@@ -26,6 +26,12 @@ import "qrc:///widgets/" as Widgets
 MusicAlbums {
     id: root
 
+    header: Widgets.ViewHeader {
+        view: root
+
+        text: I18n.qtr("Albums")
+    }
+
     searchPattern: MainCtx.search.pattern
     sortCriteria: MainCtx.sort.criteria
     sortOrder: MainCtx.sort.order

modules/gui/qt/medialibrary/qml/MusicAllArtists.qml

@@ -34,6 +34,11 @@ MainInterface.MainViewLoader {
 
     readonly property int currentIndex: Helpers.get(currentItem, "currentIndex", - 1)
 
+    property Component header: null
+    
+    readonly property int contentLeftMargin: Helpers.get(currentItem, "contentLeftMargin", 0)
+    readonly property int contentRightMargin: Helpers.get(currentItem, "contentRightMargin", 0)
+
     property alias parentId: artistModel.parentId
     property alias searchPattern: artistModel.searchPattern
     property alias sortOrder: artistModel.sortOrder
@@ -79,13 +84,13 @@ MainInterface.MainViewLoader {
         MainInterface.MainGridView {
             id: artistGrid
 
-            topMargin: VLCStyle.margin_large
             selectionModel: root.selectionModel
             model: artistModel
             focus: true
             cellWidth: VLCStyle.colWidth(1)
             cellHeight: VLCStyle.gridItem_music_height
 
+            headerDelegate: root.header
             Navigation.parentItem: root
 
             onActionAtIndex: (index) => {
@@ -184,8 +189,8 @@ MainInterface.MainViewLoader {
             focus: true
             dragItem: artistsDragItem
             rowHeight: VLCStyle.tableCoverRow_height
-            headerTopPadding: VLCStyle.margin_normal
 
+            header: root.header
             Navigation.parentItem: root
 
             onActionForSelection: (selection) => {

modules/gui/qt/medialibrary/qml/MusicArtist.qml

@@ -87,7 +87,6 @@ FocusScope {
 
             height: implicitHeight
             width: headerFs.width
-            bottomPadding: VLCStyle.margin_normal
 
             ArtistTopBanner {
                 id: artistBanner
@@ -115,6 +114,16 @@ FocusScope {
                 }
             }
 
+            Widgets.ViewHeader {
+                view: root
+
+                leftPadding: VLCStyle.margin_xlarge
+                bottomPadding: VLCStyle.layoutTitle_bottom_padding -
+                               (MainCtx.gridView ? 0 : VLCStyle.gridItemSelectedBorder)
+
+                text: I18n.qtr("Albums")
+            }
+
             Loader {
                 id: albumsLoader
 
@@ -133,15 +142,7 @@ FocusScope {
                     width: albumsList.width
                     height: implicitHeight
 
-                    Widgets.SubtitleLabel {
-                        id: albumsText
-
-                        text: I18n.qtr("Albums")
-                        color: theme.fg.primary
-                        leftPadding: VLCStyle.margin_xlarge
-                        topPadding: VLCStyle.margin_normal
-                        bottomPadding: VLCStyle.margin_xsmall
-                    }
+                    spacing: VLCStyle.tableView_spacing
 
                     Widgets.KeyNavigableListView {
                         id: albumsList
@@ -152,8 +153,8 @@ FocusScope {
                         width: root.width - root.rightPadding
 
                         leftMargin: VLCStyle.margin_xlarge
-                        topMargin: VLCStyle.margin_xsmall
-                        bottomMargin: VLCStyle.margin_xsmall
+                        topMargin: VLCStyle.gridItemSelectedBorder
+                        bottomMargin: VLCStyle.gridItemSelectedBorder
                         model: albumModel
                         selectionModel: albumSelectionModel
                         orientation: ListView.Horizontal
@@ -210,13 +211,13 @@ FocusScope {
                         onActionAtIndex: (index) => { albumModel.addAndPlay( new Array(index) ) }
                     }
 
-                    Widgets.SubtitleLabel {
-                        id: tracksText
+                    Widgets.ViewHeader {
+                        view: root
 
-                        text: I18n.qtr("Tracks")
-                        color: theme.fg.primary
                         leftPadding: VLCStyle.margin_xlarge
-                        topPadding: VLCStyle.margin_large
+                        topPadding: 0
+
+                        text: I18n.qtr("Tracks")
                     }
                 }
             }

modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml

@@ -182,13 +182,14 @@ FocusScope {
                 artistList.setCurrentItem(0)
             }
 
-            header: Widgets.SubtitleLabel {
-                text: I18n.qtr("Artists")
-                font.pixelSize: VLCStyle.fontSize_large
-                color: artistList.colorContext.fg.primary
+            header: Widgets.ViewHeader {
+                view: artistList
+
                 leftPadding: root.leftPadding + VLCStyle.margin_normal
-                bottomPadding: VLCStyle.margin_small
                 topPadding: VLCStyle.margin_xlarge
+                bottomPadding: VLCStyle.margin_small
+
+                text: I18n.qtr("Artists")
             }
 
             Widgets.MLDragItem {

modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml

@@ -46,6 +46,13 @@ Widgets.PageLoader {
         id: allArtistsComponent
 
         MusicAllArtists {
+            id: artistsView
+
+            header: Widgets.ViewHeader {
+                view: artistsView
+
+                text: I18n.qtr("Artists")
+            }
 
             searchPattern: MainCtx.search.pattern
             sortOrder: MainCtx.sort.order

modules/gui/qt/medialibrary/qml/MusicGenres.qml

@@ -35,6 +35,11 @@ MainInterface.MainViewLoader {
     // Properties
     readonly property var currentIndex: Helpers.get(currentItem, "currentIndex", - 1)
 
+    property Component header: null
+    
+    readonly property int contentLeftMargin: Helpers.get(currentItem, "contentLeftMargin", 0)
+    readonly property int contentRightMargin: Helpers.get(currentItem, "contentRightMargin", 0)
+
     property alias searchPattern: genreModel.searchPattern
     property alias sortOrder: genreModel.sortOrder
     property alias sortCriteria: genreModel.sortCriteria
@@ -118,9 +123,10 @@ MainInterface.MainViewLoader {
 
             selectionModel: root.selectionModel
             model: genreModel
-            topMargin: VLCStyle.margin_large
 
-           delegate: Widgets.GridItem {
+            headerDelegate: root.header
+
+            delegate: Widgets.GridItem {
                 id: item
 
                 property var model: ({})
@@ -261,7 +267,8 @@ MainInterface.MainViewLoader {
             Navigation.parentItem: root
             dragItem: genreDragItem
             rowHeight: VLCStyle.tableCoverRow_height
-            headerTopPadding: VLCStyle.margin_normal
+
+            header: root.header
 
             onItemDoubleClicked: (index, model) => {
                 root.showAlbumView(model.id, model.name, Qt.MouseFocusReason)

modules/gui/qt/medialibrary/qml/MusicGenresDisplay.qml

@@ -41,6 +41,14 @@ Widgets.PageLoader {
         id: genresComponent
         /* List View */
         MusicGenres {
+            id: genresView
+
+            header: Widgets.ViewHeader {
+                view: genresView
+
+                text: I18n.qtr("Genres")
+            }
+
             onCurrentIndexChanged: History.viewProp.initialIndex = currentIndex
 
             searchPattern: MainCtx.search.pattern
@@ -61,16 +69,10 @@ Widgets.PageLoader {
 
             property string genreName: ""
 
-            gridViewMarginTop: 0
+            header: Widgets.ViewHeader {
+                view: albumsView
 
-            header: Widgets.SubtitleLabel {
                 text: I18n.qtr("Genres - %1").arg(genreName)
-                leftPadding: albumsView.contentLeftMargin
-                rightPadding: albumsView.contentRightMargin
-                topPadding: VLCStyle.margin_large
-                bottomPadding: VLCStyle.margin_normal
-                width: root.width
-                color: colorContext.fg.primary
             }
 
             searchPattern: MainCtx.search.pattern

modules/gui/qt/medialibrary/qml/MusicPlaylistsDisplay.qml

@@ -51,6 +51,14 @@ Widgets.PageLoader {
         id: componentAll
 
         PlaylistMediaList {
+            id: playlistView
+
+            header: Widgets.ViewHeader {
+                view: playlistView
+
+                text: I18n.qtr("Playlists")
+            }
+
             isMusic: true
 
             searchPattern: MainCtx.search.pattern

modules/gui/qt/medialibrary/qml/MusicTracksDisplay.qml

@@ -62,8 +62,12 @@ FocusScope {
 
         visible: model.count > 0
         focus: model.count > 0
-        headerTopPadding: VLCStyle.margin_normal
 
+        header: Widgets.ViewHeader {
+            view: tracklistdisplay_id
+
+            text: I18n.qtr("Tracks")
+        }
 
         searchPattern: MainCtx.search.pattern
         sortOrder: MainCtx.sort.order

modules/gui/qt/medialibrary/qml/PlaylistMediaDisplay.qml

@@ -45,6 +45,8 @@ FocusScope {
     property int leftPadding: 0
     property int rightPadding: 0
 
+    property alias playlistView: view
+
     readonly property int currentIndex: view.currentIndex
     property string name: ""
 
@@ -168,21 +170,12 @@ FocusScope {
 
         isMusic: root.isMusic
 
-        header: Widgets.SubtitleLabel {
-            id: label
-
-            leftPadding: view.contentLeftMargin
-            rightPadding: view.contentRightMargin
-            topPadding: VLCStyle.margin_normal
-            bottomPadding: VLCStyle.margin_xsmall
+        header: Widgets.ViewHeader {
+            view: root.playlistView
 
             text: root.name
-            color: view.colorContext.fg.primary
         }
 
-
-        headerTopPadding: VLCStyle.margin_normal
-
         Navigation.parentItem: root
 
         Navigation.cancelAction: function () {

modules/gui/qt/medialibrary/qml/PlaylistMediaList.qml

@@ -43,6 +43,11 @@ MainInterface.MainViewLoader {
 
     readonly property int currentIndex: Helpers.get(currentItem, "currentIndex", -1)
 
+    property Component header: null
+    
+    readonly property int contentLeftMargin: Helpers.get(currentItem, "contentLeftMargin", 0)
+    readonly property int contentRightMargin: Helpers.get(currentItem, "contentRightMargin", 0)
+
     property alias searchPattern: playlistModel.searchPattern
     property alias sortOrder: playlistModel.sortOrder
     property alias sortCriteria: playlistModel.sortCriteria
@@ -171,12 +176,12 @@ MainInterface.MainViewLoader {
             cellWidth : _width
             cellHeight: _height
 
-            topMargin: VLCStyle.margin_large
-
             model: root.model
 
             selectionModel: root.selectionModel
 
+            headerDelegate: root.header
+
             Navigation.parentItem: root
 
             delegate: VideoGridItem {
@@ -304,8 +309,6 @@ MainInterface.MainViewLoader {
 
             rowHeight: VLCStyle.tableCoverRow_height
 
-            headerTopPadding: VLCStyle.margin_normal
-
             model: root.model
 
             sortModel: (availableRowWidth < VLCStyle.colWidth(4)) ? _modelSmall
@@ -315,6 +318,8 @@ MainInterface.MainViewLoader {
 
             dragItem: dragItemPlaylist
 
+            header: root.header
+
             Navigation.parentItem: root
 
             //-------------------------------------------------------------------------------------

modules/gui/qt/medialibrary/qml/VideoAll.qml

@@ -35,13 +35,18 @@ MainInterface.MainViewLoader {
 
     // Properties
 
-    readonly property int contentMargin: Helpers.get(currentItem, "contentLeftMargin", 0)
+    readonly property int contentLeftMargin: Helpers.get(currentItem, "contentLeftMargin", 0)
+    readonly property int contentRightMargin: Helpers.get(currentItem, "contentRightMargin", 0)
+
+    property bool fadingEdgeList: true
 
     // NOTE: Specify an optional header for the view.
     property Component header: null
 
     property Item headerItem: Helpers.get(currentItem, "headerItem", null)
 
+    property int headerPositioning: ListView.OverlayHeader
+
     readonly property int currentIndex: Helpers.get(currentItem, "currentIndex", -1)
 
     // 'role' used for tableview's section text
@@ -185,12 +190,14 @@ MainInterface.MainViewLoader {
 
             header: root.header
 
-            headerPositioning: ListView.InlineHeader
+            headerPositioning: root.headerPositioning
 
             activeFocusOnTab: true
 
             section.property: root.sectionProperty
 
+            fadingEdge.enableEndFade: root.fadingEdgeList
+
             // Navigation
 
             Navigation.parentItem: root

modules/gui/qt/medialibrary/qml/VideoAllSubDisplay.qml

@@ -60,6 +60,8 @@ VideoAll {
 
     sectionProperty: !!_meta && !!_meta.sectionProperty ? _meta.sectionProperty : ""
 
+    headerPositioning: headerItem.model.count > 0 ? ListView.InlineHeader : ListView.OverlayHeader
+
     // Functions
 
     function _updateMetaModel(groupping) {
@@ -259,8 +261,6 @@ VideoAll {
     header: VideoRecentVideos {
         width: root.width
 
-        // spacing between header and content
-        bottomPadding: VLCStyle.margin_normal
         leftPadding: root.leftPadding
         rightPadding: root.rightPadding
 

modules/gui/qt/medialibrary/qml/VideoPlaylistsDisplay.qml

@@ -51,6 +51,13 @@ Widgets.PageLoader {
         id: componentAll
 
         PlaylistMediaList {
+            id: playlistView
+
+            header: Widgets.ViewHeader {
+                view: playlistView
+
+                text: I18n.qtr("Playlists")
+            }
 
             isMusic: false
 

modules/gui/qt/medialibrary/qml/VideoRecentVideos.qml

@@ -37,11 +37,12 @@ FocusScope {
 
     property alias subtitleText: subtitleLabel.text
 
-    property int bottomPadding: recentVideosColumn.bottomPadding
     property int leftPadding: VLCStyle.margin_xsmall
     property int rightPadding: VLCStyle.margin_xsmall
 
     property int nbItemPerRow
+    
+    property alias model: recentModel
 
     // Settings
 
@@ -80,52 +81,30 @@ FocusScope {
 
         width: root.width
 
-        topPadding: VLCStyle.margin_large
+        topPadding: VLCStyle.layoutTitle_top_padding
 
-        spacing: VLCStyle.margin_normal
+        Widgets.ViewHeader {
+            id: viewHeader
 
-        bottomPadding: root.bottomPadding
+            view: root
 
-        RowLayout {
-            anchors.left: parent.left
-            anchors.right: parent.right
-
-            anchors.leftMargin: view.currentItem.contentLeftMargin
-            anchors.rightMargin: view.currentItem.contentRightMargin
-
-            Widgets.SubtitleLabel {
-                id: label
-
-                Layout.fillWidth: true
-
-                text: I18n.qtr("Continue Watching")
-
-                // NOTE: Setting this to gridView.visible seems to causes unnecessary implicitHeight
-                //       calculations in the Column parent.
-                visible: recentModel.count > 0
-                color: theme.fg.primary
-            }
-
-            Widgets.TextToolButton {
-                id: button
-
-                visible: recentModel.maximumCount > recentModel.count
-
-                Layout.preferredWidth: implicitWidth
+            visible: recentModel.count > 0
+            seeAllButton.visible: recentModel.maximumCount > recentModel.count
 
-                focus: true
+            Layout.fillWidth: true
 
-                text: I18n.qtr("See All")
+            leftPadding: Helpers.get(view.currentItem, "contentLeftMargin", 0)
+            rightPadding: Helpers.get(view.currentItem, "contentRightMargin", 0)
+            topPadding: 0
 
-                font.pixelSize: VLCStyle.fontSize_large
+            text: I18n.qtr("Continue Watching")
 
-                Navigation.parentItem: root
+            onSeeAllButtonClicked: History.push(["mc", "video", "all", "recentVideos"]);
 
-                Navigation.downAction: function() {
-                    view.setCurrentItemFocus(Qt.TabFocusReason)
-                }
+            Navigation.parentItem: root
 
-                onClicked: History.push(["mc", "video", "all", "recentVideos"]);
+            Navigation.downAction: function() {
+                view.setCurrentItemFocus(Qt.TabFocusReason)
             }
         }
 
@@ -137,8 +116,7 @@ FocusScope {
             visible: recentModel.count > 0
 
             width: root.width
-            height: MainCtx.gridView ? VLCStyle.gridItem_video_height + VLCStyle.gridItemSelectedBorder + VLCStyle.margin_xlarge
-                                     : VLCStyle.margin_xxlarge + Math.min(recentModel.count, 5) * VLCStyle.tableCoverRow_height
+            height: currentItem.contentHeight
 
             leftPadding: root.leftPadding
             rightPadding: root.rightPadding
@@ -149,6 +127,8 @@ FocusScope {
 
             sectionProperty: ""
 
+            fadingEdgeList: false
+
             sortModel: []
 
             contextMenu: Util.MLContextMenu {
@@ -159,17 +139,21 @@ FocusScope {
 
             Navigation.parentItem: root
 
-            Navigation.upItem: button
+            Navigation.upItem: viewHeader.seeAllButton
         }
 
-        Widgets.SubtitleLabel {
+        Widgets.ViewHeader {
             id: subtitleLabel
 
             visible: text !== ""
-            color: theme.fg.primary
 
-            leftPadding: view.currentItem.contentLeftMargin
-            rightPadding: view.currentItem.contentRightMargin
+            view: root
+
+            leftPadding: Helpers.get(view.currentItem, "contentLeftMargin", 0)
+            topPadding: MainCtx.gridView ? VLCStyle.gridView_spacing + VLCStyle.margin_xsmall + VLCStyle.margin_xxxsmall
+                                         : VLCStyle.tableView_spacing
+
+            text: view.title
         }
     }
 }

modules/gui/qt/medialibrary/qml/VideoRecentVideosDisplay.qml

@@ -47,15 +47,9 @@ VideoAll {
 
     contextMenu: Util.MLContextMenu { model: recentModel; showPlayAsAudioAction: true }
 
-    header: Widgets.SubtitleLabel {
-        width: root.width
-
-        // NOTE: We want this to be properly aligned with the grid items.
-        leftPadding: root.contentMargin
-        topPadding: VLCStyle.margin_large
-        bottomPadding: VLCStyle.margin_normal
+    header: Widgets.ViewHeader {
+        view: root
 
         text: I18n.qtr("Continue Watching")
-        color: root.colorContext.fg.primary
     }
 }