[vlc-devel] [PATCH 10/15] qml: Create TableViewDelegate

Benjamin Arnaud benjamin.arnaud at videolabs.io
Thu Mar 11 09:16:54 UTC 2021


---
 modules/gui/qt/Makefile.am                    |   1 +
 modules/gui/qt/vlc.qrc                        |   1 +
 .../qt/widgets/qml/KeyNavigableTableView.qml  | 125 +---------
 .../gui/qt/widgets/qml/TableViewDelegate.qml  | 222 ++++++++++++++++++
 4 files changed, 225 insertions(+), 124 deletions(-)
 create mode 100644 modules/gui/qt/widgets/qml/TableViewDelegate.qml

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 29bfe72510..bc98deb3b2 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -750,6 +750,7 @@ libqt_plugin_la_QML = \
 	gui/qt/widgets/qml/KeyNavigableGridView.qml \
 	gui/qt/widgets/qml/KeyNavigableListView.qml \
 	gui/qt/widgets/qml/KeyNavigableTableView.qml \
+	gui/qt/widgets/qml/TableViewDelegate.qml \
 	gui/qt/widgets/qml/LabelSeparator.qml \
 	gui/qt/widgets/qml/ListCoverShadow.qml \
 	gui/qt/widgets/qml/ListItem.qml \
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 1a82d79656..fb620c93bc 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -202,6 +202,7 @@
         <file alias="KeyNavigableListView.qml">widgets/qml/KeyNavigableListView.qml</file>
         <file alias="ToolTipArea.qml">widgets/qml/ToolTipArea.qml</file>
         <file alias="KeyNavigableTableView.qml">widgets/qml/KeyNavigableTableView.qml</file>
+        <file alias="TableViewDelegate.qml">widgets/qml/TableViewDelegate.qml</file>
         <file alias="TableColumns.qml">widgets/qml/TableColumns.qml</file>
         <file alias="TransparentSpinBox.qml">widgets/qml/TransparentSpinBox.qml</file>
         <file alias="NavigableFocusScope.qml">widgets/qml/NavigableFocusScope.qml</file>
diff --git a/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml b/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
index d148ae2aaf..2132206f57 100644
--- a/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
+++ b/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
@@ -200,130 +200,7 @@ NavigableFocusScope {
             color: VLCStyle.colors.accent
         }
 
