Merge pull request #2448

d2b9d56 ContextMenu: styling, implement ContextMenuItem component (xiphon)

.github/workflows/build.yml

@@ -0,0 +1,30 @@
+name: GUI build
+
+on: [push, pull_request]
+
+jobs:
+  build-macos:
+
+    runs-on: macOS-latest
+    
+    steps:
+    - uses: actions/checkout@v1
+    - name: update brew and install dependencies
+      run: brew update && brew install boost hidapi zmq libpgm unbound libsodium miniupnpc ldns expat doxygen graphviz libunwind-headers protobuf qt5 
+    - name: build
+      run: export PATH=$PATH:/usr/local/opt/qt/bin && ./build.sh
+
+  build-ubuntu:
+ 
+    runs-on: ubuntu-latest
+ 
+    steps:
+    - uses: actions/checkout@v1
+    - name: update apt
+      run: sudo apt update
+    - name: install monero dependencies
+      run: sudo apt -y install build-essential cmake libboost-all-dev miniupnpc libunbound-dev graphviz doxygen libunwind8-dev pkg-config libssl-dev libzmq3-dev libsodium-dev libhidapi-dev libnorm-dev libusb-1.0-0-dev libpgm-dev
+    - name: install monero gui dependencies
+      run: sudo apt -y install qtbase5-dev qt5-default qtdeclarative5-dev qml-module-qtquick-controls qml-module-qtquick-controls2 qml-module-qtquick-dialogs qml-module-qtquick-xmllistmodel qml-module-qt-labs-settings qml-module-qt-labs-folderlistmodel qttools5-dev-tools qml-module-qtquick-templates2 libqt5svg5-dev
+    - name: build
+      run: ./build.sh

LeftPanel.qml

