qml: Introduce Tooltip for the BlockClock navbar button

johnny9 · johnny9 · commit bd62c7cf0a9e · 2024-05-06T21:52:17.000-04:00
The Tooltip will appear when hovering over the BlockClock tab
button in the desktop navigation bar. It will show the current
state of IBD.
diff --git a/src/Makefile.qt.include b/src/Makefile.qt.include
@@ -336,7 +336,8 @@ QML_RES_ICONS = \
   qml/res/icons/shutdown.png \
   qml/res/icons/singlesig-wallet.png \
   qml/res/icons/storage-dark.png \
-  qml/res/icons/storage-light.png
+  qml/res/icons/storage-light.png \
+  qml/res/icons/tooltip-arrow.png
 
 QML_QRC_CPP = qml/qrc_bitcoin.cpp
 QML_QRC = qml/bitcoin_qml.qrc
@@ -360,6 +361,7 @@ QML_RES_QML = \
   qml/components/StorageSettings.qml \
   qml/components/ThemeSettings.qml \
   qml/components/TotalBytesIndicator.qml \
+  qml/components/Tooltip.qml \
   qml/controls/ContinueButton.qml \
   qml/controls/CoreText.qml \
   qml/controls/ExternalLink.qml \
@@ -381,6 +383,7 @@ QML_RES_QML = \
   qml/controls/TextButton.qml \
   qml/controls/Theme.qml \
   qml/controls/ToggleButton.qml \
+  qml/controls/utils.js \
   qml/controls/ValueInput.qml \
   qml/pages/initerrormessage.qml \
   qml/pages/main.qml \
diff --git a/src/qml/bitcoin_qml.qrc b/src/qml/bitcoin_qml.qrc
@@ -19,6 +19,7 @@
         <file>components/StorageSettings.qml</file>
         <file>components/ThemeSettings.qml</file>
         <file>components/TotalBytesIndicator.qml</file>
+        <file>components/Tooltip.qml</file>
         <file>controls/ContinueButton.qml</file>
         <file>controls/CoreText.qml</file>
         <file>controls/ExternalLink.qml</file>
@@ -41,6 +42,7 @@
         <file>controls/TextButton.qml</file>
         <file>controls/Theme.qml</file>
         <file>controls/ToggleButton.qml</file>
+        <file>controls/utils.js</file>
         <file>controls/ValueInput.qml</file>
         <file>pages/initerrormessage.qml</file>
         <file>pages/main.qml</file>
@@ -88,6 +90,7 @@
         <file alias="singlesig-wallet">res/icons/singlesig-wallet.png</file>
         <file alias="storage-dark">res/icons/storage-dark.png</file>
         <file alias="storage-light">res/icons/storage-light.png</file>
+        <file alias="tooltip-arrow">res/icons/tooltip-arrow.png</file>
     </qresource>
     <qresource prefix="/fonts">
         <file alias="inter/regular">res/fonts/Inter-Regular.otf</file>
diff --git a/src/qml/components/BlockClock.qml b/src/qml/components/BlockClock.qml
@@ -10,6 +10,7 @@ import Qt.labs.settings 1.0
 import org.bitcoincore.qt 1.0
 
 import "../controls"
