Add HCircleProgressBar

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "submodules/qsyncable"]
 	path = submodules/qsyncable
 	url = https://github.com/benlau/qsyncable
+[submodule "submodules/RadialBarDemo"]
+	path = submodules/RadialBarDemo
+	url = https://github.com/arunpkqt/RadialBarDemo

TODO.md

@@ -1,10 +1,9 @@
 - Media
-  - Show upload progression
   - Theming (upload bar, media text bubbles)
   - Downloading
     - Bottom/top bar
-  - Image loading progress bar
   - Verify things work with chat.privacytools.io (subdomain weirdness)
+  - Show real progression for thumbnail loadings, uploads and downloads
 
   - Support m.file thumbnails
   - Generate video thumbnails

harmonyqml.pro

@@ -12,8 +12,10 @@ RCC_DIR     = $$BUILD_DIR/rcc
 QRC_FILE = $$BUILD_DIR/resources.qrc
 
 RESOURCES += $$QRC_FILE
-HEADERS   += src/utils.h src/clipboard.h
-SOURCES   += src/main.cpp src/utils.cpp src/clipboard.cpp
+HEADERS   += src/utils.h src/clipboard.h \
+             submodules/RadialBarDemo/radialbar.h
+SOURCES   += src/main.cpp src/utils.cpp src/clipboard.cpp \
+             submodules/RadialBarDemo/radialbar.cpp
 TARGET     = harmonyqml
 
 

src/main.cpp

@@ -4,6 +4,8 @@
 #include <QQmlComponent>
 #include <QFileInfo>
 
+#include "../submodules/RadialBarDemo/radialbar.h"
+
 #include "utils.h"
 #include "clipboard.h"
 
@@ -28,6 +30,8 @@ int main(int argc, char *argv[]) {
     objectContext->setContextProperty("CppUtils", new Utils());
     objectContext->setContextProperty("Clipboard", new Clipboard());
 
+    qmlRegisterType<RadialBar>("RadialBar", 1, 0, "RadialBar");
+
     QFileInfo qrcPath(":src/qml/Window.qml");
 
     QQmlComponent component(

src/qml/Base/HCircleProgressBar.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.12
+import RadialBar 1.0
+
+RadialBar {
+    id: bar
+    foregroundColor: theme.controls.circleProgressBar.background
+    progressColor: theme.controls.circleProgressBar.foreground
+    dialWidth: theme.controls.circleProgressBar.thickness
+    startAngle: 0
+    spanAngle: 360
+
+    from: 0
+    to: 100
+    value: 0
+
+    showText: true
+    suffixText: qsTr("%")
+    textFont.pixelSize: theme.fontSize.big
+    textColor: theme.controls.circleProgressBar.text
+
+
+    property alias from: bar.minValue
+    property alias to: bar.maxValue
+    property bool indeterminate: false
+
+
+    Binding {
+        target: bar;
+        property: "value";
+        value: bar.to * theme.controls.circleProgressBar.indeterminateSpan
+        when: bar.indeterminate
+    }
+
+    Binding {
+        target: bar
+        property: "showText"
+        value: false
+        when: bar.indeterminate
+    }
+
+    RotationAnimator on rotation {
+        running: bar.indeterminate
+        from: 0
+        to: 360
+        loops: Animation.Infinite
+        duration: theme ? (theme.animationDuration * 6) : 600
+    }
+}

src/themes/Default.qpl

@@ -176,6 +176,13 @@ controls:
         color background: colors.inputBackground
         color foreground: colors.accentBackground
 
+    circleProgressBar:
+        int thickness:          Math.max(2, spacing / 2)
+        color background:       colors.inputBackground
+        color foreground:       colors.accentBackground
+        color text:             colors.text
+        real indeterminateSpan: 0.2  // 0-1
+
     slider:
         int radius:       2
         int height:       controls.progressBar.height

submodules/RadialBarDemo

@@ -0,0 +1 @@
+Subproject commit 7c3ebecf4ef0c23776c591ee5d37ff104d04f798