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>

1 files changed, 78 insertions, 91 deletions

diff --git a/examples/controls/gallery/gallery.qml b/examples/controls/gallery/gallery.qml
index 2bd7d40f..7001057d 100644
--- a/examples/controls/gallery/gallery.qml
+++ b/examples/controls/gallery/gallery.qml
@@ -193,83 +193,76 @@ ApplicationWindow {
 
     Popup {
         id: settingsPopup
+        x: (window.width - width) / 2
+        y: window.height / 6
+        width: Math.min(window.width, window.height) / 3 * 2
+        height: settingsColumn.implicitHeight + topPadding + bottomPadding
         modal: true
         focus: true
         onPressedOutside: close()
 
-        contentItem: Pane {
-            id: settingsPane
-            x: (window.width - width) / 2
-            y: window.height / 6
-            width: Math.min(window.width, window.height) / 3 * 2
-            contentHeight: settingsColumn.implicitHeight
-
-            Keys.onEscapePressed: settingsPopup.close()
+        contentItem: ColumnLayout {
+            id: settingsColumn
+            spacing: 20
+            Keys.onEscapePressed: settingsPopup.close() // TODO: Popup::closePolicy
 
+            Label {
+                text: "Settings"
+                font.bold: true
+            }
 
-            ColumnLayout {
-                id: settingsColumn
-                spacing: 20
-                anchors.fill: parent
+            RowLayout {
+                spacing: 10
 
                 Label {
-                    text: "Settings"
-                    font.bold: true
+                    text: "Style:"
                 }
 
-                RowLayout {
-                    spacing: 10
-
-                    Label {
-                        text: "Style:"
-                    }
-
-                    ComboBox {
-                        id: styleBox
-                        property int styleIndex: -1
-                        model: ["Default", "Material", "Universal"]
-                        Component.onCompleted: {
-                            styleIndex = find(settings.style)
-                            if (styleIndex !== -1)
-                                currentIndex = styleIndex
-                        }
-                        Layout.fillWidth: true
+                ComboBox {
+                    id: styleBox
+                    property int styleIndex: -1
+                    model: ["Default", "Material", "Universal"]
+                    Component.onCompleted: {
+                        styleIndex = find(settings.style)
+                        if (styleIndex !== -1)
+                            currentIndex = styleIndex
                     }
-                }
-
-                Label {
-                    text: "Restart required"
-                    opacity: styleBox.currentIndex !== styleBox.styleIndex ? 1.0 : 0.0
-                    horizontalAlignment: Label.AlignHCenter
-                    verticalAlignment: Label.AlignVCenter
                     Layout.fillWidth: true
-                    Layout.fillHeight: true
                 }
+            }
+
+            Label {
+                text: "Restart required"
+                opacity: styleBox.currentIndex !== styleBox.styleIndex ? 1.0 : 0.0
+                horizontalAlignment: Label.AlignHCenter
+                verticalAlignment: Label.AlignVCenter
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
 
-                RowLayout {
-                    spacing: 10
+            RowLayout {
+                spacing: 10
 
-                    Button {
-                        id: okButton
-                        text: "Ok"
-                        onClicked: {
-                            settings.style = styleBox.displayText
-                            settingsPopup.close()
-                        }
-                        Layout.preferredWidth: 0
-                        Layout.fillWidth: true
+                Button {
+                    id: okButton
+                    text: "Ok"
+                    onClicked: {
+                        settings.style = styleBox.displayText
+                        settingsPopup.close()
                     }
+                    Layout.preferredWidth: 0
+                    Layout.fillWidth: true
+                }
 
-                    Button {
-                        id: cancelButton
-                        text: "Cancel"
-                        onClicked: {
-                            styleBox.currentIndex = styleBox.styleIndex
-                            settingsPopup.close()
-                        }
-                        Layout.preferredWidth: 0
-                        Layout.fillWidth: true
+                Button {
+                    id: cancelButton
+                    text: "Cancel"
+                    onClicked: {
+                        styleBox.currentIndex = styleBox.styleIndex
+                        settingsPopup.close()
                     }
+                    Layout.preferredWidth: 0
+                    Layout.fillWidth: true
                 }
             }
         }
@@ -279,49 +272,43 @@ ApplicationWindow {
         id: aboutDialog
         modal: true
         focus: true
+        x: (window.width - width) / 2
+        y: (window.height - height) / 2
+        width: Math.min(window.width, window.height) / 3 * 2
+        height: aboutColumn.implicitHeight + topPadding + bottomPadding
         onPressedOutside: close()
 
-        contentItem: Pane {
-            x: (window.width - width) / 2
-            y: (window.height - height) / 2
-            width: Math.min(window.width, window.height) / 3 * 2
-            contentHeight: aboutColumn.implicitHeight
-
-            Keys.onEscapePressed: aboutDialog.close()
-
-            Column {
-                id: aboutColumn
-
-                spacing: 20
-                anchors.fill: parent
+        contentItem: Column {
+            id: aboutColumn
+            spacing: 20
+            Keys.onEscapePressed: aboutDialog.close() // TODO: Popup::closePolicy
 
-                Label {
-                    text: "About"
-                    font.bold: true
-                }
+            Label {
+                text: "About"
+                font.bold: true
+            }
 
-                Label {
-                    width: parent.width
-                    text: "The Qt Labs Controls module is a technology preview of the next generation user interface controls based on Qt Quick."
-                    wrapMode: Label.Wrap
-                    font.pixelSize: 12
-                }
+            Label {
+                width: parent.width
+                text: "The Qt Labs Controls module is a technology preview of the next generation user interface controls based on Qt Quick."
+                wrapMode: Label.Wrap
+                font.pixelSize: 12
+            }
 
-                Label {
-                    width: parent.width
-                    text: "In comparison to the desktop oriented Qt Quick Controls 1, the experimental Qt Labs "
-                        + "Controls are an order of magnitude simpler, lighter and faster, and are primarily targeting embedded "
-                        + "and mobile platforms."
-                    wrapMode: Label.Wrap
-                    font.pixelSize: 12
-                }
+            Label {
+                width: parent.width
+                text: "In comparison to the desktop oriented Qt Quick Controls 1, the experimental Qt Labs "
+                    + "Controls are an order of magnitude simpler, lighter and faster, and are primarily targeting embedded "
+                    + "and mobile platforms."
+                wrapMode: Label.Wrap
+                font.pixelSize: 12
             }
         }
     }
 
     Menu {
         id: optionsMenu
-        contentItem.x: contentItem.parent ? (contentItem.parent.width - contentItem.width) : 0
+        x: window.width - width
 
         MenuItem {
             text: "Settings"