TextPlain, Label: implement tooltips. Transfer: advanced - use tooltips

components/AdvancedOptionsItem.qml

@@ -1,19 +1,17 @@
 import QtQuick 2.9
 import QtQuick.Layouts 1.1
-import FontAwesome 1.0
 
 import "../components" as MoneroComponents
 
 RowLayout {
     id: advancedOptionsItem
-    
+
     property alias title: title.text
+    property alias tooltip: title.tooltip
     property alias button1: button1
     property alias button2: button2
     property alias button3: button3
-    property alias helpTextLarge: helpTextLarge
-    property alias helpTextSmall: helpTextSmall
-      
+
     RowLayout {
         id: titlecolumn
         Layout.alignment: Qt.AlignTop | Qt.AlignLeft
@@ -26,22 +24,6 @@ RowLayout {
             fontSize: 14
         }
 
-        MoneroComponents.Label {
-            id: iconLabel
-            fontSize: 12
-            text: FontAwesome.questionCircle
-            fontFamily: FontAwesome.fontFamily
-            opacity: 0.3
-            MouseArea {
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: helpText.visible = !helpText.visible
-                onEntered: parent.opacity = 0.4
-                onExited: parent.opacity = 0.3
-            }  
-        }
-        
         Rectangle {
             id: separator
             Layout.fillWidth: true
@@ -78,29 +60,5 @@ RowLayout {
                 visible: button3.text
             }
         }
-        
-        ColumnLayout {
-            id: helpText
-            visible: false     
-            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
-            
-            MoneroComponents.TextPlain {
-                id: helpTextLarge
-                visible: helpTextLarge.text
-                font.family: MoneroComponents.Style.fontRegular.name
-                font.pixelSize: 13
-                color: MoneroComponents.Style.defaultFontColor
-            }
-            
-            MoneroComponents.TextPlain {
-                id: helpTextSmall
-                visible: helpTextSmall.text
-                Layout.leftMargin: 5
-                textFormat: Text.RichText
-                font.family: MoneroComponents.Style.fontRegular.name
-                font.pixelSize: 12
-                color: MoneroComponents.Style.defaultFontColor
-            }
-        }
     }
 }

components/Label.qml

@@ -34,6 +34,7 @@ import "../components" as MoneroComponents
 Item {
     id: item
     property alias text: label.text
+    property alias tooltip: label.tooltip
     property alias color: label.color
     property int textFormat: Text.PlainText
     property string tipText: ""

components/TextPlain.qml

@@ -12,6 +12,7 @@ Text {
     property bool themeTransition: true
     property string themeTransitionBlackColor: ""
     property string themeTransitionWhiteColor: ""
+    property alias tooltip: tooltip.text
     font.family: MoneroComponents.Style.fontMedium.name
     font.bold: false
     font.pixelSize: 14
@@ -25,4 +26,10 @@ Text {
         blackColor: root.themeTransitionBlackColor !== "" ? root.themeTransitionBlackColor : MoneroComponents.Style._b_defaultFontColor
         whiteColor: root.themeTransitionWhiteColor !== "" ? root.themeTransitionWhiteColor : MoneroComponents.Style._w_defaultFontColor
     }
+
+    MoneroComponents.Tooltip {
+        id: tooltip
+        anchors.top: parent.top
+        anchors.left: parent.right
+    }
 }

components/Tooltip.qml

@@ -0,0 +1,92 @@
+// Copyright (c) 2021, The Monero Project
+//
+// All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without modification, are
+// permitted provided that the following conditions are met:
+//
+// 1. Redistributions of source code must retain the above copyright notice, this list of
+//    conditions and the following disclaimer.
+//
+// 2. Redistributions in binary form must reproduce the above copyright notice, this list
+//    of conditions and the following disclaimer in the documentation and/or other
+//    materials provided with the distribution.
+//
+// 3. Neither the name of the copyright holder nor the names of its contributors may be
+//    used to endorse or promote products derived from this software without specific
+//    prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
+// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
+// STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
+// THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.1
+
+import FontAwesome 1.0
+import "." as MoneroComponents
+
+Rectangle {
+    property alias text: tooltip.text
+
+    color: "transparent"
+    height: icon.height
+    width: icon.width
+    visible: text != ""
+
+    Text {
+        id: icon
+        color: MoneroComponents.Style.orange
+        font.family: FontAwesome.fontFamily
+        font.pixelSize: 10
+        font.styleName: "Regular"
+        leftPadding: 5
+        rightPadding: 5
+        text: FontAwesome.questionCircle
+        opacity: mouseArea.containsMouse ? 0.7 : 1
+
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+            cursorShape: Qt.WhatsThisCursor
+            onEntered: popup.open()
+            onExited: popup.close()
+        }
+    }
+
+    Popup {
+        id: popup
+
+        background: Rectangle {
+            border.color: MoneroComponents.Style.buttonInlineBackgroundColor
+            border.width: 1
+            color: MoneroComponents.Style.titleBarBackgroundGradientStart
+            radius: 4
+        }
+        closePolicy: Popup.NoAutoClose
+        padding: 10
+        x: icon.x + icon.width
+        y: icon.y - height
+
+        RowLayout {
+            Text {
+                id: tooltip
+                Layout.maximumWidth: 350
+                width: contentWidth > Layout.maximumWidth ? Layout.maximumWidth : contentWidth
+                color: MoneroComponents.Style.defaultFontColor
+                font.family: MoneroComponents.Style.fontRegular.name
+                font.pixelSize: 12
+                textFormat: Text.RichText
+                wrapMode: Text.WordWrap
+            }
+        }
+    }
+}

