status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add Wallet tab bar

This commit is contained in:
Jonathan Rainville 2020-05-13 15:41:16 -04:00 committed by Iuri Matias
parent 067b6f6fb0
commit fe1a4db078
8 changed files with 227 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
ui/app/AppLayouts/WalletLayout.qml
View File

@ -4,6 +4,7 @@ import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../../imports"
import "../../shared"
SplitView {
id: walletView
@ -81,6 +82,127 @@ SplitView {
font.pixelSize: 30
}
}
TabBar {
id: walletScreenButtons
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
currentIndex: 0
background: Rectangle {
color: "#00000000"
}
TabButton {
id: sendTabButton
height: 56
text: ""
anchors.bottom: depositTabButton.top
Layout.fillWidth: true
anchors.bottomMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
background: Rectangle {
color: parent.checked ? Theme.darkBlue : Theme.transparent
}
Text {
id: element
color: "#ffffff"
text: qsTr("Send")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Bold
font.pixelSize: 14
}
RoundedIcon {
anchors.left: parent.left
anchors.leftMargin: 18
imgPath: "../img/diagonalArrow.svg"
anchors.verticalCenter: parent.verticalCenter
size: 36
bg: "#19ffffff"
}
}
TabButton {
id: depositTabButton
height: 56
text: ""
anchors.bottom: txHistoryTabButton.top
anchors.bottomMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
background: Rectangle {
color: parent.checked ? Theme.darkBlue : Theme.transparent
}
Text {
id: element2
color: "#ffffff"
text: qsTr("Deposit")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Bold
font.pixelSize: 14
}
RoundedIcon {
anchors.left: parent.left
anchors.leftMargin: 18
imgPath: "../img/diagonalArrowDown.svg"
anchors.verticalCenter: parent.verticalCenter
size: 36
bg: "#19ffffff"
}
}
TabButton {
id: txHistoryTabButton
height: 56
text: ""
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
background: Rectangle {
color: parent.checked ? Theme.darkBlue : Theme.transparent
}
Text {
id: element3
color: "#ffffff"
text: qsTr("Transaction History")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Bold
font.pixelSize: 14
}
RoundedIcon {
anchors.left: parent.left
anchors.leftMargin: 18
imgPath: "../img/list.svg"
anchors.verticalCenter: parent.verticalCenter
size: 36
bg: "#19ffffff"
}
}
}
}
}
@ -100,12 +222,71 @@ SplitView {
}
}
ColumnLayout {
id: walletSendContainer
StackLayout {
id: walletContainer
currentIndex: walletScreenButtons.currentIndex
Item {
id: sendContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element1
text: qsTr("Send")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
Item {
id: depositContainer
width: 200
height: 200
Layout.fillWidth: true
Layout.fillHeight: true
Text {
id: element4
text: qsTr("Deposit")
font.weight: Font.Bold
anchors.topMargin: 24
anchors.leftMargin: 24
font.pixelSize: 20
anchors.left: parent.left
anchors.top: parent.top
}
}
Item {
id: txHistoryContainer
width: 200
height: 200
Layout.fillWidth: true
Layout.fillHeight: true
Text {
id: element5
text: qsTr("Transaction History")
font.weight: Font.Bold
anchors.topMargin: 24
anchors.leftMargin: 24
font.pixelSize: 20
anchors.left: parent.left
anchors.top: parent.top
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:770;width:1152}D{i:4;anchors_x:140;anchors_y:93}
D{i:0;autoSize:true;formeditorZoom:0.75;height:770;width:1152}D{i:4;anchors_x:140;anchors_y:93}
D{i:8;anchors_width:240}
}
##^##*/

3
ui/app/img/diagonalArrow.svg Normal file
View File

@ -0,0 +1,3 @@
<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="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 449 B

3
ui/app/img/diagonalArrowDown.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 12C7.55225 12 8 11.5523 8 11C8 10.4478 7.55225 10 7 10H3.41406L11.707 1.70718C12.0977 1.31656 12.0977 0.683502 11.707 0.292877C11.3167 -0.0976257 10.6833 -0.0976257 10.293 0.292877L2 8.58585V5.00003C2 4.44778 1.55225 4.00003 1 4.00003C0.447754 4.00003 0 4.44778 0 5.00003V11C0 11.5523 0.447754 12 1 12H7Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 436 B

3
ui/app/img/list.svg Normal file
View File

@ -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="M3 0C1.34315 0 0 1.34315 0 3V15C0 16.6569 1.34315 18 3 18H13C14.6569 18 16 16.6569 16 15V3C16 1.34315 14.6569 0 13 0H3ZM2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V15C14 15.5523 13.5523 16 13 16H3C2.44772 16 2 15.5523 2 15V3ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6H11C11.5523 6 12 5.55228 12 5C12 4.44772 11.5523 4 11 4H5ZM4 9C4 8.44772 4.44772 8 5 8H11C11.5523 8 12 8.44772 12 9C12 9.55229 11.5523 10 11 10H5C4.44772 10 4 9.55229 4 9ZM5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12H5Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

4
ui/imports/Theme.qml
View File

@ -6,9 +6,11 @@ QtObject {
readonly property color grey: "#EEF2F5"
readonly property color lightBlue: "#ECEFFC"
readonly property color blue: "#4360DF"
readonly property color transparent: "#ffffff"
readonly property color transparent: "#00000000"
readonly property color darkGrey: "#939BA1"
readonly property color lightBlueText: "#8f9fec"
readonly property color darkBlue: "#3c55c9"
readonly property color darkBlueBtn: "#5a70dd"
readonly property int padding: 16
readonly property int smallPadding: 10

1
ui/nim-status-client.pro
View File

@ -80,4 +80,5 @@ DISTFILES += \
onboarding/img/wallet@3x.jpg \
onboarding/qmldir \
shared/Image.qml \
shared/RoundedIcon.qml \
shared/qmldir

28
ui/shared/RoundedIcon.qml Normal file
View File

@ -0,0 +1,28 @@
import QtQuick 2.0
import "../imports"
Rectangle {
property int size: 36
property color bg: Theme.blue
property url imgPath: ""
width: size
height: size
color: bg
radius: 50
Image {
width: 12
height: 12
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: imgPath
}
}
/*##^##
Designer {
D{i:0;formeditorZoom:1.75}
}
##^##*/

3
ui/shared/qmldir
View File

@ -1 +1,2 @@
Image 1.0 Image.qml
Image 1.0 Image.qml
RoundedIcon 1.0 RoundedIcon.qml