[vlc-commits] [Git][videolan/vlc][master] 7 commits: qml/KeyNavigableTableView: Add 'extraMargin' and 'contentMargin(s)' properties

Pierre Lamot (@chub) gitlab at videolan.org
Thu Dec 15 12:34:43 UTC 2022



Pierre Lamot pushed to branch master at VideoLAN / VLC


Commits:
8e06c550 by Benjamin Arnaud at 2022-12-15T12:13:10+00:00
qml/KeyNavigableTableView: Add 'extraMargin' and 'contentMargin(s)' properties

- - - - -
bdced432 by Benjamin Arnaud at 2022-12-15T12:13:10+00:00
qml/KeyNavigableTableView: Update and streamline margin(s) implementation

We want edge to edge backgrounds in our delegate and header, so we implement our own
margins implementation like in ExpandGridView. The default values should be the same
than ExpandGridView to respect the grid parti pris.

Co-authored-by: Pierre Lamot <pierre at videolabs.io>

- - - - -
dc71ff40 by Benjamin Arnaud at 2022-12-15T12:13:10+00:00
qml/PlaylistMediaDisplay: Align the 'label' with the table

- - - - -
0e95583b by Benjamin Arnaud at 2022-12-15T12:13:10+00:00
qml/PlaylistMediaList: Fix TableView columns placements

- - - - -
0172c27a by Benjamin Arnaud at 2022-12-15T12:13:10+00:00
qml/MusicGenres: Fix TableView columns placements

- - - - -
36c6f682 by Benjamin Arnaud at 2022-12-15T12:13:10+00:00
qml/VLCStyle: Rename 'column_margin_width' to 'column_spacing'

- - - - -
999ffde0 by Benjamin Arnaud at 2022-12-15T12:13:10+00:00
qml/VLCStyle: Add the 'column_margin' property

And apply it to ExpandGridView and KeyNavigableTableView.

- - - - -


12 changed files:

- modules/gui/qt/medialibrary/qml/MusicArtist.qml
- modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml
- modules/gui/qt/medialibrary/qml/MusicGenres.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/VideoDisplayRecentVideos.qml
- modules/gui/qt/network/qml/BrowseDeviceView.qml
- modules/gui/qt/style/VLCStyle.qml
- modules/gui/qt/widgets/qml/ExpandGridView.qml
- modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
- modules/gui/qt/widgets/qml/TableViewDelegate.qml


Changes:

