Refactor Popup

Added relevant properties to make it almost like a Control: x, y,
width, height, padding, background... This change makes popup use
an internal item where the style/user-supplied contentItem and
background are re-parented. This way we can provide a default style
(background) for Popup.

Change-Id: I3e7933562464c5c852e4ba4bc37d9ac25691c714
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>

8 files changed, 142 insertions, 102 deletions

diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml
index e06372e7..f18140f9 100644
--- a/src/imports/controls/ComboBox.qml
+++ b/src/imports/controls/ComboBox.qml
@@ -98,35 +98,33 @@ T.ComboBox {
 
     //! [popup]
     popup: T.Popup {
-        contentItem: Rectangle {
-            // TODO: Popup::anchors
-            readonly property var above: popup.visible ? control.mapToItem(null, 0, -height + 1) : Qt.point(0, 0)
-            readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height - 1) : Qt.point(0, 0)
+        readonly property var above: popup.visible ? control.mapToItem(null, 0, -height + 1) : Qt.point(0, 0)
+        readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height - 1) : Qt.point(0, 0)
 
-            x: below.x
-            y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y
-            width: control.width
-            height: listview.height
-
-            ListView {
-                id: listview
-                width: control.width
-                height: Math.min(200, contentHeight)
-
-                clip: true
-                model: control.delegateModel
-                currentIndex: control.highlightedIndex
+        x: below.x
+        y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y
+        width: control.width
+        height: Math.min(200, listview.contentHeight)
 
-//                ScrollIndicator.vertical: ScrollIndicator { }
-            }
+        contentItem: ListView {
+            id: listview
+            clip: true
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
 
             Rectangle {
-                width: parent.width
-                height: parent.height
-                color: "transparent"
+                z: 10
+                parent: listview
+                width: listview.width
+                height: listview.height
                 border.color: "#353637"
+                color: "transparent"
             }
+
+//            ScrollIndicator.vertical: ScrollIndicator { }
         }
+
+        background: Rectangle { }
     }
     //! [popup]
 }