-        delegate:Rectangle {
-            id: lineView
-
-            property var rowModel: model
-            property bool selected: selectionDelegateModel.isSelected(root.model.index(index, 0))
-            readonly property bool highlighted: selected || hoverArea.containsMouse || activeFocus
-            readonly property color foregroundColor: highlighted ? VLCStyle.colors.bgHoverText : VLCStyle.colors.text
-            readonly property int _index: index
-            property int _modifiersOnLastPress: Qt.NoModifier
-
-            width: view.width
-            height: root.rowHeight
-            color: highlighted ? VLCStyle.colors.bgHover : "transparent"
-
-            Connections {
-                target: selectionDelegateModel
-                onSelectionChanged: lineView.selected = selectionDelegateModel.isSelected(root.model.index(index, 0))
-            }
-
-            MouseArea {
-                id: hoverArea
-                anchors.fill: parent
-                hoverEnabled: true
-                Keys.onMenuPressed: root.contextMenuButtonClicked(contextButton,rowModel)
-                acceptedButtons: Qt.RightButton | Qt.LeftButton
-                drag.target: root.dragItem
-                drag.axis: Drag.XAndYAxis
-                drag.onActiveChanged: {
-                    // 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))) {
-                        selectionDelegateModel.updateSelection(_modifiersOnLastPress , view.currentIndex, index)
-                    } else if (root.dragItem) {
-                        root.dragItem.Drag.drop()
-                    }
-                    root.dragItem.Drag.active = drag.active
-                }
-
-                onPressed: _modifiersOnLastPress = mouse.modifiers
-
-                onClicked: {
-                    if (mouse.button === Qt.LeftButton || !selectionDelegateModel.isSelected(root.model.index(index, 0))) {
-                        selectionDelegateModel.updateSelection( mouse.modifiers , view.currentIndex, index)
-                        view.currentIndex = rowModel.index
-                        lineView.forceActiveFocus()
-                    }
-
-                    if (mouse.button === Qt.RightButton){
-                        root.rightClick(lineView,rowModel, hoverArea.mapToGlobal(mouse.x,mouse.y) )
-                    }
-                }
-
-                onPositionChanged: {
-                    if (drag.active) {
-                        var pos = drag.target.parent.mapFromItem(hoverArea, mouseX, mouseY)
-                        drag.target.x = pos.x + 12
-                        drag.target.y = pos.y + 12
-                    }
-                }
-
-                onDoubleClicked: {
-                    actionForSelection(selectionDelegateModel.selectedIndexes)
-                    root.itemDoubleClicked(model)
-                }
-
-                Row {
-                    id: content
-
-                    anchors {
-                        topMargin: VLCStyle.margin_xxsmall
-                        bottomMargin: VLCStyle.margin_xxsmall
-                        leftMargin: VLCStyle.margin_xxxsmall
-                        rightMargin: VLCStyle.margin_xxxsmall
-                        horizontalCenter: parent.horizontalCenter
-                        horizontalCenterOffset: - root._contextButtonHorizontalSpace / 2
-                        top: parent.top
-                        bottom: parent.bottom
-                    }
-
-                    spacing: root.horizontalSpacing
-
-                    Repeater {
-                        model: sortModel
-
-                        Item {
-                            height: parent.height
-                            width: modelData.width || 1
-                            Layout.alignment: Qt.AlignVCenter
-
-                            SmoothedAnimation on width {
-                                duration: 256
-                                easing.type: Easing.OutCubic
-                            }
-
-                            Loader{
-                                property var rowModel: lineView.rowModel
-                                property var colModel: modelData
-                                readonly property bool currentlyFocused: lineView.activeFocus
-                                readonly property bool containsMouse: hoverArea.containsMouse
-                                readonly property color foregroundColor: lineView.foregroundColor
-                                readonly property int index: lineView._index
-
-                                anchors.fill: parent
-                                sourceComponent: colModel.colDelegate || root.colDelegate
-
-                            }
-                        }
-                    }
-                }
-
-                Widgets.ContextButton {
-                    anchors.left: content.right
-                    anchors.leftMargin: VLCStyle.margin_xxsmall
-                    anchors.verticalCenter: content.verticalCenter
-                    color: lineView.foregroundColor
-                    backgroundColor: hovered || activeFocus ?
-                                         VLCStyle.colors.getBgColor( lineView.selected, hovered,
-                                                                     activeFocus ) : "transparent"
-
-                    onClicked: root.contextMenuButtonClicked(this,  lineView.rowModel)
-                    visible: hoverArea.containsMouse
-                }
-            }
-        }
+        delegate: TableViewDelegate {}
 
         onSelectAll: selectionDelegateModel.selectAll()
         onSelectionUpdated: selectionDelegateModel.updateSelection( keyModifiers, oldIndex, newIndex )
