Merge pull request #3490

9d3864b Implement tooltips in multiple pages and components (rating89us)

10 files changed, 109 insertions, 12 deletions

diff --git a/components/AdvancedOptionsItem.qml b/components/AdvancedOptionsItem.qml
index fbafba5d..2f3c095a 100644
--- a/components/AdvancedOptionsItem.qml
+++ b/components/AdvancedOptionsItem.qml
@@ -22,6 +22,7 @@ RowLayout {
         MoneroComponents.Label {
             id: title
             fontSize: 14
+            tooltipIconVisible: true
         }
 
         Rectangle {
diff --git a/components/CheckBox.qml b/components/CheckBox.qml
index 6e120f07..121bbab6 100644
--- a/components/CheckBox.qml
+++ b/components/CheckBox.qml
@@ -48,6 +48,8 @@ Item {
     property int fontSize: 14
     property alias fontColor: label.color
     property bool iconOnTheLeft: true
+    property alias tooltipIconVisible: label.tooltipIconVisible
+    property alias tooltip: label.tooltip
     signal clicked()
 
     height: 25
@@ -121,7 +123,10 @@ Item {
 
     MouseArea {
         anchors.fill: parent
+        hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
+        onEntered: !label.tooltipIconVisible && label.tooltip ? label.tooltipPopup.open() : ""
+        onExited:  !label.tooltipIconVisible && label.tooltip ? label.tooltipPopup.close() : ""
         onClicked: {
             toggle()
         }
diff --git a/components/IconButton.qml b/components/IconButton.qml
index 5d4d8d19..917c5d03 100644
--- a/components/IconButton.qml
+++ b/components/IconButton.qml
@@ -36,19 +36,28 @@ MoneroEffects.ImageMask {
     color: MoneroComponents.Style.defaultFontColor
     image: ""
 
+    property alias tooltip: tooltip.text
     signal clicked(var mouse)
 
+    MoneroComponents.Tooltip {
+        id: tooltip
+        anchors.fill: parent
+        tooltipLeft: true
+    }
+
     MouseArea {
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
 
         onEntered: {
+            tooltip.text ? tooltip.tooltipPopup.open() : ""
             button.width = button.width + 2
             button.height = button.height + 2
         }
 
         onExited: {
+            tooltip.text ? tooltip.tooltipPopup.close() : ""
             button.width = button.width - 2
             button.height = button.height - 2
         }
diff --git a/components/InlineButton.qml b/components/InlineButton.qml
index e493a67a..8e0d278b 100644
--- a/components/InlineButton.qml
+++ b/components/InlineButton.qml
@@ -46,6 +46,9 @@ Item {
     property alias fontStyleName: inlineText.font.styleName
     property bool isFontAwesomeIcon: fontFamily == FontAwesome.fontFamily || fontFamily == FontAwesome.fontFamilySolid
     property alias buttonColor: rect.color
+    property alias tooltip: tooltip.text
+    property alias tooltipLeft: tooltip.tooltipLeft
+    property alias tooltipBottom: tooltip.tooltipBottom
 
     height: isFontAwesomeIcon ? 30 : 24
     width: isFontAwesomeIcon ? height : inlineText.width + 16
@@ -82,6 +85,11 @@ Item {
             }
         }
 
+        MoneroComponents.Tooltip {
+            id: tooltip
+            anchors.fill: parent
+        }
+
         MouseArea {
             id: buttonArea
             cursorShape: rect.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
@@ -89,10 +97,12 @@ Item {
             anchors.fill: parent
             onClicked: doClick()
             onEntered: {
+                tooltip.text ? tooltip.tooltipPopup.open() : ""
                 rect.color = buttonColor ? buttonColor : "#707070";
                 rect.opacity = 0.8;
             }
             onExited: {
+                tooltip.text ? tooltip.tooltipPopup.close() : ""
                 rect.opacity = 1.0;
                 rect.color = buttonColor ? buttonColor : "#808080";
             }
diff --git a/components/Label.qml b/components/Label.qml
index 94e7ed4a..261c02a5 100644
--- a/components/Label.qml
+++ b/components/Label.qml
@@ -35,6 +35,7 @@ Item {
     id: item
     property alias text: label.text
     property alias tooltip: label.tooltip
+    property alias tooltipIconVisible: label.tooltipIconVisible
     property alias color: label.color
     property int textFormat: Text.PlainText
     property string tipText: ""
diff --git a/components/RemoteNodeList.qml b/components/RemoteNodeList.qml
index f8500d45..2e9c36f4 100644
--- a/components/RemoteNodeList.qml
+++ b/components/RemoteNodeList.qml
@@ -112,6 +112,8 @@ ColumnLayout {
                         fontFamily: FontAwesome.fontFamily
                         fontPixelSize: 18
                         text: FontAwesome.edit
+                        tooltip: qsTr("Edit remote node") + translationManager.emptyString
+                        tooltipLeft: true
                         onClicked: remoteNodeDialog.edit(remoteNodesModel.get(index), function (remoteNode) {
                             remoteNodesModel.set(index, remoteNode)
                         })
@@ -122,6 +124,8 @@ ColumnLayout {
                         fontFamily: FontAwesome.fontFamily
                         text: FontAwesome.times
                         visible: remoteNodesModel.count > 1
+                        tooltip: qsTr("Remove remote node") + translationManager.emptyString
+                        tooltipLeft: true
                         onClicked: remoteNodesModel.removeSelectNextIfNeeded(index)
                     }
                 }
diff --git a/components/StandardButton.qml b/components/StandardButton.qml
index d26d9aa8..d77e611f 100644
--- a/components/StandardButton.qml
+++ b/components/StandardButton.qml
@@ -52,6 +52,9 @@ Item {
         else return 16;
     }
     property alias label: label
+    property alias tooltip: tooltip.text
+    property alias tooltipLeft: tooltip.tooltipLeft
+    property alias tooltipPopup: tooltip.tooltipPopup
     signal clicked()
 
     height: small ?  30 : 36
@@ -161,11 +164,18 @@ Item {
         }
     }
 
+    MoneroComponents.Tooltip {
+        id: tooltip
+        anchors.fill: parent
+    }
+
     MouseArea {
         id: buttonArea
         anchors.fill: parent
         hoverEnabled: true
         onClicked: doClick()
+        onEntered: tooltip.text ? tooltip.tooltipPopup.open() : ""
+        onExited: tooltip.text ? tooltip.tooltipPopup.close() : ""
         cursorShape: Qt.PointingHandCursor
     }
 
diff --git a/components/TextPlain.qml b/components/TextPlain.qml
index 822f86a2..1dfe32fd 100644
--- a/components/TextPlain.qml
+++ b/components/TextPlain.qml
@@ -13,6 +13,9 @@ Text {
     property string themeTransitionBlackColor: ""
     property string themeTransitionWhiteColor: ""
     property alias tooltip: tooltip.text
+    property alias tooltipLeft: tooltip.tooltipLeft
+    property alias tooltipIconVisible: tooltip.tooltipIconVisible
+    property alias tooltipPopup: tooltip.tooltipPopup
     font.family: MoneroComponents.Style.fontMedium.name
     font.bold: false
     font.pixelSize: 14
@@ -30,6 +33,6 @@ Text {
     MoneroComponents.Tooltip {
         id: tooltip
         anchors.top: parent.top
-        anchors.left: parent.right
+        anchors.left: tooltipIconVisible ? parent.right : parent.left
     }
 }
diff --git a/components/TitleBar.qml b/components/TitleBar.qml
index 2378a388..27d4fe29 100644
--- a/components/TitleBar.qml
+++ b/components/TitleBar.qml
@@ -110,12 +110,24 @@ Rectangle {
                 opacity: 0.75
             }
 
+            MoneroComponents.Tooltip {
+                id: btnCloseWalletTooltip
+                anchors.fill: parent
+                text: qsTr("Close this wallet and return to main menu") + translationManager.emptyString
+            }
+
             MouseArea {
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
-                onExited: parent.color = "transparent"
+                onEntered: {
+                    parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                    btnCloseWalletTooltip.tooltipPopup.open()
+                }
+                onExited: {
+                    parent.color = "transparent"
+                    btnCloseWalletTooltip.tooltipPopup.close()
+                }
                 onClicked: root.closeWalletClicked(leftPanel.visible)
             }
         }
@@ -138,12 +150,24 @@ Rectangle {
                 opacity: 0.75
             }
 
+            MoneroComponents.Tooltip {
+                id: btnLanguageToggleTooltip
+                anchors.fill: parent
+                text: qsTr("Change language") + translationManager.emptyString
+            }
+
             MouseArea {
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
-                onExited: parent.color = "transparent"
+                onEntered: {
+                    parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                    btnLanguageToggleTooltip.tooltipPopup.open()
+                }
+                onExited: {
+                    parent.color = "transparent"
+                    btnLanguageToggleTooltip.tooltipPopup.close()
+                }
                 onClicked: root.languageClicked()
             }
         }
@@ -165,12 +189,24 @@ Rectangle {
                 opacity: 0.75
             }
 
+            MoneroComponents.Tooltip {
+                id: btnSwitchThemeTooltip
+                anchors.fill: parent
+                text: MoneroComponents.Style.blackTheme ? qsTr("Switch to light theme") : qsTr("Switch to dark theme") + translationManager.emptyString
+            }
+
             MouseArea {
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
-                onExited: parent.color = "transparent"
+                onEntered: {
+                    parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                    btnSwitchThemeTooltip.tooltipPopup.open()
+                }
+                onExited: {
+                    parent.color = "transparent"
+                    btnSwitchThemeTooltip.tooltipPopup.close()
+                }
                 onClicked: {
                     MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme;
                 }
diff --git a/components/Tooltip.qml b/components/Tooltip.qml
index 31cd0b25..b33d90ef 100644
--- a/components/Tooltip.qml
+++ b/components/Tooltip.qml
@@ -35,14 +35,19 @@ import "." as MoneroComponents
 
 Rectangle {
     property alias text: tooltip.text
+    property alias tooltipPopup: popup
+    property bool tooltipIconVisible: false
+    property bool tooltipLeft: false
+    property bool tooltipBottom: tooltipIconVisible ? false : true
 
     color: "transparent"
-    height: icon.height
-    width: icon.width
+    height: tooltipIconVisible ? icon.height : parent.height
+    width: tooltipIconVisible ? icon.width : parent.width
     visible: text != ""
 
     Text {
         id: icon
+        visible: tooltipIconVisible
         color: MoneroComponents.Style.orange
         font.family: FontAwesome.fontFamily
         font.pixelSize: 10
@@ -62,8 +67,9 @@ Rectangle {
         }
     }
 
-    Popup {
+    ToolTip {
         id: popup
+        height: tooltip.height + 20
 
         background: Rectangle {
             border.color: MoneroComponents.Style.buttonInlineBackgroundColor
@@ -73,8 +79,20 @@ Rectangle {
         }
         closePolicy: Popup.NoAutoClose
         padding: 10
-        x: icon.x + icon.width
-        y: icon.y - height
+        x: tooltipLeft
+            ? (tooltipIconVisible ? icon.x - icon.width : parent.x - tooltip.width - 20 + parent.width/2)
+            : (tooltipIconVisible ? icon.x + icon.width : parent.x + parent.width/2)
+        y: tooltipBottom
+            ? (tooltipIconVisible ? icon.y + height : parent.y + parent.height + 2)
+            : (tooltipIconVisible ? icon.y - height : parent.y - tooltip.height - 20)
+        enter: Transition {
+            NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 150 }
+        }
+
+        exit: Transition {
+            NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 150 }
+        }
+        delay: 200
 
         RowLayout {
             Text {