[vlc-commits] [Git][videolan/vlc][master] 10 commits: qml: rename contentMargin to contentLeftMargin, and also use contentRightMargin

Jean-Baptiste Kempf (@jbk) gitlab at videolan.org
Sat Mar 9 14:24:36 UTC 2024



Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC


Commits:
b4b34b8e by Leon Vitanos at 2024-03-09T13:48:11+00:00
qml: rename contentMargin to contentLeftMargin, and also use contentRightMargin

- - - - -
4c31578f by Leon Vitanos at 2024-03-09T13:48:11+00:00
qml: add ViewHeader component

- - - - -
e7132c1b by Leon Vitanos at 2024-03-09T13:48:11+00:00
qml: use ViewHeader for layouts header, and fix inconsistent padding values

for padding consistency, code readability and avoid code duplication

- - - - -
d5d2a1f1 by Leon Vitanos at 2024-03-09T13:48:11+00:00
qml: add title header to all views

- - - - -
c70678b9 by Leon Vitanos at 2024-03-09T13:48:11+00:00
qml: delete BrowseDeviceHeader and use ViewHeader instead

- - - - -
35c6803f by Leon Vitanos at 2024-03-09T13:48:11+00:00
qml: match playlistview topPadding with layout's padding

- - - - -
603722cb by Leon Vitanos at 2024-03-09T13:48:11+00:00
qml: only use ListView.InlineHeader when at 'Video' homepage with recentVideos visible

- - - - -
d52105c9 by Leon Vitanos at 2024-03-09T13:48:11+00:00
qml: Standardize spacing between vertically-aligned grid and list layouts

for this, we also change the height of recentVideos to it's contentHeight + bottomPadding

- - - - -
cb8c7bca by Leon Vitanos at 2024-03-09T13:48:11+00:00
qml: Adjust layout paddings and spacings for denser, modern UI

- - - - -
89b6c0a5 by Leon Vitanos at 2024-03-09T13:48:11+00:00
qml: disable end fade on recentVideos when on tableView

- - - - -


30 changed files:

- modules/gui/qt/Makefile.am
- modules/gui/qt/maininterface/qml/MainDisplay.qml
- modules/gui/qt/medialibrary/qml/MediaGroupDisplay.qml
- modules/gui/qt/medialibrary/qml/MusicAlbums.qml
- modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
- modules/gui/qt/medialibrary/qml/MusicAllArtists.qml
- modules/gui/qt/medialibrary/qml/MusicArtist.qml
- modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml
- modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml
- modules/gui/qt/medialibrary/qml/MusicGenres.qml
- modules/gui/qt/medialibrary/qml/MusicGenresDisplay.qml
- modules/gui/qt/medialibrary/qml/MusicPlaylistsDisplay.qml
- modules/gui/qt/medialibrary/qml/MusicTracksDisplay.qml
- modules/gui/qt/medialibrary/qml/PlaylistMediaDisplay.qml
- modules/gui/qt/medialibrary/qml/PlaylistMediaList.qml
- modules/gui/qt/medialibrary/qml/VideoAll.qml
- modules/gui/qt/medialibrary/qml/VideoAllSubDisplay.qml
- modules/gui/qt/medialibrary/qml/VideoPlaylistsDisplay.qml
- modules/gui/qt/medialibrary/qml/VideoRecentVideos.qml
- modules/gui/qt/medialibrary/qml/VideoRecentVideosDisplay.qml
- modules/gui/qt/network/qml/BrowseDeviceView.qml
- modules/gui/qt/network/qml/BrowseHomeDisplay.qml
- modules/gui/qt/network/qml/BrowseTreeDisplay.qml
- modules/gui/qt/network/qml/BrowseTreeHeader.qml
- modules/gui/qt/network/qml/ServicesSources.qml
- modules/gui/qt/style/VLCStyle.qml
- modules/gui/qt/vlc.qrc
- modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
- modules/gui/qt/network/qml/BrowseDeviceHeader.qml → modules/gui/qt/widgets/qml/ViewHeader.qml
- po/POTFILES.in


Changes:

=====================================
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
     }
 }