diff --git a/src/imports/controls/Menu.qml b/src/imports/controls/Menu.qml
index f4a4243e..482b68a3 100644
--- a/src/imports/controls/Menu.qml
+++ b/src/imports/controls/Menu.qml
@@ -41,10 +41,14 @@ import Qt.labs.templates 1.0 as T
 T.Menu {
     id: control
 
+    width: Math.max(background ? background.implicitWidth : 0,
+                    contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
+    height: Math.min(background ? background.implicitHeight : 0,
+                     contentItem ? contentItem.implicitHeight + topPadding + bottomPadding : 0)
+
     //! [contentItem]
     contentItem: ListView {
-        implicitWidth: 200
-        implicitHeight: Math.min(contentHeight, 200)
+        implicitHeight: contentHeight
         model: control.contentModel
         // TODO: improve this?
         interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false
@@ -53,14 +57,15 @@ T.Menu {
         currentIndex: -1
 
         ScrollIndicator.vertical: ScrollIndicator {}
-
-        Rectangle {
-            width: parent.width
-            height: parent.height
-            color: "#ffffff"
-            border.color: "#353637"
-            z: -1
-        }
     }
     //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 200
+        color: "#ffffff"
+        border.color: "#353637"
+    }
+    //! [background]
 }
diff --git a/src/imports/controls/Popup.qml b/src/imports/controls/Popup.qml
index b7c6fe08..3d3fb365 100644
--- a/src/imports/controls/Popup.qml
+++ b/src/imports/controls/Popup.qml
@@ -39,4 +39,15 @@ import Qt.labs.templates 1.0 as T
 
 T.Popup {
     id: control
+
+    width: Math.max(background ? background.implicitWidth : 0,
+                    contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
+    height: Math.max(background ? background.implicitHeight : 0,
+                     contentItem ? contentItem.implicitHeight + topPadding + bottomPadding : 0)
+
+    padding: 6
+
+    background: Rectangle {
+        border.color: "#353637"
+    }
 }
diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml
index 93494a60..c4ceecdd 100644
--- a/src/imports/controls/material/ComboBox.qml
+++ b/src/imports/controls/material/ComboBox.qml
@@ -114,6 +114,15 @@ T.ComboBox {
 
     //! [popup]
     popup: T.Popup {
+        readonly property var above: popup.visible ? control.mapToItem(null, 0, -height) : Qt.point(0, 0)
+        readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height) : Qt.point(0, 0)
+        readonly property bool showAbove: above.y >= 0 && below.y + height > control.Window.height
+
+        x: below.x
+        y: showAbove ? above.y : below.y
+        width: control.width
+        height: Math.min(200, listview.contentHeight)
+
         enter: Transition {
             // grow_fade_in
             NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
@@ -126,18 +135,17 @@ T.ComboBox {
             NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
         }
 
-        contentItem: Item {
-            // TODO: Popup::anchors
-            readonly property var above: popup.visible ? control.mapToItem(null, 0, -height) : Qt.point(0, 0)
-            readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height) : Qt.point(0, 0)
-            readonly property bool showAbove: above.y >= 0 && below.y + height > control.Window.height
+        contentItem: ListView {
+            id: listview
+            clip: true
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
+            transformOrigin: popup.showAbove ? Item.Bottom : Item.Top
 
-            x: below.x
-            y: showAbove ? above.y : below.y
-            width: control.width
-            height: listview.height
-            transformOrigin: showAbove ? Item.Bottom : Item.Top
+//            ScrollIndicator.vertical: ScrollIndicator { }
+        }
 
+        background: Item {
             Rectangle {
                 id: panel
                 width: parent.width
@@ -155,18 +163,6 @@ T.ComboBox {
                 samples: 15
                 spread: 0.5
             }
-
-            ListView {
-                id: listview
-                width: control.width
-                height: Math.min(200, contentHeight) // TODO: 396
-
-                clip: true
-                model: control.delegateModel
-                currentIndex: control.highlightedIndex
-
-//                ScrollIndicator.vertical: ScrollIndicator { }
-            }
         }
     }
     //! [popup]
diff --git a/src/imports/controls/material/Menu.qml b/src/imports/controls/material/Menu.qml
index 4523fc26..86ab5c81 100644
--- a/src/imports/controls/material/Menu.qml
+++ b/src/imports/controls/material/Menu.qml
@@ -43,6 +43,11 @@ import QtGraphicalEffects 1.0
 T.Menu {
     id: control
 
+    width: Math.max(background ? background.implicitWidth : 0,
+                    contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
+    height: Math.min(background ? background.implicitHeight : 0,
+                     contentItem ? contentItem.implicitHeight + topPadding + bottomPadding : 0)
+
     enter: Transition {
         // grow_fade_in
         NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
@@ -56,11 +61,26 @@ T.Menu {
     }
 
     //! [contentItem]
-    contentItem: Item {
-        implicitWidth: 200
-        implicitHeight: Math.min(listview.contentHeight, 200)
+    contentItem: ListView {
+        implicitHeight: contentHeight
         transformOrigin: Item.Top
 
+        model: control.contentModel
+        // TODO: improve this?
+        interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false
+        clip: true
+        keyNavigationWraps: false
+        currentIndex: -1
+
+        ScrollIndicator.vertical: ScrollIndicator {}
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Item {
+        implicitWidth: 200
+        implicitHeight: 200
+
         Rectangle {
             id: panel
             width: parent.width
@@ -77,20 +97,6 @@ T.Menu {
             samples: 15
             spread: 0.5
         }
-
-        ListView {
-            id: listview
-            width: parent.width
-            height: parent.height
-            model: control.contentModel
-            // TODO: improve this?
-            interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false
-            clip: true
-            keyNavigationWraps: false
-            currentIndex: -1
-
-            ScrollIndicator.vertical: ScrollIndicator {}
-        }
     }
-    //! [contentItem]
+    //! [background]
 }
diff --git a/src/imports/controls/material/Popup.qml b/src/imports/controls/material/Popup.qml
index 40531c61..8eb56a01 100644
--- a/src/imports/controls/material/Popup.qml
+++ b/src/imports/controls/material/Popup.qml
@@ -35,11 +35,20 @@
 ****************************************************************************/
 
 import QtQuick 2.6
+import QtGraphicalEffects 1.0
 import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.material 1.0
 
 T.Popup {
     id: control
 
+    width: Math.max(background ? background.implicitWidth : 0,
+                    contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
+    height: Math.max(background ? background.implicitHeight : 0,
+                     contentItem ? contentItem.implicitHeight + topPadding + bottomPadding : 0)
+
+    padding: 6
+
     enter: Transition {
         // grow_fade_in
         NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
@@ -51,4 +60,16 @@ T.Popup {
         NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
         NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
     }
+
+    background: Rectangle {
+        radius: 3
+        color: control.Material.dialogColor
+
+        layer.effect: DropShadow {
+            verticalOffset: 1
+            color: control.Material.dropShadowColor
+            samples: 15
+            spread: 0.5
+        }
+    }
 }
diff --git a/src/imports/controls/universal/ComboBox.qml b/src/imports/controls/universal/ComboBox.qml
index b91e4581..32e28e53 100644
--- a/src/imports/controls/universal/ComboBox.qml
+++ b/src/imports/controls/universal/ComboBox.qml
@@ -109,29 +109,27 @@ T.ComboBox {
 
     //! [popup]
     popup: T.Popup {
-        contentItem: Rectangle {
-            // TODO: Popup::anchors
-            readonly property var above: popup.visible ? control.mapToItem(null, 0, control.height - height) : Qt.point(0, 0)
-            readonly property var below: popup.visible ? control.mapToItem(null, 0, 0) : Qt.point(0, 0)
+        readonly property var above: popup.visible ? control.mapToItem(null, 0, control.height - height) : Qt.point(0, 0)
+        readonly property var below: popup.visible ? control.mapToItem(null, 0, 0) : Qt.point(0, 0)
 
-            x: below.x
-            y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y
-            width: control.width
-            height: listview.height
-
-            color: control.Universal.chromeMediumLowColor
+        x: below.x
+        y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y
+        width: control.width
+        height: Math.min(200, listview.contentHeight) // TODO: 396
 
-            ListView {
-                id: listview
-                width: control.width
-                height: Math.min(200, contentHeight) // TODO: 396
+        contentItem: ListView {
+            id: listview
+            clip: true
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
 
-                clip: true
-                model: control.delegateModel
-                currentIndex: control.highlightedIndex
+//            ScrollIndicator.vertical: ScrollIndicator { }
+        }
 
-//                ScrollIndicator.vertical: ScrollIndicator { }
-            }
+        background: Rectangle {
+            color: control.Universal.chromeMediumLowColor
+            border.color: control.Universal.chromeHighColor
+            border.width: 1 // FlyoutBorderThemeThickness
         }
     }
     //! [popup]
diff --git a/src/imports/controls/universal/Menu.qml b/src/imports/controls/universal/Menu.qml
index fec16c16..765ca030 100644
--- a/src/imports/controls/universal/Menu.qml
+++ b/src/imports/controls/universal/Menu.qml
@@ -42,10 +42,14 @@ import Qt.labs.controls.universal 1.0
 T.Menu {
     id: control
 
+    width: Math.max(background ? background.implicitWidth : 0,
+                    contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
+    height: Math.min(background ? background.implicitHeight : 0,
+                     contentItem ? contentItem.implicitHeight + topPadding + bottomPadding : 0)
+
     //! [contentItem]
     contentItem: ListView {
-        implicitWidth: 200
-        implicitHeight: Math.min(contentHeight, 200)
+        implicitHeight: contentHeight
         model: control.contentModel
         // TODO: improve this?
         interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false
@@ -54,15 +58,16 @@ T.Menu {
         currentIndex: -1
 
         ScrollIndicator.vertical: ScrollIndicator {}
-
-        Rectangle {
-            z: -1
-            width: parent.width
-            height: parent.height
-            color: control.Universal.chromeMediumLowColor
-            border.color: control.Universal.chromeHighColor
-            border.width: 1 // FlyoutBorderThemeThickness
-        }
     }
     //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 200
+        color: control.Universal.chromeMediumLowColor
+        border.color: control.Universal.chromeHighColor
+        border.width: 1 // FlyoutBorderThemeThickness
+    }
+    //! [background]
 }