+import "../controls/utils.js" as Utils
 
 Item {
     id: root
@@ -28,7 +29,7 @@ Item {
     property bool synced: nodeModel.verificationProgress > 0.999
     property string syncProgress: formatProgressPercentage(nodeModel.verificationProgress * 100)
     property bool paused: false
-    property var syncState: formatRemainingSyncTime(nodeModel.remainingSyncTime)
+    property var syncState: Utils.formatRemainingSyncTime(nodeModel.remainingSyncTime)
     property string syncTime: syncState.text
     property bool estimating: syncState.estimating
 
@@ -234,65 +235,4 @@ Item {
             return "0%"
         }
     }
-
-    function formatRemainingSyncTime(milliseconds) {
-        var minutes = Math.floor(milliseconds / 60000);
-        var seconds = Math.floor((milliseconds % 60000) / 1000);
-        var weeks = Math.floor(minutes / 10080);
-        minutes %= 10080;
-        var days = Math.floor(minutes / 1440);
-        minutes %= 1440;
-        var hours = Math.floor(minutes / 60);
-        minutes %= 60;
-        var result = "";
-        var estimatingStatus = false;
-
-        if (weeks > 0) {
-            return {
-                text: "~" + weeks + (weeks === 1 ? " week" : " weeks") + " left",
-                estimating: false
-            };
-        }
-        if (days > 0) {
-            return {
-                text: "~" + days + (days === 1 ? " day" : " days") + " left",
-                estimating: false
-            };
-        }
-        if (hours >= 5) {
-            return {
-                text: "~" + hours + (hours === 1 ? " hour" : " hours") + " left",
-                estimating: false
-            };
-        }
-        if (hours > 0) {
-            return {
-                text: "~" + hours + "h " + minutes + "m" + " left",
-                estimating: false
-            };
-        }
-        if (minutes >= 5) {
-            return {
-                text: "~" + minutes + (minutes === 1 ? " minute" : " minutes") + " left",
-                estimating: false
-            };
-        }
-        if (minutes > 0) {
-            return {
-                text: "~" + minutes + "m " + seconds + "s" + " left",
-                estimating: false
-            };
-        }
-        if (seconds > 0) {
-            return {
-                text: "~" + seconds + (seconds === 1 ? " second" : " seconds") + " left",
-                estimating: false
-            };
-        } else {
-            return {
-                text: "Estimating",
-                estimating: true
-            };
-        }
-    }
 }
diff --git a/src/qml/components/Tooltip.qml b/src/qml/components/Tooltip.qml
@@ -0,0 +1,40 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import "../controls"
+
+Item {
+    id: root
+
+    property alias text: tooltipText.text
+
+    Rectangle {
+        id: tooltipBg
+        color: Theme.color.neutral0
+        border.color: Theme.color.neutral4
+        radius: 5
+        border.width: 1
+        width: tooltipText.width + 30
+        height: tooltipText.height + 20
+        anchors.top: arrow.bottom
+        anchors.right: arrow.right
+        anchors.rightMargin: -10
+        anchors.topMargin: -1
+    }
+
+    Image {
+        id: arrow
+        source: "qrc:/icons/tooltip-arrow"
+        width: 22
+        height: 10
+        anchors.horizontalCenter: root.horizontalCenter
+        anchors.top: root.top
+    }
+
+    CoreText {
+        id: tooltipText
+        text: ""
+        wrapMode: Text.NoWrap
+        anchors.centerIn: tooltipBg
+    }
+}
diff --git a/src/qml/controls/utils.js b/src/qml/controls/utils.js
@@ -0,0 +1,66 @@
+// Copyright (c) 2024 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+// utils.js
+
+function formatRemainingSyncTime(milliseconds) {
+    var minutes = Math.floor(milliseconds / 60000);
+    var seconds = Math.floor((milliseconds % 60000) / 1000);
+    var weeks = Math.floor(minutes / 10080);
+    minutes %= 10080;
+    var days = Math.floor(minutes / 1440);
+    minutes %= 1440;
+    var hours = Math.floor(minutes / 60);
+    minutes %= 60;
+    var result = "";
+    var estimatingStatus = false;
+
+    if (weeks > 0) {
+        return {
+            text: "~" + weeks + (weeks === 1 ? " week" : " weeks") + " left",
+            estimating: false
+        };
+    }
+    if (days > 0) {
+        return {
+            text: "~" + days + (days === 1 ? " day" : " days") + " left",
+            estimating: false
+        };
+    }
+    if (hours >= 5) {
+        return {
+            text: "~" + hours + (hours === 1 ? " hour" : " hours") + " left",
+            estimating: false
+        };
+    }
+    if (hours > 0) {
+        return {
+            text: "~" + hours + "h " + minutes + "m" + " left",
+            estimating: false
+        };
+    }
+    if (minutes >= 5) {
+        return {
+            text: "~" + minutes + (minutes === 1 ? " minute" : " minutes") + " left",
+            estimating: false
+        };
+    }
+    if (minutes > 0) {
+        return {
+            text: "~" + minutes + "m " + seconds + "s" + " left",
+            estimating: false
+        };
+    }
+    if (seconds > 0) {
+        return {
+            text: "~" + seconds + (seconds === 1 ? " second" : " seconds") + " left",
+            estimating: false
+        };
+    } else {
+        return {
+            text: "Estimating",
+            estimating: true
+        };
+    }
+}
diff --git a/src/qml/imageprovider.cpp b/src/qml/imageprovider.cpp
@@ -132,5 +132,10 @@ QPixmap ImageProvider::requestPixmap(const QString& id, QSize* size, const QSize
         return QIcon(":/icons/storage-light").pixmap(requested_size);
     }
 