=====================================
modules/gui/qt/medialibrary/qml/MusicArtist.qml
=====================================
@@ -121,7 +121,7 @@ FocusScope {
                         bottomMargin: VLCStyle.margin_xsmall
                         model: albumModel
                         orientation: ListView.Horizontal
-                        spacing: VLCStyle.column_margin_width
+                        spacing: VLCStyle.column_spacing
 
                         Navigation.parentItem: root
 


=====================================
modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml
=====================================
@@ -119,7 +119,7 @@ FocusScope {
             z: 1
             height: parent.height
             width: Helpers.clamp(root.width / resizeHandle.widthFactor,
-                                 VLCStyle.colWidth(1) + VLCStyle.column_margin_width,
+                                 VLCStyle.colWidth(1) + VLCStyle.column_spacing,
                                  root.width * .5)
 
             visible: artistModel.count > 0


=====================================
modules/gui/qt/medialibrary/qml/MusicGenres.qml
=====================================
@@ -228,9 +228,7 @@ FocusScope {
         MainInterface.MainTableView {
             id: tableView_id
 
-            readonly property int _nameColSpan: Math.max(
-                                                    VLCStyle.gridColumnsForWidth(tableView_id.availableRowWidth - VLCStyle.listAlbumCover_width - VLCStyle.column_margin_width) - 1
-                                                    , 1)
+            property int _nameColSpan: Math.max(1, VLCStyle.gridColumnsForWidth(availableRowWidth) - 2)
 
             model: genreModel
             selectionDelegateModel: selectionModel
@@ -248,11 +246,27 @@ FocusScope {
             rowHeight: VLCStyle.tableCoverRow_height
             headerTopPadding: VLCStyle.margin_normal
 
-            sortModel:  [
-                { isPrimary: true, criteria: "cover", width: VLCStyle.listAlbumCover_width, headerDelegate: tableColumns.titleHeaderDelegate, colDelegate: tableColumns.titleDelegate },
-                { criteria: "name", width: VLCStyle.colWidth(tableView_id._nameColSpan), text: I18n.qtr("Name") },
-                { criteria: "nb_tracks", width: VLCStyle.colWidth(1), text: I18n.qtr("Tracks") }
-            ]
+            sortModel: [{
+                isPrimary: true,
+                criteria: "cover",
+
+                width: VLCStyle.colWidth(1),
+
+                headerDelegate: tableColumns.titleHeaderDelegate,
+                colDelegate: tableColumns.titleDelegate
+            }, {
+                criteria: "name",
+
+                width: VLCStyle.colWidth(_nameColSpan),
+
+                text: I18n.qtr("Name")
+            }, {
+                criteria: "nb_tracks",
+
+                width: VLCStyle.colWidth(1),
+
+                text: I18n.qtr("Tracks")
+            }]
 
             onItemDoubleClicked: {
                 root.showAlbumView(model.id, model.name, Qt.MouseFocusReason)


=====================================
modules/gui/qt/medialibrary/qml/PlaylistMediaDisplay.qml
=====================================
@@ -123,13 +123,15 @@ FocusScope {
     Widgets.SubtitleLabel {
         id: label
 
+        anchors.left: parent.left
+        anchors.right: parent.right
         anchors.top: parent.top
 
-        anchors.topMargin: VLCStyle.margin_normal
+        anchors.leftMargin: view.contentLeftMargin
+        anchors.rightMargin: view.contentRightMargin
 
-        width: root.width
+        anchors.topMargin: VLCStyle.margin_normal
 
-        leftPadding  : VLCStyle.margin_xlarge
         bottomPadding: VLCStyle.margin_xsmall
 
         text: initialName


=====================================
modules/gui/qt/medialibrary/qml/PlaylistMediaList.qml
=====================================
@@ -324,10 +324,7 @@ FocusScope {
             //-------------------------------------------------------------------------------------
             // Properties
 
-            property int _widthName:
-                Math.max(VLCStyle.gridColumnsForWidth(tableView.availableRowWidth
-                                                      - VLCStyle.listAlbumCover_width
-                                                      - VLCStyle.column_margin_width) - 1, 1)
+            property int _columns: Math.max(1, VLCStyle.gridColumnsForWidth(availableRowWidth) - 2)
 
             //-------------------------------------------------------------------------------------
             // Settings
@@ -348,14 +345,14 @@ FocusScope {
                 isPrimary: true,
                 criteria: "thumbnail",
 
-                width: VLCStyle.listAlbumCover_width,
+                width: VLCStyle.colWidth(1),
 
                 headerDelegate: columns.titleHeaderDelegate,
                 colDelegate   : columns.titleDelegate
             }, {
                 criteria: "name",
 
-                width: VLCStyle.colWidth(_widthName),
+                width: VLCStyle.colWidth(_columns),
 
                 text: I18n.qtr("Name")
             }, {


=====================================
modules/gui/qt/medialibrary/qml/VideoAll.qml
=====================================
@@ -325,8 +325,6 @@ FocusScope {
         VideoListDisplay {
             id: listView
 
-            readonly property real contentLeftMargin: VLCStyle.margin_normal
-
             // Settings
 
             model: root.model


=====================================
modules/gui/qt/medialibrary/qml/VideoDisplayRecentVideos.qml
=====================================
@@ -86,7 +86,7 @@ FocusScope {
                             +
                             VLCStyle.margin_xlarge
 
-            spacing: VLCStyle.column_margin_width
+            spacing: VLCStyle.column_spacing
 
             // NOTE: We want navigation buttons to be centered on the item cover.
             buttonMargin: VLCStyle.margin_xsmall + VLCStyle.gridCover_video_height / 2 - buttonLeft.height / 2


=====================================
modules/gui/qt/network/qml/BrowseDeviceView.qml
=====================================
@@ -261,8 +261,6 @@ FocusScope {
         Widgets.KeyNavigableTableView {
             id: listView
 
-            readonly property real contentLeftMargin: VLCStyle.margin_normal
-
             readonly property int maximumCount: root.maximumRows
 
             readonly property int nbItemPerRow: 1


=====================================
modules/gui/qt/style/VLCStyle.qml
=====================================
@@ -218,7 +218,11 @@ QtObject {
     readonly property int gridItem_newIndicator: dp(8, scale)
 
     readonly property int column_width: dp(114, scale)
-    readonly property int column_margin_width: dp(32, scale)
+
+    // NOTE: This property should be applied on ExpandGridView and TableView. We should provision
+    //       enough space to fit the TableView section labels and 'contextButton'.
+    readonly property int column_margin: dp(32, scale)
+    readonly property int column_spacing: column_margin
 
     readonly property int table_cover_border: dp(2, scale)
 
@@ -310,12 +314,12 @@ QtObject {
     }
 
     function colWidth(nb) {
-      return nb * VLCStyle.column_width + ( nb - 1 ) * VLCStyle.column_margin_width;
+      return nb * VLCStyle.column_width + ( nb - 1 ) * VLCStyle.column_spacing;
     }
 
     //Returns the number columns fitting in given width
     function gridColumnsForWidth(width) {
-        return Math.floor((width + column_margin_width) / (column_width + column_margin_width))
+        return Math.floor((width + column_spacing) / (column_width + column_spacing))
     }
 
 }


=====================================
modules/gui/qt/widgets/qml/ExpandGridView.qml
=====================================
@@ -38,8 +38,8 @@ FocusScope {
     //margin to apply
     property int bottomMargin: 0
     property int topMargin: 0
-    property int leftMargin: VLCStyle.margin_normal
-    property int rightMargin: VLCStyle.margin_normal
+    property int leftMargin: VLCStyle.column_margin
+    property int rightMargin: VLCStyle.column_margin
 
     readonly property int extraMargin: (_contentWidth - nbItemPerRow * _effectiveCellWidth
                                         +
@@ -52,8 +52,8 @@ FocusScope {
     readonly property int rowHeight: cellHeight + verticalSpacing
 
     property int rowX: 0
-    property int horizontalSpacing: VLCStyle.column_margin_width
-    property int verticalSpacing: VLCStyle.column_margin_width
+    property int horizontalSpacing: VLCStyle.column_spacing
+    property int verticalSpacing: VLCStyle.column_spacing
 
     property int displayMarginEnd: 0
 


=====================================
modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
=====================================
@@ -38,13 +38,25 @@ FocusScope {
         text: model.text || ""
     }
 
-    readonly property real sectionWidth: !!section.property ? VLCStyle.table_section_width : 0
+    // NOTE: We want edge to edge backgrounds in our delegate and header, so we implement our own
+    //       margins implementation like in ExpandGridView. The default values should be the same
+    //       than ExpandGridView to respect the grid parti pris.
+    property int leftMargin: VLCStyle.column_margin
+    property int rightMargin: VLCStyle.column_margin
+
+    readonly property int extraMargin: Math.max(0, (width - usedRowSpace) / 2)
+
+    // NOTE: The list margins for the item(s) horizontal positioning.
+    readonly property int contentLeftMargin: extraMargin + leftMargin
+    readonly property int contentRightMargin: extraMargin + rightMargin
 
     readonly property real usedRowSpace: {
-        var s = 0
+        var size = leftMargin + rightMargin
+
         for (var i in sortModel)
-            s += sortModel[i].width + root.horizontalSpacing
-        return s + root._contextButtonHorizontalSpace + (VLCStyle.margin_xxxsmall * 2)
+            size += sortModel[i].width
+
+        return size + Math.max(VLCStyle.column_spacing * (sortModel.length - 1), 0)
     }
 
     property Component header: Item{}
@@ -54,15 +66,12 @@ FocusScope {
 
     property Util.SelectableDelegateModel selectionDelegateModel
     property real rowHeight: VLCStyle.tableRow_height
-    readonly property int _contextButtonHorizontalSpace: VLCStyle.icon_normal
-    property int horizontalSpacing: VLCStyle.column_margin_width
+    property int horizontalSpacing: VLCStyle.column_spacing
 
     property real availableRowWidth: 0
     property real _availabeRowWidthLastUpdateTime: Date.now()
-    readonly property real _currentAvailableRowWidth: root.width
-                                                      - root.sectionWidth * 2
-                                                      - (root.horizontalSpacing + _contextButtonHorizontalSpace)
-                                                      - (VLCStyle.margin_xxxsmall * 2)
+
+    readonly property real _currentAvailableRowWidth: width - leftMargin - rightMargin
 
     property Item dragItem
     property bool acceptDrop: false
@@ -71,8 +80,6 @@ FocusScope {
 
     property alias topMargin: view.topMargin
     property alias bottomMargin: view.bottomMargin
-    property alias leftMargin: view.leftMargin
-    property alias rightMargin: view.rightMargin
 
     property alias spacing: view.spacing
 
@@ -221,10 +228,20 @@ FocusScope {
 
         anchors.fill: parent
 
+        contentWidth: root.width - root.contentLeftMargin - root.contentRightMargin
+
         focus: true
 
         headerPositioning: ListView.OverlayHeader
 
+        flickableDirection: Flickable.AutoFlickDirection
+
+        Navigation.parentItem: root
+
+        onSelectAll: selectionDelegateModel.selectAll()
+        onSelectionUpdated: selectionDelegateModel.updateSelection( keyModifiers, oldIndex, newIndex )
+        onActionAtIndex: root.actionForSelection( selectionDelegateModel.selectedIndexes )
+
         onDeselectAll: {
             if (selectionDelegateModel) {
                 selectionDelegateModel.clear()
@@ -237,12 +254,9 @@ FocusScope {
         }
 
         header: Rectangle {
-
-            readonly property alias contentX: row.x
-            readonly property alias contentWidth: row.width
             property alias loadedHeader: headerLoader.item
 
-            width: Math.max(view.width, root.usedRowSpace + root.sectionWidth)
+            width: view.width
             height: col.height
             color: headerColor
             visible: view.count > 0
@@ -255,11 +269,14 @@ FocusScope {
             onHeightChanged: if (root.contentY < 0) root.positionViewAtBeginning()
 
             Widgets.ListLabel {
-                x: contentX - VLCStyle.table_section_width
-                y: row.y
                 height: row.height
+
+                // NOTE: We want the section label to be slightly shifted to the left.
+                x: row.x - VLCStyle.margin_small
+                y: row.y
+
                 topPadding: root.headerTopPadding
-                leftPadding: VLCStyle.table_section_text_margin
+
                 text: view.currentSection
                 color: VLCStyle.colors.accent
                 verticalAlignment: Text.AlignTop
@@ -283,9 +300,12 @@ FocusScope {
                 Row {
                     id: row
 
-                    x: Math.max(0, view.width - root.usedRowSpace) / 2 + root.sectionWidth
-                    leftPadding: VLCStyle.margin_xxxsmall
-                    rightPadding: VLCStyle.margin_xxxsmall
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    anchors.leftMargin: root.contentLeftMargin
+                    anchors.rightMargin: root.contentRightMargin
+
                     topPadding: root.headerTopPadding
                     bottomPadding: VLCStyle.margin_xsmall
 
@@ -336,11 +356,13 @@ FocusScope {
         }
 
         section.delegate: Widgets.ListLabel {
-            x: (view.headerItem ? view.headerItem.contentX : 0) - VLCStyle.table_section_width
+            // NOTE: We want the section label to be slightly shifted to the left.
+            leftPadding: root.contentLeftMargin - VLCStyle.margin_small
+
             topPadding: VLCStyle.margin_xsmall
-            bottomPadding: VLCStyle.margin_xxsmall
-            leftPadding: VLCStyle.table_section_text_margin
+
             text: section
+
             color: VLCStyle.colors.accent
         }
 
@@ -351,7 +373,9 @@ FocusScope {
             height: root.rowHeight
 
             horizontalSpacing: root.horizontalSpacing
-            leftPadding: Math.max(0, view.width - root.usedRowSpace) / 2 + root.sectionWidth
+
+            leftPadding: root.contentLeftMargin
+            rightPadding: root.contentRightMargin
 
             dragItem: root.dragItem
 
@@ -390,14 +414,5 @@ FocusScope {
                 }
             }
         }
-
-        flickableDirection: Flickable.AutoFlickDirection
-        contentWidth: root.usedRowSpace + root.sectionWidth
-
-        onSelectAll: selectionDelegateModel.selectAll()
-        onSelectionUpdated: selectionDelegateModel.updateSelection( keyModifiers, oldIndex, newIndex )
-        onActionAtIndex: root.actionForSelection( selectionDelegateModel.selectedIndexes )
-
-        Navigation.parentItem: root
     }
 }


=====================================
modules/gui/qt/widgets/qml/TableViewDelegate.qml
=====================================
@@ -165,9 +165,6 @@ T.Control {
     contentItem: Row {
         id: content
 
-        leftPadding: VLCStyle.margin_xxxsmall
-        rightPadding: VLCStyle.margin_xxxsmall
-
         spacing: delegate.horizontalSpacing
 
         Repeater {



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/2edd2534edc88927b2334fe77a037872f4414798...999ffde056387d2bf569d8e81a329ab56cc4049e

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/2edd2534edc88927b2334fe77a037872f4414798...999ffde056387d2bf569d8e81a329ab56cc4049e
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