[vlc-commits] [Git][videolan/vlc][master] 5 commits: qml/MusicArtist: clip music list

Jean-Baptiste Kempf (@jbk) gitlab at videolan.org
Sat Dec 18 12:30:27 UTC 2021



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


Commits:
989789a0 by Prince Gupta at 2021-12-18T13:33:30+05:30
qml/MusicArtist: clip music list

content may overflow to artists list

- - - - -
2a8dead1 by Prince Gupta at 2021-12-18T13:33:30+05:30
qml/MusicExpandDelegate: clip music list

content may overflow to artist thumbnail

- - - - -
fedc47f0 by Prince Gupta at 2021-12-18T13:33:30+05:30
qml/KeyNavigableListView: add flickableDirection

- - - - -
7ad0b69d by Prince Gupta at 2021-12-18T13:33:30+05:30
qml/KeyNavigableTableView: revise context button placement

include context button in Layout, this is to simplify implementation

- - - - -
12d1d549 by Prince Gupta at 2021-12-18T13:37:39+05:30
qml/KeyNavigableTableView: fix horizontal scrolling

- - - - -


5 changed files:

- modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
- modules/gui/qt/medialibrary/qml/MusicArtist.qml
- modules/gui/qt/widgets/qml/KeyNavigableListView.qml
- modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
- modules/gui/qt/widgets/qml/TableViewDelegate.qml


Changes:

=====================================
modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
=====================================
@@ -250,6 +250,7 @@ FocusScope {
                 }
             }
 
+            clip: true // content may overflow if not enough space is provided
             headerPositioning: ListView.InlineHeader
             section.property: ""
 