+    if (id == "tooltip-arrow") {
+        *size = requested_size;
+        return QIcon(":/icons/tooltip-arrow").pixmap(requested_size);
+    }
+
     return {};
 }
diff --git a/src/qml/pages/wallet/DesktopWallets.qml b/src/qml/pages/wallet/DesktopWallets.qml
@@ -5,8 +5,11 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+
 import org.bitcoincore.qt 1.0
+
 import "../../controls"
+import "../../controls/utils.js" as Utils
 import "../../components"
 import "../node"
 
@@ -67,10 +70,35 @@ Page {
                 shorten: true
             }
             NavigationTab {
+                id: blockClockTabButton
                 Layout.preferredWidth: 30
                 Layout.rightMargin: 10
                 property int index: 3
                 ButtonGroup.group: navigationTabs
+
+                Tooltip {
+                    id: blockClockTooltip
+                    property var syncState: Utils.formatRemainingSyncTime(nodeModel.remainingSyncTime)
+                    property bool synced: nodeModel.verificationProgress > 0.999
+                    property bool paused: nodeModel.pause
+                    property bool connected: nodeModel.numOutboundPeers > 0
+
+                    anchors.top: blockClockTabButton.bottom
+                    anchors.horizontalCenter: blockClockTabButton.horizontalCenter
+
+                    visible: blockClockTabButton.hovered
+                    text: {
+                        if (synced) {
+                            qsTr("Blocktime\n" +  Number(nodeModel.blockTipHeight).toLocaleString(Qt.locale(), 'f', 0))
+                        } else if (paused) {
+                            qsTr("Paused")
+                        } else if (connected) {
+                            qsTr("Downloading blocks\n" +  syncState.text)
+                        } else {
+                            qsTr("Connecting")
+                        }
+                    }
+                }
             }
             NavigationTab {
                 iconSource: "image://images/gear-outline"
diff --git a/src/qml/res/icons/tooltip-arrow.png b/src/qml/res/icons/tooltip-arrow.png
diff --git a/src/qml/res/src/tooltip-arrow.svg b/src/qml/res/src/tooltip-arrow.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5201 1.62787C11.3136 0.754996 12.6864 0.754996 13.4799 1.62787L22 11H2L10.5201 1.62787Z" fill="black"/>
+<path d="M1 9.5H3L10.5481 1.53257C11.3369 0.699887 12.663 0.699886 13.4519 1.53257L21 9.5H23" stroke="#5C5C5C" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

Original file line number	Diff line number	Diff line change
`@@ -132,5 +132,10 @@ QPixmap ImageProvider::requestPixmap(const QString& id, QSize* size, const QSize`
`132`	`132`	`return QIcon(":/icons/storage-light").pixmap(requested_size);`
`133`	`133`	`}`
`134`	`134`
	`135`	`+ if (id == "tooltip-arrow") {`
	`136`	`+ *size = requested_size;`
	`137`	`+ return QIcon(":/icons/tooltip-arrow").pixmap(requested_size);`
	`138`	`+ }`
	`139`	`+`
`135`	`140`	`return {};`
`136`	`141`	`}`