github
/
monero-gui
mirror of https://github.com/monero-project/monero-gui
1
Fork 0
Code Releases Activity

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

This commit is contained in:
xiphon 2021-04-15 00:04:50 +00:00
parent 8444a9563e
commit 767b9e05b3
6 changed files with 114 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
components/AdvancedOptionsItem.qml
View File

@ -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
}
}
}
}

1
components/Label.qml
View File

@ -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: ""

7
components/TextPlain.qml
View File

@ -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
}
}

92
components/Tooltip.qml Normal file
View File

@ -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
}
}
}
}

20
pages/Transfer.qml
View File

@ -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
}
}

1
qml.qrc
View File

@ -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>