=====================================
modules/gui/qt/network/qml/BrowseDeviceView.qml
=====================================
@@ -38,7 +38,8 @@ FocusScope {
 
     readonly property int contentHeight: (_currentView) ? _currentView.contentHeight : 0
 
-    readonly property int contentMargin: (_currentView) ? _currentView.contentLeftMargin : 0
+    readonly property int contentLeftMargin: (_currentView) ? _currentView.contentLeftMargin : 0
+    readonly property int contentRightMargin: (_currentView) ? _currentView.contentRightMargin : 0
 
     property int displayMarginEnd: 0
 
@@ -52,12 +53,12 @@ FocusScope {
 
     property bool isSearchable: true
 
-    property Component header: BrowseDeviceHeader {
+    property Component header: Widgets.ViewHeader {
         view: root
 
         text: root.title
 
-        button.visible: root.model.count < root.model.maximumCount
+        seeAllButton.visible: root.model.count < root.model.maximumCount
 
         Navigation.parentItem: root
 
@@ -65,7 +66,7 @@ FocusScope {
             view.setCurrentItemFocus(Qt.TabFocusReason)
         }
 
-        onClicked: root.seeAll(reason)
+        onSeeAllButtonClicked: root.seeAll(reason)
     }
 
     property string title


=====================================
modules/gui/qt/network/qml/BrowseHomeDisplay.qml
=====================================
@@ -141,7 +141,8 @@ FocusScope {
             width: foldersSection.width
             height: implicitHeight
 
-            spacing: VLCStyle.margin_small
+            spacing: (MainCtx.gridView ? VLCStyle.gridView_spacing : VLCStyle.tableView_spacing) -
+                     VLCStyle.layoutTitle_top_padding
 
             BrowseDeviceView {
                 id: foldersSection


=====================================
modules/gui/qt/network/qml/BrowseTreeDisplay.qml
=====================================
@@ -35,6 +35,9 @@ MainInterface.MainViewLoader {
 
     readonly property var currentIndex: _currentView.currentIndex
 
+    readonly property int contentLeftMargin: Helpers.get(currentItem, "contentLeftMargin", 0)
+    readonly property int contentRightMargin: Helpers.get(currentItem, "contentRightMargin", 0)
+
      // 'loading' property is not available with NetworkDevicesModel
     readonly property bool loading: Helpers.get(model, "loading", false)
 
@@ -145,8 +148,8 @@ MainInterface.MainViewLoader {
             headerDelegate: BrowseTreeHeader {
                 providerModel: root.model
 
-                // align header content with grid content
-                leftPadding: gridView.rowX
+                leftPadding: root.contentLeftMargin
+                rightPadding: root.contentRightMargin
 
                 width: gridView.width
 
@@ -280,6 +283,9 @@ MainInterface.MainViewLoader {
             header: BrowseTreeHeader {
                 providerModel: root.model
 
+                leftPadding: root.contentLeftMargin
+                rightPadding: root.contentRightMargin
+
                 width: tableView.width
 
                 Navigation.parentItem: root


=====================================
modules/gui/qt/network/qml/BrowseTreeHeader.qml
=====================================
@@ -43,10 +43,8 @@ T.Control {
     height: implicitHeight
     implicitHeight: layout.implicitHeight + topPadding + bottomPadding
 
-    leftPadding: VLCStyle.margin_large
-    rightPadding: VLCStyle.margin_small
-    topPadding: VLCStyle.margin_large
-    bottomPadding: VLCStyle.margin_normal
+    topPadding: VLCStyle.layoutTitle_top_padding
+    bottomPadding: VLCStyle.layoutTitle_bottom_padding
 
     focus: medialibraryBtn.visible
 


=====================================
modules/gui/qt/network/qml/ServicesSources.qml
=====================================
@@ -44,10 +44,15 @@ MainInterface.MainGridView {
     //settings
 
     model: sourcesModel
-    topMargin: VLCStyle.margin_large
     cellWidth: VLCStyle.gridItem_network_width
     cellHeight: VLCStyle.gridCover_network_height + VLCStyle.margin_xsmall + VLCStyle.fontHeight_normal
 
+    headerDelegate: Widgets.ViewHeader {
+        view: root
+
+        text: I18n.qtr("Services")
+    }
+
     delegate: Widgets.GridItem {
 
         property var model: ({})


=====================================
modules/gui/qt/style/VLCStyle.qml
=====================================
@@ -217,6 +217,13 @@ QtObject {
     readonly property int column_margin: MainCtx.dp(32, scale)
     readonly property int column_spacing: column_margin
 
+    // NOTE: For the grid layout, there is an additional spacing, defined by the verticalSpacing of the ExpandGridView
+    readonly property int gridView_spacing: margin_small + margin_xxxsmall
+    readonly property int tableView_spacing: gridView_spacing + margin_large
+
+    readonly property int layoutTitle_top_padding: margin_large + margin_xxsmall
+    readonly property int layoutTitle_bottom_padding: margin_normal + margin_xxxsmall
+
     readonly property int table_cover_border: MainCtx.dp(2, scale)
 
     readonly property int tableHeaderText_height: fontHeight_normal


=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -228,10 +228,10 @@
         <file alias="FadingEdgeForListView.qml">widgets/qml/FadingEdgeForListView.qml</file>
         <file alias="PopupIconToolButton.qml">widgets/qml/PopupIconToolButton.qml</file>
         <file alias="PartialEffect.qml">widgets/qml/PartialEffect.qml</file>
+        <file alias="ViewHeader.qml">widgets/qml/ViewHeader.qml</file>
     </qresource>
     <qresource prefix="/network">
         <file alias="AddressbarButton.qml">network/qml/AddressbarButton.qml</file>
-        <file alias="BrowseDeviceHeader.qml">network/qml/BrowseDeviceHeader.qml</file>
         <file alias="BrowseDeviceView.qml">network/qml/BrowseDeviceView.qml</file>
         <file alias="BrowseDisplay.qml">network/qml/BrowseDisplay.qml</file>
         <file alias="BrowseHomeDisplay.qml">network/qml/BrowseHomeDisplay.qml</file>


=====================================
modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
=====================================
@@ -68,7 +68,7 @@ FocusScope {
         return size + Math.max(VLCStyle.column_spacing * (sortModel.length - 1), 0)
     }
 
-    property Component header: Item{}
+    property Component header: null
     property Item headerItem: view.headerItem ? view.headerItem.loadedHeader : null
     property color headerColor: colorContext.bg.primary
     property int headerTopPadding: 0


=====================================
modules/gui/qt/network/qml/BrowseDeviceHeader.qml → modules/gui/qt/widgets/qml/ViewHeader.qml
=====================================
@@ -1,7 +1,7 @@
 /*****************************************************************************
- * Copyright (C) 2020 VLC authors and VideoLAN
+ * Copyright (C) 2024 VLC authors and VideoLAN
  *
- * Authors: Benjamin Arnaud <bunjee at omega.gg>
+ * Authors: Leon Vitanos <leon.vitanos at gmail.com>
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -20,34 +20,44 @@
 
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
+import QtQuick.Templates 2.12 as T
 
 import org.videolan.vlc 0.1
 
 import "qrc:///style/"
-import "qrc:///widgets/" as Widgets
+import "qrc:///util/Helpers.js" as Helpers
 
-FocusScope {
+T.Pane {
     id: root
 
     // Properties
 
     /* required */ property var view
 
+    leftPadding: Helpers.get(view, "contentLeftMargin", 0)
+    rightPadding: Helpers.get(view, "contentRightMargin", 0)
+
+    bottomPadding: VLCStyle.layoutTitle_bottom_padding
+    topPadding: VLCStyle.layoutTitle_top_padding
+
     // Aliases
 
     property alias text: label.text
 
-    property alias label: label
-    property alias button: button
+    property alias seeAllButton: button
 
     // Signals
 
-    signal clicked(int reason)
+    signal seeAllButtonClicked(int reason)
 
     // Settings
 
     width: view.width
-    height: label.height
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                                contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
 
     Navigation.navigable: button.visible
 
@@ -58,27 +68,29 @@ FocusScope {
         colorSet: ColorContext.View
     }
 
+    // Events
+    onContentItemChanged: {
+      console.assert(contentItem === root.row)
+    }
+
     RowLayout {
         id: row
 
         anchors.fill: parent
 
-        anchors.leftMargin: root.view.contentMargin
-        anchors.rightMargin: anchors.leftMargin
-
-        Widgets.SubtitleLabel {
+        SubtitleLabel {
             id: label
 
             Layout.fillWidth: true
-            color: theme.fg.primary
 
-            topPadding: VLCStyle.margin_large
-            bottomPadding: VLCStyle.margin_normal
+            color: theme.fg.primary
         }
 
-        Widgets.TextToolButton {
+        TextToolButton {
             id: button
 
+            visible: false
+
             Layout.preferredWidth: implicitWidth
 
             focus: true
@@ -89,7 +101,7 @@ FocusScope {
 
             Navigation.parentItem: root
 
-            onClicked: root.clicked(focusReason)
+            onClicked: root.seeAllButtonClicked(focusReason)
         }
     }
 }


=====================================
po/POTFILES.in
=====================================
@@ -822,7 +822,6 @@ modules/gui/qt/menus/qml_menu_wrapper.cpp
 modules/gui/qt/menus/qml_menu_wrapper.hpp
 modules/gui/qt/network/standardpathmodel.cpp
 modules/gui/qt/network/standardpathmodel.hpp
-modules/gui/qt/network/qml/BrowseDeviceHeader.qml
 modules/gui/qt/network/qml/BrowseDeviceView.qml
 modules/gui/qt/network/qml/BrowseDisplay.qml
 modules/gui/qt/network/qml/BrowseHomeDisplay.qml
@@ -921,6 +920,7 @@ modules/gui/qt/widgets/qml/ScanProgressBar.qml
 modules/gui/qt/widgets/qml/SearchBox.qml
 modules/gui/qt/widgets/qml/SortControl.qml
 modules/gui/qt/widgets/qml/TableColumns.qml
+modules/gui/qt/widgets/qml/ViewHeader.qml
 modules/gui/skins2/commands/async_queue.cpp
 modules/gui/skins2/commands/async_queue.hpp
 modules/gui/skins2/commands/cmd_add_item.cpp



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/27ccc2a2133c5571f1280ff851b0d22a066c5c1d...89b6c0a58bdff8df04223efb014510718bb422d9

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/27ccc2a2133c5571f1280ff851b0d22a066c5c1d...89b6c0a58bdff8df04223efb014510718bb422d9
You're receiving this email because of your account on code.videolan.org.


VideoLAN code repository instance


More information about the vlc-commits mailing list