@@ -238,7 +238,7 @@ Rectangle {
                     font.pixelSize: 16
                     text: {
                         if (persistentSettings.fiatPriceEnabled && persistentSettings.fiatPriceToggle) {
-                            return persistentSettings.fiatPriceCurrency == "xmrusd" ? "USD" : "EUR"
+                            return appWindow.fiatApiCurrencySymbol();
                         } else {
                             return "XMR"
                         }

README.md

@@ -93,7 +93,7 @@ Packaging for your favorite distribution would be a welcome contribution!
 
   - For Fedora
 
-	`sudo dnf install make automake cmake gcc-c++ boost-devel miniupnpc-devel graphviz doxygen unbound-devel libunwind-devel pkgconfig openssl-devel libcurl-devel hidapi-devel libusb-devel`
+	`sudo dnf install make automake cmake gcc-c++ boost-devel miniupnpc-devel graphviz doxygen unbound-devel libunwind-devel pkgconfig openssl-devel libcurl-devel hidapi-devel libusb-devel zeromq-devel`
 
 2. Install Qt:
 

components/CheckBox.qml

@@ -40,6 +40,7 @@ Item {
     property string uncheckedIcon
     property int imgWidth: 13
     property int imgHeight: 13
+    property bool toggleOnClick: true
     property bool checked: false
     property alias background: backgroundRect.color
     property bool border: true
@@ -51,7 +52,9 @@ Item {
     width: checkBoxLayout.width
 
     function toggle(){
-        checkBox.checked = !checkBox.checked
+        if (checkBox.toggleOnClick) {
+            checkBox.checked = !checkBox.checked
+        }
         checkBox.clicked()
     }
 

components/ContextMenu.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+
+import FontAwesome 1.0
+import "../components" as MoneroComponents
+
+MouseArea {
+    signal paste()
+
+    id: root
+    acceptedButtons: Qt.RightButton
+    anchors.fill: parent
+    onClicked: {
+        if (mouse.button === Qt.RightButton)
+            contextMenu.open()
+    }
+
+    Menu {
+        id: contextMenu
+
+        background: Rectangle {
+            border.color: MoneroComponents.Style.buttonBackgroundColorDisabledHover
+            border.width: 1
+            radius: 2
+            color: MoneroComponents.Style.buttonBackgroundColorDisabled
+        }
+
+        padding: 1
+        width: 100
+        x: root.mouseX
+        y: root.mouseY
+
+        MoneroComponents.ContextMenuItem {
+            enabled: root.parent.canPaste === true
+            glyphIcon: FontAwesome.paste
+            onTriggered: root.paste()
+            text: qsTr("Paste") + translationManager.emptyString
+        }
+    }
+}

components/ContextMenuItem.qml

@@ -0,0 +1,52 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.1
+
+import FontAwesome 1.0
+import "../components" as MoneroComponents
+
+MenuItem {
+    id: menuItem
+
+    property bool glyphIconSolid: true
+    property alias glyphIcon: glyphIcon.text
+
+    background: Rectangle {
+        color: MoneroComponents.Style.buttonBackgroundColorDisabledHover
+        opacity: mouse.containsMouse ? 1 : 0
+
+        MouseArea {
+            id: mouse
+
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: menuItem.triggered()
+            visible: menuItem.enabled
+        }
+    }
+
+    contentItem: RowLayout {
+        anchors.fill: parent
+        anchors.leftMargin: 10
+        anchors.rightMargin: 10
+        opacity: menuItem.enabled ? 1 : 0.4
+        spacing: 8
+
+        Text {
+            id: glyphIcon
+
+            color: MoneroComponents.Style.buttonTextColor
+            font.family: glyphIconSolid ? FontAwesome.fontFamilySolid : FontAwesome.fontFamily
+            font.pixelSize: 14
+            font.styleName: glyphIconSolid ? "Solid" : "Regular"
+        }
+
+        Text {
+            color: MoneroComponents.Style.buttonTextColor
+            font.family: MoneroComponents.Style.fontRegular.name
+            font.pixelSize: 14
+            Layout.fillWidth: true
+            text: menuItem.text
+        }
+    }
+}

components/Input.qml

@@ -32,6 +32,7 @@ import QtQuick 2.9
 import "../components" as MoneroComponents
 
 TextField {
+    id: textField
     font.family: MoneroComponents.Style.fontRegular.name
     font.pixelSize: 18
     font.bold: true
@@ -44,4 +45,11 @@ TextField {
     background: Rectangle {
         color: "transparent"
     }
+
+    MoneroComponents.ContextMenu {
+        onPaste: {
+            textField.clear();
+            textField.paste();
+        }
+    }
 }

components/InputDialog.qml

@@ -86,7 +86,7 @@ Item {
                 color: MoneroComponents.Style.defaultFontColor
             }
 
-            TextField {
+            MoneroComponents.Input {
                 id : input
                 focus: true
                 Layout.topMargin: 6

components/InputMulti.qml

@@ -57,6 +57,10 @@ TextArea {
     onTextChanged: {
         if(addressValidation){
             // js replacement for `RegExpValidator { regExp: /[0-9A-Fa-f]{95}/g }`
+            if (textArea.text.startsWith("monero:")) {
+                error = false;
+                return;
+            }
             textArea.text = textArea.text.replace(/[^a-z0-9.@\-]/gi,'');
             var address_ok = TxUtils.checkAddress(textArea.text, appWindow.persistentSettings.nettype) || TxUtils.isValidOpenAliasAddress(textArea.text);
             if(!address_ok) error = true;
@@ -64,4 +68,11 @@ TextArea {
             TextArea.cursorPosition = textArea.text.length;
         }
     }
+
+    MoneroComponents.ContextMenu {
+        onPaste: {
+            textArea.clear();
+            textArea.paste();
+        }
+    }
 }

components/LineEdit.qml

@@ -53,6 +53,8 @@ Item {
     property alias inlineButtonText: inlineButtonId.text
     property alias inlineIcon: inlineIcon.visible
     property bool copyButton: false
+    property alias copyButtonText: copyButtonId.text
+    property alias copyButtonEnabled: copyButtonId.enabled
 
     property bool borderDisabled: false
     property string borderColor: {

components/LineEditMulti.qml

@@ -80,9 +80,6 @@ ColumnLayout {
     property alias readOnly: input.readOnly
     property bool copyButton: false
     property bool pasteButton: false
-    property var onPaste: function(clipboardText) {
-        item.text = clipboardText;
-    }
     property bool showingHeader: labelText != "" || copyButton || pasteButton
     property var wrapMode: Text.NoWrap
     property alias addressValidation: input.addressValidation
@@ -146,7 +143,10 @@ ColumnLayout {
 
             MoneroComponents.LabelButton {
                 id: pasteButtonId
-                onClicked: item.onPaste(clipboard.text())
+                onClicked: {
+                    input.clear();
+                    input.paste();
+                }
                 text: qsTr("Paste") + translationManager.emptyString
                 visible: pasteButton
             }

components/PasswordDialog.qml

@@ -187,7 +187,7 @@ Item {
                 text: qsTr("CAPSLOCKS IS ON.") + translationManager.emptyString;
             }
 
-            TextField {
+            MoneroComponents.Input {
                 id: passwordInput1
                 Layout.topMargin: 6
                 Layout.fillWidth: true
@@ -296,7 +296,7 @@ Item {
                 color: MoneroComponents.Style.defaultFontColor
             }
 
-            TextField {
+            MoneroComponents.Input {
                 id: passwordInput2
                 visible: !passwordDialogMode
                 Layout.topMargin: 6

components/SettingsListItem.qml

@@ -0,0 +1,65 @@
+import QtQuick 2.9
+import QtQuick.Layouts 1.1
+
+import "../components" as MoneroComponents
+
+ColumnLayout {
+    property alias buttonText: button.text
+    property alias description: description.text
+    property alias title: title.text
+    signal clicked()
+
+    id: settingsListItem
+    Layout.fillWidth: true
+    spacing: 0
+
+    Rectangle {
+        // divider
+        Layout.preferredHeight: 1
+        Layout.fillWidth: true
+        Layout.bottomMargin: 8
+        color: MoneroComponents.Style.dividerColor
+        opacity: MoneroComponents.Style.dividerOpacity
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+        spacing: 0
+
+        ColumnLayout {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+            spacing: 0
+
+            MoneroComponents.TextPlain {
+                id: title
+                Layout.fillWidth: true
+                Layout.preferredHeight: 20
+                Layout.topMargin: 8
+                color: MoneroComponents.Style.defaultFontColor
+                opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
+                font.bold: true
+                font.family: MoneroComponents.Style.fontRegular.name
+                font.pixelSize: 16
+            }
+
+            MoneroComponents.TextPlainArea {
+                id: description
+                color: MoneroComponents.Style.dimmedFontColor
+                colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
+                colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
+                Layout.fillWidth: true
+                horizontalAlignment: TextInput.AlignLeft
+            }
+        }
+
+        MoneroComponents.StandardButton {
+            id: button
+            small: true
+            onClicked: {
+                settingsListItem.clicked()
+            }
+            width: 135
+        }
+    }
+}

get_libwallet_api.sh

@@ -17,7 +17,7 @@ if [ ! -d $MONERO_DIR/src ]; then
 fi
 git submodule update --remote
 git -C $MONERO_DIR fetch
-git -C $MONERO_DIR checkout v0.15.0.0 
+git -C $MONERO_DIR checkout v0.15.0.1
 
 # get monero core tag
 pushd $MONERO_DIR

installers/windows/Monero.iss

@@ -1,6 +1,7 @@
 ; Monero Carbon Chamaeleon GUI Wallet Installer for Windows
 ; Copyright (c) 2017-2019, The Monero Project
 ; See LICENSE
+#define GuiVersion GetFileVersion("bin\monero-wallet-gui.exe")
 
 [Setup]
 AppName=Monero GUI Wallet
@@ -8,7 +9,8 @@ AppName=Monero GUI Wallet
 ; Thus it's important to keep this stable over releases
 ; With a different "AppName" InnoSetup would treat a mere update as a completely new application and thus mess up
 
-AppVersion=0.15.0.0
+AppVersion={#GuiVersion}
+VersionInfoVersion={#GuiVersion}
 DefaultDirName={pf}\Monero GUI Wallet
 DefaultGroupName=Monero GUI Wallet
 UninstallDisplayIcon={app}\monero-wallet-gui.exe
@@ -39,6 +41,8 @@ UsedUserAreasWarning=no
 ; play a role in only in few cases as the first standard user in a Windows installation does have admin rights.
 ; So, for the time being, this installer simply disregards this problem.
 
+[Messages]
+SetupWindowTitle=%1 {#GuiVersion} Installer
 
 [Languages]
 Name: "en"; MessagesFile: "compiler:Default.isl"
@@ -65,7 +69,7 @@ Name: "en"; MessagesFile: "compiler:Default.isl"
 ; Note that it would be very dangerous to use "ignoreversion" on files that may be shared with other
 ; applications somehow. Luckily this is no issue here because ALL files are "private" to Monero.
 
-Source: "ReadMe.htm"; DestDir: "{app}"; Flags: ignoreversion
+Source: {#file AddBackslash(SourcePath) + "ReadMe.htm"}; DestDir: "{app}"; DestName: "ReadMe.htm"; Flags: ignoreversion
 Source: "FinishImage.bmp"; Flags: dontcopy
 
 ; Monero GUI wallet exe and guide

installers/windows/ReadMe.htm

@@ -6,8 +6,7 @@
 <body style="font-family: Arial, Helvetica, sans-serif">
 <h1>Monero Carbon Chamaeleon GUI Wallet</h1>
 
-  <p>Copyright (c) 2014-2019, The Monero Project<br>
-  Date: November 1, 2019</p>
+  <p>Copyright (c) 2014-2019, The Monero Project</p>
 
 <h2>Preface</h2>
 
@@ -23,7 +22,7 @@
 
 <h2>Content of the Package</h2>
 
-  <p>You just installed the <i>Monero GUI wallet</i> for Windows, release Carbon Chamaeleon, version 0.15.0.0.
+  <p>You just installed the <i>Monero GUI wallet</i> for Windows, release Carbon Chamaeleon, version {#GuiVersion}.
   The wallet enables you to send and receive Moneroj in a secure and very private way.
   </p>
 

main.qml

@@ -86,8 +86,8 @@ ApplicationWindow {
     property bool themeTransition: false
 
     // fiat price conversion
-    property int fiatPriceXMRUSD: 0
-    property int fiatPriceXMREUR: 0
+    property real fiatPriceXMRUSD: 0
+    property real fiatPriceXMREUR: 0
     property var fiatPriceAPIs: {
         return {
             "kraken": {
@@ -1241,17 +1241,32 @@ ApplicationWindow {
         Prices.getJSON(url);
     }
 
-    function fiatApiUpdateBalance(balance){
-        // update balance card
+    function fiatApiCurrencySymbol() {
+        switch (persistentSettings.fiatPriceCurrency) {
+            case "xmrusd":
+                return "USD";
+            case "xmreur":
+                return "EUR";
+            default:
+                console.error("unsupported currency", persistentSettings.fiatPriceCurrency);
+                return "UNSUPPORTED";
+        }
+    }
+
+    function fiatApiConvertToFiat(amount) {
         var ticker = persistentSettings.fiatPriceCurrency === "xmrusd" ? appWindow.fiatPriceXMRUSD : appWindow.fiatPriceXMREUR;
         if(ticker <= 0){
-            console.log(fiatApiError("Could not update balance card; invalid ticker value"));
-            leftPanel.balanceFiatString = "?.??";
-            return;
+            console.log(fiatApiError("Invalid ticker value: " + ticker));
+            return "?.??";
         }
+        return (amount * ticker).toFixed(2);
+    }
+
+    function fiatApiUpdateBalance(balance){
+        // update balance card
         var bFiat = "?.??"
         if (!hideBalanceForced && !persistentSettings.hideBalance) {
-            bFiat = (balance * ticker).toFixed(2);
+            bFiat = fiatApiConvertToFiat(balance);
         }
         leftPanel.balanceFiatString = bFiat;
     }

monero-wallet-gui.pro

@@ -504,6 +504,9 @@ DISTFILES += \
     notes.txt \
     monero/src/wallet/CMakeLists.txt
 
+VERSION = $$cat('version.js', lines)
+VERSION = $$find(VERSION, 'GUI_VERSION')
+VERSION = $$replace(VERSION, '.*(\d+\.\d+\.\d+\.\d+).*', '\1')
 
 # windows application icon
 RC_ICONS = images/appicon.ico

pages/AddressBook.qml

@@ -325,8 +325,8 @@ Rectangle {
                 wrapMode: Text.WrapAnywhere
                 addressValidation: true
                 pasteButton: true
-                onPaste: function(clipboardText) {
-                    const parsed = walletManager.parse_uri_to_object(clipboardText);
+                onTextChanged: {
+                    const parsed = walletManager.parse_uri_to_object(addressLine.text);
                     if (!parsed.error) {
                         addressLine.text = parsed.address;
                         descriptionLine.text = parsed.tx_description;

pages/Transfer.qml

@@ -168,6 +168,10 @@ Rectangle {
                   labelText: qsTr("<style type='text/css'>a {text-decoration: none; color: #858585; font-size: 14px;}</style>\
                                    Amount <font size='2'>  ( </font> <a href='#'>Change account</a><font size='2'> )</font>")
                              + translationManager.emptyString
+                  copyButton: persistentSettings.fiatPriceEnabled
+                  copyButtonText: fiatApiCurrencySymbol() + " ~" + fiatApiConvertToFiat(amountLine.text)
+                  copyButtonEnabled: false
+
                   onLabelLinkActivated: {
                       middlePanel.accountView.selectAndSend = true;
                       appWindow.showPageRequest("Account")
@@ -257,18 +261,14 @@ Rectangle {
                   appWindow.showPageRequest("AddressBook");
               }
               pasteButton: true
-              onPaste: function(clipboardText) {
-                  const parsed = walletManager.parse_uri_to_object(clipboardText);
+              onTextChanged: {
+                  const parsed = walletManager.parse_uri_to_object(text);
                   if (!parsed.error) {
                     addressLine.text = parsed.address;
                     setPaymentId(parsed.payment_id);
                     amountLine.text = parsed.amount;
                     setDescription(parsed.tx_description);
-                  } else {
-                     addressLine.text = clipboardText; 
                   }
-              }
-              onTextChanged: {
                   warningLongPidTransfer = isLongPidService(text);
               }
               inlineButton.text: FontAwesome.qrcode
@@ -756,7 +756,8 @@ Rectangle {
 
         // Currently opened wallet is not view-only
         if(appWindow.viewOnly){
-            root.sendButtonWarning = qsTr("Wallet is view-only and sends are not possible.") + translationManager.emptyString;
+            root.sendButtonWarning = qsTr("Wallet is view-only and sends are not possible. Unless key images are imported, " + 
+                                    "the balance reflects only incoming but not outgoing transactions.") + translationManager.emptyString;
             return false;
         }
 

pages/merchant/Merchant.qml

@@ -455,7 +455,7 @@ Item {
                         width: 220
                         source: "qrc:///images/merchant/input_box.png"
 
-                        TextField {
+                        MoneroComponents.Input {
                             id: amountToReceive
                             topPadding: 0
                             leftPadding: 10

pages/settings/SettingsLayout.qml

@@ -72,6 +72,7 @@ Rectangle {
             id: themeCheckbox
             checked: !MoneroComponents.Style.blackTheme
             text: qsTr("Light theme") + translationManager.emptyString
+            toggleOnClick: false
             onClicked: {
                 MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme;
                 persistentSettings.blackTheme = MoneroComponents.Style.blackTheme;

pages/settings/SettingsWallet.qml

@@ -47,312 +47,97 @@ Rectangle {
         anchors.right: parent.right
         anchors.margins: 20
         anchors.topMargin: 0
-        spacing: 0
+        spacing: 8
 
-        Rectangle {
-            // divider
-            Layout.preferredHeight: 1
-            Layout.fillWidth: true
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
-        }
+        MoneroComponents.SettingsListItem {
+            buttonText: qsTr("Close wallet") + translationManager.emptyString
+            description: qsTr("Logs out of this wallet.") + translationManager.emptyString
+            title: qsTr("Close this wallet") + translationManager.emptyString
 
-        GridLayout {
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
-
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 0
-
-                MoneroComponents.TextPlain {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 20
-                    Layout.topMargin: 8
-                    color: MoneroComponents.Style.defaultFontColor
-                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
-                    font.bold: true
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 16
-                    text: qsTr("Close this wallet") + translationManager.emptyString
-                }
-
-                MoneroComponents.TextPlainArea {
-                    color: MoneroComponents.Style.dimmedFontColor
-                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
-                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                    width: parent.width
-                    Layout.fillWidth: true
-                    horizontalAlignment: TextInput.AlignLeft
-                    text: qsTr("Logs out of this wallet.") + translationManager.emptyString
-                }
-            }
-
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Close wallet") + translationManager.emptyString
-                onClicked: {
-                    middlePanel.addressBookView.clearFields();
-                    middlePanel.transferView.clearFields();
-                    middlePanel.receiveView.clearFields();
-                    appWindow.showWizard();
-                }
-                width: 135
+            onClicked: {
+                middlePanel.addressBookView.clearFields();
+                middlePanel.transferView.clearFields();
+                middlePanel.receiveView.clearFields();
+                appWindow.showWizard();
             }
         }
 
-        Rectangle {
-            // divider
-            Layout.preferredHeight: 1
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
-        }
-
-        GridLayout {
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
+        MoneroComponents.SettingsListItem {
+            buttonText: qsTr("Create wallet") + translationManager.emptyString
+            description: qsTr("Creates a new wallet that can only view and initiate transactions, but requires a spendable wallet to sign transactions before sending.") + translationManager.emptyString
+            title: qsTr("Create a view-only wallet") + translationManager.emptyString
             visible: !appWindow.viewOnly
 
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 0
-
-                MoneroComponents.TextPlain {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 20
-                    Layout.topMargin: 8
-                    color: MoneroComponents.Style.defaultFontColor
-                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
-                    font.bold: true
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 16
-                    text: qsTr("Create a view-only wallet") + translationManager.emptyString
-                }
-
-                MoneroComponents.TextPlainArea {
-                    color: MoneroComponents.Style.dimmedFontColor
-                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
-                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                    width: parent.width
-                    Layout.fillWidth: true
-                    horizontalAlignment: TextInput.AlignLeft
-                    text: qsTr("Creates a new wallet that can only view and initiate transactions, but requires a spendable wallet to sign transactions before sending.") + translationManager.emptyString
+            onClicked: {
+                var newPath = currentWallet.path + "_viewonly";
+                if (currentWallet.createViewOnly(newPath, appWindow.walletPassword)) {
+                    console.log("view only wallet created in " + newPath);
+                    informationPopup.title  = qsTr("Success") + translationManager.emptyString;
+                    informationPopup.text = qsTr('The view only wallet has been created with the same password as the current wallet. You can open it by closing this current wallet, clicking the "Open wallet from file" option, and selecting the view wallet in: \n%1\nYou can change the password in the wallet settings.').arg(newPath);
+                    informationPopup.open()
+                    informationPopup.onCloseCallback = null
+                } else {
+                    informationPopup.title  = qsTr("Error") + translationManager.emptyString;
+                    informationPopup.text = currentWallet.errorString;
+                    informationPopup.open()
                 }
             }
+        }
 
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Create wallet") + translationManager.emptyString
-                onClicked: {
-                    var newPath = currentWallet.path + "_viewonly";
-                    if (currentWallet.createViewOnly(newPath, appWindow.walletPassword)) {
-                        console.log("view only wallet created in " + newPath);
-                        informationPopup.title  = qsTr("Success") + translationManager.emptyString;
-                        informationPopup.text = qsTr('The view only wallet has been created with the same password as the current wallet. You can open it by closing this current wallet, clicking the "Open wallet from file" option, and selecting the view wallet in: \n%1\nYou can change the password in the wallet settings.').arg(newPath);
-                        informationPopup.open()
-                        informationPopup.onCloseCallback = null
+        MoneroComponents.SettingsListItem {
+            buttonText: qsTr("Show seed") + translationManager.emptyString
+            description: qsTr("Store this information safely to recover your wallet in the future.") + translationManager.emptyString
+            title: qsTr("Show seed & keys") + translationManager.emptyString
+
+            onClicked: {
+                Utils.showSeedPage();
+            }
+        }
+
+        MoneroComponents.SettingsListItem {
+            buttonText: qsTr("Rescan") + translationManager.emptyString
+            description: qsTr("Use this feature if you think the shown balance is not accurate.") + translationManager.emptyString
+            title: qsTr("Rescan wallet balance") + translationManager.emptyString
+            visible: appWindow.walletMode >= 2
+
+            onClicked: {
+                if (!currentWallet.rescanSpent()) {
+                    console.error("Error: ", currentWallet.errorString);
+                    informationPopup.title = qsTr("Error") + translationManager.emptyString;
+                    informationPopup.text  = qsTr("Error: ") + currentWallet.errorString
+                    informationPopup.icon  = StandardIcon.Critical
+                    informationPopup.onCloseCallback = null
+                    informationPopup.open();
+                } else {
+                    informationPopup.title = qsTr("Information") + translationManager.emptyString
+                    informationPopup.text  = qsTr("Successfully rescanned spent outputs.") + translationManager.emptyString
+                    informationPopup.icon  = StandardIcon.Information
+                    informationPopup.onCloseCallback = null
+                    informationPopup.open();
+                }
+            }
+        }
+
+        MoneroComponents.SettingsListItem {
+            buttonText: qsTr("Change password") + translationManager.emptyString
+            description: qsTr("Change the password of your wallet.") + translationManager.emptyString
+            title: qsTr("Change wallet password") + translationManager.emptyString
+
+            onClicked: {
+                passwordDialog.onAcceptedCallback = function() {
+                    if(appWindow.walletPassword === passwordDialog.password){
+                        passwordDialog.openNewPasswordDialog()
                     } else {
                         informationPopup.title  = qsTr("Error") + translationManager.emptyString;
-                        informationPopup.text = currentWallet.errorString;
+                        informationPopup.text = qsTr("Wrong password") + translationManager.emptyString;
                         informationPopup.open()
+                        informationPopup.onCloseCallback = function() {
+                            passwordDialog.open()
+                        }
                     }
                 }
-                width: 135
-            }
-        }
-
-        Rectangle {
-            // divider
-            visible: !appWindow.viewOnly
-            Layout.preferredHeight: 1
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
-        }
-
-        GridLayout {
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
-
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 0
-
-                MoneroComponents.TextPlain {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 20
-                    Layout.topMargin: 8
-                    color: MoneroComponents.Style.defaultFontColor
-                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
-                    font.bold: true
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 16
-                    text: qsTr("Show seed & keys") + translationManager.emptyString
-                }
-
-                MoneroComponents.TextPlainArea {
-                    color: MoneroComponents.Style.dimmedFontColor
-                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
-                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                    width: parent.width
-                    Layout.fillWidth: true
-                    horizontalAlignment: TextInput.AlignLeft
-                    text: qsTr("Store this information safely to recover your wallet in the future.") + translationManager.emptyString
-                }
-            }
-
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Show seed") + translationManager.emptyString
-                onClicked: {
-                    Utils.showSeedPage();
-                }
-                width: 135
-            }
-        }
-
-        Rectangle {
-            // divider
-            Layout.preferredHeight: 1
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
-        }
-
-        GridLayout {
-            visible: appWindow.walletMode >= 2
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
-
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 0
-
-                MoneroComponents.TextPlain {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 20
-                    Layout.topMargin: 8
-                    color: MoneroComponents.Style.defaultFontColor
-                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
-                    font.bold: true
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 16
-                    text: qsTr("Rescan wallet balance") + translationManager.emptyString
-                }
-
-                MoneroComponents.TextPlainArea {
-                    color: MoneroComponents.Style.dimmedFontColor
-                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
-                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                    width: parent.width
-                    Layout.fillWidth: true
-                    horizontalAlignment: TextInput.AlignLeft
-                    text: qsTr("Use this feature if you think the shown balance is not accurate.") + translationManager.emptyString
-                }
-            }
-
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Rescan") + translationManager.emptyString
-                onClicked: {
-                    if (!currentWallet.rescanSpent()) {
-                        console.error("Error: ", currentWallet.errorString);
-                        informationPopup.title = qsTr("Error") + translationManager.emptyString;
-                        informationPopup.text  = qsTr("Error: ") + currentWallet.errorString
-                        informationPopup.icon  = StandardIcon.Critical
-                        informationPopup.onCloseCallback = null
-                        informationPopup.open();
-                    } else {
-                        informationPopup.title = qsTr("Information") + translationManager.emptyString
-                        informationPopup.text  = qsTr("Successfully rescanned spent outputs.") + translationManager.emptyString
-                        informationPopup.icon  = StandardIcon.Information
-                        informationPopup.onCloseCallback = null
-                        informationPopup.open();
-                    }
-                }
-                width: 135
-            }
-        }
-        Rectangle {
-            // divider
-            visible: appWindow.walletMode >= 2
-            Layout.preferredHeight: 1
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
-        }
-
-        GridLayout {
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
-
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 0
-
-                MoneroComponents.TextPlain {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 20
-                    Layout.topMargin: 8
-                    color: MoneroComponents.Style.defaultFontColor
-                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
-                    font.bold: true
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 16
-                    text: qsTr("Change wallet password") + translationManager.emptyString
-                }
-
-                MoneroComponents.TextPlainArea {
-                    color: MoneroComponents.Style.dimmedFontColor
-                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
-                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                    width: parent.width
-                    Layout.fillWidth: true
-                    horizontalAlignment: TextInput.AlignLeft
-                    text: qsTr("Change the password of your wallet.") + translationManager.emptyString
-                }
-            }
-
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Change password") + translationManager.emptyString
-                onClicked: {
-                    passwordDialog.onAcceptedCallback = function() {
-	                    if(appWindow.walletPassword === passwordDialog.password){
-	                        passwordDialog.openNewPasswordDialog()
-	                    } else {
-	                        informationPopup.title  = qsTr("Error") + translationManager.emptyString;
-                            informationPopup.text = qsTr("Wrong password") + translationManager.emptyString;
-	                        informationPopup.open()
-	                        informationPopup.onCloseCallback = function() {
-	                            passwordDialog.open()
-	                        }
-	                    }
-	                }
-                    passwordDialog.onRejectedCallback = null;
-                    passwordDialog.open()
-                }
-                width: 135
+                passwordDialog.onRejectedCallback = null;
+                passwordDialog.open()
             }
         }
     }

qml.qrc

@@ -12,6 +12,7 @@
         <file>images/plus-white.png</file>
         <file>images/plus-white@2x.png</file>
         <file>components/Label.qml</file>
+        <file>components/SettingsListItem.qml</file>
         <file>images/whatIsIcon.png</file>
         <file>images/whatIsIcon@2x.png</file>
         <file>images/lockIcon.png</file>
@@ -21,6 +22,8 @@
         <file>pages/History.qml</file>
         <file>pages/AddressBook.qml</file>
         <file>pages/Mining.qml</file>
+        <file>components/ContextMenu.qml</file>
+        <file>components/ContextMenuItem.qml</file>
         <file>components/NetworkStatusItem.qml</file>
         <file>components/Input.qml</file>
         <file>components/StandardButton.qml</file>

wizard/WizardAskPassword.qml

@@ -150,7 +150,7 @@ ColumnLayout {
             color: MoneroComponents.Style.defaultFontColor
         }
 
-        TextField {
+        MoneroComponents.Input {
             id: passwordInput
 
             Layout.topMargin: 6
@@ -207,7 +207,7 @@ ColumnLayout {
             color: MoneroComponents.Style.defaultFontColor
         }
 
-        TextField {
+        MoneroComponents.Input {
             id : passwordInputConfirm
             
             Layout.topMargin: 6

wizard/WizardRestoreWallet1.qml

@@ -185,7 +185,7 @@ Rectangle {
                         }
                     }
 
-                    TextArea {
+                    MoneroComponents.InputMulti {
                         id: seedInput
                         property bool error: false
                         width: parent.width