[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