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

1
ui/imports/Theme.qml
View File

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

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

@ -112,6 +112,7 @@ DISTFILES += \
onboarding/qmldir \ onboarding/qmldir \
shared/PopupMenu.qml \ shared/PopupMenu.qml \
shared/Separator.qml \ shared/Separator.qml \
shared/StatusTabButton.qml \
shared/StyledButton.qml \ shared/StyledButton.qml \
shared/RoundedIcon.qml \ shared/RoundedIcon.qml \
shared/qmldir 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 RoundedIcon 1.0 RoundedIcon.qml
PopupMenu 1.0 PopupMenu.qml PopupMenu 1.0 PopupMenu.qml
Separator 1.0 Separator.qml Separator 1.0 Separator.qml
StatusTabButton 1.0 StatusTabButton.qml