fix example installs

this includes renaming the first-level subdir of examples/.

Change-Id: Idf14164533c247e5c0cc5acdb405ac97f7c33ac5
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>

18 files changed, 2024 insertions, 0 deletions

diff --git a/examples/quickcontrols/extras/gallery/qml/BlackButtonBackground.qml b/examples/quickcontrols/extras/gallery/qml/BlackButtonBackground.qml
new file mode 100644
index 000000000..94852f38c
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/BlackButtonBackground.qml
@@ -0,0 +1,71 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+
+Rectangle {
+    property bool pressed: false
+
+    gradient: Gradient {
+        GradientStop {
+            color: pressed ? "#222" : "#333"
+            position: 0
+        }
+        GradientStop {
+            color: "#222"
+            position: 1
+        }
+    }
+    Rectangle {
+        height: 1
+        width: parent.width
+        anchors.top: parent.top
+        color: "#444"
+        visible: !pressed
+    }
+    Rectangle {
+        height: 1
+        width: parent.width
+        anchors.bottom: parent.bottom
+        color: "#000"
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/BlackButtonStyle.qml b/examples/quickcontrols/extras/gallery/qml/BlackButtonStyle.qml
new file mode 100644
index 000000000..e3e60d88b
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/BlackButtonStyle.qml
@@ -0,0 +1,97 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+
+ButtonStyle {
+    property color fontColor
+
+    property url rightAlignedIconSource
+
+    background: BlackButtonBackground {
+        pressed: control.pressed
+    }
+    label: Item {
+        implicitWidth: row.implicitWidth
+        implicitHeight: row.implicitHeight
+        baselineOffset: row.y + text.y + text.baselineOffset
+
+        Row {
+            id: row
+            anchors.left: control.text.length === 0 ? undefined : parent.left
+            anchors.leftMargin: control.text.length === 0 ? 0 : textSingleton.implicitHeight
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: control.text.length === 0 ? parent.horizontalCenter : undefined
+
+            Image {
+                source: control.iconSource
+                width: Math.min(sourceSize.width, height)
+                height: text.implicitHeight
+                fillMode: Image.PreserveAspectFit
+            }
+            Text {
+                id: text
+                text: control.text
+                color: fontColor
+                font.pixelSize: control.height * 0.25
+                font.family: openSans.name
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        Loader {
+            active: rightAlignedIconSource.toString().length !== 0
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: textSingleton.implicitHeight
+
+            sourceComponent: Image {
+                width: Math.min(sourceSize.width, height)
+                height: text.implicitHeight
+                fillMode: Image.PreserveAspectFit
+                source: rightAlignedIconSource
+            }
+        }
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/CircularGaugeDarkStyle.qml b/examples/quickcontrols/extras/gallery/qml/CircularGaugeDarkStyle.qml
new file mode 100644
index 000000000..9993a97a6
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/CircularGaugeDarkStyle.qml
@@ -0,0 +1,96 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Controls.Styles 1.4
+
+CircularGaugeStyle {
+    id: root
+    tickmarkStepSize: 10
+    minorTickmarkCount: 1
+    labelStepSize: 20
+    tickmarkInset: outerRadius * 0.06
+    minorTickmarkInset: tickmarkInset
+    labelInset: outerRadius * 0.23
+
+    background: Image {
+        source: "qrc:/images/background.png"
+    }
+
+    needle: Image {
+        id: needleImage
+        transformOrigin: Item.Bottom
+        source: "qrc:/images/needle.png"
+        scale: {
+            var distanceFromLabelToRadius = labelInset / 2;
+            var idealHeight = outerRadius - distanceFromLabelToRadius;
+            var originalImageHeight = needleImage.sourceSize.height;
+            idealHeight / originalImageHeight;
+        }
+    }
+
+    foreground: Item {
+        Image {
+            anchors.centerIn: parent
+            source: "qrc:/images/center.png"
+            scale: (outerRadius * 0.25) / sourceSize.height
+        }
+    }
+
+    tickmark: Rectangle {
+        implicitWidth: outerRadius * 0.02
+        antialiasing: true
+        implicitHeight: outerRadius * 0.05
+        color: "#888"
+    }
+
+    minorTickmark: Rectangle {
+        implicitWidth: outerRadius * 0.01
+        antialiasing: true
+        implicitHeight: outerRadius * 0.02
+        color: "#444"
+    }
+
+    tickmarkLabel: Text {
+        font.pixelSize: Math.max(6, outerRadius * 0.1)
+        text: styleData.value
+        color: "white"
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/CircularGaugeDefaultStyle.qml b/examples/quickcontrols/extras/gallery/qml/CircularGaugeDefaultStyle.qml
new file mode 100644
index 000000000..b7f1b2412
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/CircularGaugeDefaultStyle.qml
@@ -0,0 +1,46 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Controls.Styles 1.4
+
+CircularGaugeStyle {
+    labelStepSize: 20
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/CircularGaugeLightStyle.qml b/examples/quickcontrols/extras/gallery/qml/CircularGaugeLightStyle.qml
new file mode 100644
index 000000000..8e1f34ea7
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/CircularGaugeLightStyle.qml
@@ -0,0 +1,97 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Controls.Styles 1.4
+
+CircularGaugeStyle {
+    id: root
+    tickmarkStepSize: 10
+    minorTickmarkCount: 2
+    labelStepSize: 40
+    tickmarkInset: outerRadius * 0.06
+    minorTickmarkInset: tickmarkInset
+    labelInset: outerRadius * 0.23
+
+    background: Image {
+        source: "qrc:/images/background-light.png"
+    }
+
+    needle: Image {
+        id: needleImage
+        source: "qrc:/images/needle-light.png"
+        transformOrigin: Item.Bottom
+        scale: {
+            var distanceFromLabelToRadius = labelInset / 2;
+            var idealHeight = outerRadius - distanceFromLabelToRadius;
+            var originalImageHeight = needleImage.sourceSize.height;
+            idealHeight / originalImageHeight;
+        }
+    }
+
+    foreground: Item {
+        Image {
+            anchors.centerIn: parent
+            source: "qrc:/images/center-light.png"
+            scale: (outerRadius * 0.25) / sourceSize.height
+        }
+    }
+
+    tickmark: Rectangle {
+        implicitWidth: outerRadius * 0.01
+        antialiasing: true
+        implicitHeight: outerRadius * 0.04
+        color: "#999"
+    }
+
+    minorTickmark: Rectangle {
+        implicitWidth: outerRadius * 0.01
+        antialiasing: true
+        implicitHeight: outerRadius * 0.02
+        color: "#bbb"
+    }
+
+    tickmarkLabel: Text {
+        font.family: "Helvetica neue"
+        font.pixelSize: Math.max(6, outerRadius * 0.1)
+        text: styleData.value
+        color: "#333"
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/CircularGaugeView.qml b/examples/quickcontrols/extras/gallery/qml/CircularGaugeView.qml
new file mode 100644
index 000000000..cd03ebbe5
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/CircularGaugeView.qml
@@ -0,0 +1,230 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Controls 1.1
+import QtQuick.Extras 1.4
+
+ControlView {
+    id: controlView
+    darkBackground: customizerItem.currentStyleDark
+
+    property color fontColor: darkBackground ? "white" : "black"
+
+    property bool accelerating: false
+
+    Keys.onSpacePressed: accelerating = true
+    Keys.onReleased: {
+        if (event.key === Qt.Key_Space) {
+            accelerating = false;
+            event.accepted = true;
+        }
+    }
+
+    Button {
+        id: accelerate
+        text: "Accelerate"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        height: root.height * 0.125
+
+        onPressedChanged: accelerating = pressed
+
+        style: BlackButtonStyle {
+            background: BlackButtonBackground {
+                pressed: control.pressed
+            }
+            label: Text {
+                text: control.text
+                color: "white"
+                font.pixelSize: Math.max(textSingleton.font.pixelSize, root.toPixels(0.04))
+                font.family: openSans.name
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+        }
+    }
+
+    control: CircularGauge {
+        id: gauge
+        minimumValue: customizerItem.minimumValue
+        maximumValue: customizerItem.maximumValue
+        width: controlBounds.width
+        height: controlBounds.height
+
+        value: accelerating ? maximumValue : 0
+        style: styleMap[customizerItem.currentStylePath]
+
+        // This stops the styles being recreated when a new one is chosen.
+        property var styleMap: {
+            var styles = {};
+            for (var i = 0; i < customizerItem.allStylePaths.length; ++i) {
+                var path = customizerItem.allStylePaths[i];
+                styles[path] = Qt.createComponent(path, gauge);
+            }
+            styles;
+        }
+
+        // Called to update the style after the user has edited a property.
+        Connections {
+            target: customizerItem
+            onMinimumValueAngleChanged: __style.minimumValueAngle = customizerItem.minimumValueAngle
+            onMaximumValueAngleChanged: __style.maximumValueAngle = customizerItem.maximumValueAngle
+            onLabelStepSizeChanged: __style.tickmarkStepSize = __style.labelStepSize = customizerItem.labelStepSize
+        }
+
+        Behavior on value {
+            NumberAnimation {
+                easing.type: Easing.OutCubic
+                duration: 6000
+            }
+        }
+    }
+
+    customizer: Column {
+        readonly property var allStylePaths: {
+            var paths = [];
+            for (var i = 0; i < stylePicker.model.count; ++i) {
+                paths.push(stylePicker.model.get(i).path);
+            }
+            paths;
+        }
+        property alias currentStylePath: stylePicker.currentStylePath
+        property alias currentStyleDark: stylePicker.currentStyleDark
+        property alias minimumValue: minimumValueSlider.value
+        property alias maximumValue: maximumValueSlider.value
+        property alias minimumValueAngle: minimumAngleSlider.value
+        property alias maximumValueAngle: maximumAngleSlider.value
+        property alias labelStepSize: labelStepSizeSlider.value
+
+        id: circularGaugeColumn
+        spacing: customizerPropertySpacing
+
+        readonly property bool isDefaultStyle: stylePicker.model.get(stylePicker.currentIndex).name === "Default"
+
+        Item {
+            id: stylePickerBottomSpacing
+            width: parent.width
+            height: stylePicker.height + textSingleton.implicitHeight
+
+            StylePicker {
+                id: stylePicker
+                currentIndex: 1
+
+                model: ListModel {
+                    ListElement {
+                        name: "Default"
+                        path: "CircularGaugeDefaultStyle.qml"
+                        dark: true
+                    }
+                    ListElement {
+                        name: "Dark"
+                        path: "CircularGaugeDarkStyle.qml"
+                        dark: true
+                    }
+                    ListElement {
+                        name: "Light"
+                        path: "CircularGaugeLightStyle.qml"
+                        dark: false
+                    }
+                }
+            }
+        }
+
+        CustomizerLabel {
+            text: "Minimum angle"
+        }
+
+        CustomizerSlider {
+            id: minimumAngleSlider
+            minimumValue: -180
+            value: -145
+            maximumValue: 180
+            width: parent.width
+        }
+
+        CustomizerLabel {
+            text: "Maximum angle"
+        }
+
+        CustomizerSlider {
+            id: maximumAngleSlider
+            minimumValue: -180
+            value: 145
+            maximumValue: 180
+        }
+
+        CustomizerLabel {
+            text: "Minimum value"
+        }
+
+        CustomizerSlider {
+            id: minimumValueSlider
+            minimumValue: 0
+            value: 0
+            maximumValue: 360
+            stepSize: 1
+        }
+
+        CustomizerLabel {
+            text: "Maximum value"
+        }
+
+        CustomizerSlider {
+            id: maximumValueSlider
+            minimumValue: 0
+            value: 240
+            maximumValue: 300
+            stepSize: 1
+        }
+
+        CustomizerLabel {
+            text: "Label step size"
+        }
+
+        CustomizerSlider {
+            id: labelStepSizeSlider
+            minimumValue: 10
+            value: 20
+            maximumValue: 100
+            stepSize: 20
+        }
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/ControlLabel.qml b/examples/quickcontrols/extras/gallery/qml/ControlLabel.qml
new file mode 100644
index 000000000..6fdcec110
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/ControlLabel.qml
@@ -0,0 +1,49 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Extras 1.4
+
+Text {
+    font.pixelSize: Math.max(textSingleton.font.pixelSize, Math.min(32, root.toPixels(0.045)))
+    color: "#4e4e4e"
+    styleColor: "#ffffff"
+    style: Text.Raised
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/ControlView.qml b/examples/quickcontrols/extras/gallery/qml/ControlView.qml
new file mode 100644
index 000000000..565ab9d90
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/ControlView.qml
@@ -0,0 +1,188 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Controls 1.1
+
+Rectangle {
+    id: view
+    color: darkBackground ? "transparent" : lightBackgroundColor
+
+    Keys.onReleased: {
+        if (event.key === Qt.Key_Back) {
+            stackView.pop();
+            event.accepted = true;
+        }
+    }
+
+    property bool darkBackground: true
+
+    property Component control
+    property Component customizer
+
+    property alias controlItem: controlLoader.item
+    property alias customizerItem: customizerLoader.item
+
+    property bool isCustomizerVisible: false
+
+    property real margin: root.toPixels(0.05)
+
+    property rect controlBounds: Qt.rect(largestControlItem.x + controlBoundsItem.x,
+        largestControlItem.y + controlBoundsItem.y, controlBoundsItem.width, controlBoundsItem.height)
+
+    Item {
+        id: largestControlItem
+        x: margin
+        y: margin
+        width: isCustomizerVisible ? widthWhenCustomizing : widthWhenNotCustomizing
+        height: isCustomizerVisible ? heightWhenCustomizing : heightWhenNotCustomizing
+
+        readonly property real widthWhenCustomizing: (!isScreenPortrait ? parent.width / 2 : parent.width) - margin * 2
+        readonly property real heightWhenCustomizing: (isScreenPortrait ? parent.height / 2 : parent.height - toolbar.height) - margin * 2
+        readonly property real widthWhenNotCustomizing: parent.width - margin * 2
+        readonly property real heightWhenNotCustomizing: parent.height - toolbar.height - margin * 2
+
+        Item {
+            id: controlBoundsItem
+            x: parent.width / 2 - controlBoundsItem.width / 2
+            y: customizer && customizerItem.visible ? 0 : (isScreenPortrait ? (parent.height / 2) - (controlBoundsItem.height / 2) : 0)
+            width: Math.min(parent.widthWhenCustomizing, parent.widthWhenNotCustomizing)
+            height: Math.min(parent.heightWhenCustomizing, parent.heightWhenNotCustomizing)
+
+            Behavior on x {
+                id: controlXBehavior
+                enabled: false
+                NumberAnimation {}
+            }
+
+            Behavior on y {
+                id: controlYBehavior
+                enabled: false
+                NumberAnimation {}
+            }
+
+            Loader {
+                id: controlLoader
+                sourceComponent: control
+                anchors.centerIn: parent
+
+                property alias view: view
+            }
+        }
+    }
+
+    Flickable {
+        id: flickable
+        // Hide the customizer on the right of the screen if it's not visible.
+        x: (isScreenPortrait ? 0 : (isCustomizerVisible ? largestControlItem.x + largestControlItem.width + margin : view.width)) + margin
+        y: (isScreenPortrait ? largestControlItem.y + largestControlItem.height : 0) + margin
+        width: largestControlItem.width
+        height: parent.height - y - toolbar.height - margin
+        anchors.leftMargin: margin
+        anchors.rightMargin: margin
+        visible: customizerLoader.opacity > 0
+
+        flickableDirection: Flickable.VerticalFlick
+
+        clip: true
+        contentWidth: width
+        contentHeight: customizerLoader.height
+
+        Behavior on x {
+            id: flickableXBehavior
+            enabled: false
+            NumberAnimation {}
+        }
+
+        Behavior on y {
+            id: flickableYBehavior
+            enabled: false
+            NumberAnimation {}
+        }
+
+        Loader {
+            id: customizerLoader
+            sourceComponent: customizer
+            opacity: 0
+            width: flickable.width
+
+            property alias view: view
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 300
+                }
+            }
+        }
+    }
+
+    ControlViewToolbar {
+        id: toolbar
+
+        onCustomizeClicked: {
+            controlXBehavior.enabled = !isScreenPortrait;
+            controlYBehavior.enabled = isScreenPortrait;
+
+            isCustomizerVisible = !isCustomizerVisible;
+
+            if (isScreenPortrait) {
+                flickableXBehavior.enabled = false;
+                flickableYBehavior.enabled = true;
+            } else {
+                flickableXBehavior.enabled = true;
+                flickableYBehavior.enabled = false;
+            }
+
+            customizerLoader.opacity = isCustomizerVisible ? 1 : 0;
+        }
+    }
+
+    FlickableMoreIndicator {
+        flickable: flickable
+        atTop: true
+        gradientColor: view.darkBackground ? darkBackgroundColor : lightBackgroundColor
+    }
+
+    FlickableMoreIndicator {
+        flickable: flickable
+        atTop: false
+        gradientColor: view.darkBackground ? darkBackgroundColor : lightBackgroundColor
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/ControlViewToolbar.qml b/examples/quickcontrols/extras/gallery/qml/ControlViewToolbar.qml
new file mode 100644
index 000000000..60a7e3f8c
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/ControlViewToolbar.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Controls 1.1
+
+BlackButtonBackground {
+    anchors.bottom: parent.bottom
+    anchors.left: parent.left
+    anchors.right: parent.right
+    height: root.height * 0.125
+
+    signal customizeClicked
+
+    gradient: Gradient {
+        GradientStop {
+            color: "#333"
+            position: 0
+        }
+        GradientStop {
+            color: "#222"
+            position: 1
+        }
+    }
+
+    Button {
+        id: back
+        width: parent.height
+        height: parent.height
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        iconSource: "qrc:/images/icon-back.png"
+        onClicked: stackView.pop()
+
+        style: BlackButtonStyle {
+        }
+
+    }
+
+    Button {
+        id: customize
+        width: parent.height
+        height: parent.height
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        iconSource: "qrc:/images/icon-settings.png"
+        visible: customizer
+
+        style: BlackButtonStyle {
+        }
+
+        onClicked: customizeClicked()
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/CustomizerLabel.qml b/examples/quickcontrols/extras/gallery/qml/CustomizerLabel.qml
new file mode 100644
index 000000000..0e9f4592a
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/CustomizerLabel.qml
@@ -0,0 +1,48 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+
+Text {
+    color: darkBackground ? root.darkFontColor : root.lightFontColor
+    font.pixelSize: root.toPixels(0.04)
+    font.family: openSans.name
+    anchors.horizontalCenter: parent.horizontalCenter
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/CustomizerSlider.qml b/examples/quickcontrols/extras/gallery/qml/CustomizerSlider.qml
new file mode 100644
index 000000000..6a004e864
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/CustomizerSlider.qml
@@ -0,0 +1,75 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.1
+import QtQuick.Controls.Styles 1.1
+
+Slider {
+    id: slider
+    width: parent.width
+    height: root.toPixels(0.1)
+
+    style: SliderStyle {
+        handle: Rectangle {
+            height: root.toPixels(0.06)
+            width: height
+            radius: width/2
+            color: "#fff"
+        }
+
+        groove: Rectangle {
+            implicitHeight: root.toPixels(0.015)
+            implicitWidth: 100
+            radius: height/2
+            border.color: "#333"
+            color: "#222"
+            Rectangle {
+                height: parent.height
+                width: styleData.handlePosition
+                implicitHeight: 6
+                implicitWidth: 100
+                radius: height/2
+                color: "#555"
+            }
+        }
+
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/CustomizerSwitch.qml b/examples/quickcontrols/extras/gallery/qml/CustomizerSwitch.qml
new file mode 100644
index 000000000..a64a7f8a0
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/CustomizerSwitch.qml
@@ -0,0 +1,46 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Controls 1.1
+
+Switch {
+    anchors.horizontalCenter: parent.horizontalCenter
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/FlickableMoreIndicator.qml b/examples/quickcontrols/extras/gallery/qml/FlickableMoreIndicator.qml
new file mode 100644
index 000000000..1fb18c01c
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/FlickableMoreIndicator.qml
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+
+Rectangle {
+    anchors.top: atTop ? flickable.top : undefined
+    anchors.bottom: atTop ? undefined : flickable.bottom
+    anchors.left: isScreenPortrait ? parent.left : parent.horizontalCenter
+    anchors.right: parent.right
+    height: 30
+    visible: flickable.visible
+    opacity: atTop
+        ? (flickable.contentY > showDistance ? 1 : 0)
+        : (flickable.contentY < flickable.contentHeight - showDistance ? 1 : 0)
+    scale: atTop ? 1 : -1
+
+    readonly property real showDistance: 0
+    property Flickable flickable
+    property color gradientColor
+    /*! \c true if this indicator is at the top of the item */
+    property bool atTop
+
+    Behavior on opacity {
+        NumberAnimation {
+        }
+    }
+
+    gradient: Gradient {
+        GradientStop {
+            position: 0.0
+            color: gradientColor
+        }
+        GradientStop {
+            position: 1.0
+            color: "transparent"
+        }
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/PieMenuControlView.qml b/examples/quickcontrols/extras/gallery/qml/PieMenuControlView.qml
new file mode 100644
index 000000000..bbaa8637a
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/PieMenuControlView.qml
@@ -0,0 +1,187 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 1.1
+import QtQuick.Extras 1.4
+
+Rectangle {
+    id: view
+    color: customizerItem.currentStyleDark ? "#111" : "#555"
+
+    Behavior on color {
+        ColorAnimation {}
+    }
+
+    Keys.onReleased: {
+        if (event.key === Qt.Key_Back) {
+            stackView.pop();
+            event.accepted = true;
+        }
+    }
+
+    property bool darkBackground: true
+
+    property Component mouseArea
+
+    property Component customizer: Item {
+        property alias currentStylePath: stylePicker.currentStylePath
+        property alias currentStyleDark: stylePicker.currentStyleDark
+
+        StylePicker {
+            id: stylePicker
+            currentIndex: 0
+            width: Math.round(Math.max(textSingleton.implicitHeight * 6 * 2, parent.width * 0.5))
+            anchors.centerIn: parent
+
+            model: ListModel {
+                ListElement {
+                    name: "Default"
+                    path: "PieMenuDefaultStyle.qml"
+                    dark: false
+                }
+                ListElement {
+                    name: "Dark"
+                    path: "PieMenuDarkStyle.qml"
+                    dark: true
+                }
+            }
+        }
+    }
+
+    property alias controlItem: pieMenu
+    property alias customizerItem: customizerLoader.item
+
+    Item {
+        id: controlBoundsItem
+        width: parent.width
+        height: parent.height - toolbar.height
+        visible: customizerLoader.opacity === 0
+
+        Image {
+            id: bgImage
+            anchors.centerIn: parent
+            height: 48
+            Text {
+                id: bgLabel
+                anchors.top: parent.bottom
+                anchors.topMargin: 20
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: "Tap to open"
+                color: "#999"
+                font.pointSize: 20
+            }
+        }
+
+        MouseArea {
+            id: touchArea
+            anchors.fill: parent
+            onClicked: pieMenu.popup(touchArea.mouseX, touchArea.mouseY)
+        }
+
+        PieMenu {
+            id: pieMenu
+            triggerMode: TriggerMode.TriggerOnClick
+            width: Math.min(controlBoundsItem.width, controlBoundsItem.height) * 0.5
+            height: width
+
+            style: Qt.createComponent(customizerItem.currentStylePath)
+
+            MenuItem {
+                text: "Zoom In"
+                onTriggered: {
+                    bgImage.source = iconSource
+                    bgLabel.text = text + " selected"
+                }
+                iconSource: "qrc:/images/zoom_in.png"
+            }
+            MenuItem {
+                text: "Zoom Out"
+                onTriggered: {
+                    bgImage.source = iconSource
+                    bgLabel.text = text + " selected"
+                }
+                iconSource: "qrc:/images/zoom_out.png"
+            }
+            MenuItem {
+                text: "Info"
+                onTriggered: {
+                    bgImage.source = iconSource
+                    bgLabel.text = text + " selected"
+                }
+                iconSource: "qrc:/images/info.png"
+            }
+        }
+    }
+    Loader {
+        id: customizerLoader
+        sourceComponent: customizer
+        opacity: 0
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: 30
+        anchors.rightMargin: 30
+        y: parent.height / 2 - height / 2 - toolbar.height
+        visible: customizerLoader.opacity > 0
+
+        property alias view: view
+
+        Behavior on y {
+            NumberAnimation {
+                duration: 300
+            }
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: 300
+            }
+        }
+    }
+
+    ControlViewToolbar {
+        id: toolbar
+
+        onCustomizeClicked: {
+            customizerLoader.opacity = customizerLoader.opacity == 0 ? 1 : 0;
+        }
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/PieMenuDarkStyle.qml b/examples/quickcontrols/extras/gallery/qml/PieMenuDarkStyle.qml
new file mode 100644
index 000000000..98e042981
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/PieMenuDarkStyle.qml
@@ -0,0 +1,46 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.Controls.Styles 1.4
+
+PieMenuStyle {
+    backgroundColor: "#222"
+    shadowColor: Qt.rgba(1, 1, 1, 0.26)
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/PieMenuDefaultStyle.qml b/examples/quickcontrols/extras/gallery/qml/PieMenuDefaultStyle.qml
new file mode 100644
index 000000000..02a189d6b
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/PieMenuDefaultStyle.qml
@@ -0,0 +1,44 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.Controls.Styles 1.4
+
+PieMenuStyle {
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/StylePicker.qml b/examples/quickcontrols/extras/gallery/qml/StylePicker.qml
new file mode 100644
index 000000000..f1d2cad22
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/StylePicker.qml
@@ -0,0 +1,98 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Extras 1.4
+
+ListView {
+    id: stylePicker
+    width: parent.width
+    height: root.height * 0.06
+    interactive: false
+    spacing: -1
+
+    orientation: ListView.Horizontal
+
+    readonly property string currentStylePath: stylePicker.model.get(stylePicker.currentIndex).path
+    readonly property bool currentStyleDark: stylePicker.model.get(stylePicker.currentIndex).dark !== undefined
+        ? stylePicker.model.get(stylePicker.currentIndex).dark
+        : true
+
+    ExclusiveGroup {
+        id: styleExclusiveGroup
+    }
+
+    delegate: Button {
+        width: Math.round(stylePicker.width / stylePicker.model.count)
+        height: stylePicker.height
+        checkable: true
+        checked: index === ListView.view.currentIndex
+        exclusiveGroup: styleExclusiveGroup
+
+        onCheckedChanged: {
+            if (checked) {
+                ListView.view.currentIndex = index;
+            }
+        }
+
+        style: ButtonStyle {
+            background: Rectangle {
+                readonly property color checkedColor: currentStyleDark ? "#444" : "#777"
+                readonly property color uncheckedColor: currentStyleDark ? "#222" : "#bbb"
+                color: checked ? checkedColor : uncheckedColor
+                border.color: checkedColor
+                border.width: 1
+                radius: 1
+            }
+
+            label: Text {
+                text: name
+                color: currentStyleDark ? "white" : (checked ? "white" : "black")
+                font.pixelSize: root.toPixels(0.04)
+                font.family: openSans.name
+                anchors.centerIn: parent
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+        }
+    }
+}
diff --git a/examples/quickcontrols/extras/gallery/qml/gallery.qml b/examples/quickcontrols/extras/gallery/qml/gallery.qml
new file mode 100644
index 000000000..d6b46dc15
--- /dev/null
+++ b/examples/quickcontrols/extras/gallery/qml/gallery.qml
@@ -0,0 +1,439 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.2
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Dialogs 1.0
+import QtQuick.Extras 1.4
+import QtQuick.Layouts 1.0
+import QtQuick.Window 2.1
+
+Window {
+    id: root
+    objectName: "window"
+    visible: true
+    width: 480
+    height: 800
+
+    color: "#161616"
+    title: "Qt Quick Extras Demo"
+
+    function toPixels(percentage) {
+        return percentage * Math.min(root.width, root.height);
+    }
+
+    property bool isScreenPortrait: height > width
+    property color lightFontColor: "#222"
+    property color darkFontColor: "#e7e7e7"
+    readonly property color lightBackgroundColor: "#cccccc"
+    readonly property color darkBackgroundColor: "#161616"
+    property real customizerPropertySpacing: 10
+    property real colorPickerRowSpacing: 8
+
+    Text {
+        id: textSingleton
+    }
+
+    property Component circularGauge: CircularGaugeView {}
+
+    property Component dial: ControlView {
+        darkBackground: false
+
+        control: Column {
+            id: dialColumn
+            width: controlBounds.width
+            height: controlBounds.height - spacing
+            spacing: root.toPixels(0.05)
+
+            ColumnLayout {
+                id: volumeColumn
+                width: parent.width
+                height: (dialColumn.height - dialColumn.spacing) / 2
+                spacing: height * 0.025
+
+                Dial {
+                    id: volumeDial
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    /*!
+                        Determines whether the dial animates its rotation to the new value when
+                        a single click or touch is received on the dial.
+                    */
+                    property bool animate: customizerItem.animate
+
+                    Behavior on value {
+                        enabled: volumeDial.animate && !volumeDial.pressed
+                        NumberAnimation {
+                            duration: 300
+                            easing.type: Easing.OutSine
+                        }
+                    }
+                }
+
+                ControlLabel {
+                    id: volumeText
+                    text: "Volume"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+            ColumnLayout {
+                id: trebleColumn
+                width: parent.width
+                height: (dialColumn.height - dialColumn.spacing) / 2
+                spacing: height * 0.025
+
+                Dial {
+                    id: dial2
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    stepSize: 1
+                    maximumValue: 10
+
+                    style: DialStyle {
+                        labelInset: outerRadius * 0
+                    }
+                }
+
+                ControlLabel {
+                    id: trebleText
+                    text: "Treble"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+        }
+
+        customizer: Column {
+            spacing: customizerPropertySpacing
+
+            property alias animate: animateCheckBox.checked
+
+            CustomizerLabel {
+                text: "Animate"
+            }
+
+            CustomizerSwitch {
+                id: animateCheckBox
+            }
+        }
+    }
+
+    property Component delayButton: ControlView {
+        darkBackground: false
+
+        control: DelayButton {
+            text: "Alarm"
+            anchors.centerIn: parent
+        }
+    }
+
+    property Component gauge: ControlView {
+        id: gaugeView
+        control: Gauge {
+            id: gauge
+            width: orientation === Qt.Vertical ? implicitWidth : gaugeView.controlBounds.width
+            height: orientation === Qt.Vertical ? gaugeView.controlBounds.height : implicitHeight
+            anchors.centerIn: parent
+
+            minimumValue: 0
+            value: customizerItem.value
+            maximumValue: 100
+            orientation: customizerItem.orientationFlag ? Qt.Vertical : Qt.Horizontal
+            tickmarkAlignment: orientation === Qt.Vertical
+                ? (customizerItem.alignFlag ? Qt.AlignLeft : Qt.AlignRight)
+                : (customizerItem.alignFlag ? Qt.AlignTop : Qt.AlignBottom)
+        }
+
+        customizer: Column {
+            spacing: customizerPropertySpacing
+
+            property alias value: valueSlider.value
+            property alias orientationFlag: orientationCheckBox.checked
+            property alias alignFlag: alignCheckBox.checked
+
+            CustomizerLabel {
+                text: "Value"
+            }
+
+            CustomizerSlider {
+                id: valueSlider
+                minimumValue: 0
+                value: 50
+                maximumValue: 100
+            }
+
+            CustomizerLabel {
+                text: "Vertical orientation"
+            }
+
+            CustomizerSwitch {
+                id: orientationCheckBox
+                checked: true
+            }
+
+            CustomizerLabel {
+                text: controlItem.orientation === Qt.Vertical ? "Left align" : "Top align"
+            }
+
+            CustomizerSwitch {
+                id: alignCheckBox
+                checked: true
+            }
+        }
+    }
+
+    property Component toggleButton: ControlView {
+        darkBackground: false
+
+        control: ToggleButton {
+            text: checked ? "On" : "Off"
+            anchors.centerIn: parent
+        }
+    }
+
+    property Component pieMenu: PieMenuControlView {}
+
+    property Component statusIndicator: ControlView {
+        id: statusIndicatorView
+        darkBackground: false
+
+        Timer {
+            id: recordingFlashTimer
+            running: true
+            repeat: true
+            interval: 1000
+        }
+
+        ColumnLayout {
+            id: indicatorLayout
+            width: statusIndicatorView.controlBounds.width * 0.25
+            height: statusIndicatorView.controlBounds.height * 0.75
+            anchors.centerIn: parent
+
+            Repeater {
+                model: ListModel {
+                    id: indicatorModel
+                    ListElement {
+                        name: "Power"
+                        indicatorColor: "#35e02f"
+                    }
+                    ListElement {
+                        name: "Recording"
+                        indicatorColor: "red"
+                    }
+                }
+
+                ColumnLayout {
+                    Layout.preferredWidth: indicatorLayout.width
+                    spacing: 0
+
+                    StatusIndicator {
+                        id: indicator
+                        color: indicatorColor
+                        Layout.preferredWidth: statusIndicatorView.controlBounds.width * 0.07
+                        Layout.preferredHeight: Layout.preferredWidth
+                        Layout.alignment: Qt.AlignHCenter
+                        on: true
+
+                        Connections {
+                            target: recordingFlashTimer
+                            onTriggered: if (name == "Recording") indicator.active = !indicator.active
+                        }
+                    }
+                    ControlLabel {
+                        id: indicatorLabel
+                        text: name
+                        Layout.alignment: Qt.AlignHCenter
+                        Layout.maximumWidth: parent.width
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+                }
+            }
+        }
+    }
+
+    property Component tumbler: ControlView {
+        id: tumblerView
+        darkBackground: false
+
+        Tumbler {
+            id: tumbler
+            anchors.centerIn: parent
+
+            // TODO: Use FontMetrics with 5.4
+            Label {
+                id: characterMetrics
+                font.bold: true
+                font.pixelSize: textSingleton.font.pixelSize * 1.25
+                font.family: openSans.name
+                visible: false
+                text: "M"
+            }
+
+            readonly property real delegateTextMargins: characterMetrics.width * 1.5
+            readonly property var days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+
+            TumblerColumn {
+                id: tumblerDayColumn
+
+                function updateModel() {
+                    var previousIndex = tumblerDayColumn.currentIndex;
+                    var newDays = tumbler.days[monthColumn.currentIndex];
+
+                    if (!model) {
+                        var array = [];
+                        for (var i = 0; i < newDays; ++i) {
+                            array.push(i + 1);
+                        }
+                        model = array;
+                    } else {
+                        // If we've already got days in the model, just add or remove
+                        // the minimum amount necessary to make spinning the month column fast.
+                        var difference = model.length - newDays;
+                        if (model.length > newDays) {
+                            model.splice(model.length - 1, difference);
+                        } else {
+                            var lastDay = model[model.length - 1];
+                            for (i = lastDay; i < lastDay + difference; ++i) {
+                                model.push(i + 1);
+                            }
+                        }
+                    }
+
+                    tumbler.setCurrentIndexAt(0, Math.min(newDays - 1, previousIndex));
+                }
+            }
+            TumblerColumn {
+                id: monthColumn
+                width: characterMetrics.width * 3 + tumbler.delegateTextMargins
+                model: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+                onCurrentIndexChanged: tumblerDayColumn.updateModel()
+            }
+            TumblerColumn {
+                width: characterMetrics.width * 4 + tumbler.delegateTextMargins
+                model: ListModel {
+                    Component.onCompleted: {
+                        for (var i = 2000; i < 2100; ++i) {
+                            append({value: i.toString()});
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+    FontLoader {
+        id: openSans
+        source: "qrc:/fonts/OpenSans-Regular.ttf"
+     }
+
+    property var componentMap: {
+        "CircularGauge": circularGauge,
+        "DelayButton": delayButton,
+        "Dial": dial,
+        "Gauge": gauge,
+        "PieMenu": pieMenu,
+        "StatusIndicator": statusIndicator,
+        "ToggleButton": toggleButton,
+        "Tumbler": tumbler
+    }
+
+    StackView {
+        id: stackView
+        anchors.fill: parent
+
+        initialItem: ListView {
+            model: ListModel {
+                ListElement {
+                    title: "CircularGauge"
+                }
+                ListElement {
+                    title: "DelayButton"
+                }
+                ListElement {
+                    title: "Dial"
+                }
+                ListElement {
+                    title: "Gauge"
+                }
+                ListElement {
+                    title: "PieMenu"
+                }
+                ListElement {
+                    title: "StatusIndicator"
+                }
+                ListElement {
+                    title: "ToggleButton"
+                }
+                ListElement {
+                    title: "Tumbler"
+                }
+            }
+
+            delegate: Button {
+                width: stackView.width
+                height: root.height * 0.125
+                text: title
+
+                style: BlackButtonStyle {
+                    fontColor: root.darkFontColor
+                    rightAlignedIconSource: "qrc:/images/icon-go.png"
+                }
+
+                onClicked: {
+                    if (stackView.depth == 1) {
+                        // Only push the control view if we haven't already pushed it...
+                        stackView.push({item: componentMap[title]});
+                        stackView.currentItem.forceActiveFocus();
+                    }
+                }
+            }
+        }
+    }
+}
+
+