=====================================
modules/gui/qt/medialibrary/qml/MusicArtist.qml
=====================================
@@ -399,6 +399,7 @@ FocusScope {
 
             readonly property int _nbCols: VLCStyle.gridColumnsForWidth(tableView_id.availableRowWidth)
 
+            clip: true // content may overflow if not enough space is provided
             model: trackModel
             selectionDelegateModel: trackSelectionModel
             headerColor: VLCStyle.colors.bg


=====================================
modules/gui/qt/widgets/qml/KeyNavigableListView.qml
=====================================
@@ -91,6 +91,7 @@ FocusScope {
     property alias fadeRectBottomHovered: fadeRectBottom.isHovered
     property alias fadeRectTopHovered: fadeRectTop.isHovered
 
+    property alias flickableDirection: view.flickableDirection
     property alias listScrollBar: scroll_id
 
     property alias buttonLeft: buttonLeft


=====================================
modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
=====================================
@@ -47,6 +47,13 @@ FocusScope {
         text: model.text || ""
     }
 
+    readonly property real usedRowSpace: {
+        var s = 0
+        for (var i in sortModel)
+            s += sortModel[i].width + root.horizontalSpacing
+        return s + root._contextButtonHorizontalSpace + (VLCStyle.margin_xxxsmall * 2)
+    }
+
     property Component header: Item{}
     property var headerItem: view.headerItem.loadedHeader
     property color headerColor
@@ -54,7 +61,7 @@ FocusScope {
 
     property var selectionDelegateModel
     property real rowHeight: VLCStyle.tableRow_height
-    readonly property int _contextButtonHorizontalSpace: VLCStyle.icon_normal + VLCStyle.margin_xxsmall * 2
+    readonly property int _contextButtonHorizontalSpace: VLCStyle.icon_normal
     property int horizontalSpacing: VLCStyle.column_margin_width
 
     property real availableRowWidth: 0
@@ -198,7 +205,7 @@ FocusScope {
         function _update() {
             root.availableRowWidth = root.width
                     - ( !!section.property ? VLCStyle.table_section_width * 2 : 0 )
-                    - _contextButtonHorizontalSpace
+                    - (root.horizontalSpacing + _contextButtonHorizontalSpace)
             root._availabeRowWidthLastUpdateTime = Date.now()
         }
 
@@ -242,7 +249,7 @@ FocusScope {
             readonly property alias contentWidth: row.width
             property alias loadedHeader: headerLoader.item
 
-            width: parent.width
+            width: view.width
             height: col.height
             color: headerColor
             visible: view.modelCount > 0
@@ -283,15 +290,12 @@ FocusScope {
                 Row {
                     id: row
 
-                    anchors {
-                        leftMargin: VLCStyle.margin_xxxsmall
-                        rightMargin: VLCStyle.margin_xxxsmall
-                        horizontalCenter: parent.horizontalCenter
-                        horizontalCenterOffset: - root._contextButtonHorizontalSpace / 2
-                    }
-                    height: implicitHeight
+                    x: Math.max(0, view.width - root.usedRowSpace) / 2
+                    leftPadding: VLCStyle.margin_xxxsmall
+                    rightPadding: VLCStyle.margin_xxxsmall
                     topPadding: root.headerTopPadding
                     bottomPadding: VLCStyle.margin_xsmall
+
                     spacing: root.horizontalSpacing
 
                     Repeater {
@@ -326,6 +330,14 @@ FocusScope {
                             }
                         }
                     }
+
+                    Item {
+                        // placeholder for context button
+
+                        width: root._contextButtonHorizontalSpace
+
+                        height: 1
+                    }
                 }
             }
         }
@@ -341,6 +353,9 @@ FocusScope {
 
         delegate: TableViewDelegate {}
 
+        flickableDirection: Flickable.AutoFlickDirection
+        contentWidth: root.usedRowSpace
+
         onSelectAll: selectionDelegateModel.selectAll()
         onSelectionUpdated: selectionDelegateModel.updateSelection( keyModifiers, oldIndex, newIndex )
         onActionAtIndex: root.actionForSelection( selectionDelegateModel.selectedIndexes )


=====================================
modules/gui/qt/widgets/qml/TableViewDelegate.qml
=====================================
@@ -40,10 +40,14 @@ T.Control {
 
     // Settings
 
-    width: view.width
+    width: Math.max(view.width, content.implicitWidth)
 
     height: root.rowHeight
 
+    leftPadding: Math.max(0, view.width - root.usedRowSpace) / 2
+
+    hoverEnabled: true
+    
     ListView.delayRemove: dragActive
 
     // Connections
@@ -70,142 +74,135 @@ T.Control {
         backgroundColor: {
             if (delegate.selected)
                 return VLCStyle.colors.gridSelect;
-            else if (hoverArea.containsMouse)
+            else if (delegate.hovered)
                 return VLCStyle.colors.listHover;
             else
                 return VLCStyle.colors.setColorAlpha(VLCStyle.colors.listHover, 0);
         }
-    }
 
-    contentItem: MouseArea {
-        id: hoverArea
+        MouseArea {
+            id: hoverArea
 
-        // Settings
+            // Settings
 
-        anchors.fill: parent
+            anchors.fill: parent
 
-        hoverEnabled: true
+            hoverEnabled: false
 
-        Keys.onMenuPressed: root.contextMenuButtonClicked(contextButton,rowModel)
+            Keys.onMenuPressed: root.contextMenuButtonClicked(contextButton,rowModel)
 
-        acceptedButtons: Qt.RightButton | Qt.LeftButton
+            acceptedButtons: Qt.RightButton | Qt.LeftButton
 
-        drag.target: root.dragItem
+            drag.target: root.dragItem
 
-        drag.axis: Drag.XAndYAxis
+            drag.axis: Drag.XAndYAxis
 
-        // Events
+            // Events
 
-        onPressed: _modifiersOnLastPress = mouse.modifiers
+            onPressed: _modifiersOnLastPress = mouse.modifiers
 
-        onClicked: {
-            if (mouse.button === Qt.LeftButton
-                ||
-                selectionDelegateModel.isSelected(root.model.index(index, 0)) == false) {
+            onClicked: {
+                if (mouse.button === Qt.LeftButton
+                    ||
+                    selectionDelegateModel.isSelected(root.model.index(index, 0)) == false) {
 
-                selectionDelegateModel.updateSelection(mouse.modifiers, view.currentIndex, index);
+                    selectionDelegateModel.updateSelection(mouse.modifiers, view.currentIndex, index);
 
-                view.currentIndex = index;
+                    view.currentIndex = index;
 
-                delegate.forceActiveFocus();
+                    delegate.forceActiveFocus();
+                }
+
+                if (mouse.button === Qt.RightButton)
+                    root.rightClick(delegate, rowModel, hoverArea.mapToGlobal(mouse.x, mouse.y));
             }
 
-            if (mouse.button === Qt.RightButton)
-                root.rightClick(delegate, rowModel, hoverArea.mapToGlobal(mouse.x, mouse.y));
-        }
+            onPositionChanged: {
+                if (drag.active == false)
+                    return;
 
-        onPositionChanged: {
-            if (drag.active == false)
-                return;
+                var pos = drag.target.parent.mapFromItem(hoverArea, mouseX, mouseY);
 
-            var pos = drag.target.parent.mapFromItem(hoverArea, mouseX, mouseY);
+                drag.target.x = pos.x + VLCStyle.dragDelta;
+                drag.target.y = pos.y + VLCStyle.dragDelta;
+            }
 
-            drag.target.x = pos.x + VLCStyle.dragDelta;
-            drag.target.y = pos.y + VLCStyle.dragDelta;
-        }
+            onDoubleClicked: {
+                if (mouse.button === Qt.LeftButton)
+                    root.itemDoubleClicked(delegate._index, rowModel)
+            }
 
-        onDoubleClicked: {
-            if (mouse.button === Qt.LeftButton)
-                root.itemDoubleClicked(delegate._index, rowModel)
-        }
+            drag.onActiveChanged: {
+                // NOTE: Perform the "click" action because the click action is only executed on mouse
+                //       release (we are in the pressed state) but we will need the updated list on drop.
+                if (drag.active
+                    &&
+                    selectionDelegateModel.isSelected(root.model.index(index, 0)) == false) {
+
+                    selectionDelegateModel.updateSelection(_modifiersOnLastPress, view.currentIndex,
+                                                           index);
+                } else if (root.dragItem) {
+                    root.dragItem.Drag.drop();
+                }
 
-        drag.onActiveChanged: {
-            // NOTE: Perform the "click" action because the click action is only executed on mouse
-            //       release (we are in the pressed state) but we will need the updated list on drop.
-            if (drag.active
-                &&
-                selectionDelegateModel.isSelected(root.model.index(index, 0)) == false) {
-
-                selectionDelegateModel.updateSelection(_modifiersOnLastPress, view.currentIndex,
-                                                       index);
-            } else if (root.dragItem) {
-                root.dragItem.Drag.drop();
+                root.dragItem.Drag.active = drag.active;
             }
-
-            root.dragItem.Drag.active = drag.active;
         }
+    }
 
-        // Childs
-
-        Row {
-            id: content
-
-            anchors.top   : parent.top
-            anchors.bottom: parent.bottom
-
-            anchors.leftMargin  : VLCStyle.margin_xxxsmall
-            anchors.rightMargin : VLCStyle.margin_xxxsmall
-            anchors.topMargin   : VLCStyle.margin_xxsmall
-            anchors.bottomMargin: VLCStyle.margin_xxsmall
-
-            anchors.horizontalCenter: parent.horizontalCenter
+    contentItem: Row {
+        id: content
 
-            anchors.horizontalCenterOffset: Math.round(-(root._contextButtonHorizontalSpace) / 2)
+        leftPadding: VLCStyle.margin_xxxsmall
+        rightPadding: VLCStyle.margin_xxxsmall
 
-            spacing: root.horizontalSpacing
+        spacing: root.horizontalSpacing
 
-            Repeater {
-                model: sortModel
+        Repeater {
+            model: sortModel
 
-                Loader{
-                    property var rowModel: delegate.rowModel
+            Loader{
+                property var rowModel: delegate.rowModel
 
-                    property var colModel: modelData
+                property var colModel: modelData
 
-                    readonly property int index: delegate._index
+                readonly property int index: delegate._index
 
-                    readonly property bool currentlyFocused: delegate.activeFocus
+                readonly property bool currentlyFocused: delegate.activeFocus
 
-                    readonly property bool containsMouse: hoverArea.containsMouse
+                readonly property bool containsMouse: hoverArea.containsMouse
 
-                    readonly property color foregroundColor: background.foregroundColor
+                readonly property color foregroundColor: background.foregroundColor
 
-                    width: (modelData.width) ? modelData.width : 0
+                width: (modelData.width) ? modelData.width : 0
 
-                    height: parent.height
+                height: parent.height
 
-                    sourceComponent: (colModel.colDelegate) ? colModel.colDelegate
-                                                            : root.colDelegate
-                }
+                sourceComponent: (colModel.colDelegate) ? colModel.colDelegate
+                                                        : root.colDelegate
             }
         }
 
-        ContextButton {
-            anchors.left: content.right
+        Item {
+            width: root._contextButtonHorizontalSpace
 
-            anchors.leftMargin: VLCStyle.margin_xxsmall
+            height: parent.height
 
-            anchors.verticalCenter: content.verticalCenter
+            ContextButton {
+                id: contextButton
 
-            color: background.foregroundColor
+                anchors.verticalCenter: parent.verticalCenter
 
-            backgroundColor: (hovered || activeFocus)
-                             ? VLCStyle.colors.getBgColor(delegate.selected, hovered, activeFocus)
-                             : "transparent"
+                color: background.foregroundColor
 
-            visible: hoverArea.containsMouse
+                backgroundColor: (hovered || activeFocus)
+                                 ? VLCStyle.colors.getBgColor(delegate.selected, hovered, activeFocus)
+                                 : "transparent"
 
-            onClicked: root.contextMenuButtonClicked(this, delegate.rowModel)
+                visible: delegate.hovered
+
+                onClicked: root.contextMenuButtonClicked(this, delegate.rowModel)
+            }
         }
     }
 }



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/793ffc25048f5df06b7d2bf88ddca2aee1503876...12d1d54909037f44acd198de345197184c28c9c2

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/793ffc25048f5df06b7d2bf88ddca2aee1503876...12d1d54909037f44acd198de345197184c28c9c2
You're receiving this email because of your account on code.videolan.org.




More information about the vlc-commits mailing list