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 TabButton and TabBar for the Wallet

This commit is contained in:
Jonathan Rainville 2020-05-28 10:32:58 -04:00 committed by Iuri Matias
parent 2da4bd376f
commit d1b786811f
5 changed files with 128 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
ui/app/AppLayouts/Wallet/WalletLayout.qml
View File

@ -43,85 +43,104 @@ SplitView {
anchors.rightMargin: 0
anchors.top: walletHeader.bottom
anchors.topMargin: 23
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: assetsTitle
color: Theme.darkGrey
text: qsTr("Assets")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: Theme.smallPadding
font.pixelSize: 14
}
Item {
id: element
Layout.fillHeight: true
Layout.fillWidth: true
Component {
id: assetViewDelegate
Item {
id: element6
height: 56
TabBar {
id: walletTabBar
anchors.right: parent.right
anchors.rightMargin: 0
anchors.rightMargin: Theme.bigPadding
anchors.left: parent.left
anchors.leftMargin: 0
anchors.leftMargin: Theme.bigPadding
anchors.top: parent.top
anchors.topMargin: Theme.padding
Image {
id: assetInfoContainer
width: 36
height: 36
source: image
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.verticalCenter: parent.verticalCenter
StatusTabButton {
id: assetBtn
btnText: "Assets"
}
Text {
id: assetValue
text: value
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 14
font.strikeout: false
anchors.left: parent.left
anchors.leftMargin: 72
StatusTabButton {
id: collectiblesBtn
anchors.left: assetBtn.right
anchors.leftMargin: 32
btnText: "Collectibles"
}
Text {
id: assetSymbol
text: symbol
anchors.verticalCenter: parent.verticalCenter
color: Theme.darkGrey
font.pixelSize: 14
anchors.right: assetFiatValue.left
anchors.rightMargin: 10
}
Text {
id: assetFiatValue
color: Theme.darkGrey
text: fiatValue
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 14
anchors.right: parent.right
anchors.rightMargin: Theme.padding
StatusTabButton {
id: historyBtn
anchors.left: collectiblesBtn.right
anchors.leftMargin: 32
btnText: "History"
}
}
}
ListView {
id: listView
anchors.topMargin: 36
anchors.fill: parent
model: assetsModel.assets
delegate: assetViewDelegate
Component {
id: assetViewDelegate
Item {
id: element6
height: 56
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
Image {
id: assetInfoContainer
width: 36
height: 36
source: image
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.verticalCenter: parent.verticalCenter
}
Text {
id: assetValue
text: value
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 14
font.strikeout: false
anchors.left: parent.left
anchors.leftMargin: 72
}
Text {
id: assetSymbol
text: symbol
anchors.verticalCenter: parent.verticalCenter
color: Theme.darkGrey
font.pixelSize: 14
anchors.right: assetFiatValue.left
anchors.rightMargin: 10
}
Text {
id: assetFiatValue
color: Theme.darkGrey
text: fiatValue
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 14
anchors.right: parent.right
anchors.rightMargin: Theme.padding
}
}
}
ListView {
id: listView
anchors.topMargin: 36
anchors.fill: parent
model: assetsModel.assets
delegate: assetViewDelegate
}
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;formeditorColor:"#ffffff";formeditorZoom:0.8999999761581421;height:770;width:1152}
D{i:16;anchors_x:0;anchors_y:0}
D{i:0;autoSize:true;formeditorColor:"#ffffff";height:770;width:1152}
}
##^##*/

1
ui/imports/Theme.qml
View File

@ -15,6 +15,7 @@ QtObject {
readonly property color darkBlue: "#3c55c9"
readonly property color darkBlueBtn: "#5a70dd"
readonly property int bigPadding: 24
readonly property int padding: 16
readonly property int smallPadding: 10
readonly property int radius: 8

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

@ -112,6 +112,7 @@ DISTFILES += \
onboarding/qmldir \
shared/PopupMenu.qml \
shared/Separator.qml \
shared/StatusTabButton.qml \
shared/StyledButton.qml \
shared/RoundedIcon.qml \
shared/qmldir

43
ui/shared/StatusTabButton.qml Normal file
View File

@ -0,0 +1,43 @@
import QtQuick 2.3
import QtQuick.Controls 2.3
import "../imports"
TabButton {
property string btnText: "Default Button"
id: tabButton
width: tabBtnText.width
height: tabBtnText.height + 11
text: ""
padding: 0
background: Rectangle {
color: Theme.transparent
border.color: Theme.transparent
}
Text {
id: tabBtnText
text: btnText
font.weight: Font.Medium
font.pixelSize: 15
color: parent.checked ? Theme.black : Theme.darkGrey
}
Rectangle {
color: Theme.blue
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.right: parent.right
anchors.rightMargin: 4
anchors.left: parent.left
anchors.leftMargin: 4
height: 3
radius: 4
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.75}
}
##^##*/

1
ui/shared/qmldir
View File

@ -2,3 +2,4 @@ StyledButton 1.0 StyledButton.qml
RoundedIcon 1.0 RoundedIcon.qml
PopupMenu 1.0 PopupMenu.qml
Separator 1.0 Separator.qml
StatusTabButton 1.0 StatusTabButton.qml