qml: Add PeersIndicator component

Co-authored-by: Christoph Ono <[email protected]>

Author: 2 people

src/Makefile.qt.include

@@ -333,6 +333,7 @@ QML_RES_QML = \
   qml/components/ConnectionOptions.qml \
   qml/components/ConnectionSettings.qml \
   qml/components/DeveloperOptions.qml \
+  qml/components/PeersIndicator.qml \
   qml/components/StorageLocations.qml \
   qml/components/StorageOptions.qml \
   qml/components/StorageSettings.qml \

src/qml/bitcoin_qml.qrc

@@ -5,6 +5,7 @@
         <file>components/BlockCounter.qml</file>
         <file>components/ConnectionOptions.qml</file>
         <file>components/ConnectionSettings.qml</file>
+        <file>components/PeersIndicator.qml</file>
         <file>components/DeveloperOptions.qml</file>
         <file>components/StorageLocations.qml</file>
         <file>components/StorageOptions.qml</file>

src/qml/components/PeersIndicator.qml

@@ -0,0 +1,33 @@
+// Copyright (c) 2023 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import "../controls"
+
+RowLayout {
+    id: root
+    required property int numOutboundPeers
+    required property int maxNumOutboundPeers
+    property int size: 5
+
+    spacing: 5
+    Repeater {
+        model: 5
+        Rectangle {
+            width: 3
+            height: 3
+            radius: width / 2
+            color: Theme.color.neutral9
+            opacity: (index === 0 && root.numOutboundPeers > 0) || (index + 1 <= root.size * root.numOutboundPeers / root.maxNumOutboundPeers) ? 0.95 : 0.45
+            Behavior on opacity { OpacityAnimator { duration: 100 } }
+            SequentialAnimation on opacity {
+                loops: Animation.Infinite
+                running: numOutboundPeers === 0 && index === 0
+                SmoothedAnimation { to: 0; velocity: 2.2 }
+                SmoothedAnimation { to: 1; velocity: 2.2 }
+            }
+        }
+    }
+}