[vlc-devel] [PATCH 08/49] qml: remove the overlay above grid items

Pierre Lamot pierre at videolabs.io
Fri Oct 11 15:17:32 CEST 2019


---
 modules/gui/qt/Makefile.am                    |   3 +-
 .../gui/qt/qml/mediacenter/AudioGridItem.qml  |   3 +-
 .../MCNetworksSectionSelectableDM.qml         |  25 ++-
 .../gui/qt/qml/mediacenter/MCVideoDisplay.qml |  18 ++-
 .../mediacenter/NetworkFileDisplayGrid.qml    |  62 --------
 ...iveDisplayGrid.qml => NetworkGridItem.qml} |  33 +---
 .../gui/qt/qml/mediacenter/VideoGridItem.qml  |   4 +-
 modules/gui/qt/qml/utils/GridItem.qml         | 149 ++----------------
 modules/gui/qt/vlc.qrc                        |   3 +-
 9 files changed, 52 insertions(+), 248 deletions(-)
 delete mode 100644 modules/gui/qt/qml/mediacenter/NetworkFileDisplayGrid.qml
 rename modules/gui/qt/qml/mediacenter/{NetworkDriveDisplayGrid.qml => NetworkGridItem.qml} (70%)

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 9aa28173a8..2a3281b32d 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -632,8 +632,7 @@ libqt_plugin_la_QML = \
 	gui/qt/qml/mediacenter/MusicTrackListDisplay.qml \
 	gui/qt/qml/mediacenter/NetworkDriveDisplay.qml \
 	gui/qt/qml/mediacenter/NetworkFileDisplay.qml \
-	gui/qt/qml/mediacenter/NetworkFileDisplayGrid.qml \
-	gui/qt/qml/mediacenter/NetworkDriveDisplayGrid.qml \
+	gui/qt/qml/mediacenter/NetworkGridItem.qml \
 	gui/qt/qml/mediacenter/NetworkListItem.qml \
 	gui/qt/qml/mediacenter/VideoExpandableGrid.qml \
 	gui/qt/qml/mediacenter/VideoGridItem.qml \
diff --git a/modules/gui/qt/qml/mediacenter/AudioGridItem.qml b/modules/gui/qt/qml/mediacenter/AudioGridItem.qml
index cfec1c8c70..76973fc87d 100644
--- a/modules/gui/qt/qml/mediacenter/AudioGridItem.qml
+++ b/modules/gui/qt/qml/mediacenter/AudioGridItem.qml
@@ -30,6 +30,5 @@ Utils.GridItem {
     isVideo: false
     pictureWidth: VLCStyle.cover_normal
     pictureHeight: VLCStyle.cover_normal
-    onPlayClicked: if ( model.id !== undefined ) { medialib.addAndPlay( model.id ) }
-    onAddToPlaylistClicked : if ( model.id !== undefined ) { medialib.addToPlaylist( model.id ) }
+    onItemDoubleClicked: if ( model.id !== undefined ) { medialib.addAndPlay( model.id ) }
 }
