chore(@desktop/wallet2): added wallet's footer

Removed send/receive/settings buttons from the header. Wallet's footer and buttons required by the new design are added.
2021-09-06 14:10:13 +02:00 · 2021-09-06 14:10:13 +02:00 · 7973679926
parent 2177e06d95
commit 7973679926
7 changed files with 244 additions and 9 deletions
--- a/ui/app/AppLayouts/WalletV2/WalletFooter.qml
+++ b/ui/app/AppLayouts/WalletV2/WalletFooter.qml
@ -0,0 +1,54 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import "../../../imports"
+import "./components"
+
+Item {
+    id: walletFooterRoot
+    height: 50
+    width: parent.width
+
+    Rectangle {
+        id: separatorLine
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: 1
+        color: Style.current.separator
+    }
+
+    Row {
+
+        anchors.centerIn: parent
+        spacing: 50
+
+        WalletButton {
+            id: swapBtn
+            imageSource: "../../img/swap-icon.svg"
+            text: qsTr("Swap")
+            onClicked: function (){
+            }
+        }
+
+        WalletButton {
+            id: sendBtn
+            imageSource: "../../img/send.svg"
+            text: qsTr("Send")
+            onClicked: function (){
+            }
+        }
+
+        WalletButton {
+            id: buySellBtn
+            imageSource: "../../img/crypto-icon.svg"
+            text: qsTr("Buy / Sell")
+            onClicked: function (){
+                cryptoServicesModal.open()
+            }
+        }
+    }
+
+    CryptoServicesModal {
+        id: cryptoServicesModal
+    }
+}
--- a/ui/app/AppLayouts/WalletV2/WalletHeader.qml
+++ b/ui/app/AppLayouts/WalletV2/WalletHeader.qml
@ -166,4 +166,3 @@ Item {
 Designer {
    D{i:0;formeditorColor:"#ffffff"}
 }
-##^##*/
--- a/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml
+++ b/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml
@ -55,7 +55,7 @@ Item {

            RowLayout {
                id: walletInfoContainer
-                anchors.bottom: parent.bottom
+                anchors.bottom: walletFooter.top
                anchors.bottomMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0
@ -102,13 +102,11 @@ Item {
                    }
                }
            }
+
+            WalletFooter {
+                id: walletFooter
+                anchors.bottom: parent.bottom
+            }
        }
    }
 }
