fix: wallet ui errors

Fixes # 472
2020-07-15 15:38:03 -04:00 · 2020-07-15 15:38:03 -04:00 · 66467ff070
parent 1e0e3fadd0
commit 66467ff070
11 changed files with 179 additions and 185 deletions
--- a/ui/app/AppLayouts/Chat/ContactsColumn.qml
+++ b/ui/app/AppLayouts/Chat/ContactsColumn.qml
@ -16,13 +16,12 @@ Item {

    StyledText {
        id: title
-        x: 772
        //% "Chat"
        text: qsTrId("chat")
        anchors.top: parent.top
-        anchors.topMargin: 17
-        font.bold: true
+        anchors.topMargin: Style.current.padding
        anchors.horizontalCenter: parent.horizontalCenter
+        font.weight: Font.Bold
        font.pixelSize: 17
    }

@ -40,8 +39,8 @@ Item {

    SearchBox {
        id: searchBox
-        anchors.top: parent.top
-        anchors.topMargin: 59
+        anchors.top: title.bottom
+        anchors.topMargin: Style.current.padding
        anchors.right: addChat.left
        anchors.rightMargin: Style.current.padding
        anchors.left: parent.left
@ -52,8 +51,8 @@ Item {
        id: addChat
        anchors.right: parent.right
        anchors.rightMargin: Style.current.padding
-        anchors.top: parent.top
-        anchors.topMargin: 59
+        anchors.top: title.bottom
+        anchors.topMargin: Style.current.padding
    }

    StackLayout {
--- a/ui/app/AppLayouts/Wallet/AssetsTab.qml
+++ b/ui/app/AppLayouts/Wallet/AssetsTab.qml
@ -49,7 +49,7 @@ Item {
            }
            StyledText {
                id: assetValue
-                text: value
+                text: value.toUpperCase()
                anchors.right: parent.right
                anchors.rightMargin: 0
                font.pixelSize: 15
@ -58,7 +58,7 @@ Item {
            StyledText {
                id: assetFiatValue
                color: Style.current.darkGrey
-                text: fiatValue
+                text: fiatValue.toUpperCase()
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.bottom: parent.bottom
--- a/ui/app/AppLayouts/Wallet/LeftTab.qml
+++ b/ui/app/AppLayouts/Wallet/LeftTab.qml
@ -17,75 +17,58 @@ Item {
    }
    id: walletInfoContainer

-    Rectangle {
-        id: walletInfoHeader
-        anchors.left: parent.left
-        anchors.leftMargin: 0
-        anchors.right: parent.right
-        anchors.rightMargin: 0
-        height: walletValueTextContainer.y + walletValueTextContainer.height + Style.current.padding
-        color: Style.current.background
-        z: 1
-        border.width: 0

-        StyledText {
-            id: title
-            x: 143
-            y: 16
-            //% "Wallet"
-            text: qsTrId("wallet")
-            anchors.top: parent.top
-            anchors.topMargin: Style.current.padding
-            anchors.horizontalCenter: parent.horizontalCenter
-            font.weight: Font.Bold
-            font.pixelSize: 17
+
+    StyledText {
+        id: title
+        //% "Wallet"
+        text: qsTrId("wallet")
+        anchors.top: parent.top
+        anchors.topMargin: Style.current.padding
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.weight: Font.Bold
+        font.pixelSize: 17
+    }
+
+    Item {
+        id: walletValueTextContainer
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.padding
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding
+        anchors.top: title.bottom
+        anchors.topMargin: Style.current.padding
+        height: childrenRect.height
+
+        StyledTextEdit {
+            id: walletAmountValue
+            color: Style.current.textColor
+            text: walletModel.totalFiatBalance
+            selectByMouse: true
+            cursorVisible: true
+            readOnly: true
+            anchors.left: parent.left
+            font.weight: Font.Medium
+            font.pixelSize: 30
        }

-        Item {
-            id: walletValueTextContainer
-            x: 16
-            y: 52
-            anchors.left: parent.left
-            anchors.leftMargin: Style.current.padding
-            anchors.top: title.bottom
-            anchors.topMargin: Style.current.padding
-            height: walletAmountValue.height + totalValue.height
-
-            StyledTextEdit {
-                id: walletAmountValue
-                color: Style.current.textColor
-                text: walletModel.totalFiatBalance
-                selectByMouse: true
-                cursorVisible: true
-                readOnly: true
-                anchors.left: parent.left
-                anchors.leftMargin: 1
-                font.weight: Font.Medium
-                font.pixelSize: 30
-            }
-
-            StyledText {
-                id: totalValue
-                color: Style.current.darkGrey
-                text: "Total value"
-                anchors.left: walletAmountValue.left
-                anchors.leftMargin: 0
-                anchors.top: walletAmountValue.bottom
-                anchors.topMargin: 0
-                font.weight: Font.Medium
-                font.pixelSize: 13
-            }
+        StyledText {
+            id: totalValue
+            color: Style.current.darkGrey
+            text: "Total value"
+            anchors.left: walletAmountValue.left
+            anchors.top: walletAmountValue.bottom
+            font.weight: Font.Medium
+            font.pixelSize: 13
        }

        AddAccount {
-            anchors.topMargin: 3
-            anchors.top: walletValueTextContainer.top
+            anchors.top: parent.top
            anchors.right: parent.right
-            anchors.rightMargin: Style.current.padding
-
        }
    }

+
    Component {
        id: walletDelegate

@ -145,7 +128,7 @@ Item {
            }
            StyledText {
                id: walletBalance
-                text: balance
+                text: balance.toUpperCase()
                anchors.top: parent.top
                anchors.topMargin: Style.current.smallPadding
                anchors.right: parent.right
@ -166,7 +149,8 @@ Item {
    ListView {
        id: listView
        anchors.bottom: parent.bottom
-        anchors.top: walletInfoHeader.bottom
+        anchors.top: walletValueTextContainer.bottom
+        anchors.topMargin: Style.current.padding
        spacing: 5
        anchors.right: parent.right
        anchors.left: parent.left
--- a/ui/app/AppLayouts/Wallet/WalletHeader.qml
+++ b/ui/app/AppLayouts/Wallet/WalletHeader.qml
@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../../../imports"
 import "../../../shared"
+import "./components"

 Item {
    property var currentAccount: walletModel.currentAccount
@ -44,7 +45,7 @@ Item {

    StyledText {
        id: walletBalance
-        text: currentAccount.balance
+        text: currentAccount.balance.toUpperCase()
        anchors.left: separatorDot.right
        anchors.leftMargin: 8
        anchors.verticalCenter: title.verticalCenter
@ -89,7 +90,7 @@ Item {

    Item {
        property int btnMargin: 8
-        property int btnOuterMargin: 32
+        property int btnOuterMargin: Style.current.bigPadding
        id: walletMenu
        width: sendBtn.width + receiveBtn.width + settingsBtn.width
               + walletMenu.btnOuterMargin * 2
@ -98,114 +99,65 @@ Item {
        anchors.right: parent.right
        anchors.rightMargin: 16

-        Item {
+        HeaderButton {
            id: sendBtn
-            width: sendImg.width + sendText.width + walletMenu.btnMargin
-            height: sendText.height
-
-            SVGImage {
-                id: sendImg
-                width: 12
-                height: 12
-                fillMode: Image.PreserveAspectFit
-                source: "../../img/diagonalArrow.svg"
-            }
-
-            StyledText {
-                id: sendText
-                text: "Send"
-                anchors.left: sendImg.right
-                anchors.leftMargin: walletMenu.btnMargin
-                font.pixelSize: 13
-                color: Style.current.blue
-            }
-            MouseArea {
-                anchors.rightMargin: -Style.current.smallPadding
-                anchors.leftMargin: -Style.current.smallPadding
-                anchors.bottomMargin: -Style.current.smallPadding
-                anchors.topMargin: -Style.current.smallPadding
-                anchors.fill: parent
-                onClicked: sendModal.open()
-                cursorShape: Qt.PointingHandCursor
+            imageSource: "../../img/send.svg"
+            text: qsTr("Send")
+            onClicked: function () {
+                sendModal.open()
            }
        }
-        Item {
+
+        HeaderButton {
            id: receiveBtn
-            width: receiveImg.width + receiveText.width + walletMenu.btnMargin
+            imageSource: "../../img/send.svg"
+            flipImage: true
+            text: qsTr("Receive")
+            onClicked: function () {
+                // Nothing for now
+            }
            anchors.left: sendBtn.right
            anchors.leftMargin: walletMenu.btnOuterMargin
-
-            SVGImage {
-                id: receiveImg
-                width: 12
-                height: 12
-                fillMode: Image.PreserveAspectFit
-                source: "../../img/diagonalArrow.svg"
-                rotation: 180
-            }
-
-            StyledText {
-                id: receiveText
-                text: "Receive"
-                anchors.left: receiveImg.right
-                anchors.leftMargin: walletMenu.btnMargin
-                font.pixelSize: 13
-                color: Style.current.blue
-            }
        }
-        Item {
+
+        HeaderButton {
            id: settingsBtn
+            imageSource: "../../img/settings.svg"
+            flipImage: true
+            text: ""
+            onClicked: function () {
+                // FIXME the button is too much on the right, so the arrow can never align
+                let x = settingsBtn.x + settingsBtn.width / 2 - newSettingsMenu.width / 2
+                newSettingsMenu.popup(x, settingsBtn.height)
+            }
            anchors.left: receiveBtn.right
            anchors.leftMargin: walletMenu.btnOuterMargin
-            width: settingsImg.width
-            height: settingsImg.height
-            SVGImage {
-                id: settingsImg
-                width: 18
-                height: 18
-                fillMode: Image.PreserveAspectFit
-                source: "../../img/settings.svg"
-            }

-            MouseArea {
-                anchors.rightMargin: -Style.current.smallPadding
-                anchors.leftMargin: -Style.current.smallPadding
-                anchors.bottomMargin: -Style.current.smallPadding
-                anchors.topMargin: -Style.current.smallPadding
-                anchors.fill: parent
-                acceptedButtons: Qt.LeftButton | Qt.RightButton
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    let x = settingsImg.x + settingsImg.width / 2 - newSettingsMenu.width / 2
-                    newSettingsMenu.popup(x, settingsImg.height + 10)
+            PopupMenu {
+                id: newSettingsMenu
+                width: 280
+                Action {
+                    //% "Account Settings"
+                    text: qsTrId("account-settings")
+                    icon.source: "../../img/walletIcon.svg"
+                    onTriggered: {
+                        accountSettingsModal.open()
+                    }
                }
-
-                PopupMenu {
-                    id: newSettingsMenu
-                    width: 280
-                    Action {
-                        //% "Account Settings"
-                        text: qsTrId("account-settings")
-                        icon.source: "../../img/walletIcon.svg"
-                        onTriggered: {
-                            accountSettingsModal.open()
-                        }
+                Action {
+                    //% "Add/Remove Tokens"
+                    text: qsTrId("add/remove-tokens")
+                    icon.source: "../../img/add_remove_token.svg"
+                    onTriggered: {
+                        tokenSettingsModal.open()
                    }
-                    Action {
-                        //% "Add/Remove Tokens"
-                        text: qsTrId("add/remove-tokens")
-                        icon.source: "../../img/add_remove_token.svg"
-                        onTriggered: {
-                            tokenSettingsModal.open()
-                        }
-                    }
-                    Action {
-                        //% "Set Currency"
-                        text: qsTrId("set-currency")
-                        icon.source: "../../img/set_currency.svg"
-                        onTriggered: {
-                            setCurrencyModal.open()
-                        }
+                }
+                Action {
+                    //% "Set Currency"
+                    text: qsTrId("set-currency")
+                    icon.source: "../../img/set_currency.svg"
+                    onTriggered: {
+                        setCurrencyModal.open()
                    }
                }
            }
--- a/ui/app/AppLayouts/Wallet/components/HeaderButton.qml
+++ b/ui/app/AppLayouts/Wallet/components/HeaderButton.qml
@ -0,0 +1,56 @@
+import QtQuick 2.13
+import "../../../../imports"
+import "../../../../shared"
+
+
+Rectangle {
+    property string text: ""
+    property url imageSource
+    property bool flipImage: false
+    property var onClicked: function () {}
+
+    id: headerButton
+    width: buttonImage.width + buttonText.width + Style.current.smallPadding * 2
+           + (text === "" ? 0 : walletMenu.btnMargin)
+    height: buttonText.height + Style.current.smallPadding * 2
+    border.width: 0
+    color: Style.current.transparent
+    radius: Style.current.radius
+
+    SVGImage {
+        id: buttonImage
+        height: 18
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.smallPadding
+        anchors.verticalCenter: parent.verticalCenter
+        fillMode: Image.PreserveAspectFit
+        source: imageSource
+        rotation: flipImage ? 180 : 0
+    }
+
+    StyledText {
+        id: buttonText
+        visible: !!headerButton.text
+        text: headerButton.text
+        anchors.left: buttonImage.right
+        anchors.leftMargin: walletMenu.btnMargin
+        anchors.verticalCenter: parent.verticalCenter
+        font.pixelSize: 13
+        color: Style.current.blue
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: {
+            parent.color = Style.current.border
+        }
+        onExited: {
+            parent.color = Style.current.transparent
+        }
+        onClicked: {
+            headerButton.onClicked()
+        }
+        cursorShape: Qt.PointingHandCursor
+    }
+}
--- a/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml
+++ b/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml
@ -17,13 +17,14 @@ Item {
    }

    ListView {
+        id: tokenListView
+        spacing: 0
+        clip: true
        anchors.top: searchBox.bottom
+        anchors.topMargin: Style.current.smallPadding
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
-        spacing: 0
-        id: tokenListView
-        anchors.topMargin: Style.current.smallPadding
        model: Tokens {}
        ScrollBar.vertical: ScrollBar { active: true }

--- a/ui/app/img/diagonalArrow.svg
+++ b/ui/app/img/diagonalArrow.svg
@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 0C4.44775 -4.82789e-08 4 0.447754 4 1C4 1.55225 4.44775 2 5 2L8.58594 2L0.292969 10.2928C-0.0976562 10.6835 -0.0976563 11.3165 0.292969 11.7072C0.683349 12.0977 1.31665 12.0977 1.70703 11.7072L10 3.41419L10 7C10 7.55225 10.4478 8 11 8C11.5522 8 12 7.55225 12 7L12 1C12 0.447755 11.5522 5.72816e-07 11 5.24537e-07L5 0Z" fill="#4360DF"/>
-</svg>
--- a/ui/app/img/send.svg
+++ b/ui/app/img/send.svg
@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.61923 15.1568L1.00164 17.8817C0.45399 18.1072 -0.0905163 17.553 0.144557 17.0094L7.30153 0.458929C7.42199 0.180353 7.69648 0 7.99998 0C8.30349 0 8.57797 0.180354 8.69844 0.458929L15.8554 17.0094C16.0905 17.553 15.546 18.1072 14.9983 17.8817L8.38073 15.1568C8.13683 15.0563 7.86313 15.0564 7.61923 15.1568ZM7.24998 13.4818C7.24998 13.6096 7.16631 13.7211 7.04811 13.7698L3.47933 15.2393C3.06444 15.4101 2.65194 14.9903 2.83002 14.5785L6.77052 5.46607C6.87825 5.21695 7.24998 5.29388 7.24998 5.5653V13.4818ZM8.74998 13.4818C8.74998 13.6096 8.83366 13.7211 8.95186 13.7698L12.5206 15.2393C12.9355 15.4101 13.348 14.9903 13.1699 14.5785L9.22945 5.46607C9.12172 5.21695 8.74998 5.29388 8.74998 5.5653V13.4818Z" fill="#4360DF"/>
+</svg>
--- a/ui/nim-status-client.pro
+++ b/ui/nim-status-client.pro
@ -74,6 +74,7 @@ DISTFILES += \
    app/AppLayouts/Chat/ContactsColumn/ClosedEmptyView.qml \
    app/AppLayouts/Chat/components/EmojiPopup.qml \
    app/AppLayouts/Chat/components/InviteFriendsPopup.qml \
+    app/AppLayouts/Wallet/components/HeaderButton.qml \
    fonts/InterStatus/InterStatus-Black.otf \
    fonts/InterStatus/InterStatus-BlackItalic.otf \
    fonts/InterStatus/InterStatus-Bold.otf \
--- a/ui/shared/ModalPopup.qml
+++ b/ui/shared/ModalPopup.qml
@ -124,18 +124,18 @@ Popup {
        }

        Item {
-          id: footerContent
-          visible: !!children[0]
-          height: children[0] && children[0].height
-          width: parent.width
-          anchors.top: separator2.bottom
-          anchors.left: parent.left
-          anchors.right: parent.right
-          anchors.bottom: parent.bottom
-          anchors.topMargin: Style.current.padding
-          anchors.bottomMargin: Style.current.padding
-          anchors.rightMargin: Style.current.padding
-          anchors.leftMargin: Style.current.padding
+            id: footerContent
+            visible: !!children[0]
+            height: children[0] && children[0].height
+            width: parent.width
+            anchors.top: separator2.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.topMargin: Style.current.padding
+            anchors.bottomMargin: Style.current.padding
+            anchors.rightMargin: Style.current.padding
+            anchors.leftMargin: Style.current.padding
        }
  }
 }
--- a/ui/shared/StatusTabButton.qml
+++ b/ui/shared/StatusTabButton.qml
@ -24,6 +24,7 @@ TabButton {
    }

    Rectangle {
+        visible: parent.checked
        color: Style.current.blue
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0