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

2024-12-23 03:59:38 +00:00 · 2021-04-15 00:04:50 +00:00 · 2021-04-15 00:04:50 +00:00 · 767b9e05b3
commit 767b9e05b3
parent 8444a9563e
6 changed files with 114 additions and 55 deletions
--- a/components/AdvancedOptionsItem.qml
+++ b/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
-            }
-        }
    }
 }
--- a/components/Label.qml
+++ b/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: ""
--- a/components/TextPlain.qml
+++ b/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
+    }
 }
--- a/components/Tooltip.qml
+++ b/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
+            }
+        }
+    }
+}
--- a/pages/Transfer.qml
+++ b/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
        }
    }

--- a/qml.qrc
+++ b/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>