From 9d3864b7f09efc65d2f0e64f6579d5a3974721a2 Mon Sep 17 00:00:00 2001 From: rating89us <45968869+rating89us@users.noreply.github.com> Date: Wed, 19 May 2021 18:36:44 +0200 Subject: [PATCH] Implement tooltips in multiple pages and components --- components/AdvancedOptionsItem.qml | 1 + components/CheckBox.qml | 5 ++++ components/IconButton.qml | 9 ++++++ components/InlineButton.qml | 10 +++++++ components/Label.qml | 1 + components/RemoteNodeList.qml | 4 +++ components/StandardButton.qml | 10 +++++++ components/TextPlain.qml | 5 +++- components/TitleBar.qml | 48 ++++++++++++++++++++++++++---- components/Tooltip.qml | 28 +++++++++++++---- pages/Account.qml | 2 ++ pages/AddressBook.qml | 3 ++ pages/History.qml | 24 ++++++++++++--- pages/Receive.qml | 2 ++ pages/Transfer.qml | 7 +++++ 15 files changed, 143 insertions(+), 16 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 { diff --git a/pages/Account.qml b/pages/Account.qml index 0a549163..56e3dd50 100644 --- a/pages/Account.qml +++ b/pages/Account.qml @@ -304,6 +304,7 @@ Rectangle { opacity: 0.5 Layout.preferredWidth: 23 Layout.preferredHeight: 21 + tooltip: qsTr("Edit account label") + translationManager.emptyString onClicked: pageAccount.renameSubaddressAccountLabel(index); } @@ -317,6 +318,7 @@ Rectangle { opacity: 0.5 Layout.preferredWidth: 16 Layout.preferredHeight: 21 + tooltip: qsTr("Copy address to clipboard") + translationManager.emptyString onClicked: { console.log("Address copied to clipboard"); diff --git a/pages/AddressBook.qml b/pages/AddressBook.qml index 7d28ba02..275a5a93 100644 --- a/pages/AddressBook.qml +++ b/pages/AddressBook.qml @@ -210,6 +210,7 @@ Rectangle { opacity: 0.5 Layout.preferredWidth: 20 Layout.preferredHeight: 20 + tooltip: qsTr("Send to this address") + translationManager.emptyString onClicked: { doSend(); } @@ -222,6 +223,7 @@ Rectangle { opacity: 0.5 Layout.preferredWidth: 23 Layout.preferredHeight: 21 + tooltip: qsTr("Edit address label") + translationManager.emptyString onClicked: { addressBookListView.currentIndex = index; @@ -236,6 +238,7 @@ Rectangle { Layout.preferredHeight: 21 color: MoneroComponents.Style.defaultFontColor opacity: 0.5 + tooltip: qsTr("Copy address to clipboard") + translationManager.emptyString onClicked: { console.log("Address copied to clipboard"); diff --git a/pages/History.qml b/pages/History.qml index e5635336..03d30c5e 100644 --- a/pages/History.qml +++ b/pages/History.qml @@ -958,6 +958,8 @@ Rectangle { label.font.family: FontAwesome.fontFamily fontSize: 18 width: 34 + tooltip: qsTr("Transaction details") + translationManager.emptyString + tooltipLeft: true MouseArea { state: "details" @@ -965,8 +967,14 @@ Rectangle { hoverEnabled: true z: parent.z + 1 - onEntered: parent.opacity = 0.8; - onExited: parent.opacity = 1.0; + onEntered: { + parent.opacity = 0.8; + parent.tooltipPopup.open() + } + onExited: { + parent.opacity = 1.0; + parent.tooltipPopup.close() + } } } @@ -988,6 +996,8 @@ Rectangle { label.font.family: FontAwesome.fontFamilyBrands fontSize: 18 width: 34 + tooltip: qsTr("Generate payment proof") + translationManager.emptyString + tooltipLeft: true MouseArea { state: "proof" @@ -995,8 +1005,14 @@ Rectangle { hoverEnabled: true z: parent.z + 1 - onEntered: parent.opacity = 0.8; - onExited: parent.opacity = 1.0; + onEntered: { + parent.opacity = 0.8; + parent.tooltipPopup.open() + } + onExited: { + parent.opacity = 1.0; + parent.tooltipPopup.close() + } } } } diff --git a/pages/Receive.qml b/pages/Receive.qml index aa7d35ec..f8a4cbdb 100644 --- a/pages/Receive.qml +++ b/pages/Receive.qml @@ -192,6 +192,7 @@ Rectangle { Layout.preferredWidth: 23 Layout.preferredHeight: 21 visible: index !== 0 + tooltip: qsTr("Edit address label") + translationManager.emptyString onClicked: { renameSubaddressLabel(index); @@ -207,6 +208,7 @@ Rectangle { opacity: 0.5 Layout.preferredWidth: 16 Layout.preferredHeight: 21 + tooltip: qsTr("Copy address to clipboard") + translationManager.emptyString onClicked: { console.log("Address copied to clipboard"); diff --git a/pages/Transfer.qml b/pages/Transfer.qml index 589cf374..5767c951 100644 --- a/pages/Transfer.qml +++ b/pages/Transfer.qml @@ -277,6 +277,7 @@ Rectangle { fontStyleName: "Solid" fontPixelSize: 18 text: FontAwesome.desktop + tooltip: qsTr("Grab QR code from screen") + translationManager.emptyString onClicked: { clearFields(); const codes = oshelper.grabQrCodesFromScreen(); @@ -295,6 +296,7 @@ Rectangle { fontStyleName: "Solid" text: FontAwesome.qrcode visible: appWindow.qrScannerEnabled + tooltip: qsTr("Scan QR code") + translationManager.emptyString onClicked: { cameraUi.state = "Capture" cameraUi.qrcode_decoded.connect(updateFromQrCode) @@ -304,6 +306,7 @@ Rectangle { MoneroComponents.InlineButton { fontFamily: FontAwesome.fontFamily text: FontAwesome.addressBook + tooltip: qsTr("Import from address book") + translationManager.emptyString onClicked: { middlePanel.addressBookView.selectAndSend = true; appWindow.showPageRequest("AddressBook"); @@ -483,12 +486,16 @@ Rectangle { horizontalAlignment: Text.AlignHCenter opacity: mouseArea.containsMouse ? 1 : 0.85 text: recipientModel.count == 1 ? FontAwesome.infinity : FontAwesome.times + tooltip: recipientModel.count == 1 ? qsTr("Send all unlocked balance of this account") : qsTr("Remove recipient") + translationManager.emptyString + tooltipLeft: true MouseArea { id: mouseArea anchors.fill: parent cursorShape: Qt.PointingHandCursor hoverEnabled: true + onEntered: parent.tooltipPopup.open() + onExited: parent.tooltipPopup.close() onClicked: { if (recipientModel.count == 1) { parent.parent.children[2].text = "(all)";