Transfer: redesign advanced options

components/AdvancedOptionsItem.qml

@@ -0,0 +1,106 @@
+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 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
+        Layout.preferredWidth: 195
+        Layout.maximumWidth: 195
+        Layout.leftMargin: 10
+
+        MoneroComponents.Label {
+            id: title
+            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
+            height: 10
+            color: "transparent"
+        }
+    }
+
+    ColumnLayout {
+        Layout.fillWidth: false
+        Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+        spacing: 4
+                
+        RowLayout {
+            Layout.fillWidth: false
+            spacing: 12
+            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+            
+            StandardButton {
+                id: button1
+                small: true
+                visible: button1.text
+            }
+    
+            StandardButton {
+                id: button2
+                small: true
+                visible: button2.text
+            }
+            
+            StandardButton {
+                id: button3
+                small: true
+                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
+            }
+        }
+    }
+}

pages/Transfer.qml

@@ -514,10 +514,9 @@ Rectangle {
         id: advancedLayout
         anchors.top: pageRoot.bottom
         anchors.left: parent.left
-        anchors.right: parent.right
         anchors.margins: 20
         anchors.topMargin: 32
-        spacing: 26
+        spacing: 10
         enabled: !viewOnly || pageRoot.enabled
 
         RowLayout {
@@ -532,84 +531,88 @@ Rectangle {
             }
         }
 
-        GridLayout {
+        AdvancedOptionsItem {
             visible: persistentSettings.transferShowAdvanced && appWindow.walletMode >= 2
-            columns: 6
+            title: qsTr("Key images") + translationManager.emptyString
-
+            button1.text: qsTr("Export") + translationManager.emptyString
-            StandardButton {
+            button1.enabled: !appWindow.viewOnly
-                id: sweepUnmixableButton
+            button1.onClicked: {
-                text: qsTr("Sweep Unmixable") + translationManager.emptyString
+                console.log("Transfer: export key images clicked")
-                enabled : pageRoot.enabled
+                exportKeyImagesDialog.open();
-                small: true
-                onClicked: {
-                    console.log("Transfer: sweepUnmixableClicked")
-                    root.sweepUnmixableClicked()
-                }
             }
-
+            button2.text: qsTr("Import") + translationManager.emptyString
-            StandardButton {
+            button2.enabled: appWindow.viewOnly && appWindow.isTrustedDaemon()
-                id: saveTxButton
+            button2.onClicked: {
-                text: qsTr("Create tx file") + translationManager.emptyString
+                console.log("Transfer: import key images clicked")
-                visible: appWindow.viewOnly
+                importKeyImagesDialog.open(); 
-                enabled: pageRoot.checkInformation(amountLine.text, addressLine.text, appWindow.persistentSettings.nettype)
-                small: true
-                onClicked: {
-                    console.log("Transfer: saveTx Clicked")
-                    var priority = priorityModelV5.get(priorityDropdown.currentIndex).priority
-                    console.log("priority: " + priority)
-                    console.log("amount: " + amountLine.text)
-                    addressLine.text = addressLine.text.trim()
-                    setPaymentId(paymentIdLine.text.trim());
-                    root.paymentClicked(addressLine.text, paymentIdLine.text, amountLine.text, root.mixin, priority, descriptionLine.text)
-
-                }
             }
+            helpTextLarge.text: qsTr("Required for view-only wallets to display the real balance") + translationManager.emptyString
+            helpTextSmall.text: {
+                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:#ffffff;} p.orange{color:#ff9323;}</style>" +
+                       "<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
+            button1.text: qsTr("Create") + translationManager.emptyString
+            button1.enabled: appWindow.viewOnly && pageRoot.checkInformation(amountLine.text, addressLine.text, appWindow.persistentSettings.nettype)
+            button1.onClicked: {
+                console.log("Transfer: saveTx Clicked")
+                var priority = priorityModelV5.get(priorityDropdown.currentIndex).priority
+                console.log("priority: " + priority)
+                console.log("amount: " + amountLine.text)
+                addressLine.text = addressLine.text.trim()
+                setPaymentId(paymentIdLine.text.trim());
+                root.paymentClicked(addressLine.text, paymentIdLine.text, amountLine.text, root.mixin, priority, descriptionLine.text)
+            }
+            button2.text: qsTr("Sign (offline)") + translationManager.emptyString
+            button2.enabled: !appWindow.viewOnly
+            button2.onClicked: {
+                console.log("Transfer: sign tx clicked")
+                signTxDialog.open();
+            }
+            button3.text: qsTr("Submit") + translationManager.emptyString
+            button3.enabled: appWindow.viewOnly
+            button3.onClicked: {
+                console.log("Transfer: submit tx clicked")
+                submitTxDialog.open();
+            }
+            helpTextLarge.text: qsTr("Spend XMR from a cold (offline) wallet") + translationManager.emptyString
+            helpTextSmall.text: {
+                var errorMessage = "";
+                if (appWindow.viewOnly && !pageRoot.checkInformation(amountLine.text, addressLine.text, appWindow.persistentSettings.nettype)){
+                    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:#ffffff;} p.orange{color:#ff9323;}</style>" +
+                       "<p>"  + qsTr("1. Using view-only wallet, export the outputs into a file") +
+                       "<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>" +
+                       errorMessage +
+                       "<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
+        }
 
-            StandardButton {
+        AdvancedOptionsItem {
-                id: signTxButton
+            visible: persistentSettings.transferShowAdvanced && appWindow.walletMode >= 2
-                text: qsTr("Sign tx file") + translationManager.emptyString
+            title: qsTr("Unmixable outputs") + translationManager.emptyString
-                small: true
+            button1.text: qsTr("Sweep") + translationManager.emptyString
-                visible: !appWindow.viewOnly
+            button1.enabled : pageRoot.enabled
-                onClicked: {
+            button1.onClicked: {
-                    console.log("Transfer: sign tx clicked")
+                console.log("Transfer: sweepUnmixableClicked")
-                    signTxDialog.open();
+                root.sweepUnmixableClicked()
-                }
-            }
-
-            StandardButton {
-                id: submitTxButton
-                text: qsTr("Submit tx file") + translationManager.emptyString
-                small: true
-                visible: appWindow.viewOnly
-                enabled: pageRoot.enabled
-                onClicked: {
-                    console.log("Transfer: submit tx clicked")
-                    submitTxDialog.open();
-                }
-            }
-            
-            StandardButton {
-                id: exportKeyImagesButton
-                text: qsTr("Export key images") + translationManager.emptyString
-                small: true
-                visible: !appWindow.viewOnly
-                enabled: pageRoot.enabled
-                onClicked: {
-                    console.log("Transfer: export key images clicked")
-                    exportKeyImagesDialog.open();
-                }
-            }
-
-            StandardButton {
-                id: importKeyImagesButton
-                text: qsTr("Import key images") + translationManager.emptyString
-                small: true
-                enabled: appWindow.viewOnly && appWindow.isTrustedDaemon()
-                onClicked: {
-                    console.log("Transfer: import key images clicked")
-                    importKeyImagesDialog.open();
-                }
             }
+            helpTextLarge.text: qsTr("Create a transaction that spends old unmovable outputs") + translationManager.emptyString
         }
     }
 

qml.qrc

@@ -237,5 +237,6 @@
         <file>images/edit.svg</file>
         <file>images/arrow-right-in-circle-outline-medium-white.svg</file>
         <file>images/tails-grey.png</file>
+        <file>components/AdvancedOptionsItem.qml</file>
     </qresource>
 </RCC>