diff --git a/ui/app/AppLayouts/Chat/ContactsColumn.qml b/ui/app/AppLayouts/Chat/ContactsColumn.qml
index 83476778a6..33201a4ca7 100644
--- 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 {
diff --git a/ui/app/AppLayouts/Wallet/AssetsTab.qml b/ui/app/AppLayouts/Wallet/AssetsTab.qml
index b31650c048..ab8eea858a 100644
--- 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
diff --git a/ui/app/AppLayouts/Wallet/LeftTab.qml b/ui/app/AppLayouts/Wallet/LeftTab.qml
index a9cd17ecec..20859da412 100644
--- 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
diff --git a/ui/app/AppLayouts/Wallet/WalletHeader.qml b/ui/app/AppLayouts/Wallet/WalletHeader.qml
index 68e8d9d185..1211cf4463 100644
--- 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()
}
}
}
diff --git a/ui/app/AppLayouts/Wallet/components/HeaderButton.qml b/ui/app/AppLayouts/Wallet/components/HeaderButton.qml
new file mode 100644
index 0000000000..47efac1bdb
--- /dev/null
+++ 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
+ }
+}
diff --git a/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml b/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml
index 4579e4235c..c0245837f1 100644
--- 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 }
diff --git a/ui/app/img/diagonalArrow.svg b/ui/app/img/diagonalArrow.svg
deleted file mode 100644
index d0a8a71689..0000000000
--- a/ui/app/img/diagonalArrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/ui/app/img/send.svg b/ui/app/img/send.svg
new file mode 100644
index 0000000000..422b4e7f02
--- /dev/null
+++ b/ui/app/img/send.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro
index 8a3fa0b9b7..fbcdd555df 100644
--- 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 \
diff --git a/ui/shared/ModalPopup.qml b/ui/shared/ModalPopup.qml
index af0dc08281..ebaeafe9d8 100644
--- 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
}
}
}
diff --git a/ui/shared/StatusTabButton.qml b/ui/shared/StatusTabButton.qml
index e4c66c60c8..7bbfa6576d 100644
--- 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