Restore circular progress bar in compact notification applet

Summary:
During the port to Qt5 the circular progress bar was lost, since there is no
simple way to do circular progress bars. Now that KQuickCharts is available
as a framework, we can restore the circular progress bar in the notifications.

Video:
{F7819233}

Test Plan: Start a long-ish running job like copying a file.

Reviewers: #plasma, broulik

Reviewed By: #plasma, broulik

Subscribers: broulik, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D26012

applets/notifications/package/contents/ui/CompactRepresentation.qml

@@ -24,6 +24,8 @@ import QtQuick.Layouts 1.1
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 
+import org.kde.quickcharts 1.0 as Charts
+
 MouseArea {
     id: compactRoot
 
@@ -66,29 +68,19 @@ MouseArea {
 
         elementId: "notification-inactive"
 
-        Item {
-            id: jobProgressItem
-            anchors {
-                left: parent.left
-                top: parent.top
-                bottom: parent.bottom
-            }
-            width: notificationIcon.width * (jobsPercentage / 100)
+        Charts.PieChart {
+            id: chart
+
+            anchors.fill: parent
 
-            clip: true
             visible: false
 
-            PlasmaCore.SvgItem {
-                anchors {
-                    left: parent.left
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                width: notificationIcon.width
+            range { from: 0; to: 100; automatic: false }
 
-                svg: notificationSvg
-                elementId: "notification-progress-active"
-            }
+            valueSources: Charts.SingleValueSource { value: compactRoot.jobsPercentage }
+            colorSource: Charts.SingleValueSource { value: theme.highlightColor }
+
+            thickness: units.devicePixelRatio * 5
         }
 
         PlasmaComponents.Label {
@@ -138,12 +130,16 @@ MouseArea {
             }
             PropertyChanges {
                 target: busyIndicator
-                visible: true
+                visible: compactRoot.jobsPercentage == 0
             }
             PropertyChanges {
                 target: jobProgressItem
                 visible: true
             }
+            PropertyChanges {
+                target: chart
+                visible: true
+            }
         },
         State { // do not disturb
             when: compactRoot.inhibited