diff --git a/tests/assets/images/call_accept_hovered.svg b/tests/assets/images/call_accept_hovered.svg new file mode 100644 index 000000000..6b1a1fb41 --- /dev/null +++ b/tests/assets/images/call_accept_hovered.svg @@ -0,0 +1,15 @@ + + + + call_accept_over + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/call_accept_normal.svg b/tests/assets/images/call_accept_normal.svg new file mode 100644 index 000000000..bd2442345 --- /dev/null +++ b/tests/assets/images/call_accept_normal.svg @@ -0,0 +1,15 @@ + + + + call_accept default + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/call_accept_pressed.svg b/tests/assets/images/call_accept_pressed.svg new file mode 100644 index 000000000..065c56680 --- /dev/null +++ b/tests/assets/images/call_accept_pressed.svg @@ -0,0 +1,15 @@ + + + + call_accept_clic + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/hangup_hovered.svg b/tests/assets/images/hangup_hovered.svg new file mode 100644 index 000000000..3db5c6378 --- /dev/null +++ b/tests/assets/images/hangup_hovered.svg @@ -0,0 +1,13 @@ + + + + hangup_over + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/hangup_normal.svg b/tests/assets/images/hangup_normal.svg new file mode 100644 index 000000000..c78b7d656 --- /dev/null +++ b/tests/assets/images/hangup_normal.svg @@ -0,0 +1,13 @@ + + + + hangup_default + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/hangup_pressed.svg b/tests/assets/images/hangup_pressed.svg new file mode 100644 index 000000000..307dd7c95 --- /dev/null +++ b/tests/assets/images/hangup_pressed.svg @@ -0,0 +1,13 @@ + + + + hangup_clic + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/video_call_accept_hovered.svg b/tests/assets/images/video_call_accept_hovered.svg new file mode 100644 index 000000000..dbff9f81d --- /dev/null +++ b/tests/assets/images/video_call_accept_hovered.svg @@ -0,0 +1,15 @@ + + + + video_call_accept_over + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/video_call_accept_normal.svg b/tests/assets/images/video_call_accept_normal.svg new file mode 100644 index 000000000..7e55595ee --- /dev/null +++ b/tests/assets/images/video_call_accept_normal.svg @@ -0,0 +1,15 @@ + + + + video_call_accept_default + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/video_call_accept_pressed.svg b/tests/assets/images/video_call_accept_pressed.svg new file mode 100644 index 000000000..8277f2345 --- /dev/null +++ b/tests/assets/images/video_call_accept_pressed.svg @@ -0,0 +1,15 @@ + + + + video_call_accept_clic + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/tests/resources.qrc b/tests/resources.qrc index 757310163..5d00b3a2e 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -4,11 +4,12 @@ assets/images/attachment_normal.svg assets/images/attachment_pressed.svg assets/images/auto_answer.svg - assets/images/a-v-a-t-a-r-120120@3x.png + assets/images/call_accept_hovered.svg + assets/images/call_accept_normal.svg + assets/images/call_accept_pressed.svg assets/images/call_hovered.svg assets/images/call_normal.svg assets/images/call_pressed.svg - assets/images/cat.jpg assets/images/chat_error.svg assets/images/chat_hovered.svg assets/images/chat_normal.svg @@ -31,6 +32,9 @@ assets/images/delete_pressed.svg assets/images/ended_call.svg assets/images/filter.svg + assets/images/hangup_hovered.svg + assets/images/hangup_normal.svg + assets/images/hangup_pressed.svg assets/images/history.svg assets/images/home_normal.svg assets/images/home_selected.svg @@ -48,6 +52,9 @@ assets/images/tooltip_arrow_left.svg assets/images/tooltip_arrow_right.svg assets/images/tooltip_arrow_top.svg + assets/images/video_call_accept_hovered.svg + assets/images/video_call_accept_normal.svg + assets/images/video_call_accept_pressed.svg assets/images/video_call_hovered.svg assets/images/video_call_normal.svg assets/images/video_call_pressed.svg @@ -149,8 +156,8 @@ ui/scripts/Utils/utils.js ui/views/App/Calls/AbstractCall.qml ui/views/App/Calls/Calls.qml - ui/views/App/Calls/StartingIncomingCall.qml - ui/views/App/Calls/StartingOutgoingCall.qml + ui/views/App/Calls/IncomingCall.qml + ui/views/App/Calls/OutgoingCall.qml ui/views/App/MainWindow/Contact.qml ui/views/App/MainWindow/Contacts.qml ui/views/App/MainWindow/Conversation.qml diff --git a/tests/ui/modules/Common/Image/Icon.qml b/tests/ui/modules/Common/Image/Icon.qml index 30137fe58..3b3e586db 100644 --- a/tests/ui/modules/Common/Image/Icon.qml +++ b/tests/ui/modules/Common/Image/Icon.qml @@ -24,9 +24,9 @@ Item { Image { function _checkIconSize () { Utils.assert( - iconSize != null && iconSize > 0, + iconSize != null && iconSize >= 0, '`iconSize` must be defined and must be positive. (icon=`' + - icon + '`)' + icon + '`, iconSize=' + iconSize + ')' ) } diff --git a/tests/ui/modules/Common/Image/RoundedImage.qml b/tests/ui/modules/Common/Image/RoundedImage.qml index 8da2e4284..e9df6c4eb 100644 --- a/tests/ui/modules/Common/Image/RoundedImage.qml +++ b/tests/ui/modules/Common/Image/RoundedImage.qml @@ -34,6 +34,7 @@ Item { property color foregroundColor: item.foregroundColor property var image: imageContainer + // See: https://www.opengl.org/sdk/docs/man/html/mix.xhtml fragmentShader: ' uniform lowp sampler2D image; uniform lowp sampler2D mask; diff --git a/tests/ui/modules/Linphone/Contact/Avatar.qml b/tests/ui/modules/Linphone/Contact/Avatar.qml index 2e232b36f..f5dbd3f37 100644 --- a/tests/ui/modules/Linphone/Contact/Avatar.qml +++ b/tests/ui/modules/Linphone/Contact/Avatar.qml @@ -9,8 +9,11 @@ import Utils 1.0 // =================================================================== Item { + id: avatar + property alias image: roundedImage.source property alias presenceLevel: presenceLevel.level + property color backgroundColor: AvatarStyle.backgroundColor property string username property var _initialsRegex: /^\s*([^\s\.]+)(?:[\s\.]+([^\s\.]+))?/ @@ -34,6 +37,13 @@ Item { // ----------------------------------------------------------------- + RoundedImage { + id: roundedImage + + anchors.fill: parent + backgroundColor: avatar.backgroundColor + } + Text { anchors.centerIn: parent color: AvatarStyle.initials.color @@ -50,18 +60,14 @@ Item { text: _computeInitials() } - RoundedImage { - id: roundedImage - - anchors.fill: parent - backgroundColor: AvatarStyle.backgroundColor - } - PresenceLevel { id: presenceLevel - anchors.bottom: parent.bottom - anchors.right: parent.right + anchors { + bottom: parent.bottom + right: parent.right + } + height: parent.height / 3 width: parent.width / 3 } diff --git a/tests/ui/scripts/LinphoneUtils/linphone-utils.js b/tests/ui/scripts/LinphoneUtils/linphone-utils.js new file mode 100644 index 000000000..6db035454 --- /dev/null +++ b/tests/ui/scripts/LinphoneUtils/linphone-utils.js @@ -0,0 +1,14 @@ +// =================================================================== +// Contains linphone helpers. +// =================================================================== + +.pragma library + +.import 'qrc:/ui/scripts/Utils/utils.js' as Utils + +// Returns the username of a contact object or URI string. +function getContactUsername (contact) { + return Utils.isString(contact) + ? contact.substring(4, contact.indexOf('@')) // 4 = length("sip:") + : contact.username +} diff --git a/tests/ui/scripts/LinphoneUtils/qmldir b/tests/ui/scripts/LinphoneUtils/qmldir new file mode 100644 index 000000000..ba14911ac --- /dev/null +++ b/tests/ui/scripts/LinphoneUtils/qmldir @@ -0,0 +1,3 @@ +module LinphoneUtils + +LinphoneUtils 1.0 linphone-utils.js diff --git a/tests/ui/views/App/Calls/AbstractCall.qml b/tests/ui/views/App/Calls/AbstractCall.qml new file mode 100644 index 000000000..8b55a7ce3 --- /dev/null +++ b/tests/ui/views/App/Calls/AbstractCall.qml @@ -0,0 +1,128 @@ +import QtQuick 2.7 +import QtQuick.Layouts 1.3 + +import Common 1.0 +import Linphone 1.0 +import LinphoneUtils 1.0 + +// =================================================================== + +Rectangle { + id: abstractCall + + default property alias _actionArea: actionArea.data + property alias callTypeLabel: callType.text + property bool isOutgoing: false + property bool isVideoCall: false + property string sipAddress + + property var _contact: ContactsListModel.mapSipAddressToContact( + sipAddress + ) || sipAddress + + // ----------------------------------------------------------------- + + color: '#E8E8E8' + + ColumnLayout { + anchors { + fill: parent + topMargin: 26 + } + + spacing: 0 + + // --------------------------------------------------------------- + // Call type. + // --------------------------------------------------------------- + + Column { + spacing: 10 + + Layout.fillWidth: true + + Text { + id: callType + + color: '#96A5B1' + + font { + bold: true + pointSize: 17 + } + + horizontalAlignment: Text.AlignHCenter + width: parent.width + } + + CaterpillarAnimation { + anchors.horizontalCenter: parent.horizontalCenter + visible: abstractCall.isOutgoing + } + } + + // --------------------------------------------------------------- + // Contact visual. + // --------------------------------------------------------------- + + Item { + id: container + + Layout.fillWidth: true + Layout.fillHeight: true + Layout.margins: 20 + + Item { + anchors.verticalCenter: parent.verticalCenter + implicitHeight: contactDescription.height + avatar.height + width: parent.width + + ContactDescription { + id: contactDescription + + username: LinphoneUtils.getContactUsername(_contact) + sipAddress: abstractCall.sipAddress + height: 60 + horizontalTextAlignment: Text.AlignHCenter + width: parent.width + } + + Avatar { + id: avatar + + function _computeAvatarSize () { + var height = container.height - contactDescription.height + var width = container.width + + var size = height < 250 && height > 0 ? height : 250 + return size < width ? size : width + } + + anchors { + top: contactDescription.bottom + horizontalCenter: parent.horizontalCenter + } + + backgroundColor: '#A1A1A1' + image: _contact.avatar + username: contactDescription.username + + height: _computeAvatarSize() + width: height + } + } + } + + // --------------------------------------------------------------- + // Buttons. + // --------------------------------------------------------------- + + Item { + id: actionArea + + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.preferredHeight: 100 + } + } +} diff --git a/tests/ui/views/App/Calls/Calls.qml b/tests/ui/views/App/Calls/Calls.qml index 3e581d260..ae1da4b10 100644 --- a/tests/ui/views/App/Calls/Calls.qml +++ b/tests/ui/views/App/Calls/Calls.qml @@ -78,14 +78,13 @@ Window { closingEdge: Qt.RightEdge defaultChildAWidth: 300 defaultClosed: true - minimumLeftLimit: 250 - minimumRightLimit: 350 + minimumLeftLimit: 350 + minimumRightLimit: 250 resizeAInPriority: true // Call. - childA: AbstractCall { + childA: IncomingCall { anchors.fill: parent - callTypeLabel: 'INCOMING VIDEO CALL' sipAddress: 'sip:erwan.croze@sip.linphone.org' } diff --git a/tests/ui/views/App/Calls/IncomingCall.qml b/tests/ui/views/App/Calls/IncomingCall.qml new file mode 100644 index 000000000..ac36970aa --- /dev/null +++ b/tests/ui/views/App/Calls/IncomingCall.qml @@ -0,0 +1,35 @@ +import Common 1.0 + +// =================================================================== + +AbstractCall { + callTypeLabel: isVideoCall + ? 'INCOMING VIDEO CALL' + : 'INCOMING AUDIO CALL' + + ActionBar { + anchors.centerIn: parent + iconSize: 40 + + ActionButton { + icon: 'video_call_accept' + } + + ActionButton { + icon: 'call_accept' + } + } + + ActionBar { + anchors { + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: 85 + } + iconSize: 40 + + ActionButton { + icon: 'hangup' + } + } +} diff --git a/tests/ui/views/App/Calls/OutgoingCall.qml b/tests/ui/views/App/Calls/OutgoingCall.qml new file mode 100644 index 000000000..971462029 --- /dev/null +++ b/tests/ui/views/App/Calls/OutgoingCall.qml @@ -0,0 +1,35 @@ +import Common 1.0 + +// =================================================================== + +AbstractCall { + callTypeLabel: isVideoCall + ? 'OUTGOING VIDEO CALL' + : 'OUTGOING AUDIO CALL' + + ActionBar { + anchors.centerIn: parent + iconSize: 40 + + ActionButton { + icon: 'video_call_accept' + } + + ActionButton { + icon: 'call_accept' + } + } + + ActionBar { + anchors { + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: 85 + } + iconSize: 40 + + ActionButton { + icon: 'hangup' + } + } +} diff --git a/tests/ui/views/App/Calls/StartingIncomingCall.qml b/tests/ui/views/App/Calls/StartingIncomingCall.qml deleted file mode 100644 index cc9b18778..000000000 --- a/tests/ui/views/App/Calls/StartingIncomingCall.qml +++ /dev/null @@ -1,26 +0,0 @@ -import Common 1.0 -import Linphone 1.0 - -StartingCall { - avatarImage: "qrc:/imgs/cat_contact.jpg" - callType: 'INCOMING CALL' - sipAddress: 'mister-meow@sip-linphone.org' - username: 'Mister Meow' - - ActionBar { - anchors.centerIn: parent - iconSize: 40 - - ActionButton { - icon: 'cam' - } - - ActionButton { - icon: 'call' - } - - ActionButton { - icon: 'hangup' - } - } -} diff --git a/tests/ui/views/App/Calls/StartingOutgoingCall.qml b/tests/ui/views/App/Calls/StartingOutgoingCall.qml deleted file mode 100644 index 964e09c54..000000000 --- a/tests/ui/views/App/Calls/StartingOutgoingCall.qml +++ /dev/null @@ -1,51 +0,0 @@ -import QtQuick 2.7 -import QtQuick.Layouts 1.3 - -import Common 1.0 -import Linphone 1.0 - -StartingCall { - avatarImage: "qrc:/imgs/cat_contact.jpg" - callType: 'OUTGOING CALL' - sipAddress: 'mister-meow@sip-linphone.org' - username: 'Mister Meow' - - RowLayout { - anchors.fill: parent - spacing: 0 - - ActionBar { - iconSize: 40 - - ActionButton { - icon: 'micro' - } - - ActionButton { - icon: 'speaker' - } - - ActionButton { - icon: 'cam' - } - } - - // TODO: Cam. - Item { - Layout.fillWidth: true - Layout.fillHeight: true - } - - ActionBar { - iconSize: 40 - - ActionButton { - icon: 'hangup' - } - - ActionButton { - icon: 'chat' - } - } - } -}