[vlc-commits] qml: Drawer: Add support for all edges

[Rohan Rajpal]

vlc | branch: master | Rohan Rajpal <rohan17089 at iiitd.ac.in> | Mon Jul 29 00:44:20 2019 +0530| [5d9480a95610044b775a429e975e871fcbb77f46] | committer: Jean-Baptiste Kempf

qml: Drawer: Add support for all edges

Make possible for drawer to attach to all
edges of a screen

Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=5d9480a95610044b775a429e975e871fcbb77f46
---

 modules/gui/qt/qml/dialogs/Dialogs.qml           |  2 +-
 modules/gui/qt/qml/mediacenter/MCMainDisplay.qml |  2 +-
 modules/gui/qt/qml/player/Player.qml             |  4 +-
 modules/gui/qt/qml/utils/DrawerExt.qml           | 58 ++++++++++++++----------
 4 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/modules/gui/qt/qml/dialogs/Dialogs.qml b/modules/gui/qt/qml/dialogs/Dialogs.qml
index 44801f527c..275bed370d 100644
--- a/modules/gui/qt/qml/dialogs/Dialogs.qml
+++ b/modules/gui/qt/qml/dialogs/Dialogs.qml
@@ -36,7 +36,7 @@ Item {
             bottom: parent.bottom
             horizontalCenter: parent.horizontalCenter
         }
-        expandHorizontally: false
+        edge: Utils.DrawerExt.Edges.Bottom
         width: parent.width * 0.8
         z: 10
 
diff --git a/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml b/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
index efdabbdd9a..c4a22ff8eb 100644
--- a/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
@@ -208,7 +208,7 @@ Utils.NavigableFocusScope {
                                 bottom: parent.bottom
                             }
                             focus: false
-                            expandHorizontally: true
+                            edge: Utils.DrawerExt.Edges.Top
 
                             property var previousFocus: undefined
 
diff --git a/modules/gui/qt/qml/player/Player.qml b/modules/gui/qt/qml/player/Player.qml
index e41392cd4d..6e18892c87 100644
--- a/modules/gui/qt/qml/player/Player.qml
+++ b/modules/gui/qt/qml/player/Player.qml
@@ -128,7 +128,7 @@ Utils.NavigableFocusScope {
 
         property var previousFocus: undefined
         focus: false
-        expandHorizontally: true
+        edge: Utils.DrawerExt.Edges.Right
         state: (rootWindow.playlistDocked && rootWindow.playlistVisible) ? "visible" : "hidden"
         component: Rectangle {
             color: VLCStyle.colors.setColorAlpha(VLCStyle.colors.banner, 0.8)
@@ -175,7 +175,7 @@ Utils.NavigableFocusScope {
         property var  noAutoHide: controlBarView.contentItem.noAutoHide
 
         state: "visible"
-        expandHorizontally: false
+        edge: Utils.DrawerExt.Edges.Bottom
 
         component: Rectangle {
             id: controllerBarId
diff --git a/modules/gui/qt/qml/utils/DrawerExt.qml b/modules/gui/qt/qml/utils/DrawerExt.qml
index 5ed467be87..7eb8da045e 100644
--- a/modules/gui/qt/qml/utils/DrawerExt.qml
+++ b/modules/gui/qt/qml/utils/DrawerExt.qml
@@ -23,17 +23,26 @@ NavigableFocusScope {
 
     property Component component: undefined
 
-    //readonly property int horizontal: 0
-    //readonly property int vertical: 1
+    enum Edges {
+        Top,
+        Bottom,
+        Left,
+        Right
+    }
+
+    property int edge: DrawerExt.Edges.Bottom
+    property bool expandHorizontally: edge === DrawerExt.Edges.Left || edge === DrawerExt.Edges.Right
+
+    property alias contentItem: content.item
 
-    property bool expandHorizontally: true
     width:  (root.expandHorizontally) ? root._size : undefined
     height: (!root.expandHorizontally) ? root._size : undefined
-    property int _size: 0
 
-    property alias contentItem: content.item
+    property int _size: (root.expandHorizontally) ?  content.item.width : content.item.height
+    property string toChange: expandHorizontally ? "contentX" : "contentY"
 
     Flickable {
+        id: container
         anchors.fill: parent
         Loader {
             focus: true
@@ -47,34 +56,35 @@ NavigableFocusScope {
         State {
             name: "visible"
             PropertyChanges {
-                target: root
-                _size: (root.expandHorizontally) ?  content.item.width : content.item.height
+                target: container
+                contentY: 0
+                contentX: 0
                 visible: true
             }
         },
         State {
             name: "hidden"
             PropertyChanges {
-                target: root
-                _size: 0
-                visible: false
+                target: container
+                contentY: edgeToOffset(edge)
+                contentX: edgeToOffset(edge)
+                visible:false
             }
         }
     ]
-    transitions: [
-        Transition {
-            to: "hidden"
-            SequentialAnimation {
-                NumberAnimation { target: root; property: "_size"; duration: 200 }
-                PropertyAction{ target: root; property: "visible" }
+
+    function edgeToOffset(edge){
+        if(expandHorizontally)
+            switch(edge){
+            case DrawerExt.Edges.Left: return _size
+            case DrawerExt.Edges.Right: return -_size
+            default: return 0
             }
-        },
-        Transition {
-            to: "visible"
-            SequentialAnimation {
-                PropertyAction{ target: root; property: "visible" }
-                NumberAnimation { target: root; property: "_size"; duration: 200 }
+        else
+            switch(edge){
+            case DrawerExt.Edges.Top: return _size
+            case DrawerExt.Edges.Bottom: return -_size
+            default: return 0
             }
-        }
-    ]
+    }
 }