Merge v5.1.0 releasebaserock/morph

16 files changed, 465 insertions, 409 deletions

diff --git a/examples/quick/controls/gallery/content/Controls.qml b/examples/quick/controls/gallery/content/Controls.qml
index 310eee59..c1403da5 100644
--- a/examples/quick/controls/gallery/content/Controls.qml
+++ b/examples/quick/controls/gallery/content/Controls.qml
@@ -180,6 +180,14 @@ Item {
                 height: parent.height - group1.height - group2.height - 2 * parent.spacing
                 anchors { right: parent.right }
             }
+
+            MouseArea {
+                id: contextMenu
+                parent: area.viewport
+                anchors.fill: parent
+                acceptedButtons: Qt.RightButton
+                onPressed: editmenu.popup()
+            }
         }
     }
 }
diff --git a/examples/quick/controls/gallery/content/Layouts.qml b/examples/quick/controls/gallery/content/Layouts.qml
new file mode 100644
index 00000000..ac0a53a3
--- /dev/null
+++ b/examples/quick/controls/gallery/content/Layouts.qml
@@ -0,0 +1,107 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt Quick Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+**     of its contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Controls 1.0
+import QtQuick.Layouts 1.0
+
+Item {
+    id:root
+    anchors.fill: parent
+    anchors.margins: 8
+
+    ColumnLayout {
+        id: mainLayout
+        anchors.fill: parent
+        spacing: 4
+        GroupBox {
+            id: rowBox
+            title: "Row layout"
+            Layout.fillWidth: true
+            RowLayout {
+                id: rowLayout
+                anchors.fill: parent
+                TextField {
+                    placeholderText: "This wants to grow horizontally"
+                    Layout.fillWidth: true
+                }
+                Button {
+                    text: "Button"
+                }
+            }
+        }
+
+        GroupBox {
+            id: gridBox
+            title: "Grid layout"
+            Layout.fillWidth: true
+
+            GridLayout {
+                id: gridLayout
+                anchors.fill: parent
+                rows: 3
+                flow: GridLayout.TopToBottom
+
+                Label { text: "Line 1" }
+                Label { text: "Line 2" }
+                Label { text: "Line 3" }
+
+                TextField { }
+                TextField { }
+                TextField { }
+
+                TextArea {
+                    text: "This widget spans over three rows in the GridLayout.\n"
+                          + "All items in the GridLayout are implicitly positioned from top to bottom."
+                    Layout.rowSpan: 3
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                }
+            }
+        }
+        TextArea {
+            id: t3
+            text: "This fills the whole cell"
+            Layout.minimumHeight: 30
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+    }
+}
diff --git a/examples/quick/controls/gallery/content/ModelView.qml b/examples/quick/controls/gallery/content/ModelView.qml
index e6a6040f..483d99ee 100644
--- a/examples/quick/controls/gallery/content/ModelView.qml
+++ b/examples/quick/controls/gallery/content/ModelView.qml
@@ -51,7 +51,7 @@ Item {
     width: 600
     height: 300
     anchors.fill: parent
-    anchors.margins: Qt.platform.os === "mac" ? 12 : 6
+    anchors.margins: Qt.platform.os === "osx" ? 12 : 6
 
 //    XmlListModel {
 //        id: flickerModel
diff --git a/examples/quick/controls/gallery/content/Panel.qml b/examples/quick/controls/gallery/content/Panel.qml
deleted file mode 100644
index bdb10f83..00000000
--- a/examples/quick/controls/gallery/content/Panel.qml
+++ /dev/null
@@ -1,140 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Quick Controls module of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-
-
-
-
-import QtQuick 2.1
-import QtQuick.Controls 1.0
-
-Rectangle {
-    id:root
-
-    width: 540
-    height: 340
-    color:"#c3c3c3"
-    ScrollView {
-        frameVisible: false
-        anchors.fill: parent
-
-        Item {
-            width:600
-            height:600
-            BorderImage {
-                id: page
-                source: "../images/page.png"
-                y:10; x:50
-                width: 400; height: 400
-                border.left: 12; border.top: 12
-                border.right: 12; border.bottom: 12
-                Text {
-                    id:text
-                    anchors.fill: parent
-                    anchors.margins: 40
-                    text:textfield.text
-                }
-                Rectangle {
-                    border.color: "#444"
-                    anchors.centerIn: parent
-                    color: Qt.rgba(s1.value, s2.value, s3.value)
-                    width: 200
-                    height: width
-                }
-
-            }
-
-            BorderImage {
-                id: sidebar
-                source: "../images/panel.png"
-                anchors.left: parent.left
-                anchors.top: parent.top
-                width: show ? 160 : 40
-                height:root.height
-                Behavior on width { NumberAnimation { easing.type: Easing.OutSine ; duration: 250 } }
-                property bool show: false
-                border.left: 0;
-                border.right: 26;
-                MouseArea {
-                    id:mouseArea
-                    anchors.fill: parent
-                    onClicked: sidebar.show = !sidebar.show
-                }
-                Column {
-                    id: panel1
-                    opacity: sidebar.show ? 1 : 0
-                    Behavior on opacity { NumberAnimation { easing.type:Easing.InCubic; duration: 600} }
-
-                    scale: sidebar.show ? 1 : 0
-                    Behavior on scale { NumberAnimation { easing.type:Easing.InCubic; duration: 200 } }
-                    transformOrigin: Item.Top
-
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.margins: 12
-                    spacing:12
-
-                    Button { width: parent.width - 12; text: "Close Panel"; onClicked: sidebar.show = false}
-                    TextField { id: textfield; text: "Some text" ; width: parent.width - 12}
-                    SpinBox { width: parent.width - 12}
-                    CheckBox{ id: expander; text:"Sliders"}
-                }
-
-                Column {
-                    id: panel2
-                    opacity: expander.checked && sidebar.show ? 1 : 0
-                    scale: opacity
-                    Behavior on opacity{ NumberAnimation { easing.type:Easing.OutSine; duration: 300}}
-                    transformOrigin: Item.Top
-                    anchors.top: panel1.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.margins: 12
-                    spacing: 12
-                    Slider { id: s1; width:parent.width - 12; value:0.5}
-                    Slider { id: s2; width:parent.width - 12; value:0.5}
-                    Slider { id: s3; width:parent.width - 12; value:0.5}
-
-                }
-            }
-        }
-    }
-}
diff --git a/examples/quick/controls/gallery/content/Styles.qml b/examples/quick/controls/gallery/content/Styles.qml
index b5e98f80..e46a9ea0 100644
--- a/examples/quick/controls/gallery/content/Styles.qml
+++ b/examples/quick/controls/gallery/content/Styles.qml
@@ -45,195 +45,308 @@
 import QtQuick 2.1
 import QtQuick.Controls 1.0
 import QtQuick.Controls.Styles 1.0
-import QtQuick.Dialogs 1.0
+import QtQuick.Particles 2.0
+import QtQuick.Layouts 1.0
 
 Item {
     id: root
     width: 300
     height: 200
 
-    ColorDialog {
-        id: colorDialog
-        color: "#afe"
-        property color last: "#afe"
-        onRejected: color = last
-        onVisibleChanged: if (visible) last = color
-    }
-
-    Column {
-        anchors.margins: 20
-        anchors.horizontalCenter: parent.horizontalCenter
+    property int columnWidth: 120
+    GridLayout {
+        rowSpacing: 12
+        columnSpacing: 30
         anchors.top: parent.top
-        spacing: 20
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.margins: 30
 
-        Row {
-            spacing: 8
-            Button {
-                text: "Set color…"
-                style: ButtonStyle { }
-                onClicked: colorDialog.open()
-            }
-            Button {
-                text: "Push me"
-                style: ButtonStyle { }
-            }
-            Button {
-                text: "Push me"
-                style: buttonStyle
-            }
+        Button {
+            text: "Push me"
+            style: ButtonStyle { }
+            implicitWidth: columnWidth
         }
-        Row {
-            spacing: 8
-            TextField {
-                style: TextFieldStyle { }
-            }
-            TextField {
-                style: TextFieldStyle { }
-            }
-            TextField {
-                style: textfieldStyle
+        Button {
+            text: "Push me"
+            style: ButtonStyle {
+                background: BorderImage {
+                    source: control.pressed ? "../images/button-pressed.png" : "../images/button.png"
+                    border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
+                }
             }
+            implicitWidth: columnWidth
+        }
+        Button {
+            text: "Push me"
+            style: buttonStyle
+            implicitWidth: columnWidth
         }
 
-        Row {
-            spacing: 8
-            Slider {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: SliderStyle { }
-            }
-            Slider {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: SliderStyle { }
-            }
-            Slider {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: sliderStyle
+        TextField {
+            Layout.row: 1
+            style: TextFieldStyle { }
+            implicitWidth: columnWidth
+        }
+        TextField {
+            style: TextFieldStyle {
+                background: BorderImage {
+                    source: "../images/textfield.png"
+                    border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
+                }
             }
+            implicitWidth: columnWidth
+        }
+        TextField {
+            style: textfieldStyle
+            implicitWidth: columnWidth
         }
 
-        Row {
-            spacing: 8
-            ProgressBar {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: ProgressBarStyle{ }
-            }
-            ProgressBar {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: ProgressBarStyle{ }
-            }
-            ProgressBar {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: progressbarStyle
+        Slider {
+            id: slider1
+            Layout.row: 2
+            value: 0.5
+            implicitWidth: columnWidth
+            style: SliderStyle { }
+        }
+        Slider {
+            id: slider2
+            value: 0.5
+            implicitWidth: columnWidth
+            style: SliderStyle {
+                groove: BorderImage {
+                    height: 6
+                    border.top: 1
+                    border.bottom: 1
+                    source: "../images/progress-background.png"
+                    border.left: 6
+                    border.right: 6
+                    BorderImage {
+                        anchors.verticalCenter: parent.verticalCenter
+                        source: "../images/progress-fill.png"
+                        border.left: 5 ; border.top: 1
+                        border.right: 5 ; border.bottom: 1
+                        width: styleData.handlePosition
+                        height: parent.height
+                    }
+                }
+                handle: Item {
+                    width: 13
+                    height: 13
+                    Image {
+                        anchors.centerIn: parent
+                        source: "../images/slider-handle.png"
+                    }
+                }
             }
         }
+        Slider {
+            id: slider3
+            value: 0.5
+            implicitWidth: columnWidth
+            style: sliderStyle
+        }
 
-        Row {
-            spacing: 8
-            CheckBox {
-                text: "CheckBox"
-                style: CheckBoxStyle{}
-            }
-            RadioButton {
-                style: RadioButtonStyle{}
-                text: "RadioButton"
-            }
+        ProgressBar {
+            Layout.row: 3
+            value: slider1.value
+            implicitWidth: columnWidth
+            style: ProgressBarStyle{ }
+        }
+        ProgressBar {
+            value: slider2.value
+            implicitWidth: columnWidth
+            style: progressBarStyle
+        }
+        ProgressBar {
+            value: slider3.value
+            implicitWidth: columnWidth
+            style: progressBarStyle2
+        }
 
-            ComboBox {
-                model: ["Paris", "Oslo", "New York"]
-                style: ComboBoxStyle{}
-            }
+        CheckBox {
+            text: "CheckBox"
+            style: CheckBoxStyle{}
+            Layout.row: 4
+            implicitWidth: columnWidth
+        }
+        RadioButton {
+            style: RadioButtonStyle{}
+            text: "RadioButton"
+            implicitWidth: columnWidth
         }
 
-        Row {
-            TabView {
-                width: 400
-                height: 30
-                Tab { title: "One" ; Item {}}
-                Tab { title: "Two" ; Item {}}
-                Tab { title: "Three" ; Item {}}
-                Tab { title: "Four" ; Item {}}
-                style: tabViewStyle
-            }
+        ComboBox {
+            model: ["Paris", "Oslo", "New York"]
+            style: ComboBoxStyle{}
+            implicitWidth: columnWidth
+        }
+
+        TabView {
+            Layout.row: 5
+            Layout.columnSpan: 3
+            Layout.fillWidth: true
+            implicitHeight: 30
+            Tab { title: "One" ; Item {}}
+            Tab { title: "Two" ; Item {}}
+            Tab { title: "Three" ; Item {}}
+            Tab { title: "Four" ; Item {}}
+            style: TabViewStyle {}
+        }
+
+        TabView {
+            Layout.row: 6
+            Layout.columnSpan: 3
+            Layout.fillWidth: true
+            implicitHeight: 30
+            Tab { title: "One" ; Item {}}
+            Tab { title: "Two" ; Item {}}
+            Tab { title: "Three" ; Item {}}
+            Tab { title: "Four" ; Item {}}
+            style: tabViewStyle
         }
     }
 
     // Style delegates:
 
     property Component buttonStyle: ButtonStyle {
-        panel: Rectangle {
-            implicitHeight: 20
-            implicitWidth: 100
-            color: control.pressed ? "darkGray" : "lightGray"
+        background: Rectangle {
+            implicitHeight: 22
+            implicitWidth: columnWidth
+            color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"
             antialiasing: true
             border.color: "gray"
             radius: height/2
-            Text {
-                anchors.centerIn: parent
-                text: control.text
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                antialiasing: true
+                visible: !control.pressed
+                border.color: "#aaffffff"
+                radius: height/2
             }
         }
     }
 
     property Component textfieldStyle: TextFieldStyle {
         background: Rectangle {
-            implicitWidth: 100
-            implicitHeight: 20
+            implicitWidth: columnWidth
+            implicitHeight: 22
             color: "#f0f0f0"
             antialiasing: true
             border.color: "gray"
             radius: height/2
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                antialiasing: true
+                border.color: "#aaffffff"
+                radius: height/2
+            }
         }
     }
 
     property Component sliderStyle: SliderStyle {
         handle: Rectangle {
-            width: 14
-            height: 14
+            width: 18
+            height: 18
             color: control.pressed ? "darkGray" : "lightGray"
             border.color: "gray"
             antialiasing: true
             radius: height/2
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                antialiasing: true
+                border.color: "#eee"
+                radius: height/2
+            }
         }
 
         groove: Rectangle {
             height: 8
-            implicitWidth: 100
-            implicitHeight: 20
+            implicitWidth: columnWidth
+            implicitHeight: 22
 
             antialiasing: true
-            color: "darkGray"
-            border.color: "gray"
+            color: "#ccc"
+            border.color: "#777"
             radius: height/2
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                antialiasing: true
+                border.color: "#66ffffff"
+                radius: height/2
+            }
         }
     }
 
-    property Component progressbarStyle: ProgressBarStyle {
-        panel: Rectangle {
-            implicitWidth: 100
-            implicitHeight: 20
+    property Component progressBarStyle: ProgressBarStyle {
+        background: BorderImage {
+            source: "../images/progress-background.png"
+            border.left: 2 ; border.right: 2 ; border.top: 2 ; border.bottom: 2
+        }
+        progress: Item {
+            clip: true
+            BorderImage {
+                anchors.fill: parent
+                anchors.rightMargin: (control.value < control.maximumValue) ? -4 : 0
+                source: "../images/progress-fill.png"
+                border.left: 10 ; border.right: 10
+                Rectangle {
+                    width: 1
+                    color: "#a70"
+                    opacity: 0.8
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 1
+                    anchors.right: parent.right
+                    visible: control.value < control.maximumValue
+                    anchors.rightMargin: -parent.anchors.rightMargin
+                }
+            }
+            ParticleSystem{ id: bubbles }
+            ImageParticle{
+                id: fireball
+                system: bubbles
+                source: "../images/bubble.png"
+                opacity: 0.7
+            }
+            Emitter{
+                system: bubbles
+                anchors.bottom: parent.bottom
+                anchors.margins: 4
+                anchors.bottomMargin: -4
+                anchors.left: parent.left
+                anchors.right: parent.right
+                size: 4
+                sizeVariation: 4
+                acceleration: PointDirection{ y: -6; xVariation: 3 }
+                emitRate: 6 * control.value
+                lifeSpan: 3000
+            }
+        }
+    }
+
+    property Component progressBarStyle2: ProgressBarStyle {
+        background: Rectangle {
+            implicitWidth: columnWidth
+            implicitHeight: 24
             color: "#f0f0f0"
             border.color: "gray"
-            antialiasing: true
-            radius: height/2
+        }
+        progress: Rectangle {
+            color: "#ccc"
+            border.color: "gray"
             Rectangle {
-                implicitWidth: 100
-                implicitHeight: 20
-                color: "#f0f0f0"
-                border.color: "gray"
-                antialiasing: true
-                radius: height/2
+                color: "transparent"
+                border.color: "#44ffffff"
+                anchors.fill: parent
+                anchors.margins: 1
             }
         }
     }
@@ -250,21 +363,21 @@ Item {
             }
             border.color: "#898989"
             Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
-
         }
         tab: Item {
-            implicitWidth: image.sourceSize.width
+            property int totalOverlap: tabOverlap * (control.count - 1)
+            implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width)
             implicitHeight: image.sourceSize.height
             BorderImage {
                 id: image
                 anchors.fill: parent
-                source: tab.selected ? "../images/tab_selected.png" : "../images/tab.png"
-                border.left: 50
+                source: styleData.selected ? "../images/tab_selected.png" : "../images/tab.png"
+                border.left: 30
                 smooth: false
-                border.right: 50
+                border.right: 30
             }
             Text {
-                text: tab.title
+                text: styleData.title
                 anchors.centerIn: parent
             }
         }
diff --git a/examples/quick/controls/gallery/images/bubble.png b/examples/quick/controls/gallery/images/bubble.png
new file mode 100644
index 00000000..62aa1efe
--- /dev/null
+++ b/examples/quick/controls/gallery/images/bubble.png
diff --git a/examples/quick/controls/gallery/images/button-pressed.png b/examples/quick/controls/gallery/images/button-pressed.png
new file mode 100644
index 00000000..d64cdaa7
--- /dev/null
+++ b/examples/quick/controls/gallery/images/button-pressed.png
diff --git a/examples/quick/controls/gallery/images/button.png b/examples/quick/controls/gallery/images/button.png
new file mode 100644
index 00000000..8ab41cc8
--- /dev/null
+++ b/examples/quick/controls/gallery/images/button.png
diff --git a/examples/quick/controls/gallery/images/page.png b/examples/quick/controls/gallery/images/page.png
deleted file mode 100644
index b46f205d..00000000
--- a/examples/quick/controls/gallery/images/page.png
+++ /dev/null
diff --git a/examples/quick/controls/gallery/images/panel.png b/examples/quick/controls/gallery/images/panel.png
deleted file mode 100644
index 02d655eb..00000000
--- a/examples/quick/controls/gallery/images/panel.png
+++ /dev/null
diff --git a/examples/quick/controls/gallery/images/progress-background.png b/examples/quick/controls/gallery/images/progress-background.png
new file mode 100644
index 00000000..55a069df
--- /dev/null
+++ b/examples/quick/controls/gallery/images/progress-background.png
diff --git a/examples/quick/controls/gallery/images/progress-fill.png b/examples/quick/controls/gallery/images/progress-fill.png
new file mode 100644
index 00000000..b588c958
--- /dev/null
+++ b/examples/quick/controls/gallery/images/progress-fill.png
diff --git a/examples/quick/controls/gallery/images/slider-handle.png b/examples/quick/controls/gallery/images/slider-handle.png
new file mode 100644
index 00000000..ac4d4a0d
--- /dev/null
+++ b/examples/quick/controls/gallery/images/slider-handle.png
diff --git a/examples/quick/controls/gallery/images/textfield.png b/examples/quick/controls/gallery/images/textfield.png
new file mode 100644
index 00000000..1d4a38ab
--- /dev/null
+++ b/examples/quick/controls/gallery/images/textfield.png
diff --git a/examples/quick/controls/gallery/main.qml b/examples/quick/controls/gallery/main.qml
index 7da74031..ec00627b 100644
--- a/examples/quick/controls/gallery/main.qml
+++ b/examples/quick/controls/gallery/main.qml
@@ -51,10 +51,11 @@ import "content"
 ApplicationWindow {
     title: "Component Gallery"
 
-    width: 580
+    width: 600
     height: 400
     minimumHeight: 400
-    minimumWidth: 340
+    minimumWidth: 570
+
     property string loremIpsum:
             "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor "+
             "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor "+
@@ -69,150 +70,112 @@ ApplicationWindow {
         onAccepted: imageViewer.open(fileUrl)
     }
 
-    toolBar: ToolBar {
-        id: toolbar
-        RowLayout {
-            spacing: 2
-            anchors.verticalCenter: parent.verticalCenter
-            ToolButton {
-                iconSource: "images/window-new.png"
-                anchors.verticalCenter: parent.verticalCenter
-                onClicked: window1.visible = !window1.visible
-                Accessible.name: "New window"
-                tooltip: "Toggle visibility of the second window"
-            }
-            ToolButton {
-                action: openAction
-            }
-            ToolButton {
-                iconSource: "images/document-save-as.png"
-                anchors.verticalCenter: parent.verticalCenter
-                tooltip: "(Pretend to) save as..."
-            }
-        }
+    Action {
+        id: openAction
+        text: "&Open"
+        shortcut: "Ctrl+O"
+        iconSource: "images/document-open.png"
+        onTriggered: fileDialog.open()
+        tooltip: "Open an image"
+    }
 
-        ChildWindow { id: window1 }
+    Action {
+        id: copyAction
+        text: "&Copy"
+        shortcut: "Ctrl+C"
+        iconName: "edit-copy"
+        enabled: (!!activeFocusItem && !!activeFocusItem["copy"])
+        onTriggered: activeFocusItem.copy()
+    }
 
-        Action {
-            id: openAction
-            text: "&Open"
-            shortcut: "Ctrl+O"
-            iconSource: "images/document-open.png"
-            onTriggered: fileDialog.open()
-            tooltip: "open an image"
-        }
+    Action {
+        id: cutAction
+        text: "Cu&t"
+        shortcut: "Ctrl+X"
+        iconName: "edit-cut"
+        enabled: (!!activeFocusItem && !!activeFocusItem["cut"])
+        onTriggered: activeFocusItem.cut()
+    }
+
+    Action {
+        id: pasteAction
+        text: "&Paste"
+        shortcut: "Ctrl+V"
+        iconName: "edit-paste"
+        enabled: (!!activeFocusItem && !!activeFocusItem["paste"])
+        onTriggered: activeFocusItem.paste()
+    }
+
+    ExclusiveGroup {
+        id: textFormatGroup
 
         Action {
-            id: copyAction
-            text: "&Copy"
-            shortcut: "Ctrl+C"
-            iconName: "edit-copy"
-            enabled: (!!activeFocusItem && !!activeFocusItem["copy"])
-            onTriggered: activeFocusItem.copy()
+            id: a1
+            text: "Align Left"
+            checkable: true
+            Component.onCompleted: checked = true
         }
 
         Action {
-            id: cutAction
-            text: "Cu&t"
-            shortcut: "Ctrl+X"
-            iconName: "edit-cut"
-            enabled: (!!activeFocusItem && !!activeFocusItem["cut"])
-            onTriggered: activeFocusItem.cut()
+            id: a2
+            text: "Center"
+            checkable: true
         }
 
         Action {
-            id: pasteAction
-            text: "&Paste"
-            shortcut: "Ctrl+V"
-            iconName: "edit-paste"
-            enabled: (!!activeFocusItem && !!activeFocusItem["paste"])
-            onTriggered: activeFocusItem.paste()
+            id: a3
+            text: "Align Right"
+            checkable: true
         }
+    }
 
-        ExclusiveGroup {
-            id: textFormatGroup
-
-            Action {
-                id: a1
-                text: "Align Left"
-                checkable: true
-                Component.onCompleted: checked = true
-            }
-
-            Action {
-                id: a2
-                text: "Center"
-                checkable: true
-            }
-
-            Action {
-                id: a3
-                text: "Align Right"
-                checkable: true
-            }
-        }
+    ChildWindow { id: window1 }
 
+    Menu {
+        id: editmenu
+        MenuItem { action: cutAction }
+        MenuItem { action: copyAction }
+        MenuItem { action: pasteAction }
+        MenuSeparator {}
         Menu {
-            id: editmenu
-            MenuItem { action: cutAction }
-            MenuItem { action: copyAction }
-            MenuItem { action: pasteAction }
-            MenuSeparator {}
-            Menu {
-                title: "Text Format"
-                MenuItem { action: a1 }
-                MenuItem { action: a2 }
-                MenuItem { action: a3 }
-                MenuSeparator { }
-                MenuItem { text: "Allow Hyphenation"; checkable: true }
-                MenuSeparator { }
-                Menu {
-                    title: "More Stuff"
-                    MenuItem { action: cutAction }
-                    MenuItem { action: copyAction }
-                    MenuItem { action: pasteAction }
-                    MenuSeparator { }
-                    Menu {
-                        title: "More Stuff"
-                        MenuItem { action: cutAction }
-                        MenuItem { action: copyAction }
-                        MenuItem { action: pasteAction }
-                        MenuSeparator { }
-                        Menu {
-                            title: "More Stuff"
-                            MenuItem { action: cutAction }
-                            MenuItem { action: copyAction }
-                            MenuItem { action: pasteAction }
-                            MenuSeparator { }
-                            Menu {
-                                title: "More Stuff"
-                                MenuItem { action: cutAction }
-                                MenuItem { action: copyAction }
-                                MenuItem { action: pasteAction }
-                            }
-                        }
-                    }
-                }
-            }
-            Menu {
-                title: "Font Style"
-                MenuItem { text: "Bold"; checkable: true }
-                MenuItem { text: "Italic"; checkable: true }
-                MenuItem { text: "Underline"; checkable: true }
-            }
+            title: "Text Format"
+            MenuItem { action: a1 }
+            MenuItem { action: a2 }
+            MenuItem { action: a3 }
+            MenuSeparator { }
+            MenuItem { text: "Allow Hyphenation"; checkable: true }
         }
-        MouseArea {
-            anchors.fill:  parent
-            acceptedButtons: Qt.RightButton
-            onPressed: editmenu.popup()
+        Menu {
+            title: "Font Style"
+            MenuItem { text: "Bold"; checkable: true }
+            MenuItem { text: "Italic"; checkable: true }
+            MenuItem { text: "Underline"; checkable: true }
         }
+    }
 
-        CheckBox {
-            id: enabledCheck
-            text: "Enabled"
-            checked: true
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
+    toolBar: ToolBar {
+        id: toolbar
+        RowLayout {
+            id: toolbarLayout
+            spacing: 0
+            width: parent.width
+            ToolButton {
+                iconSource: "images/window-new.png"
+                onClicked: window1.visible = !window1.visible
+                Accessible.name: "New window"
+                tooltip: "Toggle visibility of the second window"
+            }
+            ToolButton { action: openAction }
+            ToolButton {
+                iconSource: "images/document-save-as.png"
+                tooltip: "(Pretend to) Save as..."
+            }
+            Item { Layout.fillWidth: true }
+            CheckBox {
+                id: enabledCheck
+                text: "Enabled"
+                checked: true
+            }
         }
     }
 
@@ -265,7 +228,7 @@ ApplicationWindow {
         enabled: enabledCheck.checked
         tabPosition: controlPage.item ? controlPage.item.tabPosition : Qt.TopEdge
         anchors.fill: parent
-        anchors.margins: Qt.platform.os === "mac" ? 12 : 2
+        anchors.margins: Qt.platform.os === "osx" ? 12 : 2
 
         Tab {
             id: controlPage
@@ -281,8 +244,8 @@ ApplicationWindow {
             Styles { anchors.fill: parent }
         }
         Tab {
-            title: "Sidebar"
-            Panel { anchors.fill:parent }
+            title: "Layouts"
+            Layouts { anchors.fill:parent }
         }
     }
 }
diff --git a/examples/quick/controls/gallery/resources.qrc b/examples/quick/controls/gallery/resources.qrc
index 14e88e52..6f487274 100644
--- a/examples/quick/controls/gallery/resources.qrc
+++ b/examples/quick/controls/gallery/resources.qrc
@@ -5,18 +5,23 @@
         <file>content/Controls.qml</file>
         <file>content/ImageViewer.qml</file>
         <file>content/ModelView.qml</file>
-        <file>content/Panel.qml</file>
+        <file>content/Layouts.qml</file>
         <file>content/Styles.qml</file>
         <file>images/document-open.png</file>
         <file>images/document-open@2x.png</file>
         <file>images/document-save-as.png</file>
         <file>images/document-save-as@2x.png</file>
         <file>images/folder_new.png</file>
-        <file>images/page.png</file>
         <file>images/tab.png</file>
         <file>images/tab_selected.png</file>
         <file>images/window-new.png</file>
         <file>images/window-new@2x.png</file>
-        <file>images/panel.png</file>
+        <file>images/bubble.png</file>
+        <file>images/button-pressed.png</file>
+        <file>images/button.png</file>
+        <file>images/progress-background.png</file>
+        <file>images/progress-fill.png</file>
+        <file>images/textfield.png</file>
+        <file>images/slider-handle.png</file>
     </qresource>
 </RCC>