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(){
+        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>
+  <p>Copyright (c) 2014-2019, The Monero Project</p>
-  Date: November 1, 2019</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 real fiatPriceXMRUSD: 0
-    property int fiatPriceXMREUR: 0
+    property real fiatPriceXMREUR: 0
     property var fiatPriceAPIs: {
         return {
             "kraken": {
@@ -1241,17 +1241,32 @@ ApplicationWindow {
         Prices.getJSON(url);
     }
 
-    function fiatApiUpdateBalance(balance){
+    function fiatApiCurrencySymbol() {
-        // update balance card
+        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"));
+            console.log(fiatApiError("Invalid ticker value: " + ticker));
-            leftPanel.balanceFiatString = "?.??";
+            return "?.??";
-            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) {
+                onTextChanged: {
-                    const parsed = walletManager.parse_uri_to_object(clipboardText);
+                    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) {
+              onTextChanged: {
-                  const parsed = walletManager.parse_uri_to_object(clipboardText);
+                  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,110 +47,27 @@ Rectangle {
         anchors.right: parent.right
         anchors.margins: 20
         anchors.topMargin: 0
-        spacing: 0
+        spacing: 8
 
-        Rectangle {
+        MoneroComponents.SettingsListItem {
-            // divider
+            buttonText: qsTr("Close wallet") + translationManager.emptyString
-            Layout.preferredHeight: 1
+            description: qsTr("Logs out of this wallet.") + translationManager.emptyString
-            Layout.fillWidth: true
+            title: qsTr("Close this wallet") + translationManager.emptyString
-            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("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
-            }
         }
 
-        Rectangle {
+        MoneroComponents.SettingsListItem {
-            // divider
+            buttonText: qsTr("Create wallet") + translationManager.emptyString
-            Layout.preferredHeight: 1
+            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
-            Layout.fillWidth: true
+            title: qsTr("Create a view-only wallet") + translationManager.emptyString
-            Layout.topMargin: 8
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
-        }
-
-        GridLayout {
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
             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
-                }
-            }
-
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Create wallet") + translationManager.emptyString
             onClicked: {
                 var newPath = currentWallet.path + "_viewonly";
                 if (currentWallet.createViewOnly(newPath, appWindow.walletPassword)) {
@@ -165,111 +82,24 @@ Rectangle {
                     informationPopup.open()
                 }
             }
-                width: 135
-            }
         }
 
-        Rectangle {
+        MoneroComponents.SettingsListItem {
-            // divider
+            buttonText: qsTr("Show seed") + translationManager.emptyString
-            visible: !appWindow.viewOnly
+            description: qsTr("Store this information safely to recover your wallet in the future.") + translationManager.emptyString
-            Layout.preferredHeight: 1
+            title: qsTr("Show seed & keys") + translationManager.emptyString
-            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 {
+        MoneroComponents.SettingsListItem {
-            // divider
+            buttonText: qsTr("Rescan") + translationManager.emptyString
-            Layout.preferredHeight: 1
+            description: qsTr("Use this feature if you think the shown balance is not accurate.") + translationManager.emptyString
-            Layout.fillWidth: true
+            title: qsTr("Rescan wallet balance") + translationManager.emptyString
-            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);
@@ -286,56 +116,13 @@ Rectangle {
                     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 {
+        MoneroComponents.SettingsListItem {
-            Layout.fillWidth: true
+            buttonText: qsTr("Change password") + translationManager.emptyString
-            Layout.preferredHeight: childrenRect.height
+            description: qsTr("Change the password of your wallet.") + translationManager.emptyString
-            columnSpacing: 0
+            title: qsTr("Change wallet password") + translationManager.emptyString
 
-            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){
@@ -352,8 +139,6 @@ Rectangle {
                 passwordDialog.onRejectedCallback = null;
                 passwordDialog.open()
             }
-                width: 135
-            }
         }
     }
 

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