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: finish chat box and add separator

This commit is contained in:
Jonathan Rainville 2020-05-12 15:43:30 -04:00 committed by Iuri Matias
parent 14bcf05ef5
commit ef20924abc
2 changed files with 135 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
imports/Theme.qml
View File

@ -10,5 +10,5 @@ QtObject {
readonly property color darkGrey: "#939BA1" readonly property color darkGrey: "#939BA1"
readonly property int padding: 16 readonly property int padding: 16
readonly property int smallPadding: 16 readonly property int smallPadding: 10
} }

219
main.qml
View File

@ -270,85 +270,85 @@ ApplicationWindow {
id: chatViewDelegate id: chatViewDelegate
Rectangle { Rectangle {
id: wrapper id: wrapper
height: 64 height: 64
color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Theme.padding anchors.rightMargin: Theme.padding
anchors.top: applicationWindow.top anchors.top: applicationWindow.top
anchors.topMargin: 0 anchors.topMargin: 0
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Theme.padding anchors.leftMargin: Theme.padding
radius: 8 radius: 8
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: listView.currentIndex = index onClicked: listView.currentIndex = index
} }
Rectangle { Rectangle {
id: contactImage id: contactImage
width: 40 width: 40
color: Theme.darkGrey color: Theme.darkGrey
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Theme.padding anchors.leftMargin: Theme.padding
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 12 anchors.topMargin: 12
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 12 anchors.bottomMargin: 12
radius: 50 radius: 50
} }
Text { Text {
id: contactInfo id: contactInfo
text: "Name:" + name text: "Name:" + name
font.weight: Font.Medium font.weight: Font.Medium
font.pixelSize: 15 font.pixelSize: 15
anchors.left: contactImage.right anchors.left: contactImage.right
anchors.leftMargin: Theme.padding anchors.leftMargin: Theme.padding
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: Theme.smallPadding anchors.topMargin: Theme.smallPadding
color: "black" color: "black"
} }
Text { Text {
id: lastChatMessage id: lastChatMessage
text: "Chatting blah blah..." text: "Chatting blah blah..."
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: Theme.smallPadding anchors.bottomMargin: Theme.smallPadding
font.pixelSize: 15 font.pixelSize: 15
anchors.left: contactImage.right anchors.left: contactImage.right
anchors.leftMargin: Theme.padding anchors.leftMargin: Theme.padding
color: Theme.darkGrey color: Theme.darkGrey
} }
Text { Text {
id: contactTime id: contactTime
text: "12:22 AM" text: "12:22 AM"
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Theme.padding anchors.rightMargin: Theme.padding
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: Theme.smallPadding anchors.topMargin: Theme.smallPadding
font.pixelSize: 11 font.pixelSize: 11
color: Theme.darkGrey color: Theme.darkGrey
} }
Rectangle { Rectangle {
id: contactNumberChatsCircle id: contactNumberChatsCircle
width: 22 width: 22
height: 22 height: 22
radius: 50 radius: 50
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: Theme.smallPadding anchors.bottomMargin: Theme.smallPadding
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Theme.padding anchors.rightMargin: Theme.padding
color: Theme.blue color: Theme.blue
Text { Text {
id: contactNumberChats id: contactNumberChats
text: qsTr("1") text: qsTr("1")
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: "white" color: "white"
} }
} }
} }
} }
ListView { ListView {
@ -372,14 +372,13 @@ ApplicationWindow {
RowLayout { RowLayout {
id: chatContainer id: chatContainer
width: 100 Layout.fillWidth: true
height: 100 Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Rectangle { Rectangle {
id: chatBox id: chatBox
width: 200 height: 140
height: 158
color: "#00000000" color: "#00000000"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillWidth: true Layout.fillWidth: true
@ -436,6 +435,58 @@ ApplicationWindow {
} }
} }
RowLayout {
id: separator
height: 16
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
anchors.top: chatContainer.bottom
anchors.topMargin: Theme.padding
Item {
id: separatorContent
width: 200
height: 16
Layout.fillHeight: false
Layout.fillWidth: true
Rectangle {
id: lineSeparator1
height: 1
color: "#00000000"
border.color: "#eef2f5"
anchors.top: parent.top
anchors.topMargin: 8
anchors.right: separatorText.left
anchors.rightMargin: 14
anchors.left: parent.left
anchors.leftMargin: 16
}
Text {
id: separatorText
color: Theme.darkGrey
text: qsTr("Yesterday")
font.pixelSize: 12
anchors.centerIn: parent
}
Rectangle {
id: lineSeparator2
height: 1
color: "#00000000"
anchors.right: parent.right
anchors.rightMargin: 16
anchors.left: separatorText.right
border.color: "#eef2f5"
anchors.top: parent.top
anchors.leftMargin: 14
anchors.topMargin: 8
}
}
}
RowLayout { RowLayout {
Layout.fillHeight: true Layout.fillHeight: true
TextArea { id: callResult; Layout.fillWidth: true; text: logic.callResult; readOnly: true } TextArea { id: callResult; Layout.fillWidth: true; text: logic.callResult; readOnly: true }
@ -454,6 +505,8 @@ ApplicationWindow {
} }
} }
} }
} }
@ -480,8 +533,4 @@ ApplicationWindow {
} }
/*##^##
Designer {
D{i:0;formeditorZoom:0.8999999761581421}
}
##^##*/