monero-project/monero-gui
monero-project/monero-gui
1
0
Fork 0
mirror of https://github.com/monero-project/monero-gui.git synced 2024-11-17 16:28:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #3490

Browse source 
9d3864b Implement tooltips in multiple pages and components (rating89us)
This commit is contained in:
luigi1111 2021-06-01 01:37:47 -05:00
commit 1442215ce5
No known key found for this signature in database
GPG key ID: F4ACA0183641E010
15 changed files with 143 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/AdvancedOptionsItem.qml
View file

@ -22,6 +22,7 @@ RowLayout {
MoneroComponents.Label { MoneroComponents.Label {
id: title id: title
fontSize: 14 fontSize: 14
tooltipIconVisible: true
} }
Rectangle { Rectangle {

5
components/CheckBox.qml
View file

@ -48,6 +48,8 @@ Item {
property int fontSize: 14 property int fontSize: 14
property alias fontColor: label.color property alias fontColor: label.color
property bool iconOnTheLeft: true property bool iconOnTheLeft: true
property alias tooltipIconVisible: label.tooltipIconVisible
property alias tooltip: label.tooltip
signal clicked() signal clicked()
height: 25 height: 25
@ -121,7 +123,10 @@ Item {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onEntered: !label.tooltipIconVisible && label.tooltip ? label.tooltipPopup.open() : ""
onExited: !label.tooltipIconVisible && label.tooltip ? label.tooltipPopup.close() : ""
onClicked: { onClicked: {
toggle() toggle()
} }

9
components/IconButton.qml
View file

@ -36,19 +36,28 @@ MoneroEffects.ImageMask {
color: MoneroComponents.Style.defaultFontColor color: MoneroComponents.Style.defaultFontColor
image: "" image: ""
property alias tooltip: tooltip.text
signal clicked(var mouse) signal clicked(var mouse)
MoneroComponents.Tooltip {
id: tooltip
anchors.fill: parent
tooltipLeft: true
}
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onEntered: { onEntered: {
tooltip.text ? tooltip.tooltipPopup.open() : ""
button.width = button.width + 2 button.width = button.width + 2
button.height = button.height + 2 button.height = button.height + 2
} }
onExited: { onExited: {
tooltip.text ? tooltip.tooltipPopup.close() : ""
button.width = button.width - 2 button.width = button.width - 2
button.height = button.height - 2 button.height = button.height - 2
} }

10
components/InlineButton.qml
View file

@ -46,6 +46,9 @@ Item {
property alias fontStyleName: inlineText.font.styleName property alias fontStyleName: inlineText.font.styleName
property bool isFontAwesomeIcon: fontFamily == FontAwesome.fontFamily || fontFamily == FontAwesome.fontFamilySolid property bool isFontAwesomeIcon: fontFamily == FontAwesome.fontFamily || fontFamily == FontAwesome.fontFamilySolid
property alias buttonColor: rect.color property alias buttonColor: rect.color
property alias tooltip: tooltip.text
property alias tooltipLeft: tooltip.tooltipLeft
property alias tooltipBottom: tooltip.tooltipBottom
height: isFontAwesomeIcon ? 30 : 24 height: isFontAwesomeIcon ? 30 : 24
width: isFontAwesomeIcon ? height : inlineText.width + 16 width: isFontAwesomeIcon ? height : inlineText.width + 16
@ -82,6 +85,11 @@ Item {
} }
} }
MoneroComponents.Tooltip {
id: tooltip
anchors.fill: parent
}
MouseArea { MouseArea {
id: buttonArea id: buttonArea
cursorShape: rect.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor cursorShape: rect.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
@ -89,10 +97,12 @@ Item {
anchors.fill: parent anchors.fill: parent
onClicked: doClick() onClicked: doClick()
onEntered: { onEntered: {
tooltip.text ? tooltip.tooltipPopup.open() : ""
rect.color = buttonColor ? buttonColor : "#707070"; rect.color = buttonColor ? buttonColor : "#707070";
rect.opacity = 0.8; rect.opacity = 0.8;
} }
onExited: { onExited: {
tooltip.text ? tooltip.tooltipPopup.close() : ""
rect.opacity = 1.0; rect.opacity = 1.0;
rect.color = buttonColor ? buttonColor : "#808080"; rect.color = buttonColor ? buttonColor : "#808080";
} }

1
components/Label.qml
View file

@ -35,6 +35,7 @@ Item {
id: item id: item
property alias text: label.text property alias text: label.text
property alias tooltip: label.tooltip property alias tooltip: label.tooltip
property alias tooltipIconVisible: label.tooltipIconVisible
property alias color: label.color property alias color: label.color
property int textFormat: Text.PlainText property int textFormat: Text.PlainText
property string tipText: "" property string tipText: ""

4
components/RemoteNodeList.qml
View file

@ -112,6 +112,8 @@ ColumnLayout {
fontFamily: FontAwesome.fontFamily fontFamily: FontAwesome.fontFamily
fontPixelSize: 18 fontPixelSize: 18
text: FontAwesome.edit text: FontAwesome.edit
tooltip: qsTr("Edit remote node") + translationManager.emptyString
tooltipLeft: true
onClicked: remoteNodeDialog.edit(remoteNodesModel.get(index), function (remoteNode) { onClicked: remoteNodeDialog.edit(remoteNodesModel.get(index), function (remoteNode) {
remoteNodesModel.set(index, remoteNode) remoteNodesModel.set(index, remoteNode)
}) })
@ -122,6 +124,8 @@ ColumnLayout {
fontFamily: FontAwesome.fontFamily fontFamily: FontAwesome.fontFamily
text: FontAwesome.times text: FontAwesome.times
visible: remoteNodesModel.count > 1 visible: remoteNodesModel.count > 1
tooltip: qsTr("Remove remote node") + translationManager.emptyString
tooltipLeft: true
onClicked: remoteNodesModel.removeSelectNextIfNeeded(index) onClicked: remoteNodesModel.removeSelectNextIfNeeded(index)
} }
} }

10
components/StandardButton.qml
View file

@ -52,6 +52,9 @@ Item {
else return 16; else return 16;
} }
property alias label: label property alias label: label
property alias tooltip: tooltip.text
property alias tooltipLeft: tooltip.tooltipLeft
property alias tooltipPopup: tooltip.tooltipPopup
signal clicked() signal clicked()
height: small ? 30 : 36 height: small ? 30 : 36
@ -161,11 +164,18 @@ Item {
} }
} }
MoneroComponents.Tooltip {
id: tooltip
anchors.fill: parent
}
MouseArea { MouseArea {
id: buttonArea id: buttonArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: doClick() onClicked: doClick()
onEntered: tooltip.text ? tooltip.tooltipPopup.open() : ""
onExited: tooltip.text ? tooltip.tooltipPopup.close() : ""
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
} }

5
components/TextPlain.qml
View file

@ -13,6 +13,9 @@ Text {
property string themeTransitionBlackColor: "" property string themeTransitionBlackColor: ""
property string themeTransitionWhiteColor: "" property string themeTransitionWhiteColor: ""
property alias tooltip: tooltip.text 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.family: MoneroComponents.Style.fontMedium.name
font.bold: false font.bold: false
font.pixelSize: 14 font.pixelSize: 14
@ -30,6 +33,6 @@ Text {
MoneroComponents.Tooltip { MoneroComponents.Tooltip {
id: tooltip id: tooltip
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.right anchors.left: tooltipIconVisible ? parent.right : parent.left
} }
} }

48
components/TitleBar.qml
View file

@ -110,12 +110,24 @@ Rectangle {
opacity: 0.75 opacity: 0.75
} }
MoneroComponents.Tooltip {
id: btnCloseWalletTooltip
anchors.fill: parent
text: qsTr("Close this wallet and return to main menu") + translationManager.emptyString
}
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor onEntered: {
onExited: parent.color = "transparent" parent.color = MoneroComponents.Style.titleBarButtonHoverColor
btnCloseWalletTooltip.tooltipPopup.open()
}
onExited: {
parent.color = "transparent"
btnCloseWalletTooltip.tooltipPopup.close()
}
onClicked: root.closeWalletClicked(leftPanel.visible) onClicked: root.closeWalletClicked(leftPanel.visible)
} }
} }
@ -138,12 +150,24 @@ Rectangle {
opacity: 0.75 opacity: 0.75
} }
MoneroComponents.Tooltip {
id: btnLanguageToggleTooltip
anchors.fill: parent
text: qsTr("Change language") + translationManager.emptyString
}
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor onEntered: {
onExited: parent.color = "transparent" parent.color = MoneroComponents.Style.titleBarButtonHoverColor
btnLanguageToggleTooltip.tooltipPopup.open()
}
onExited: {
parent.color = "transparent"
btnLanguageToggleTooltip.tooltipPopup.close()
}
onClicked: root.languageClicked() onClicked: root.languageClicked()
} }
} }
@ -165,12 +189,24 @@ Rectangle {
opacity: 0.75 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 { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor onEntered: {
onExited: parent.color = "transparent" parent.color = MoneroComponents.Style.titleBarButtonHoverColor
btnSwitchThemeTooltip.tooltipPopup.open()
}
onExited: {
parent.color = "transparent"
btnSwitchThemeTooltip.tooltipPopup.close()
}
onClicked: { onClicked: {
MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme; MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme;
} }

28
components/Tooltip.qml
View file

@ -35,14 +35,19 @@ import "." as MoneroComponents
Rectangle { Rectangle {
property alias text: tooltip.text 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" color: "transparent"
height: icon.height height: tooltipIconVisible ? icon.height : parent.height
width: icon.width width: tooltipIconVisible ? icon.width : parent.width
visible: text != "" visible: text != ""
Text { Text {
id: icon id: icon
visible: tooltipIconVisible
color: MoneroComponents.Style.orange color: MoneroComponents.Style.orange
font.family: FontAwesome.fontFamily font.family: FontAwesome.fontFamily
font.pixelSize: 10 font.pixelSize: 10
@ -62,8 +67,9 @@ Rectangle {
} }
} }
Popup { ToolTip {
id: popup id: popup
height: tooltip.height + 20
background: Rectangle { background: Rectangle {
border.color: MoneroComponents.Style.buttonInlineBackgroundColor border.color: MoneroComponents.Style.buttonInlineBackgroundColor
@ -73,8 +79,20 @@ Rectangle {
} }
closePolicy: Popup.NoAutoClose closePolicy: Popup.NoAutoClose
padding: 10 padding: 10
x: icon.x + icon.width x: tooltipLeft
y: icon.y - height ? (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 { RowLayout {
Text { Text {

2
pages/Account.qml
View file

@ -304,6 +304,7 @@ Rectangle {
opacity: 0.5 opacity: 0.5
Layout.preferredWidth: 23 Layout.preferredWidth: 23
Layout.preferredHeight: 21 Layout.preferredHeight: 21
tooltip: qsTr("Edit account label") + translationManager.emptyString
onClicked: pageAccount.renameSubaddressAccountLabel(index); onClicked: pageAccount.renameSubaddressAccountLabel(index);
} }
@ -317,6 +318,7 @@ Rectangle {
opacity: 0.5 opacity: 0.5
Layout.preferredWidth: 16 Layout.preferredWidth: 16
Layout.preferredHeight: 21 Layout.preferredHeight: 21
tooltip: qsTr("Copy address to clipboard") + translationManager.emptyString
onClicked: { onClicked: {
console.log("Address copied to clipboard"); console.log("Address copied to clipboard");

3
pages/AddressBook.qml
View file

@ -210,6 +210,7 @@ Rectangle {
opacity: 0.5 opacity: 0.5
Layout.preferredWidth: 20 Layout.preferredWidth: 20
Layout.preferredHeight: 20 Layout.preferredHeight: 20
tooltip: qsTr("Send to this address") + translationManager.emptyString
onClicked: { onClicked: {
doSend(); doSend();
} }
@ -222,6 +223,7 @@ Rectangle {
opacity: 0.5 opacity: 0.5
Layout.preferredWidth: 23 Layout.preferredWidth: 23
Layout.preferredHeight: 21 Layout.preferredHeight: 21
tooltip: qsTr("Edit address label") + translationManager.emptyString
onClicked: { onClicked: {
addressBookListView.currentIndex = index; addressBookListView.currentIndex = index;
@ -236,6 +238,7 @@ Rectangle {
Layout.preferredHeight: 21 Layout.preferredHeight: 21
color: MoneroComponents.Style.defaultFontColor color: MoneroComponents.Style.defaultFontColor
opacity: 0.5 opacity: 0.5
tooltip: qsTr("Copy address to clipboard") + translationManager.emptyString
onClicked: { onClicked: {
console.log("Address copied to clipboard"); console.log("Address copied to clipboard");

24
pages/History.qml
View file

@ -958,6 +958,8 @@ Rectangle {
label.font.family: FontAwesome.fontFamily label.font.family: FontAwesome.fontFamily
fontSize: 18 fontSize: 18
width: 34 width: 34
tooltip: qsTr("Transaction details") + translationManager.emptyString
tooltipLeft: true
MouseArea { MouseArea {
state: "details" state: "details"
@ -965,8 +967,14 @@ Rectangle {
hoverEnabled: true hoverEnabled: true
z: parent.z + 1 z: parent.z + 1
onEntered: parent.opacity = 0.8; onEntered: {
onExited: parent.opacity = 1.0; 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 label.font.family: FontAwesome.fontFamilyBrands
fontSize: 18 fontSize: 18
width: 34 width: 34
tooltip: qsTr("Generate payment proof") + translationManager.emptyString
tooltipLeft: true
MouseArea { MouseArea {
state: "proof" state: "proof"
@ -995,8 +1005,14 @@ Rectangle {
hoverEnabled: true hoverEnabled: true
z: parent.z + 1 z: parent.z + 1
onEntered: parent.opacity = 0.8; onEntered: {
onExited: parent.opacity = 1.0; parent.opacity = 0.8;
parent.tooltipPopup.open()
}
onExited: {
parent.opacity = 1.0;
parent.tooltipPopup.close()
}
} }
} }
} }

2
pages/Receive.qml
View file

@ -203,6 +203,7 @@ Rectangle {
Layout.preferredWidth: 23 Layout.preferredWidth: 23
Layout.preferredHeight: 21 Layout.preferredHeight: 21
visible: index !== 0 visible: index !== 0
tooltip: qsTr("Edit address label") + translationManager.emptyString
onClicked: { onClicked: {
renameSubaddressLabel(index); renameSubaddressLabel(index);
@ -218,6 +219,7 @@ Rectangle {
opacity: 0.5 opacity: 0.5
Layout.preferredWidth: 16 Layout.preferredWidth: 16
Layout.preferredHeight: 21 Layout.preferredHeight: 21
tooltip: qsTr("Copy address to clipboard") + translationManager.emptyString
onClicked: { onClicked: {
console.log("Address copied to clipboard"); console.log("Address copied to clipboard");

7
pages/Transfer.qml
View file

@ -277,6 +277,7 @@ Rectangle {
fontStyleName: "Solid" fontStyleName: "Solid"
fontPixelSize: 18 fontPixelSize: 18
text: FontAwesome.desktop text: FontAwesome.desktop
tooltip: qsTr("Grab QR code from screen") + translationManager.emptyString
onClicked: { onClicked: {
clearFields(); clearFields();
const codes = oshelper.grabQrCodesFromScreen(); const codes = oshelper.grabQrCodesFromScreen();
@ -295,6 +296,7 @@ Rectangle {
fontStyleName: "Solid" fontStyleName: "Solid"
text: FontAwesome.qrcode text: FontAwesome.qrcode
visible: appWindow.qrScannerEnabled visible: appWindow.qrScannerEnabled
tooltip: qsTr("Scan QR code") + translationManager.emptyString
onClicked: { onClicked: {
cameraUi.state = "Capture" cameraUi.state = "Capture"
cameraUi.qrcode_decoded.connect(updateFromQrCode) cameraUi.qrcode_decoded.connect(updateFromQrCode)
@ -304,6 +306,7 @@ Rectangle {
MoneroComponents.InlineButton { MoneroComponents.InlineButton {
fontFamily: FontAwesome.fontFamily fontFamily: FontAwesome.fontFamily
text: FontAwesome.addressBook text: FontAwesome.addressBook
tooltip: qsTr("Import from address book") + translationManager.emptyString
onClicked: { onClicked: {
middlePanel.addressBookView.selectAndSend = true; middlePanel.addressBookView.selectAndSend = true;
appWindow.showPageRequest("AddressBook"); appWindow.showPageRequest("AddressBook");
@ -483,12 +486,16 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
opacity: mouseArea.containsMouse ? 1 : 0.85 opacity: mouseArea.containsMouse ? 1 : 0.85
text: recipientModel.count == 1 ? FontAwesome.infinity : FontAwesome.times 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 { MouseArea {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
hoverEnabled: true hoverEnabled: true
onEntered: parent.tooltipPopup.open()
onExited: parent.tooltipPopup.close()
onClicked: { onClicked: {
if (recipientModel.count == 1) { if (recipientModel.count == 1) {
parent.parent.children[2].text = "(all)"; parent.parent.children[2].text = "(all)";