diff --git a/tests/imgs/chat_attachment.svg b/tests/imgs/chat_attachment.svg new file mode 100644 index 000000000..41297ea02 --- /dev/null +++ b/tests/imgs/chat_attachment.svg @@ -0,0 +1,22 @@ + + + + chat_attachment + Created with Sketch. + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tests/languages/en.ts b/tests/languages/en.ts index 812ce7efb..a15cad93a 100644 --- a/tests/languages/en.ts +++ b/tests/languages/en.ts @@ -27,6 +27,21 @@ ADD CONTACT + + conversation + + displayCallsAndMessages + All + + + displayCalls + Calls + + + displayMessages + Messages + + home diff --git a/tests/languages/fr.ts b/tests/languages/fr.ts index accede66b..70ce3e45d 100644 --- a/tests/languages/fr.ts +++ b/tests/languages/fr.ts @@ -27,6 +27,21 @@ AJOUTER CONTACT + + conversation + + displayCallsAndMessages + Tout + + + displayCalls + Appels + + + displayMessages + Messages + + home diff --git a/tests/resources.qrc b/tests/resources.qrc index c2c780248..f6578c4a5 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -7,6 +7,7 @@ ui/components/collapse/Collapse.qml ui/components/contact/Avatar.qml + ui/components/contact/ShortContactDescription.qml ui/components/dialog/DialogDescription.qml ui/components/dialog/DialogPlus.qml ui/components/form/DarkButton.qml @@ -23,6 +24,7 @@ ui/views/mainWindow/contacts.qml + ui/views/mainWindow/conversation.qml ui/views/mainWindow/home.qml ui/views/mainWindow/mainWindow.qml ui/views/manageAccounts.qml @@ -31,12 +33,13 @@ imgs/avatar.svg imgs/camera.svg - imgs/phone.svg + imgs/chat_attachment.svg imgs/collapse.svg imgs/led_absent.svg imgs/led_connected.svg imgs/led_disconnected.svg imgs/led_do_not_disturb.svg + imgs/phone.svg imgs/start_conference.svg imgs/valid.svg diff --git a/tests/ui/components/contact/Avatar.qml b/tests/ui/components/contact/Avatar.qml index a24c8a7ae..5256653a2 100644 --- a/tests/ui/components/contact/Avatar.qml +++ b/tests/ui/components/contact/Avatar.qml @@ -12,7 +12,7 @@ Item { anchors.fill: parent color: '#8F8F8F' id: avatar - radius: 20 + radius: 50 } // Initials. diff --git a/tests/ui/components/contact/ShortContactDescription.qml b/tests/ui/components/contact/ShortContactDescription.qml new file mode 100644 index 000000000..c4564f8b0 --- /dev/null +++ b/tests/ui/components/contact/ShortContactDescription.qml @@ -0,0 +1,30 @@ +import QtQuick 2.7 + +// =================================================================== + +Column { + property string sipAddress + property string username + + // Username. + Text { + clip: true + color: '#5A585B' + font.pointSize: 11 + font.weight: Font.DemiBold + height: parent.height / 2 + text: username + verticalAlignment: Text.AlignBottom + width: parent.width + } + + // Sip address. + Text { + clip: true + color: '#5A585B' + height: parent.height / 2 + text: sipAddress + verticalAlignment: Text.AlignTop + width: parent.width + } +} diff --git a/tests/ui/views/mainWindow/conversation.qml b/tests/ui/views/mainWindow/conversation.qml new file mode 100644 index 000000000..c5d398893 --- /dev/null +++ b/tests/ui/views/mainWindow/conversation.qml @@ -0,0 +1,175 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 + +import 'qrc:/ui/components/contact' +import 'qrc:/ui/components/form' +import 'qrc:/ui/components/scrollBar' + +ColumnLayout { + spacing: 0 + + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 102 + color: '#D1D1D1' + + RowLayout { + anchors.left: parent.left + anchors.leftMargin: 40 + anchors.right: parent.right + anchors.rightMargin: 40 + anchors.verticalCenter: parent.verticalCenter + height: 80 + spacing: 50 + width: parent.width + + Avatar { + Layout.fillHeight: true + Layout.preferredWidth: 80 + presence: 'connected' // TODO: Use C++. + username: 'Cameron Andrews' // TODO: Use C++. + } + + Column { + Layout.fillHeight: true + Layout.fillWidth: true + + // Contact description. + ShortContactDescription { + height: parent.height * 0.60 + sipAddress: 'cam.andrews@sip.linphone.org' // TODO: Use C++. + username: 'Cameron Andrews' // TODO: Use C++. + width: parent.width + } + + // Contact actions. + Row { + height: parent.height * 0.40 + width: parent.width + + Row { + height: parent.height + spacing: 10 + width: parent.width / 2 + + Rectangle { + color: 'blue' + width: 32 + height: 32 + } + + Rectangle { + color: 'red' + width: 32 + height: 32 + } + } + + Row { + height: parent.height + layoutDirection: Qt.RightToLeft + spacing: 10 + width: parent.width / 2 + + Rectangle { + color: 'green' + width: 32 + height: 32 + } + + Rectangle { + color: 'orange' + width: 32 + height: 32 + } + } + } + } + } + } + + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 40 + color: '#C7C7C7' + + Rectangle { + anchors.fill: parent + anchors.leftMargin: 1 + + ExclusiveButtons { + anchors.left: parent.left + anchors.leftMargin: 40 + anchors.verticalCenter: parent.verticalCenter + texts: [ + qsTr('displayCallsAndMessages'), + qsTr('displayCalls'), + qsTr('displayMessages') + ] + } + } + } + + Rectangle { + Layout.fillHeight: true + Layout.fillWidth: true + border.color: '#C7C7C7' + border.width: 1 + id: messagesArea + + ListView { + ScrollBar.vertical: ForceScrollBar { } + anchors.fill: parent + anchors.bottomMargin: messagesArea.border.width + anchors.topMargin: messagesArea.border.width + boundsBehavior: Flickable.StopAtBounds + clip: true + highlightRangeMode: ListView.ApplyRange + spacing: 1 + } + } + + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 70 + border.color: textArea.activeFocus ? '#8E8E8E' : '#C7C7C7' + border.width: 1 + id: newMessageArea + + RowLayout { + anchors.fill: parent + + // Message to send. + Flickable { + Layout.preferredHeight: parent.height + Layout.fillWidth: true + ScrollBar.vertical: ScrollBar { } + TextArea.flickable: TextArea { + id: textArea + wrapMode: TextArea.Wrap + } + } + + // DropArea. + Rectangle { + Layout.preferredHeight: parent.height - newMessageArea.border.width * 2 + Layout.preferredWidth: 40 + color: '#DDDDDD' + + DropArea { + anchors.fill: parent + } + + Image { + anchors.right: parent.right + anchors.top: parent.top + fillMode: Image.PreserveAspectFit + height: parent.height + source: 'qrc:/imgs/chat_attachment.svg' + width: parent.width + } + } + } + } +} diff --git a/tests/ui/views/mainWindow/mainWindow.qml b/tests/ui/views/mainWindow/mainWindow.qml index 68ec738a8..9090c1752 100644 --- a/tests/ui/views/mainWindow/mainWindow.qml +++ b/tests/ui/views/mainWindow/mainWindow.qml @@ -3,6 +3,7 @@ import QtQuick.Controls 2.0 import QtQuick.Layouts 1.3 import 'qrc:/ui/components/collapse' +import 'qrc:/ui/components/contact' import 'qrc:/ui/components/form' import 'qrc:/ui/components/misc' @@ -30,31 +31,11 @@ ApplicationWindow { } // User info. - Column { - Layout.preferredWidth: 200 + ShortContactDescription { Layout.fillHeight: parent.height - - // Username. - Text { - clip: true - color: '#5A585B' - font.weight: Font.DemiBold - height: parent.height / 2 - font.pointSize: 11 - text: 'Edward Miller' - verticalAlignment: Text.AlignBottom - width: parent.width - } - - // Sip address. - Text { - clip: true - color: '#5A585B' - height: parent.height / 2 - text: 'e.miller@sip-linphone.org' - verticalAlignment: Text.AlignTop - width: parent.width - } + Layout.preferredWidth: 200 + sipAddress: 'e.miller@sip-linphone.org' + username: 'Edward Miller' } // User actions. @@ -142,7 +123,7 @@ ApplicationWindow { Loader { Layout.fillHeight: true Layout.fillWidth: true - source: 'qrc:/ui/views/mainWindow/contacts.qml' + source: 'qrc:/ui/views/mainWindow/conversation.qml' } } }