-
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;formeditorColor:"#ffffff";height:770;width:1152}
-}
-##^##*/
--- a/ui/app/AppLayouts/WalletV2/components/CryptoServicesModal.qml
+++ b/ui/app/AppLayouts/WalletV2/components/CryptoServicesModal.qml
@ -0,0 +1,111 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import "../../../../imports"
+import "../../../../shared"
+
+import StatusQ.Components 0.1
+
+ModalPopup {
+    id: cryptoServicesPopupRoot
+    title: qsTr("Buy crypto")
+    height: 400
+
+    onOpened: {
+        loader.active = true
+        walletV2Model.cryptoServiceController.fetchCryptoServices()
+    }
+
+    Component.onCompleted: {
+        walletV2Model.cryptoServiceController.fetchCryptoServicesFetched.connect(function(){
+            loader.sourceComponent = servicesComponent
+        })
+    }
+
+    Loader {
+        id: loader
+        anchors.fill: parent
+        active: false
+        sourceComponent: loadingComponent
+
+        Component {
+            id: loadingComponent
+            StatusLoadingIndicator {
+                anchors.centerIn: parent
+            }
+        }
+
+        Component {
+            id: servicesComponent
+            Item {
+                StyledText {
+                    id: note
+                    anchors.top: parent.top
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    color: Style.current.secondaryText
+                    text: qsTr("Choose a service you'd like to use to buy crypto")
+                }
+
+                ListView {
+                    anchors.top: note.bottom
+                    anchors.bottom: parent.bottom
+                    anchors.topMargin: Style.current.padding
+                    width: parent.width
+                    model: walletV2Model.cryptoServiceController.cryptoServiceModel
+                    focus: true
+                    spacing: Style.current.padding
+                    clip: true
+
+                    delegate: Item {
+                        implicitHeight: row.height
+                        width: parent.width
+
+                        Row {
+                            id: row
+                            width: parent.width
+                            spacing: Style.current.padding
+
+                            StatusRoundedImage {
+                                image.source: logoUrl
+                                border.width: 1
+                                border.color: Style.current.border
+                            }
+
+                            Column {
+                                spacing: Style.current.halfPadding * 0.5
+
+                                StyledText {
+                                    text: name
+                                    font.bold: true
+                                    font.pixelSize: Style.current.secondaryTextFontSize
+                                }
+
+                                StyledText {
+                                    text: description
+                                    font.pixelSize: Style.current.tertiaryTextFontSize
+                                }
+
+                                StyledText {
+                                    text: fees
+                                    color: Style.current.secondaryText
+                                    font.pixelSize: Style.current.asideTextFontSize
+                                }
+                            }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            acceptedButtons: Qt.LeftButton
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+
+                            onClicked: {
+                                appMain.openLink(siteUrl)
+                                cryptoServicesPopupRoot.close()
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
--- a/ui/app/AppLayouts/WalletV2/components/WalletButton.qml
+++ b/ui/app/AppLayouts/WalletV2/components/WalletButton.qml
@ -0,0 +1,65 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import "../../../../imports"
+import "../../../../shared"
+
+Rectangle {
+    id: walletBtnRoot
+    width: btnImage.width + btnImage.anchors.leftMargin + btnImage.anchors.rightMargin +
+           btnText.width + btnText.anchors.leftMargin + btnText.anchors.rightMargin
+    height: btnText.height + Style.current.smallPadding * 2
+    border.width: 0
+    color: Style.current.transparent
+    radius: Style.current.radius
+
+    property string text: ""
+    property url imageSource
+    property bool flipImage: false
+    property var onClicked: function () {}
+
+    SVGImage {
+        id: btnImage
+        height: 18
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.smallPadding
+        anchors.verticalCenter: parent.verticalCenter
+        fillMode: Image.PreserveAspectFit
+        source: imageSource
+        rotation: flipImage ? 180 : 0
+
+        ColorOverlay {
+            anchors.fill: parent
+            source: parent
+            color: Style.current.primary
+        }
+    }
+
+    StyledText {
+        id: btnText
+        visible: !!walletBtnRoot.text
+        text: walletBtnRoot.text
+        anchors.left: btnImage.right
+        anchors.leftMargin: Style.current.smallPadding
+        anchors.rightMargin: Style.current.smallPadding
+        anchors.verticalCenter: parent.verticalCenter
+        font.pixelSize: 13
+        font.family: Style.current.fontMedium.name
+        font.weight: Font.Medium
+        color: Style.current.blue
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: {
+            parent.color = Style.current.secondaryBackground
+        }
+        onExited: {
+            parent.color = Style.current.transparent
+        }
+        onClicked: {
+            walletBtnRoot.onClicked()
+        }
+        cursorShape: Qt.PointingHandCursor
+    }
+}
--- a/ui/app/img/crypto-icon.svg
+++ b/ui/app/img/crypto-icon.svg
@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.09383 13.3807C10.2449 13.6891 11.4157 13.3863 12.2617 12.6713C12.4724 12.4931 12.7863 12.471 12.9928 12.6541L13.3671 12.9861C13.5739 13.1694 13.5943 13.4877 13.3911 13.6749C12.8023 14.2172 12.0897 14.6125 11.3164 14.8243C11.1344 14.8742 10.9865 15.0114 10.9377 15.1936L10.6204 16.3779C10.5489 16.6447 10.2747 16.8029 10.008 16.7315L9.52504 16.6021C9.25831 16.5306 9.10002 16.2564 9.17149 15.9897L9.29443 15.5309C9.37357 15.2355 9.1705 14.9405 8.87263 14.8714C8.81694 14.8584 8.76126 14.8445 8.70561 14.8296C8.65006 14.8147 8.59498 14.799 8.54038 14.7823C8.24787 14.6933 7.92451 14.8473 7.84537 15.1426L7.72243 15.6014C7.65096 15.8682 7.37679 16.0265 7.11006 15.955L6.6271 15.8256C6.36036 15.7541 6.20207 15.4799 6.27354 15.2132L6.59082 14.0291C6.63966 13.8468 6.58014 13.654 6.44745 13.5199C5.23912 12.2981 4.69324 10.4855 5.17007 8.70589C5.64692 6.92625 7.02609 5.62935 8.68347 5.1755C8.86548 5.12566 9.01343 4.98846 9.06227 4.80618L9.37954 3.6221C9.45102 3.35537 9.72518 3.19708 9.99192 3.26855L10.4749 3.39796C10.7416 3.46943 10.8999 3.7436 10.8284 4.01033L10.7055 4.46923C10.6263 4.76457 10.8294 5.05959 11.1272 5.12872C11.1828 5.14161 11.2383 5.15549 11.2938 5.17036C11.3494 5.18525 11.4045 5.20101 11.4591 5.21764C11.7516 5.30671 12.0749 5.15274 12.1541 4.85739L12.277 4.39859C12.3485 4.13186 12.6226 3.97357 12.8894 4.04504L13.3723 4.17445C13.6391 4.24592 13.7974 4.52009 13.7259 4.78682L13.4086 5.97091C13.3598 6.15318 13.4193 6.34594 13.552 6.48011C14.1158 7.05022 14.5354 7.74901 14.7742 8.51307C14.8566 8.77679 14.6797 9.04229 14.409 9.09769L13.9189 9.19799C13.6485 9.25332 13.3877 9.07726 13.2943 8.81757C12.9191 7.77531 12.0566 6.92767 10.9056 6.61925C9.03844 6.11895 7.11926 7.22699 6.61896 9.09412C6.11866 10.9613 7.2267 12.8804 9.09383 13.3807Z" fill="#4360DF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM18.5 10C18.5 14.6944 14.6944 18.5 10 18.5C5.30558 18.5 1.5 14.6944 1.5 10C1.5 5.30558 5.30558 1.5 10 1.5C14.6944 1.5 18.5 5.30558 18.5 10Z" fill="#4360DF"/>
+</svg>
--- a/ui/app/img/swap-icon.svg
+++ b/ui/app/img/swap-icon.svg
@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.46967 10.4697C4.76256 10.1768 5.23744 10.1768 5.53033 10.4697C5.82322 10.7626 5.82322 11.2374 5.53033 11.5303L3.66421 13.3964C3.34923 13.7114 3.57232 14.25 4.01777 14.25H15C16.7949 14.25 18.25 12.7949 18.25 11V10C18.25 9.58579 18.5858 9.25 19 9.25C19.4142 9.25 19.75 9.58579 19.75 10V11C19.75 13.6234 17.6234 15.75 15 15.75H4.01777C3.57231 15.75 3.34923 16.2886 3.66421 16.6036L5.53033 18.4697C5.82322 18.7626 5.82322 19.2374 5.53033 19.5303C5.23744 19.8232 4.76256 19.8232 4.46967 19.5303L0.46967 15.5303C0.176777 15.2374 0.176777 14.7626 0.46967 14.4697L4.46967 10.4697Z" fill="#4360DF"/>
+<path d="M14.4697 0.469669C14.1768 0.762564 14.1768 1.23744 14.4697 1.53033L16.3358 3.39645C16.6508 3.71143 16.4277 4.25 15.9822 4.25H5C2.37665 4.25 0.25 6.37665 0.25 9V10C0.25 10.4142 0.585786 10.75 1 10.75C1.41421 10.75 1.75 10.4142 1.75 10V9C1.75 7.20507 3.20507 5.75 5 5.75H15.9822C16.4277 5.75 16.6508 6.28857 16.3358 6.60355L14.4697 8.46967C14.1768 8.76256 14.1768 9.23744 14.4697 9.53033C14.7626 9.82322 15.2374 9.82322 15.5303 9.53033L19.5303 5.53033C19.8232 5.23744 19.8232 4.76256 19.5303 4.46967L15.5303 0.469669C15.2374 0.176777 14.7626 0.176777 14.4697 0.469669Z" fill="#4360DF"/>
+</svg>