pages/Transfer.qml

@@ -857,21 +857,21 @@ Rectangle {
                 console.log("Transfer: import key images clicked")
                 importKeyImagesDialog.open(); 
             }
-            helpTextLarge.text: qsTr("Required for view-only wallets to display the real balance") + translationManager.emptyString
-            helpTextSmall.text: {
+            tooltip: {
                 var errorMessage = "";
                 if (appWindow.viewOnly && !appWindow.isTrustedDaemon()){
                     errorMessage = "<p class='orange'>" + qsTr("* To import, you must connect to a local node or a trusted remote node") + "</p>";
                 }
-                return "<style type='text/css'>p{line-height:20px; margin-top:0px; margin-bottom:0px; color:" + MoneroComponents.Style.defaultFontColor +
+                var header = qsTr("Required for view-only wallets to display the real balance") + translationManager.emptyString;
+                return "<style type='text/css'>.header{ font-size: 13px; } p{line-height:20px; margin-top:0px; margin-bottom:0px; " +
                        ";} p.orange{color:#ff9323;}</style>" +
+                       "<div class='header'>" + header + "</div>" +
                        "<p>" + qsTr("1. Using cold wallet, export the key images into a file") + "</p>" +
                        "<p>" + qsTr("2. Using view-only wallet, import the key images file") + "</p>" +
                        errorMessage + translationManager.emptyString
             }
-            helpTextSmall.themeTransition: false
         }
-        
+
         AdvancedOptionsItem {
             visible: persistentSettings.transferShowAdvanced && appWindow.walletMode >= 2
             title: qsTr("Offline transaction signing") + translationManager.emptyString
@@ -896,14 +896,15 @@ Rectangle {
                 console.log("Transfer: submit tx clicked")
                 submitTxDialog.open();
             }
-            helpTextLarge.text: qsTr("Spend XMR from a cold (offline) wallet") + translationManager.emptyString
-            helpTextSmall.text: {
+            tooltip: {
                 var errorMessage = "";
                 if (appWindow.viewOnly && !pageRoot.checkInformation()) {
                     errorMessage = "<p class='orange'>" + qsTr("* To create a transaction file, please enter address and amount above") + "</p>";
                 }
-                return "<style type='text/css'>p{line-height:20px; margin-top:0px; margin-bottom:0px; color:" + MoneroComponents.Style.defaultFontColor + 
+                var header = qsTr("Spend XMR from a cold (offline) wallet") + translationManager.emptyString;
+                return "<style type='text/css'>.header{ font-size: 13px; } p{line-height:20px; margin-top:0px; margin-bottom:0px; " +
                        ";} p.orange{color:#ff9323;}</style>" +
+                       "<div class='header'>" + header + "</div>" +
                        "<p>" + qsTr("1. Using view-only wallet, export the outputs into a file") + "</p>" +
                        "<p>" + qsTr("2. Using cold wallet, import the outputs file and export the key images") + "</p>" +
                        "<p>" + qsTr("3. Using view-only wallet, import the key images file and create a transaction file") + "</p>" +
@@ -911,7 +912,6 @@ Rectangle {
                        "<p>" + qsTr("4. Using cold wallet, sign your transaction file") + "</p>" +
                        "<p>" + qsTr("5. Using view-only wallet, submit your signed transaction") + "</p>" + translationManager.emptyString
             }
-            helpTextSmall.themeTransition: false
         }
 
         AdvancedOptionsItem {
@@ -923,7 +923,7 @@ Rectangle {
                 console.log("Transfer: sweepUnmixableClicked")
                 root.sweepUnmixableClicked()
             }
-            helpTextLarge.text: qsTr("Create a transaction that spends old unmovable outputs") + translationManager.emptyString
+            tooltip: qsTr("Create a transaction that spends old unmovable outputs") + translationManager.emptyString
         }
     }
 

qml.qrc

@@ -11,6 +11,7 @@
         <file>components/RemoteNodeDialog.qml</file>
         <file>components/SettingsListItem.qml</file>
         <file>components/Slider.qml</file>
+        <file>components/Tooltip.qml</file>
         <file>components/UpdateDialog.qml</file>
         <file>images/whatIsIcon.png</file>
         <file>images/whatIsIcon@2x.png</file>