diff --git a/modules/gui/qt/qml/mediacenter/MCNetworksSectionSelectableDM.qml b/modules/gui/qt/qml/mediacenter/MCNetworksSectionSelectableDM.qml
index 2fb1deb456..b398838acd 100644
--- a/modules/gui/qt/qml/mediacenter/MCNetworksSectionSelectableDM.qml
+++ b/modules/gui/qt/qml/mediacenter/MCNetworksSectionSelectableDM.qml
@@ -31,13 +31,28 @@ Utils.SelectableDelegateModel {
     property string viewIndexPropertyName: "currentIndex"
     delegate: Package {
         id: element
-        Loader {
-            id: delegateLoaderGrid
+        NetworkGridItem {
+            id: delegateGrid
             focus: true
             Package.name: "grid"
-            source: model.type == MLNetworkModel.TYPE_FILE ?
-                        "qrc:///mediacenter/NetworkFileDisplayGrid.qml" :
-                        "qrc:///mediacenter/NetworkDriveDisplayGrid.qml";
+
+            onItemClicked : {
+                delegateModel.updateSelection( modifier ,  view[viewIndexPropertyName], index)
+                view[viewIndexPropertyName] = index
+                delegateGrid.forceActiveFocus()
+            }
+
+            onItemDoubleClicked: {
+                if (model.type === MLNetworkModel.TYPE_NODE || model.type === MLNetworkModel.TYPE_DIRECTORY)
+                    history.push( ["mc", "network", { tree: model.tree } ], History.Go)
+                else
+                    medialib.addAndPlay( model.mrl )
+            }
+
+            onContextMenuButtonClicked: {
+                contextMenu.model = model
+                contextMenu.popup(menuParent)
+            }
         }
 
         Loader {
diff --git a/modules/gui/qt/qml/mediacenter/MCVideoDisplay.qml b/modules/gui/qt/qml/mediacenter/MCVideoDisplay.qml
index 2e7b208fbb..1ee788336b 100644
--- a/modules/gui/qt/qml/mediacenter/MCVideoDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MCVideoDisplay.qml
@@ -127,11 +127,12 @@ Utils.NavigableFocusScope {
             delegate: VideoGridItem {
                 id: videoGridItem
 
+                onContextMenuButtonClicked: {
+                    contextMenu.model = videoGridItem.model
+                    contextMenu.popup(menuParent)
+                }
+
                 onItemClicked : {
-                    if (key == Qt.RightButton){
-                        contextMenu.model = videoGridItem.model
-                        contextMenu.popup(menuParent)
-                    }
                     videosDelegate.updateSelection( modifier , videosGV.currentIndex, index)
                     videosGV.currentIndex = index
                     videosGV.forceActiveFocus()
@@ -142,10 +143,10 @@ Utils.NavigableFocusScope {
             navigationParent: root
 
             /*
-                         *define the intial position/selection
-                         * This is done on activeFocus rather than Component.onCompleted because videosDelegate.
-                         * selectedGroup update itself after this event
-                         */
+             *define the intial position/selection
+             * This is done on activeFocus rather than Component.onCompleted because videosDelegate.
+             * selectedGroup update itself after this event
+             */
             onActiveFocusChanged: {
                 if (activeFocus && videosDelegate.items.count > 0 && videosDelegate.selectedGroup.count === 0) {
                     videosDelegate.items.get(0).inSelected = true
@@ -166,6 +167,7 @@ Utils.NavigableFocusScope {
                 contextMenu.model = menuModel
                 contextMenu.popup(menuParent,contextMenu.width,0)
             }
+
             onRightClick:{
                 contextMenu.model = menuModel
                 contextMenu.popup(menuParent)
diff --git a/modules/gui/qt/qml/mediacenter/NetworkFileDisplayGrid.qml b/modules/gui/qt/qml/mediacenter/NetworkFileDisplayGrid.qml
deleted file mode 100644
index 30a2715cee..0000000000
--- a/modules/gui/qt/qml/mediacenter/NetworkFileDisplayGrid.qml
+++ /dev/null
@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Copyright (C) 2019 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.Controls 2.4
-import QtQml.Models 2.2
-
-import org.videolan.medialib 0.1
-
-import "qrc:///utils/" as Utils
-import "qrc:///style/"
-
-Utils.GridItem {
-    id: item
-
-    pictureWidth: VLCStyle.network_normal
-    pictureHeight: VLCStyle.network_normal
-    image: "qrc:///type/file_black.svg"
-    subtitle: model.mrl || ""
-    title: model.name || qsTr("Unknown share")
-    focus: true
-
-    selected: element.DelegateModel.inSelected
-    onItemClicked : {
-        if (key == Qt.RightButton){
-            contextMenu.model = model
-            contextMenu.popup(menuParent)
-        }
-        delegateModel.updateSelection( modifier , view[viewIndexPropertyName], index)
-        view[viewIndexPropertyName] = index
-        item.forceActiveFocus()
-    }
-    showContextButton: true
-
-    onItemDoubleClicked: {
-        medialib.addAndPlay( model.mrl )
-    }
-    onPlayClicked: {
-        medialib.addAndPlay( model.mrl )
-    }
-    onAddToPlaylistClicked: {
-        medialib.addToPlaylist( model.mrl );
-    }
-    onContextMenuButtonClicked: {
-        contextMenu.model = model
-        contextMenu.popup(menuParent)
-    }
-}
diff --git a/modules/gui/qt/qml/mediacenter/NetworkDriveDisplayGrid.qml b/modules/gui/qt/qml/mediacenter/NetworkGridItem.qml
similarity index 70%
rename from modules/gui/qt/qml/mediacenter/NetworkDriveDisplayGrid.qml
rename to modules/gui/qt/qml/mediacenter/NetworkGridItem.qml
index 7c557367a7..a185406d5a 100644
--- a/modules/gui/qt/qml/mediacenter/NetworkDriveDisplayGrid.qml
+++ b/modules/gui/qt/qml/mediacenter/NetworkGridItem.qml
@@ -27,9 +27,11 @@ import "qrc:///style/"
 
 Utils.GridItem {
     id: item
-    function getImage(type){
-        switch (type){
 
+    pictureWidth: VLCStyle.network_normal
+    pictureHeight: VLCStyle.network_normal
+    image: {
+        switch (model.type){
         case MLNetworkModel.TYPE_DISC:
             return  "qrc:///type/disc.svg"
         case MLNetworkModel.TYPE_CARD:
@@ -38,36 +40,13 @@ Utils.GridItem {
             return  "qrc:///type/stream.svg"
         case MLNetworkModel.TYPE_PLAYLIST:
             return  "qrc:///type/playlist.svg"
-
+        case MLNetworkModel.TYPE_FILE:
+            return  "qrc:///type/file_black.svg"
         default:
             return "qrc:///type/directory_black.svg"
         }
     }
-    pictureWidth: VLCStyle.network_normal
-    pictureHeight: VLCStyle.network_normal
-    image: item.getImage(model.type)
     subtitle: model.mrl
     title: model.name || qsTr("Unknown share")
-    focus: true
-    onItemClicked : {
-        if (key == Qt.RightButton){
-            contextMenu.model = model
-            contextMenu.popup(menuParent)
-        }
-        delegateModel.updateSelection( modifier ,  view[viewIndexPropertyName], index)
-        view[viewIndexPropertyName] = index
-        item.forceActiveFocus()
-    }
-    noActionButtons: true
     showContextButton: true
-    
-    onAddToPlaylistClicked: model.indexed = !model.indexed
-    onContextMenuButtonClicked: {
-        contextMenu.model = model
-        contextMenu.popup(menuParent)
-    }
-
-    onItemDoubleClicked: {
-        history.push( ["mc", "network", { tree: model.tree } ], History.Go)
-    }
 }
diff --git a/modules/gui/qt/qml/mediacenter/VideoGridItem.qml b/modules/gui/qt/qml/mediacenter/VideoGridItem.qml
index 9408491152..90f4299b5e 100644
--- a/modules/gui/qt/qml/mediacenter/VideoGridItem.qml
+++ b/modules/gui/qt/qml/mediacenter/VideoGridItem.qml
@@ -31,9 +31,9 @@ Utils.GridItem {
     channel: model.channel || ""
     isVideo: true
     isNew: model.playcount < 1
+    showContextButton: true
     progress: model.saved_position > 0 ? model.saved_position : 0
     pictureWidth: VLCStyle.video_normal_width
     pictureHeight: VLCStyle.video_normal_height
-    onPlayClicked: if ( model.id !== undefined ) { medialib.addAndPlay( model.id ) }
-    onAddToPlaylistClicked : if ( model.id !== undefined ) { medialib.addToPlaylist( model.id ) }
+    onItemDoubleClicked: if ( model.id !== undefined ) { medialib.addAndPlay( model.id ) }
 }
diff --git a/modules/gui/qt/qml/utils/GridItem.qml b/modules/gui/qt/qml/utils/GridItem.qml
index 7d831cde4c..16079268c9 100644
--- a/modules/gui/qt/qml/utils/GridItem.qml
+++ b/modules/gui/qt/qml/utils/GridItem.qml
@@ -33,7 +33,6 @@ Rectangle {
     property string title: ""
     property string subtitle: ""
     property bool selected: false
-    property bool noActionButtons: false
     property bool showContextButton: isVideo
 
     property alias sourceSize: cover.sourceSize
@@ -41,7 +40,7 @@ Rectangle {
     property string resolution: ""
     property bool isVideo: false
     property bool isNew: false
-    property double progress: 0.5
+    property double progress: 0
     property string channel: ""
     property real pictureWidth: isVideo ? VLCStyle.video_normal_width : VLCStyle.cover_small
     property real pictureHeight: isVideo ? VLCStyle.video_normal_height : VLCStyle.cover_small
@@ -66,9 +65,16 @@ Rectangle {
         MouseArea {
             id: mouseArea
             hoverEnabled: true
-            onClicked: root.itemClicked(cover_bg,mouse.button, mouse.modifiers)
-            onDoubleClicked: root.itemDoubleClicked(cover_bg,mouse.buttons,
-                                                    mouse.modifiers)
+            onClicked: {
+                if (mouse.button === Qt.RightButton)
+                    contextMenuButtonClicked(cover_bg);
+                else {
+                    root.itemClicked(cover_bg,mouse.button, mouse.modifiers);
+                }
+            }
+            onDoubleClicked: {
+                root.itemDoubleClicked(cover_bg,mouse.buttons, mouse.modifiers)
+            }
             width: childrenRect.width
             height: childrenRect.height
             acceptedButtons: Qt.RightButton | Qt.LeftButton
@@ -108,104 +114,7 @@ Rectangle {
                                 velocity: 100
                             }
                         }
-                        Rectangle {
-                            id: overlay
-                            anchors.fill: parent
-                            color: "black" //darken the image below
-
-                            RowLayout {
-                                anchors.fill: parent
-                                visible: !noActionButtons
-                                Item {
-                                    id: plusItem
-                                    Layout.fillHeight: true
-                                    Layout.fillWidth: true
-                                    /* A addToPlaylist button visible when hovered */
-                                    Text {
-                                        id: plusIcon
-                                        property int iconSize: VLCStyle.icon_large
-                                        Behavior on iconSize {
-                                            SmoothedAnimation {
-                                                velocity: 100
-                                            }
-                                        }
-                                        Binding on iconSize {
-                                            value: VLCStyle.icon_large * 1.2
-                                            when: mouseAreaAdd.containsMouse
-                                        }
-
-                                        //Layout.alignment: Qt.AlignCenter
-                                        anchors.centerIn: parent
-                                        text: VLCIcons.add
-                                        font.family: VLCIcons.fontFamily
-                                        horizontalAlignment: Text.AlignHCenter
-                                        color: mouseAreaAdd.containsMouse ? "white" : "lightgray"
-                                        font.pixelSize: iconSize
-
-                                        MouseArea {
-                                            id: mouseAreaAdd
-                                            anchors.fill: parent
-                                            hoverEnabled: true
-                                            propagateComposedEvents: true
-                                            onClicked: root.addToPlaylistClicked()
-                                        }
-                                    }
-                                    Text {
-                                        anchors {
-                                            top: plusIcon.bottom
-                                        }
-                                        anchors.horizontalCenter: plusItem.horizontalCenter
-                                        font.pixelSize: root.isVideo ? VLCStyle.fontSize_normal : VLCStyle.fontSize_small
-                                        text: qsTr("Enqueue")
-                                        color: "white"
-                                    }
-                                }
-
-                                /* A play button visible when hovered */
-                                Item {
-                                    id: playItem
-                                    Layout.fillHeight: true
-                                    Layout.fillWidth: true
-
-                                    Text {
-                                        id: playIcon
-                                        property int iconSize: VLCStyle.icon_large
-                                        Behavior on iconSize {
-                                            SmoothedAnimation {
-                                                velocity: 100
-                                            }
-                                        }
-                                        Binding on iconSize {
-                                            value: VLCStyle.icon_large * 1.2
-                                            when: mouseAreaPlay.containsMouse
-                                        }
 
-                                        anchors.centerIn: parent
-                                        text: VLCIcons.play
-                                        font.family: VLCIcons.fontFamily
-                                        horizontalAlignment: Text.AlignHCenter
-                                        color: mouseAreaPlay.containsMouse ? "white" : "lightgray"
-                                        font.pixelSize: iconSize
-
-                                        MouseArea {
-                                            id: mouseAreaPlay
-                                            anchors.fill: parent
-                                            hoverEnabled: true
-                                            onClicked: root.playClicked()
-                                        }
-                                    }
-                                    Text {
-                                        anchors {
-                                            top: playIcon.bottom
-                                        }
-                                        anchors.horizontalCenter: playItem.horizontalCenter
-                                        font.pixelSize: root.isVideo ? VLCStyle.fontSize_normal : VLCStyle.fontSize_small
-                                        text: qsTr("Play")
-                                        color: "white"
-                                    }
-                                }
-                            }
-                        }
                         VideoProgressBar {
                             value: root.progress
                             visible: isVideo
@@ -252,10 +161,6 @@ Rectangle {
                     states: [
                         State {
                             name: "visiblebig"
-                            PropertyChanges {
-                                target: overlay
-                                visible: true
-                            }
                             PropertyChanges {
                                 target: cover
                                 anchors.margins: VLCStyle.margin_xxsmall
@@ -264,10 +169,6 @@ Rectangle {
                         },
                         State {
                             name: "hiddenbig"
-                            PropertyChanges {
-                                target: overlay
-                                visible: false
-                            }
                             PropertyChanges {
                                 target: cover
                                 anchors.margins: VLCStyle.margin_xxsmall
@@ -277,10 +178,6 @@ Rectangle {
                         },
                         State {
                             name: "hiddensmall"
-                            PropertyChanges {
-                                target: overlay
-                                visible: false
-                            }
                             PropertyChanges {
                                 target: cover
                                 anchors.margins: VLCStyle.margin_xsmall
@@ -289,30 +186,6 @@ Rectangle {
                                   && !picture.highlighted
                         }
                     ]
-                    transitions: [
-                        Transition {
-                            from: "hiddenbig"
-                            to: "visiblebig"
-                            NumberAnimation {
-                                target: overlay
-                                properties: "opacity"
-                                from: 0
-                                to: 0.8
-                                duration: 300
-                            }
-                        },
-                        Transition {
-                            from: "hiddensmall"
-                            to: "visiblebig"
-                            NumberAnimation {
-                                target: overlay
-                                properties: "opacity"
-                                from: 0
-                                to: 0.8
-                                duration: 300
-                            }
-                        }
-                    ]
                 }
             }
 
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index e4352babf0..7d3aa4c301 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -221,11 +221,10 @@
         <file alias="MCMainDisplay.qml">qml/mediacenter/MCMainDisplay.qml</file>
         <file alias="NetworkDriveDisplay.qml">qml/mediacenter/NetworkDriveDisplay.qml</file>
         <file alias="NetworkFileDisplay.qml">qml/mediacenter/NetworkFileDisplay.qml</file>
+        <file alias="NetworkGridItem.qml">qml/mediacenter/NetworkGridItem.qml</file>
         <file alias="NetworkListItem.qml">qml/mediacenter/NetworkListItem.qml</file>
         <file alias="VideoExpandableGrid.qml">qml/mediacenter/VideoExpandableGrid.qml</file>
         <file alias="MCVideoListDisplay.qml">qml/mediacenter/MCVideoListDisplay.qml</file>
-        <file alias="NetworkFileDisplayGrid.qml">qml/mediacenter/NetworkFileDisplayGrid.qml</file>
-        <file alias="NetworkDriveDisplayGrid.qml">qml/mediacenter/NetworkDriveDisplayGrid.qml</file>
         <file alias="VideoGridItem.qml">qml/mediacenter/VideoGridItem.qml</file>
         <file alias="AudioGridItem.qml">qml/mediacenter/AudioGridItem.qml</file>
     </qresource>
-- 
2.20.1



More information about the vlc-devel mailing list