LeftPanel: new balance card

LeftPanel.qml

@@ -40,17 +40,17 @@ import "components/effects/" as MoneroEffects
 Rectangle {
     id: panel
 
-    property alias unlockedBalanceText: unlockedBalanceText.text
+    property int currentAccountIndex: 0
-    property alias unlockedBalanceVisible: unlockedBalanceText.visible
+    property string currentAccountLabel: "Primary account"
-    property alias unlockedBalanceLabelVisible: unlockedBalanceLabel.visible
+    property string balanceString: "?.??"
-    property alias balanceLabelText: balanceLabel.text
+    property string balanceUnlockedString: "?.??"
-    property alias balanceText: balanceText.text
+    property string balanceFiatString: "?.??"
-    property alias balanceTextFiat: balanceTextFiat.text
+    property string minutesToUnlock: ""
-    property alias unlockedBalanceTextFiat: unlockedBalanceTextFiat.text
+    property bool isSyncing: false
     property alias networkStatus : networkStatus
     property alias progressBar : progressBar
     property alias daemonProgressBar : daemonProgressBar
-    property alias minutesToUnlockTxt: unlockedBalanceLabel.text
+
     property int titleBarHeight: 50
     property string copyValue: ""
     Clipboard { id: clipboard }
@@ -108,7 +108,7 @@ Rectangle {
         visible: true
         z: 2
         id: column1
-        height: 210
+        height: 175
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
@@ -127,9 +127,9 @@ Rectangle {
                     id: card
                     visible: !isOpenGL || MoneroComponents.Style.blackTheme
                     width: 260
-                    height: 170
+                    height: 135
                     fillMode: Image.PreserveAspectFit
-                    source: "qrc:///images/card-background.png"
+                    source: MoneroComponents.Style.blackTheme ? "qrc:///images/card-background-black.png" : "qrc:///images/card-background-white.png"
                 }
 
                 DropShadow {
@@ -179,7 +179,7 @@ Rectangle {
                     anchors.right: parent.right
                     anchors.rightMargin: 8
                     anchors.top: parent.top
-                    anchors.topMargin: 25
+                    anchors.topMargin: 30
 
                     Image {
                         id: logoutImage
@@ -190,6 +190,13 @@ Rectangle {
                         source: "qrc:///images/logout.png"
                     }
 
+                    ColorOverlay {
+                        anchors.fill: logoutImage
+                        source: logoutImage
+                        visible: !MoneroComponents.Style.blackTheme
+                        color: "#000000"
+                    }
+
                     MouseArea{
                         anchors.fill: parent
                         hoverEnabled: true
@@ -202,26 +209,6 @@ Rectangle {
                         }
                     }
                 }
-                MoneroComponents.Label {
-                    fontSize: 20
-                    text: persistentSettings.fiatPriceCurrency == "xmrusd" ? "$" : "€"
-                    color: "white"
-                    visible: persistentSettings.fiatPriceEnabled
-                    anchors.right: parent.right
-                    anchors.rightMargin: 45
-                    anchors.top: parent.top
-                    anchors.topMargin: 28
-                    themeTransition: false
-
-                    MouseArea{
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            persistentSettings.fiatPriceToggle = !persistentSettings.fiatPriceToggle
-                        }
-                    }
-                }
             }
 
             Item {
@@ -232,176 +219,152 @@ Rectangle {
                 height: 490
                 width: 50
 
-                MoneroComponents.TextPlain {
+                MoneroComponents.Label {
-                    visible: !(persistentSettings.fiatPriceToggle && persistentSettings.fiatPriceEnabled)
+                    fontSize: 12
-                    id: balanceText
+                    id: accountIndex
-                    themeTransition: false
+                    text: qsTr("Account") + " #" + currentAccountIndex
+                    color: MoneroComponents.Style.blackTheme ? "white" : "black"
                     anchors.left: parent.left
-                    anchors.leftMargin: 20
+                    anchors.leftMargin: 60
                     anchors.top: parent.top
-                    anchors.topMargin: 76
+                    anchors.topMargin: 23
-                    font.family: "Arial"
+                    themeTransition: false
-                    color: "#FFFFFF"
+
-                    text: "N/A"
+                    MouseArea{
-                    // dynamically adjust text size
+                        anchors.fill: parent
-                    font.pixelSize: {
+                        hoverEnabled: true
-                        if (persistentSettings.hideBalance) {
+                        cursorShape: Qt.PointingHandCursor
-                            return 20;
+                        onClicked: appWindow.showPageRequest("Account")
-                        }
-                        var digits = text.split('.')[0].length
-                        var defaultSize = 22;
-                        if(digits > 2) {
-                            return defaultSize - 1.1*digits
-                        }
-                        return defaultSize;
                     }
+                }
+
+                MoneroComponents.Label {
+                    fontSize: 16
+                    id: accountLabel
+                    textWidth: 170
+                    text: currentAccountLabel
+                    color: MoneroComponents.Style.blackTheme ? "white" : "black"
+                    anchors.left: parent.left
+                    anchors.leftMargin: 60
+                    anchors.top: parent.top
+                    anchors.topMargin: 36
+                    themeTransition: false
+                    elide: Text.ElideRight
 
                     MouseArea {
                         hoverEnabled: true
                         anchors.fill: parent
                         cursorShape: Qt.PointingHandCursor
-                        onEntered: {
+                        onClicked: appWindow.showPageRequest("Account")
-                            parent.color = MoneroComponents.Style.orange
-                        }
-                        onExited: {
-                            parent.color = MoneroComponents.Style.white
-                        }
-                        onClicked: {
-                                console.log("Copied to clipboard");
-                                clipboard.setText(parent.text);
-                                appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
-                        }
                     }
                 }
 
-                MoneroComponents.TextPlain {
+                MoneroComponents.Label {
-                    visible: !balanceText.visible
+                    fontSize: 16
-                    id: balanceTextFiat
+                    visible: isSyncing
+                    text: qsTr("Syncing...")
+                    color: MoneroComponents.Style.blackTheme ? "white" : "black"
+                    anchors.left: parent.left
+                    anchors.leftMargin: 20
+                    anchors.bottom: currencyLabel.top
+                    anchors.bottomMargin: 15
                     themeTransition: false
+                }
+
+                MoneroComponents.TextPlain {
+                    id: currencyLabel
+                    font.pixelSize: 16
+                    text: {
+                        if (persistentSettings.fiatPriceEnabled && persistentSettings.fiatPriceToggle) {
+                            return persistentSettings.fiatPriceCurrency == "xmrusd" ? "USD" : "EUR"
+                        } else {
+                            return "XMR"
+                        }
+                    }
+                    color: MoneroComponents.Style.blackTheme ? "white" : "black"
                     anchors.left: parent.left
                     anchors.leftMargin: 20
                     anchors.top: parent.top
-                    anchors.topMargin: 76
+                    anchors.topMargin: 100
-                    font.family: "Arial"
+                    themeTransition: false
-                    color: "#FFFFFF"
+
-                    text: "N/A"
-                    font.pixelSize: balanceText.font.pixelSize
                     MouseArea {
                         hoverEnabled: true
                         anchors.fill: parent
+                        visible: persistentSettings.fiatPriceEnabled
                         cursorShape: Qt.PointingHandCursor
-                        onEntered: {
+                        onClicked: persistentSettings.fiatPriceToggle = !persistentSettings.fiatPriceToggle
-                            parent.color = MoneroComponents.Style.orange
-                        }
-                        onExited: {
-                            parent.color = MoneroComponents.Style.white
-                        }
-                        onClicked: {
-                                console.log("Copied to clipboard");
-                                clipboard.setText(parent.text);
-                                appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
-                        }
                     }
                 }
 
                 MoneroComponents.TextPlain {
-                    id: unlockedBalanceText
+                    id: balancePart1
-                    visible: !(persistentSettings.fiatPriceToggle && persistentSettings.fiatPriceEnabled)
                     themeTransition: false
                     anchors.left: parent.left
-                    anchors.leftMargin: 20
+                    anchors.leftMargin: 58
-                    anchors.top: parent.top
+                    anchors.baseline: currencyLabel.baseline
-                    anchors.topMargin: 126
+                    color: MoneroComponents.Style.blackTheme ? "white" : "black"
-                    font.family: "Arial"
+                    text: {
-                    color: "#FFFFFF"
+                        if (persistentSettings.fiatPriceEnabled && persistentSettings.fiatPriceToggle) {
-                    text: "N/A"
+                            return balanceFiatString.split('.')[0] + "."
-                    // dynamically adjust text size
+                        } else {
-                    font.pixelSize: {
+                            return balanceString.split('.')[0] + "."
-                        if (persistentSettings.hideBalance) {
-                            return 20;
                         }
-                        var digits = text.split('.')[0].length
+                    }
-                        var defaultSize = 20;
+                    font.pixelSize: {
-                        if(digits > 3) {
+                        var defaultSize = 29;
-                            return defaultSize - 0.6*digits
+                        var digits = (balancePart1.text.length - 1)
+                        if (digits > 2 && !(persistentSettings.fiatPriceEnabled && persistentSettings.fiatPriceToggle)) {
+                            return defaultSize - 1.1 * digits
+                        } else {
+                            return defaultSize
                         }
-                        return defaultSize;
                     }
-
                     MouseArea {
+                        id: balancePart1MouseArea
                         hoverEnabled: true
                         anchors.fill: parent
                         cursorShape: Qt.PointingHandCursor
                         onEntered: {
-                            parent.color = MoneroComponents.Style.orange
+                            balancePart1.color = MoneroComponents.Style.orange
+                            balancePart2.color = MoneroComponents.Style.orange
                         }
                         onExited: {
-                            parent.color = MoneroComponents.Style.white
+                            balancePart1.color = Qt.binding(function() { return MoneroComponents.Style.blackTheme ? "white" : "black" })
+                            balancePart2.color = Qt.binding(function() { return MoneroComponents.Style.blackTheme ? "white" : "black" })
                         }
                         onClicked: {
                                 console.log("Copied to clipboard");
-                                clipboard.setText(parent.text);
+                                clipboard.setText(balancePart1.text + balancePart2.text);
                                 appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
                         }
                     }
                 }
-
                 MoneroComponents.TextPlain {
-                    id: unlockedBalanceTextFiat
+                    id: balancePart2
                     themeTransition: false
-                    visible: !unlockedBalanceText.visible
+                    anchors.left: balancePart1.right
-                    anchors.left: parent.left
+                    anchors.leftMargin: 2
-                    anchors.leftMargin: 20
+                    anchors.baseline: currencyLabel.baseline
-                    anchors.top: parent.top
+                    color: MoneroComponents.Style.blackTheme ? "white" : "black"
-                    anchors.topMargin: 126
+                    text: {
-                    font.family: "Arial"
+                        if (persistentSettings.fiatPriceEnabled && persistentSettings.fiatPriceToggle) {
-                    color: "#FFFFFF"
+                            return balanceFiatString.split('.')[1]
-                    text: "N/A"
+                        } else {
-                    font.pixelSize: unlockedBalanceText.font.pixelSize
+                            return balanceString.split('.')[1]
+                        }
+                    }
+                    font.pixelSize: 16
                     MouseArea {
                         hoverEnabled: true
                         anchors.fill: parent
                         cursorShape: Qt.PointingHandCursor
-                        onEntered: {
+                        onEntered: balancePart1MouseArea.entered()
-                            parent.color = MoneroComponents.Style.orange
+                        onExited: balancePart1MouseArea.exited()
-                        }
+                        onClicked: balancePart1MouseArea.clicked(mouse)
-                        onExited: {
-                            parent.color = MoneroComponents.Style.white
-                        }
-                        onClicked: {
-                                console.log("Copied to clipboard");
-                                clipboard.setText(parent.text);
-                                appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
-                        }
                     }
                 }
 
-                MoneroComponents.Label {
-                    id: unlockedBalanceLabel
-                    visible: true
-                    text: qsTr("Unlocked balance") + translationManager.emptyString
-                    color: "white"
-                    fontSize: 14
-                    anchors.left: parent.left
-                    anchors.leftMargin: 20
-                    anchors.top: parent.top
-                    anchors.topMargin: 110
-                    themeTransition: false
-                }
-
-                MoneroComponents.Label {
-                    id: balanceLabel
-                    text: qsTr("Balance") + translationManager.emptyString
-                    color: "white"
-                    fontSize: 14
-                    anchors.left: parent.left
-                    anchors.leftMargin: 20
-                    anchors.top: parent.top
-                    anchors.topMargin: 60
-                    elide: Text.ElideRight
-                    textWidth: 238
-                    themeTransition: false
-                }
                 Item { //separator
                     anchors.left: parent.left
                     anchors.right: parent.right

MiddlePanel.qml

@@ -46,10 +46,6 @@ Rectangle {
 
     property Item currentView
     property Item previousView
-    property string balanceLabelText: qsTr("Balance") + translationManager.emptyString
-    property string balanceText
-    property string unlockedBalanceLabelText: qsTr("Unlocked Balance") + translationManager.emptyString
-    property string unlockedBalanceText
     property int minHeight: (appWindow.height > 800) ? appWindow.height : 800
     property alias contentHeight: mainFlickable.contentHeight
     property alias flickable: mainFlickable

js/Utils.js

@@ -133,15 +133,3 @@ function capitalize(s){
     if (typeof s !== 'string') return ''
     return s.charAt(0).toUpperCase() + s.slice(1)
 }
-
-function formatMoney(n, c, d, t) {
-    // https://stackoverflow.com/a/149099
-    var c = isNaN(c = Math.abs(c)) ? 2 : c,
-        d = d == undefined ? "." : d,
-        t = t == undefined ? "," : t,
-        s = n < 0 ? "-" : "",
-        i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
-        j = (j = i.length) > 3 ? j % 3 : 0;
-
-    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
-};

main.qml

@@ -335,7 +335,6 @@ ApplicationWindow {
         }
 
         walletName = usefulName(wallet.path)
-        updateSyncing(false)
 
         viewOnly = currentWallet.viewOnly;
 
@@ -407,24 +406,22 @@ ApplicationWindow {
         if (!currentWallet)
             return;
 
-        var balance_unlocked = qsTr("HIDDEN");
+        var balance = "?.??";
-        var balance = qsTr("HIDDEN");
+        var balanceU = "?.??";
         if(!hideBalanceForced && !persistentSettings.hideBalance){
-            balance_unlocked = walletManager.displayAmount(currentWallet.unlockedBalance(currentWallet.currentSubaddressAccount));
             balance = walletManager.displayAmount(currentWallet.balance(currentWallet.currentSubaddressAccount));
+            balanceU = walletManager.displayAmount(currentWallet.unlockedBalance(currentWallet.currentSubaddressAccount));
         }
 
-        middlePanel.unlockedBalanceText = balance_unlocked;
-        leftPanel.unlockedBalanceText = balance_unlocked;
-        middlePanel.balanceText = balance;
-        leftPanel.balanceText = balance;
-
         if (persistentSettings.fiatPriceEnabled) {
-            appWindow.fiatApiUpdateBalance(balance, balance_unlocked);
+            appWindow.fiatApiUpdateBalance(balance);
         }
 
-        var accountLabel = currentWallet.getSubaddressLabel(currentWallet.currentSubaddressAccount, 0);
+        leftPanel.minutesToUnlock = (balance !== balanceU) ? currentWallet.history.minutesToUnlock : "";
-        leftPanel.balanceLabelText = qsTr("Balance (#%1%2)").arg(currentWallet.currentSubaddressAccount).arg(accountLabel === "" ? "" : (" – " + accountLabel));
+        leftPanel.currentAccountIndex = currentWallet.currentSubaddressAccount;
+        leftPanel.currentAccountLabel = currentWallet.getSubaddressLabel(currentWallet.currentSubaddressAccount, 0);
+        leftPanel.balanceString = balance
+        leftPanel.balanceUnlockedString = balanceU
     }
 
     function onUriHandler(uri){
@@ -597,8 +594,6 @@ ApplicationWindow {
             foundNewBlock = false;
             console.log("New block found - updating history")
             currentWallet.history.refresh(currentWallet.currentSubaddressAccount)
-            var timeToUnlock = currentWallet.history.minutesToUnlock
-            leftPanel.minutesToUnlockTxt = (timeToUnlock > 0)? (timeToUnlock == 20)? qsTr("Unlocked balance (waiting for block)") : qsTr("Unlocked balance (~%1 min)").arg(timeToUnlock) : qsTr("Unlocked balance");
 
             if(middlePanel.state == "History")
                 middlePanel.historyView.update();
@@ -642,7 +637,7 @@ ApplicationWindow {
         }
 
         // Update wallet sync progress
-        updateSyncing((currentWallet.connected() !== Wallet.ConnectionStatus_Disconnected) && !daemonSynced)
+        leftPanel.isSyncing = (currentWallet.connected() !== Wallet.ConnectionStatus_Disconnected) && !daemonSynced
         // Update transfer page status
         middlePanel.updateStatus();
 
@@ -1087,12 +1082,6 @@ ApplicationWindow {
         informationPopup.open()
     }
 
-    function updateSyncing(syncing) {
-        var text = (syncing ? qsTr("Balance (syncing)") : qsTr("Balance")) + translationManager.emptyString
-        leftPanel.balanceLabelText = text
-        middlePanel.balanceLabelText = text
-    }
-
     // blocks UI if wallet can't be opened or no connection to the daemon
     function enableUI(enable) {
         middlePanel.enabled = enable;
@@ -1127,15 +1116,13 @@ ApplicationWindow {
 
     // close wallet and show wizard
     function showWizard(){
-        clearMoneroCardLabelText();
         walletInitialized = false;
         closeWallet(function() {
             wizard.restart();
             wizard.wizardState = "wizardHome";
             rootItem.state = "wizard"
             // reset balance
-            leftPanel.balanceText = leftPanel.unlockedBalanceText = walletManager.displayAmount(0);
+            clearMoneroCardLabelText();
-            fiatApiUpdateBalance(0, 0);
             // disable timers
             userInActivityTimer.running = false;
             simpleModeConnectionTimer.running = false;
@@ -1258,22 +1245,19 @@ ApplicationWindow {
         Prices.getJSON(url);
     }
 
-    function fiatApiUpdateBalance(balance, unlocked_balance){
+    function fiatApiUpdateBalance(balance){
         // update balance card
         var ticker = persistentSettings.fiatPriceCurrency === "xmrusd" ? appWindow.fiatPriceXMRUSD : appWindow.fiatPriceXMREUR;
-        var symbol = persistentSettings.fiatPriceCurrency === "xmrusd" ? "$" : "€"
         if(ticker <= 0){
             console.log(fiatApiError("Could not update balance card; invalid ticker value"));
-            leftPanel.unlockedBalanceTextFiat = "N/A";
+            leftPanel.balanceFiatString = "?.??";
-            leftPanel.balanceTextFiat = "N/A";
             return;
         }
-
+        var bFiat = "?.??"
-        var uFiat = Utils.formatMoney(unlocked_balance * ticker);
+        if (!hideBalanceForced && !persistentSettings.hideBalance) {
-        var bFiat = Utils.formatMoney(balance * ticker);
+            bFiat = (balance * ticker).toFixed(2);
-
+        }
-        leftPanel.unlockedBalanceTextFiat = symbol + uFiat;
+        leftPanel.balanceFiatString = bFiat;
-        leftPanel.balanceTextFiat = symbol + bFiat;
     }
 
     function fiatTimerStart(){
@@ -2026,8 +2010,8 @@ ApplicationWindow {
 
     // reset label text. othewise potential privacy leak showing unlock time when switching wallets
     function clearMoneroCardLabelText(){
-        leftPanel.minutesToUnlockTxt = qsTr("Unlocked balance")
+        leftPanel.balanceString = "?.??"
-        leftPanel.balanceLabelText = qsTr("Balance")
+        leftPanel.balanceFiatString = "?.??"
     }
 
     // some fields need an extra nudge when changing languages

pages/Transfer.qml

@@ -143,6 +143,14 @@ Rectangle {
           }
       }
 
+      RowLayout {
+          visible: leftPanel.minutesToUnlock !== ""
+
+          MoneroComponents.WarningBox {
+              text: qsTr("Spendable funds: %1 XMR. Please wait ~%2 minutes for your whole balance to become spendable.").arg(leftPanel.balanceUnlockedString).arg(leftPanel.minutesToUnlock)
+          }
+      }
+
       GridLayout {
           columns: appWindow.walletMode < 2 ? 1 : 2
           Layout.fillWidth: true

qml.qrc

@@ -111,8 +111,10 @@
         <file>components/RemoteNodeEdit.qml</file>
         <file>pages/Keys.qml</file>
         <file>images/appicon.ico</file>
-        <file>images/card-background.png</file>
+        <file>images/card-background-black.png</file>
-        <file>images/card-background@2x.png</file>
+        <file>images/card-background-black@2x.png</file>
+        <file>images/card-background-white.png</file>
+        <file>images/card-background-white@2x.png</file>
         <file>images/moneroLogo_white.png</file>
         <file>images/question.png</file>
         <file>images/question@2x.png</file>