Doc: add cover flow screenshot of styles

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

6 files changed, 470 insertions, 0 deletions

diff --git a/src/imports/controls/doc/images/qtquickcontrols2-styles.png b/src/imports/controls/doc/images/qtquickcontrols2-styles.png
index aae046fd..39626e50 100644
--- a/src/imports/controls/doc/images/qtquickcontrols2-styles.png
+++ b/src/imports/controls/doc/images/qtquickcontrols2-styles.png
diff --git a/tests/manual/styles-cover-flow/CoverFlowDelegate.qml b/tests/manual/styles-cover-flow/CoverFlowDelegate.qml
new file mode 100644
index 00000000..8b220269
--- /dev/null
+++ b/tests/manual/styles-cover-flow/CoverFlowDelegate.qml
@@ -0,0 +1,136 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the test suite of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 QtGraphicalEffects 1.0
+import QtQuick 2.10
+
+Item {
+    id: root
+    width: PathView.view.delegateSize
+    height: width
+    z: PathView.zOrder
+
+    transform: [
+        Rotation {
+            angle: root.PathView.rotateY
+            origin.x: sourceImage.width / 2
+            origin.y: sourceImage.height * 0.3
+            axis.x: 0
+            axis.y: 1
+            axis.z: 0
+        },
+        Scale {
+            xScale: 1.0
+            yScale: root.PathView.scale
+            origin.x: sourceImage.width / 2
+            origin.y: sourceImage.height * 0.4
+        }
+    ]
+
+    Image {
+        id: sourceImage
+        width: root.PathView.view.delegateSize
+        height: width
+        fillMode: Image.PreserveAspectFit
+        source: "file:/" + docImagesDir + model.source
+
+        Rectangle {
+            x: (sourceImage.width - sourceImage.paintedWidth) / 2
+            width: sourceImage.paintedWidth + (index == 6 ? 2 : 1)
+            height: sourceImage.height
+            color: "transparent"
+            border.color: "#f4f4f4"
+            antialiasing: true
+            visible: !model.dark
+        }
+    }
+
+    ShaderEffectSource {
+        id: reflection
+        sourceItem: sourceImage
+        y: sourceItem.height
+        width: sourceItem.width
+        height: sourceItem.height
+
+        transform: [
+            Rotation {
+                origin.x: reflection.width / 2
+                origin.y: reflection.height / 2
+                axis.x: 1
+                axis.y: 0
+                axis.z: 0
+                angle: 180
+            }
+        ]
+    }
+
+    Rectangle {
+        objectName: sourceImage.source.toString().slice(-20)
+        x: (parent.width - sourceImage.paintedWidth) / 2// + (paintedWidthDiff > 0 ? 1.0 - paintedWidthDiff : 0)
+        y: reflection.y
+        width: sourceImage.paintedWidth + (index == 6 ? 2 : 1)
+        height: sourceImage.paintedHeight
+
+        // TODO: figure out how to get perfect x/width without using the current width hack
+//        readonly property real paintedWidthDiff: sourceImage.paintedWidth - Math.floor(sourceImage.paintedWidth)
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0.0
+                color: Qt.rgba(backgroundColor.r, backgroundColor.g, backgroundColor.b, 0.33)
+            }
+            GradientStop {
+                // This determines the point at which the reflection fades out.
+                position: 1.0
+                color: backgroundColor
+            }
+        }
+    }
+}
diff --git a/tests/manual/styles-cover-flow/CoverFlowPath.qml b/tests/manual/styles-cover-flow/CoverFlowPath.qml
new file mode 100644
index 00000000..f50cf31d
--- /dev/null
+++ b/tests/manual/styles-cover-flow/CoverFlowPath.qml
@@ -0,0 +1,157 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the test suite of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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.10
+
+Path {
+    // Point 1
+    property PathView pathView
+
+    startX: 0
+    startY: pathView.centerY
+
+    PathAttribute {
+        name: "rotateY"
+        value: 50.0
+    }
+    PathAttribute {
+        name: "scale"
+        value: 0.7
+    }
+    PathAttribute {
+        name: "zOrder"
+        value: 1.0
+    }
+
+    // Line to point 2
+    PathLine {
+        x: pathView.centerX - pathView.delegateSize * 0.4
+        y: pathView.centerY
+    }
+    PathPercent {
+        value: 0.44
+    }
+    PathAttribute {
+        name: "rotateY"
+        value: 50.0
+    }
+    PathAttribute {
+        name: "scale"
+        value: 0.7
+    }
+    PathAttribute {
+        name: "zOrder"
+        value: 10.0
+    }
+
+    // Quad to point 3
+    PathQuad {
+        x: pathView.centerX
+        y: pathView.centerY + pathView.delegateSize * 0.04
+        controlX: pathView.centerX - pathView.delegateSize * 0.2
+        controlY: pathView.centerY + pathView.delegateSize * 0.04
+    }
+    PathPercent {
+        value: 0.5
+    }
+    PathAttribute {
+        name: "rotateY"
+        value: 0.0
+    }
+    PathAttribute {
+        name: "scale"
+        value: 1.0
+    }
+    PathAttribute {
+        name: "zOrder"
+        value: 50.0
+    }
+
+    // Quad to point 4
+    PathQuad {
+        x: pathView.centerX + pathView.delegateSize * 0.4
+        y: pathView.centerY
+        controlX: pathView.centerX + pathView.delegateSize * 0.2
+        controlY: pathView.centerY + pathView.delegateSize * 0.04
+    }
+    PathPercent {
+        value: 0.56
+    }
+    PathAttribute {
+        name: "rotateY"
+        value: -50.0
+    }
+    PathAttribute {
+        name: "scale"
+        value: 0.7
+    }
+    PathAttribute {
+        name: "zOrder"
+        value: 10.0
+    }
+
+    // Line to point 5
+    PathLine {
+        x: pathView.width
+        y: pathView.centerY
+    }
+    PathAttribute {
+        name: "rotateY"
+        value: -50.0
+    }
+    PathAttribute {
+        name: "scale"
+        value: 0.7
+    }
+    PathAttribute {
+        name: "zOrder"
+        value: 1.0
+    }
+}
diff --git a/tests/manual/styles-cover-flow/styles-cover-flow.cpp b/tests/manual/styles-cover-flow/styles-cover-flow.cpp
new file mode 100644
index 00000000..d665d613
--- /dev/null
+++ b/tests/manual/styles-cover-flow/styles-cover-flow.cpp
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the test suite of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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$
+**
+****************************************************************************/
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+#include <QQmlContext>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.rootContext()->setContextProperty("docImagesDir", QString(DOC_IMAGES_DIR));
+    engine.load(QUrl("qrc:/styles-cover-flow.qml"));
+    if (engine.rootObjects().isEmpty())
+        return -1;
+
+    return app.exec();
+}
diff --git a/tests/manual/styles-cover-flow/styles-cover-flow.pro b/tests/manual/styles-cover-flow/styles-cover-flow.pro
new file mode 100644
index 00000000..2faa9fba
--- /dev/null
+++ b/tests/manual/styles-cover-flow/styles-cover-flow.pro
@@ -0,0 +1,11 @@
+TEMPLATE = app
+TARGET = stylescoverflow
+QT += quick quickcontrols2
+
+SOURCES += \
+    styles-cover-flow.cpp
+
+RESOURCES += \
+    $$files(*.qml, true)
+
+DEFINES += DOC_IMAGES_DIR=\\\"$$PWD/../../../src/imports/controls/doc/images/\\\"
diff --git a/tests/manual/styles-cover-flow/styles-cover-flow.qml b/tests/manual/styles-cover-flow/styles-cover-flow.qml
new file mode 100644
index 00000000..3d8aea0f
--- /dev/null
+++ b/tests/manual/styles-cover-flow/styles-cover-flow.qml
@@ -0,0 +1,100 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the test suite of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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.10
+import QtQuick.Window 2.3
+
+Window {
+    // Different delegate positions and widths and window background colors
+    // can cause some unwanted "rogue pixels", so an easy way to get it perfect
+    // is to mess with the width.
+    width: 814
+    height: 512
+    visible: true
+    color: backgroundColor
+    flags: Qt.FramelessWindowHint
+
+    readonly property color backgroundColor: "#ffffff"
+
+    Shortcut {
+        sequence: "Ctrl+Q"
+        onActivated: Qt.quit()
+    }
+
+    PathView {
+        id: view
+        anchors.fill: parent
+        anchors.leftMargin: 130
+        anchors.rightMargin: 130
+        model: ListModel {
+            ListElement { source: "qtquickcontrols2-default.png"; dark: false }
+            ListElement { source: "qtquickcontrols2-fusion.png"; dark: false }
+            ListElement { source: "qtquickcontrols2-universal-light.png"; dark: false }
+            ListElement { source: "qtquickcontrols2-universal-dark.png"; dark: true }
+            ListElement { source: "qtquickcontrols2-material-dark.png"; dark: true }
+            ListElement { source: "qtquickcontrols2-imagine.png"; dark: false }
+            ListElement { source: "qtquickcontrols2-material-light.png"; dark: false }
+        }
+
+        highlightRangeMode: PathView.StrictlyEnforceRange
+        preferredHighlightBegin: 0.5
+        preferredHighlightEnd: 0.5
+        pathItemCount: 9
+
+        property real centerX: width / 2
+        property real centerY: height * 0.4
+        property real delegateSize: 393 / 2
+
+        path: CoverFlowPath {
+            pathView: view
+        }
+        delegate: CoverFlowDelegate {}
+    }
+}