[vlc-devel] [PATCH 42/49] qml: add a modal menu usable in the player.

Pierre Lamot pierre at videolabs.io
Fri Oct 11 15:18:06 CEST 2019


  * it's usable with keyboard and mouse
  * it folows the player theme
---
 modules/gui/qt/Makefile.am                   |   2 +
 modules/gui/qt/qml/player/PlayerMenu.qml     |  92 +++++++++++++
 modules/gui/qt/qml/player/PlayerMenuItem.qml | 130 +++++++++++++++++++
 modules/gui/qt/qml/style/VLCColors.qml       |   1 +
 modules/gui/qt/vlc.qrc                       |   2 +
 5 files changed, 227 insertions(+)
 create mode 100644 modules/gui/qt/qml/player/PlayerMenu.qml
 create mode 100644 modules/gui/qt/qml/player/PlayerMenuItem.qml

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 9b776f2331..27444c531a 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -561,6 +561,8 @@ libqt_plugin_la_QML = \
 	gui/qt/qml/player/ControlBar.qml \
 	gui/qt/qml/player/ControlButtons.qml \
 	gui/qt/qml/player/PlayerButtonsLayout.qml \
+	gui/qt/qml/player/PlayerMenu.qml \
+	gui/qt/qml/player/PlayerMenuItem.qml \
 	gui/qt/qml/player/VolumeWidget.qml \
 	gui/qt/qml/player/ModalControlBar.qml \
 	gui/qt/qml/player/SliderBar.qml \
