[vlc-devel] [PATCH 11/16] qml: Add the editor dialog

Rohan Rajpal rohan17089 at iiitd.ac.in
Wed Jul 31 14:30:51 CEST 2019


Add the main editor dialog
---
 modules/gui/qt/Makefile.am                   |   1 +
 modules/gui/qt/qml/dialogs/ToolbarEditor.qml | 232 +++++++++++++++++++
 modules/gui/qt/qml/menus/ToolsMenu.qml       |   1 +
 modules/gui/qt/qml/player/ControlBar.qml     |  11 +-
 modules/gui/qt/qml/style/VLCStyle.qml        |   2 +-
 modules/gui/qt/vlc.qrc                       |   1 +
 6 files changed, 242 insertions(+), 6 deletions(-)
 create mode 100644 modules/gui/qt/qml/dialogs/ToolbarEditor.qml

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index b3f777c134..5842b1fcbd 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -562,6 +562,7 @@ libqt_plugin_la_QML = \
 	gui/qt/qml/dialogs/EditorDummyButton.qml \
 	gui/qt/qml/dialogs/EditorDNDDelegate.qml \
 	gui/qt/qml/dialogs/ToolbarEditorButtonList.qml \
+	gui/qt/qml/dialogs/ToolbarEditor.qml \
 	gui/qt/qml/utils/DNDLabel.qml \
 	gui/qt/qml/utils/ToolTipArea.qml \
 	gui/qt/qml/utils/DrawerExt.qml \
diff --git a/modules/gui/qt/qml/dialogs/ToolbarEditor.qml b/modules/gui/qt/qml/dialogs/ToolbarEditor.qml
new file mode 100644
index 0000000000..f8d077eeae
--- /dev/null
+++ b/modules/gui/qt/qml/dialogs/ToolbarEditor.qml
@@ -0,0 +1,232 @@
+/*****************************************************************************
+ * 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.Layouts 1.3
+
+import org.videolan.vlc 0.1
+
+import "qrc:///player/" as Player
+import "qrc:///style/"
+
+Rectangle{
+    id: root
+    color: VLCStyle.colors.bg
+
+    ColumnLayout{
+        anchors.fill: parent
+        spacing: 0
+
+        ColumnLayout{
+            Layout.preferredHeight: VLCStyle.heightBar_large
+            Layout.fillWidth: true
+            spacing: 0
+
+            Text {
+                id: dndHint
+                Layout.topMargin: VLCStyle.margin_xxsmall
+                Layout.leftMargin: VLCStyle.margin_xxsmall
+                text: qsTr("Drag and drop the items below: ")
+                font.pointSize: VLCStyle.fontHeight_xsmall
+                color: VLCStyle.colors.buttonText
+            }
+            Rectangle{
+                Layout.preferredHeight: VLCStyle.heightBar_large
+                Layout.fillWidth: true
+                Layout.margins: VLCStyle.margin_xxsmall
+                border.width: 1
+                border.color: VLCStyle.colors.buttonText
+                color: "transparent"
+
+                ListView {
+                    id: playerBtnDND
+                    anchors{
+                        fill: parent
+                        margins: VLCStyle.heightBar_xxsmall
+                    }
+                    spacing: VLCStyle.margin_xxsmall
+                    orientation: Qt.Horizontal
+                    clip: true
+                    property bool deleteBtn: false
+                    property bool addBtn: false
+                    onDeleteBtnChanged: {
+                        if(deleteBtn)
+                            toolbareditor.deleteCursor()
+                        else
+                            toolbareditor.restoreCursor()
+                    }
+
+                    ScrollBar.horizontal: ScrollBar {}
+
+                    footer: Item {
+                        height: VLCStyle.icon_medium
+                        width: height
+                        property bool dropVisible: false
+                        Rectangle {
+                            z: 2
+                            width: 2 * scale
+                            height: parent.height
+                            anchors {
+                                left: parent.left
+                            }
+                            antialiasing: true
+                            visible: dropVisible
+                            color: VLCStyle.colors.accent
+                        }
+                        DropArea {
+                            anchors.fill: parent
+
+                            onEntered: {
+                                dropVisible = true
+                                playerBtnDND.deleteBtn = false
+                            }
+
+                            onExited: {
+                                dropVisible = false
+                                playerBtnDND.deleteBtn = true
+                            }
+
+                            onDropped: {
+                                if (drag.source.objectName == "buttonsList"){
+                                    playerBtnDND.model.insert(playerBtnDND.count,
+                                                             {"id" : drag.source.mIndex,
+                                                                 "size": bigButton.checked ?
+                                                                             PlayerControlBarModel.WIDGET_BIG :
+                                                                             PlayerControlBarModel.WIDGET_NORMAL})
+                                }
+                                else
+                                    playerBtnDND.model.move(
+                                                drag.source.DelegateModel.itemsIndex,
+                                                playerBtnDND.count-1)
+                                dropVisible = false
+                            }
+                        }
+
+                    }
+
+                    model: playerControlBarModel
+                    delegate: EditorDNDDelegate {}
+                    displaced: Transition {
+                        NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
+                    }
+                }
+            }
+        }
+
+        Rectangle{
+            id : allBtnsGrid
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.margins: VLCStyle.margin_xxsmall
+            border.color: VLCStyle.colors.buttonText
+            border.width: 1
+            color: "transparent"
+
+            ColumnLayout{
+                anchors.fill: parent
+
+                CheckBox{
+                    id: bigButton
+                    text: qsTr("Big Buttons")
+                    Layout.preferredHeight: VLCStyle.heightBar_small
+                    Layout.margins: VLCStyle.margin_xxsmall
+
+                    contentItem: Text {
+                        text: bigButton.text
+                        font: bigButton.font
+                        color: VLCStyle.colors.buttonText
+                        verticalAlignment: Text.AlignVCenter
+                        leftPadding: bigButton.indicator.width + bigButton.spacing
+                    }
+                }
+
+                Rectangle{
+                    Layout.preferredHeight: 1
+                    Layout.fillWidth: true
+                    color: VLCStyle.colors.buttonText
+                }
+
+                Text {
+                    Layout.margins: VLCStyle.margin_xxsmall
+                    text: qsTr("Drag items below to add them above: ")
+                    font.pointSize: VLCStyle.fontHeight_xsmall
+                    color: VLCStyle.colors.buttonText
+                }
+
+                ToolbarEditorButtonList {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    Layout.margins: VLCStyle.margin_xxsmall
+                }
+            }
+        }
+
+
+    }
+
+    function getConfig(){
+        return playerControlBarModel.getConfig()
+    }
+
+    Connections{
+        target: toolbareditor
+        onUpdatePlayerModel: playerControlBarModel.reloadConfig(config)
+        onSaveConfig: playerControlBarModel.saveConfig()
+    }
+
+    PlayerControlBarModel {
+        id: playerControlBarModel
+        mainCtx: mainctx
+    }
+
+    Player.ControlButtons{
+        id: controlButtons
+    }
+
+    PlaylistControllerModel {
+        id: mainPlaylistController
+        playlistPtr: mainctx.playlist
+    }
+
+    EditorDummyButton{
+        id: buttonDragItem
+        visible: false
+        Drag.active: visible
+        Drag.hotSpot.x: width / 2
+        Drag.hotSpot.y: height / 2
+        color: VLCStyle.colors.buttonText
+
+        function updatePos(x, y) {
+            var pos = root.mapFromGlobal(x, y)
+            this.x = pos.x - 20
+            this.y = pos.y - 20
+        }
+    }
+
+    /*
+      Match the QML theme to
+      native part. Using Qt Style Sheet to
+      set the theme.
+    */
+    Component.onCompleted: toolbareditor.setStyleSheet(
+                               "background-color:"+VLCStyle.colors.bg+
+                               ";color:"+VLCStyle.colors.buttonText+
+                               ";selection-background-color:"+
+                               VLCStyle.colors.bgHover);
+}
+
diff --git a/modules/gui/qt/qml/menus/ToolsMenu.qml b/modules/gui/qt/qml/menus/ToolsMenu.qml
index 10f95f0726..5a5435ebd7 100644
--- a/modules/gui/qt/qml/menus/ToolsMenu.qml
+++ b/modules/gui/qt/qml/menus/ToolsMenu.qml
@@ -29,5 +29,6 @@ Utils.MenuExt {
     Action { text: qsTr("&Messages");               onTriggered: dialogProvider.messagesDialog();   icon.source: "qrc:/menu/messages.svg";    shortcut: "Ctrl+M" }
     Action { text: qsTr("Plu&gins and extensions"); onTriggered: dialogProvider.pluginDialog();                                                                  }
     MenuSeparator {}
+    Action { text: qsTr("Customise Interface");     onTriggered: dialogProvider.toolbarDialog();    icon.source: "qrc:/menu/preferences.svg";}
     Action { text: qsTr("&Preferences");            onTriggered: dialogProvider.prefsDialog();      icon.source: "qrc:/menu/preferences.svg"; shortcut: "Ctrl+P" }
 }
