From ef20924abcee4ca6880e33a990649e86c612b464 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Tue, 12 May 2020 15:43:30 -0400 Subject: [PATCH] feat: finish chat box and add separator --- imports/Theme.qml | 2 +- main.qml | 219 ++++++++++++++++++++++++++++------------------ 2 files changed, 135 insertions(+), 86 deletions(-) diff --git a/imports/Theme.qml b/imports/Theme.qml index c641287b89..1b974eecec 100644 --- a/imports/Theme.qml +++ b/imports/Theme.qml @@ -10,5 +10,5 @@ QtObject { readonly property color darkGrey: "#939BA1" readonly property int padding: 16 - readonly property int smallPadding: 16 + readonly property int smallPadding: 10 } diff --git a/main.qml b/main.qml index 08d4cdafc6..c46b53aa98 100644 --- a/main.qml +++ b/main.qml @@ -270,85 +270,85 @@ ApplicationWindow { id: chatViewDelegate Rectangle { - id: wrapper - height: 64 - color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent - anchors.right: parent.right - anchors.rightMargin: Theme.padding - anchors.top: applicationWindow.top - anchors.topMargin: 0 - anchors.left: parent.left - anchors.leftMargin: Theme.padding - radius: 8 + id: wrapper + height: 64 + color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent + anchors.right: parent.right + anchors.rightMargin: Theme.padding + anchors.top: applicationWindow.top + anchors.topMargin: 0 + anchors.left: parent.left + anchors.leftMargin: Theme.padding + radius: 8 - MouseArea { - anchors.fill: parent - onClicked: listView.currentIndex = index - } + MouseArea { + anchors.fill: parent + onClicked: listView.currentIndex = index + } - Rectangle { - id: contactImage - width: 40 - color: Theme.darkGrey - anchors.left: parent.left - anchors.leftMargin: Theme.padding - anchors.top: parent.top - anchors.topMargin: 12 - anchors.bottom: parent.bottom - anchors.bottomMargin: 12 - radius: 50 - } + Rectangle { + id: contactImage + width: 40 + color: Theme.darkGrey + anchors.left: parent.left + anchors.leftMargin: Theme.padding + anchors.top: parent.top + anchors.topMargin: 12 + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + radius: 50 + } - Text { - id: contactInfo - text: "Name:" + name - font.weight: Font.Medium - font.pixelSize: 15 - anchors.left: contactImage.right - anchors.leftMargin: Theme.padding - anchors.top: parent.top - anchors.topMargin: Theme.smallPadding - color: "black" - } - Text { - id: lastChatMessage - text: "Chatting blah blah..." - anchors.bottom: parent.bottom - anchors.bottomMargin: Theme.smallPadding - font.pixelSize: 15 - anchors.left: contactImage.right - anchors.leftMargin: Theme.padding - color: Theme.darkGrey - } - Text { - id: contactTime - text: "12:22 AM" - anchors.right: parent.right - anchors.rightMargin: Theme.padding - anchors.top: parent.top - anchors.topMargin: Theme.smallPadding - font.pixelSize: 11 - color: Theme.darkGrey - } - Rectangle { - id: contactNumberChatsCircle - width: 22 - height: 22 - radius: 50 - anchors.bottom: parent.bottom - anchors.bottomMargin: Theme.smallPadding - anchors.right: parent.right - anchors.rightMargin: Theme.padding - color: Theme.blue - Text { - id: contactNumberChats - text: qsTr("1") - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - color: "white" - } - } - } + Text { + id: contactInfo + text: "Name:" + name + font.weight: Font.Medium + font.pixelSize: 15 + anchors.left: contactImage.right + anchors.leftMargin: Theme.padding + anchors.top: parent.top + anchors.topMargin: Theme.smallPadding + color: "black" + } + Text { + id: lastChatMessage + text: "Chatting blah blah..." + anchors.bottom: parent.bottom + anchors.bottomMargin: Theme.smallPadding + font.pixelSize: 15 + anchors.left: contactImage.right + anchors.leftMargin: Theme.padding + color: Theme.darkGrey + } + Text { + id: contactTime + text: "12:22 AM" + anchors.right: parent.right + anchors.rightMargin: Theme.padding + anchors.top: parent.top + anchors.topMargin: Theme.smallPadding + font.pixelSize: 11 + color: Theme.darkGrey + } + Rectangle { + id: contactNumberChatsCircle + width: 22 + height: 22 + radius: 50 + anchors.bottom: parent.bottom + anchors.bottomMargin: Theme.smallPadding + anchors.right: parent.right + anchors.rightMargin: Theme.padding + color: Theme.blue + Text { + id: contactNumberChats + text: qsTr("1") + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + color: "white" + } + } + } } ListView { @@ -372,14 +372,13 @@ ApplicationWindow { RowLayout { id: chatContainer - width: 100 - height: 100 + Layout.fillWidth: true + Layout.fillHeight: true Layout.alignment: Qt.AlignLeft | Qt.AlignTop Rectangle { id: chatBox - width: 200 - height: 158 + height: 140 color: "#00000000" Layout.alignment: Qt.AlignLeft | Qt.AlignTop 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 { Layout.fillHeight: 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} -} -##^##*/ +