diff --git a/modules/gui/qt/widgets/qml/TableViewDelegate.qml b/modules/gui/qt/widgets/qml/TableViewDelegate.qml
new file mode 100644
index 0000000000..e7c4f94b70
--- /dev/null
+++ b/modules/gui/qt/widgets/qml/TableViewDelegate.qml
@@ -0,0 +1,222 @@
+/*****************************************************************************
+ * Copyright (C) 2021 VLC authors and VideoLAN
+ *
+ * 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
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+import QtQuick         2.11
+import QtQuick.Layouts 1.3
+
+import "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+Rectangle {
+    id: delegate
+
+    //---------------------------------------------------------------------------------------------
+    // Properties
+    //---------------------------------------------------------------------------------------------
+
+    property var rowModel: model
+
+    property bool selected: selectionDelegateModel.isSelected(root.model.index(index, 0))
+
+    readonly property bool highlighted: (selected || hoverArea.containsMouse || activeFocus)
+
+    readonly property int _index: index
+
+    property int _modifiersOnLastPress: Qt.NoModifier
+
+    readonly property color foregroundColor: (highlighted) ? VLCStyle.colors.bgHoverText
+                                                           : VLCStyle.colors.text
+
+    //---------------------------------------------------------------------------------------------
+    // Settings
+    //---------------------------------------------------------------------------------------------
+
+    width: view.width
+
+    height: root.rowHeight
+
+    color: (highlighted) ? VLCStyle.colors.bgHover
+                         : "transparent"
+
+    //---------------------------------------------------------------------------------------------
+    // Connections
+    //---------------------------------------------------------------------------------------------
+
+    Connections {
+        target: selectionDelegateModel
+
+        onSelectionChanged: {
+            delegate.selected = selectionDelegateModel.isSelected(root.model.index(index, 0));
+        }
+    }
+
+    //---------------------------------------------------------------------------------------------
+    // Childs
+    //---------------------------------------------------------------------------------------------
+
+    MouseArea {
+        id: hoverArea
+
+        //-----------------------------------------------------------------------------------------
+        // Settings
+
+        anchors.fill: parent
+
+        hoverEnabled: true
+
+        Keys.onMenuPressed: root.contextMenuButtonClicked(contextButton,rowModel)
+
+        acceptedButtons: Qt.RightButton | Qt.LeftButton
+
+        drag.target: root.dragItem
+
+        drag.axis: Drag.XAndYAxis
+
+        //-----------------------------------------------------------------------------------------
+        // Events
+
+        onPressed: _modifiersOnLastPress = mouse.modifiers
+
+        onClicked: {
+            if (mouse.button === Qt.LeftButton
+                ||
+                selectionDelegateModel.isSelected(root.model.index(index, 0)) == false) {
+
+                selectionDelegateModel.updateSelection(mouse.modifiers, view.currentIndex, index);
+
+                view.currentIndex = rowModel.index;
+
+                delegate.forceActiveFocus();
+            }
+
+            if (mouse.button === Qt.RightButton)
+                root.rightClick(delegate, rowModel, hoverArea.mapToGlobal(mouse.x, mouse.y));
+        }
+
+        onPositionChanged: {
+            if (drag.active == false)
+                return;
+
+            var pos = drag.target.parent.mapFromItem(hoverArea, mouseX, mouseY);
+
+            // FIXME: Shouldn't this be specified in VLCStyle ?
+            var delta = VLCStyle.dp(12);
+
+            drag.target.x = pos.x + delta;
+            drag.target.y = pos.y + delta;
+        }
+
+        onDoubleClicked: {
+            actionForSelection(selectionDelegateModel.selectedIndexes);
+
+            root.itemDoubleClicked(root.model);
+        }
+
+        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;
+        }
+
+        //-----------------------------------------------------------------------------------------
+        // 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
+
+            anchors.horizontalCenterOffset: Math.round(-(root._contextButtonHorizontalSpace) / 2)
+
+            spacing: root.horizontalSpacing
+
+            Repeater {
+                model: sortModel
+
+                Item {
+                    height: parent.height
+
+                    width: (modelData.width) ? modelData.width
+                                             : 1
+
+                    Layout.alignment: Qt.AlignVCenter
+
+                    SmoothedAnimation on width {
+                        duration: 256
+
+                        easing.type: Easing.OutCubic
+                    }
+
+                    Loader{
+                        property var rowModel: delegate.rowModel
+                        property var colModel: modelData
+
+                        readonly property int index: delegate._index
+
+                        readonly property bool currentlyFocused: delegate.activeFocus
+
+                        readonly property bool containsMouse: hoverArea.containsMouse
+
+                        readonly property color foregroundColor: delegate.foregroundColor
+
+                        anchors.fill: parent
+
+                        sourceComponent: (colModel.colDelegate) ? colModel.colDelegate
+                                                                : root.colDelegate
+                    }
+                }
+            }
+        }
+
+        Widgets.ContextButton {
+            anchors.left: content.right
+
+            anchors.leftMargin: VLCStyle.margin_xxsmall
+
+            anchors.verticalCenter: content.verticalCenter
+
+            color: delegate.foregroundColor
+
+            backgroundColor: (hovered || activeFocus)
+                             ? VLCStyle.colors.getBgColor(delegate.selected, hovered, activeFocus)
+                             : "transparent"
+
+            visible: hoverArea.containsMouse
+
+            onClicked: root.contextMenuButtonClicked(this,  delegate.rowModel)
+        }
+    }
+}
-- 
2.25.1



More information about the vlc-devel mailing list