diff --git a/modules/gui/qt/qml/player/ControlBar.qml b/modules/gui/qt/qml/player/ControlBar.qml
index dd6eea3f75..7f33c9ed0d 100644
--- a/modules/gui/qt/qml/player/ControlBar.qml
+++ b/modules/gui/qt/qml/player/ControlBar.qml
@@ -90,12 +90,8 @@ Utils.NavigableFocusScope {
                     property bool _focusGiven: false
                     focus: true
                     anchors.fill: parent
-
                     Repeater{
-                        model: PlayerControlBarModel{
-                            id: buttonsmodel
-                            mainCtx: mainctx
-                        }
+                        model: playerControlBarModel
                         delegate: Loader{
                             id: buttonloader
 
@@ -128,6 +124,11 @@ Utils.NavigableFocusScope {
         }
     }
 
+    PlayerControlBarModel{
+        id:playerControlBarModel
+        mainCtx: mainctx
+    }
+
     ControlButtons{
         id:controlmodelbuttons
     }
diff --git a/modules/gui/qt/qml/style/VLCStyle.qml b/modules/gui/qt/qml/style/VLCStyle.qml
index 8c08c3c0f9..669d44938c 100644
--- a/modules/gui/qt/qml/style/VLCStyle.qml
+++ b/modules/gui/qt/qml/style/VLCStyle.qml
@@ -103,7 +103,7 @@ Item {
     property int widthExtendedSpacer: 128 * scale;
     property int heightInput: 22 * scale;
 
-    property int scrollbarWidth: 8 * scale;
+    property int scrollbarWidth: 4 * scale;
     property int scrollbarHeight: 100 * scale;
 
     property int selectedBorder: 2
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 69fea91154..724497a007 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -267,5 +267,6 @@
         <file alias="EditorDummyButton.qml">qml/dialogs/EditorDummyButton.qml</file>
         <file alias="EditorDNDDelegate.qml">qml/dialogs/EditorDNDDelegate.qml</file>
         <file alias="ToolbarEditorButtonList.qml">qml/dialogs/ToolbarEditorButtonList.qml</file>
+        <file alias="ToolbarEditor.qml">qml/dialogs/ToolbarEditor.qml</file>
     </qresource>
 </RCC>
-- 
2.17.1



More information about the vlc-devel mailing list