qml: Introduce Tooltip for the BlockClock navbar button

The Tooltip will appear when hovering over the BlockClock tab
button in the desktop navigation bar. It will show the current
state of IBD.

Author: johnny9

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 \

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>

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
-            };
-        }
-    }
 }

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
+    }
+}

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 {};
 }

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,29 @@ 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
+
+                    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 {
+                            qsTr("Downloading blocks\n" +  syncState.text)
+                        }
+                    }
+                }
             }
             NavigationTab {
                 iconSource: "image://images/gear-outline"