From 767b9e05b395a63da1c880ec1155b722476177a5 Mon Sep 17 00:00:00 2001 From: xiphon Date: Thu, 15 Apr 2021 00:04:50 +0000 Subject: [PATCH] TextPlain, Label: implement tooltips. Transfer: advanced - use tooltips --- components/AdvancedOptionsItem.qml | 48 +--------------- components/Label.qml | 1 + components/TextPlain.qml | 7 +++ components/Tooltip.qml | 92 ++++++++++++++++++++++++++++++ pages/Transfer.qml | 20 +++---- qml.qrc | 1 + 6 files changed, 114 insertions(+), 55 deletions(-) create mode 100644 components/Tooltip.qml diff --git a/components/AdvancedOptionsItem.qml b/components/AdvancedOptionsItem.qml index 1efd55ce..fbafba5d 100644 --- 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 - } - } } } diff --git a/components/Label.qml b/components/Label.qml index 3f965901..94e7ed4a 100644 --- 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: "" diff --git a/components/TextPlain.qml b/components/TextPlain.qml index a737aa2f..822f86a2 100644 --- 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 + } } diff --git a/components/Tooltip.qml b/components/Tooltip.qml new file mode 100644 index 00000000..31cd0b25 --- /dev/null +++ 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 + } + } + } +} diff --git a/pages/Transfer.qml b/pages/Transfer.qml index fc87b9b0..0ce36f54 100644 --- 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 = "

" + qsTr("* To import, you must connect to a local node or a trusted remote node") + "

"; } - return "" + + "
" + header + "
" + "

" + qsTr("1. Using cold wallet, export the key images into a file") + "

" + "

" + qsTr("2. Using view-only wallet, import the key images file") + "

" + 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 = "

" + qsTr("* To create a transaction file, please enter address and amount above") + "

"; } - return "" + + "
" + header + "
" + "

" + qsTr("1. Using view-only wallet, export the outputs into a file") + "

" + "

" + qsTr("2. Using cold wallet, import the outputs file and export the key images") + "

" + "

" + qsTr("3. Using view-only wallet, import the key images file and create a transaction file") + "

" + @@ -911,7 +912,6 @@ Rectangle { "

" + qsTr("4. Using cold wallet, sign your transaction file") + "

" + "

" + qsTr("5. Using view-only wallet, submit your signed transaction") + "

" + 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 } } diff --git a/qml.qrc b/qml.qrc index afee1f67..4cc451cd 100644 --- a/qml.qrc +++ b/qml.qrc @@ -11,6 +11,7 @@ components/RemoteNodeDialog.qml components/SettingsListItem.qml components/Slider.qml + components/Tooltip.qml components/UpdateDialog.qml images/whatIsIcon.png images/whatIsIcon@2x.png