Add pie shaped progress bar for chatbar instead of busy indicator

![2023-03-15_15-06-51](/uploads/7a56d2a1696e26b87451b0951995a730/2023-03-15_15-06-51.mp4)

Closes network/neochat#151

.kde-ci.yml

@@ -11,6 +11,7 @@ Dependencies:
     'frameworks/kconfig': '@stable'
     'frameworks/syntax-highlighting': '@stable'
     'frameworks/kitemmodels': '@stable'
+    'frameworks/kquickcharts': '@stable'
     'frameworks/knotifications': '@stable'
     'libraries/kquickimageeditor': '@stable'
     'frameworks/sonnet': '@stable'
@@ -38,6 +39,7 @@ Dependencies:
     'frameworks/kconfig': '@latest-kf6'
     'frameworks/syntax-highlighting': '@latest-kf6'
     'frameworks/kitemmodels': '@latest-kf6'
+    'frameworks/kquickcharts': '@latest-kf6'
     'frameworks/knotifications': '@latest-kf6'
     'libraries/kquickimageeditor': '@latest-kf6'
     'frameworks/sonnet': '@latest-kf6'

CMakeLists.txt

@@ -111,6 +111,7 @@ set_package_properties(cmark PROPERTIES
 
 ecm_find_qmlmodule(org.kde.kquickimageeditor 1.0)
 ecm_find_qmlmodule(org.kde.kitemmodels 1.0)
+ecm_find_qmlmodule(org.kde.quickcharts 1.0)
 
 find_package(KQuickImageEditor COMPONENTS)
 set_package_properties(KQuickImageEditor PROPERTIES

src/qml/Component/ChatBox/ChatBar.qml

@@ -313,14 +313,9 @@ QQC2.Control {
                 QQC2.ToolTip.text: modelData.tooltip
                 HoverHandler { id: hoverHandler }
 
-                QQC2.BusyIndicator {
+                PieProgressBar {
-                    anchors.fill: parent
+                    visible: modelData.isBusy
-                    leftPadding: 0
+                    progress: currentRoom.fileUploadingProgress
-                    rightPadding: 0
-                    topPadding: 0
-                    bottomPadding: 0
-                    visible: running
-                    running: modelData.isBusy
                 }
             }
         }

src/qml/Component/ChatBox/PieProgressBar.qml

@@ -0,0 +1,65 @@
+// SPDX-FileCopyrightText: 2023 James Graham <james.h.graham@protonmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
+
+import QtQuick 2.15
+
+import org.kde.kirigami 2.18 as Kirigami
+import org.kde.quickcharts 1.0 as Charts
+
+/**
+ * @brief A circular progress bar that fills an arc as progress goes up.
+ */
+Rectangle {
+    id: root
+
+    /**
+     * @brief Progress of the circle as a percentage.
+     *
+     * Range - 0% to 100%.
+     */
+    property int progress: 0
+
+    /**
+     * @brief Offset angle for the start of the pie fill arc.
+     *
+     * This defaults to 0, i.e. an upward vertical line from the center. This rotates
+     * that start point by the desired number of degrees.
+     *
+     * Range - 0 degrees to 360 degrees
+     */
+    property int startOffset: 0
+
+    /**
+     * @brief Fill color of the pie.
+     */
+    property color pieColor: Kirigami.Theme.highlightColor
+
+    width: Kirigami.Units.iconSizes.smallMedium
+    height: Kirigami.Units.iconSizes.smallMedium
+    radius: width / 2
+    color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15)
+
+    Charts.PieChart {
+        id: chart
+        anchors.fill: parent
+        anchors.margins: 1
+
+        filled: true
+        // Set chart background color so the parent filled rectangle looks like
+        // an outline.
+        backgroundColor: Kirigami.Theme.backgroundColor
+        fromAngle: root.startOffset
+        toAngle: 360 + root.startOffset
+        range {
+            from: 0
+            to: 100
+            automatic: false
+        }
+        valueSources: Charts.SingleValueSource {
+            value: root.progress
+        }
+        colorSource: Charts.SingleValueSource {
+            value: Kirigami.Theme.highlightColor
+        }
+    }
+}

src/res.qrc

@@ -29,6 +29,7 @@
         <file alias="AttachmentPane.qml">qml/Component/ChatBox/AttachmentPane.qml</file>
         <file alias="ReplyPane.qml">qml/Component/ChatBox/ReplyPane.qml</file>
         <file alias="CompletionMenu.qml">qml/Component/ChatBox/CompletionMenu.qml</file>
+        <file alias="PieProgressBar.qml">qml/Component/ChatBox/PieProgressBar.qml</file>
         <file alias="EmojiPicker.qml">qml/Component/Emoji/EmojiPicker.qml</file>
         <file alias="ReplyComponent.qml">qml/Component/Timeline/ReplyComponent.qml</file>
         <file alias="StateDelegate.qml">qml/Component/Timeline/StateDelegate.qml</file>