Merge Extras' styling system into Controls'.

- Removes the duplicated style settings functionality in Extras and
  simplifies the installed styles directory structure.

- Extras' Base style is now part of Controls' Base style, eliminating
  the need for a separate QtQuick.Extras.Styles import. The cost of
  doing this should be negligible: a few QML files and two images.

  If we didn't merge Extras' Baste style into Controls', we'd need
  extras-specific code in qquickcontrolssettings, as the default style
  search path is:

  qml/QtQuick/Controls/Styles/

  Whereas the Extras Base style would be in:

  qml/QtQuick/Extras/Styles/

  The Extras Base style can't go into Controls' Base style directory,
  either, because otherwise we'd have two qmldir files there.

  The Flat style doesn't have this problem because it is all contained
  in one plugin and gets installed into its own Flat/ folder.

- Documentation now lists the Extras controls as \since QtQuick.Extras
  1.4.

- Adds the customcontrolsstyle auto test to ensure that custom styling
  is tested.

Change-Id: I19ca7a8b7e1c1daa85b272f4ccf9a2f05c76e0d9
Reviewed-by: Caroline Chao <caroline.chao@theqtcompany.com>
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

1 files changed, 233 insertions, 0 deletions

diff --git a/src/controls/Styles/Base/StatusIndicatorStyle.qml b/src/controls/Styles/Base/StatusIndicatorStyle.qml
new file mode 100644
index 00000000..62ed1038
--- /dev/null
+++ b/src/controls/Styles/Base/StatusIndicatorStyle.qml
@@ -0,0 +1,233 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Extras module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtGraphicalEffects 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Extras 1.4
+
+/*!
+    \qmltype StatusIndicatorStyle
+    \inqmlmodule QtQuick.Controls.Styles
+    \since 5.5
+    \ingroup controlsstyling
+    \brief Provides custom styling for StatusIndicatorStyle.
+
+    You can create a custom status indicator by defining the \l indicator
+    component.
+*/
+
+Style {
+    id: pieMenuStyle
+
+    /*!
+        The \l StatusIndicator that this style is attached to.
+    */
+    readonly property StatusIndicator control: __control
+
+    /*!
+        The color that instances of
+        \l {QtQuick.Extras::}{StatusIndicator} will have.
+        The \l {QtQuick.Extras::StatusIndicator::}{color}
+        property in \l {QtQuick.Extras::}{StatusIndicator}
+        will override this property when set.
+    */
+    property color color: "red"
+
+    /*!
+        This defines the indicator in both its on and off status.
+    */
+    property Component indicator: Item {
+        readonly property real shineStep: 0.05
+        readonly property real smallestAxis: Math.min(control.width, control.height)
+        readonly property real shadowRadius: smallestAxis * 0.4
+        readonly property real outerRecessPercentage: 0.11
+        readonly property color offColor: Qt.rgba(0.13, 0.13, 0.13)
+        readonly property color baseColor: control.active ? control.color : offColor
+
+        implicitWidth: TextSingleton.implicitHeight * 2
+        implicitHeight: implicitWidth
+
+        Canvas {
+            id: backgroundCanvas
+            width: Math.min(parent.width, parent.height)
+            // height: width --- QTBUG-42878
+            height: Math.min(parent.width, parent.height)
+            anchors.centerIn: parent
+
+            Connections {
+                target: control
+                onActiveChanged: backgroundCanvas.requestPaint()
+                onColorChanged: backgroundCanvas.requestPaint()
+            }
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+
+                // Draw the semi-transparent background.
+                ctx.beginPath();
+                var gradient = ctx.createLinearGradient(width / 2, 0, width / 2, height * 0.75);
+                gradient.addColorStop(0.0, Qt.rgba(0, 0, 0, control.active ? 0.1 : 0.25));
+                gradient.addColorStop(1.0, control.active ? Qt.rgba(0, 0, 0, 0.1) : Qt.rgba(0.74, 0.74, 0.74, 0.25));
+
+                ctx.fillStyle = gradient;
+                ctx.ellipse(0, 0, width, height);
+                ctx.fill();
+            }
+        }
+
+        Item {
+            id: shadowGuard
+            anchors.fill: backgroundCanvas
+            anchors.margins: -shadowRadius
+
+            Canvas {
+                id: colorCanvas
+                anchors.fill: parent
+                anchors.margins: shadowRadius
+
+                Connections {
+                    target: control
+                    onActiveChanged: colorCanvas.requestPaint()
+                    onColorChanged: colorCanvas.requestPaint()
+                }
+
+                onPaint: {
+                    var ctx = getContext("2d");
+                    ctx.reset();
+
+                    // Draw the actual color within the circle.
+                    ctx.beginPath();
+                    ctx.fillStyle = baseColor;
+                    var recess = smallestAxis * outerRecessPercentage;
+                    ctx.ellipse(recess, recess, width - recess * 2, height - recess * 2);
+                    ctx.fill();
+                }
+            }
+        }
+
+        DropShadow {
+            id: shadow
+            source: shadowGuard
+            color: control.color
+            // Don't set fast here because Qt < 5.3 will run into QTBUG-36931
+            radius: shadowRadius
+            samples: Math.min(32, radius)
+            cached: true
+            anchors.fill: shadowGuard
+            visible: control.active
+        }
+
+        Canvas {
+            id: foregroundCanvas
+            anchors.fill: backgroundCanvas
+
+            Connections {
+                target: control
+                onActiveChanged: foregroundCanvas.requestPaint()
+                onColorChanged: foregroundCanvas.requestPaint()
+            }
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+
+                // Draw the first shine.
+                ctx.beginPath();
+                ctx.fillStyle = Qt.rgba(1, 1, 1, 0.03);
+                var recessPercentage = outerRecessPercentage + shineStep * 0.65;
+                var recess = smallestAxis * recessPercentage;
+                ctx.ellipse(recess, recess, width - recess * 2, height - recess * 2);
+                ctx.fill();
+
+                // Draw the second, inner shine.
+                ctx.beginPath();
+                ctx.fillStyle = Qt.rgba(1, 1, 1, 0.06);
+                recessPercentage += shineStep;
+                recess = smallestAxis * recessPercentage;
+                ctx.ellipse(recess, recess, width - recess * 2, height - recess * 2);
+                ctx.fill();
+
+                // Now draw the final arced shine that goes over the first and second shines.
+                // First, clip the entire shine area.
+                ctx.beginPath();
+                recessPercentage -= shineStep;
+                recess = smallestAxis * recessPercentage;
+                ctx.ellipse(recess, recess, width - recess * 2, height - recess * 2);
+                ctx.clip();
+
+                if (!control.active) {
+                    // Then, clip the bottom area out of the shine.
+                    ctx.ellipse(recess, height * 0.425, width - recess * 2, height - recess * 2);
+                    ctx.clip();
+                }
+
+                ctx.beginPath();
+                var gradient;
+                if (!control.active) {
+                    // Draw the shine arc.
+                    gradient = ctx.createLinearGradient(width / 2, height * 0.2, width / 2, height * 0.65);
+                    gradient.addColorStop(0.0, Qt.rgba(1, 1, 1, 0.05));
+                    gradient.addColorStop(1.0, "transparent");
+                } else {
+                    // Draw the radial shine.
+                    gradient = ctx.createRadialGradient(width / 2, height / 2, width * 0.25, width / 2, height / 2, width * 0.25);
+                    gradient.addColorStop(0.0, Qt.lighter(baseColor, 1.4));
+                    gradient.addColorStop(1.0, "transparent");
+                }
+
+                ctx.fillStyle = gradient;
+                ctx.ellipse(recess, recess, width - recess * 2, height - recess * 2);
+                ctx.fill();
+            }
+        }
+    }
+
+    /*! \internal */
+    property Component panel: Item {
+        implicitWidth: indicatorLoader.implicitWidth
+        implicitHeight: indicatorLoader.implicitHeight
+
+        Loader {
+            id: indicatorLoader
+            width: Math.max(1, parent.width)
+            height: Math.max(1, parent.height)
+            anchors.centerIn: parent
+            sourceComponent: indicator
+        }
+    }
+}