diff --git a/modules/gui/qt/qml/player/PlayerMenu.qml b/modules/gui/qt/qml/player/PlayerMenu.qml
new file mode 100644
index 0000000000..acfb8f92a5
--- /dev/null
+++ b/modules/gui/qt/qml/player/PlayerMenu.qml
@@ -0,0 +1,92 @@
+/*****************************************************************************
+ * 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 QtQuick.Templates 2.4 as T
+import QtQuick.Layouts 1.3
+import QtQml.Models 2.11
+
+import org.videolan.vlc 0.1
+
+import "qrc:///style/"
+import "qrc:///utils/" as Utils
+
+T.Menu {
+    id: control
+
+    property var parentMenu: undefined
+    property bool _emitMenuClose: true
+    signal menuClosed()
+
+    font.pixelSize: VLCStyle.fontSize_normal
+
+    modal: true
+    cascade: false
+
+    x:0
+    y:0
+    width: parent.width / 4
+    height: parent.height
+    z: 1
+
+    delegate: PlayerMenuItem {
+        parentMenu: control
+    }
+
+    onOpened: {
+        control._emitMenuClose = true
+    }
+
+    onClosed: {
+        if (control._emitMenuClose) {
+            menuClosed()
+        }
+    }
+
+    contentItem: ListView {
+        header: Label {
+            text: control.title
+            color: VLCStyle.colors.playerFg
+            font.bold: true
+            font.pixelSize: VLCStyle.fontSize_xlarge
+            padding: VLCStyle.margin_xxsmall
+        }
+
+        keyNavigationEnabled: false
+
+        implicitWidth: contentWidth
+        implicitHeight: contentHeight
+        model: control.contentModel
+        clip: true
+        currentIndex: control.currentIndex
+
+        ScrollIndicator.vertical: ScrollIndicator {}
+    }
+
+    background: Rectangle {
+        color: VLCStyle.colors.playerBg
+        opacity: 0.8
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: "transparent"
+    }
+
+}
+
diff --git a/modules/gui/qt/qml/player/PlayerMenuItem.qml b/modules/gui/qt/qml/player/PlayerMenuItem.qml
new file mode 100644
index 0000000000..71476917b2
--- /dev/null
+++ b/modules/gui/qt/qml/player/PlayerMenuItem.qml
@@ -0,0 +1,130 @@
+/*****************************************************************************
+ * 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 QtQuick.Controls.impl 2.4
+import QtQuick.Templates 2.4 as T
+import QtQuick.Layouts 1.3
+import QtQml.Models 2.11
+
+import org.videolan.vlc 0.1
+
+import "qrc:///style/"
+import "qrc:///utils/" as Utils
+
+T.MenuItem {
+    id: control
+
+    //implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+    //                        implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: contentId.implicitHeight + topPadding + bottomPadding
+
+    padding: VLCStyle.margin_xsmall
+    spacing: VLCStyle.margin_xsmall
+
+    icon.width: VLCStyle.icon_small
+    icon.height: VLCStyle.icon_small
+    icon.color: enabled ? VLCStyle.colors.playerFg : VLCStyle.colors.playerFgInactive
+
+    font.pixelSize: VLCStyle.fontSize_normal
+
+
+    property var parentMenu: undefined
+
+    //workaround QTBUG-7018 for Qt < 5.12.2
+    activeFocusOnTab: control.enabled
+
+    indicator: ColorImage {
+        id: indicatorId
+
+        width: control.icon.width
+        height: control.icon.height
+
+        x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        visible: true
+        source: control.checked ? "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/check.png"
+                : icon.source ? icon.source
+                : ""
+        color: control.enabled ? VLCStyle.colors.playerFg : VLCStyle.colors.playerFgInactive
+    }
+
+    arrow: ColorImage {
+        x: control.mirrored ? control.padding : control.width - width - control.padding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        width: VLCStyle.icon_xsmall
+        height: VLCStyle.icon_xsmall
+
+        visible: control.subMenu
+        mirror: control.mirrored
+        color: control.enabled ? VLCStyle.colors.playerFg : VLCStyle.colors.playerFgInactive
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/arrow-indicator.png"
+    }
+
+    contentItem:  IconLabel {
+        id: contentId
+        implicitHeight: VLCStyle.fontHeight_normal
+
+        readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
+        readonly property real indicatorPadding: control.indicator.width + control.spacing
+        leftPadding: !control.mirrored ? indicatorPadding : arrowPadding
+        rightPadding: control.mirrored ? indicatorPadding : arrowPadding
+
+        width: parent.width
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        //icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? VLCStyle.colors.playerFg : VLCStyle.colors.playerFgInactive
+    }
+
+
+    background: Rectangle {
+        implicitHeight: VLCStyle.fontHeight_normal
+        color: control.highlighted ? VLCStyle.colors.accent : "transparent"
+    }
+
+    //hack around QTBUG-79115
+    Keys.priority: Keys.BeforeItem
+    Keys.onLeftPressed: {
+        if (parentMenu && parentMenu.parentMenu) {
+            parentMenu._emitMenuClose = false
+        }
+        event.accepted = false
+    }
+
+    Keys.onRightPressed:  {
+        if (parentMenu && subMenu) {
+            parentMenu._emitMenuClose = false
+        }
+        event.accepted = false
+    }
+    onTriggered: {
+        if (parentMenu && subMenu) {
+            parentMenu._emitMenuClose = false
+        }
+    }
+}
diff --git a/modules/gui/qt/qml/style/VLCColors.qml b/modules/gui/qt/qml/style/VLCColors.qml
index 19fe633e17..d0a9074b32 100644
--- a/modules/gui/qt/qml/style/VLCColors.qml
+++ b/modules/gui/qt/qml/style/VLCColors.qml
@@ -78,6 +78,7 @@ Item {
     property color videosGridInfoLeft: "grey"
 
     property color playerFg: "white"
+    property color playerFgInactive: "#888888"
     property color playerBg: "black"
     property color playerBorder: "#222222"
 
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 215ea35363..daf12bd2f5 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -271,6 +271,8 @@
         <file alias="MiniPlayer.qml">qml/player/MiniPlayer.qml</file>
         <file alias="TopBar.qml">qml/player/TopBar.qml</file>
         <file alias="PlayerButtonsLayout.qml">qml/player/PlayerButtonsLayout.qml</file>
+        <file alias="PlayerMenu.qml">qml/player/PlayerMenu.qml</file>
+        <file alias="PlayerMenuItem.qml">qml/player/PlayerMenuItem.qml</file>
     </qresource>
     <qresource prefix="/about">
         <file alias="About.qml">qml/about/About.qml</file>
-- 
2.20.1



More information about the vlc-devel mailing list