feat(Calls): StartingIncomingCall in progress

tests/resources.qrc

@@ -3,6 +3,7 @@
     <file>imgs/add_field.svg</file>
     <file>imgs/call.svg</file>
     <file>imgs/cam.svg</file>
+    <file>imgs/cat_contact.jpg</file>
     <file>imgs/chat_attachment.svg</file>
     <file>imgs/chat.svg</file>
     <file>imgs/collapse.svg</file>
@@ -55,6 +56,7 @@
     <file>ui/modules/Linphone/Form/TextButtonB.qml</file>
     <file>ui/modules/Linphone/Form/TransparentComboBox.qml</file>
     <file>ui/modules/Linphone/Image/Icon.qml</file>
+    <file>ui/modules/Linphone/Image/RoundedImage.qml</file>
     <file>ui/modules/Linphone/InvertedMouseArea.qml</file>
     <file>ui/modules/Linphone/Menu.qml</file>
     <file>ui/modules/Linphone/Paned.qml</file>
@@ -89,6 +91,9 @@
     <file>ui/scripts/Utils/qmldir</file>
     <file>ui/scripts/Utils/utils.js</file>
     <file>ui/views/Calls/Calls.qml</file>
+    <file>ui/views/Calls/StartingCall.qml</file>
+    <file>ui/views/Calls/StartingIncomingCall.qml</file>
+    <file>ui/views/Calls/StartingOutgoingCall.qml</file>
     <file>ui/views/MainWindow/Contact.qml</file>
     <file>ui/views/MainWindow/Contacts.qml</file>
     <file>ui/views/MainWindow/Conversation.qml</file>

tests/scripts/build_resources_file

@@ -12,7 +12,7 @@ do
     basename="${filename##*/}"
     extension="${filename##*.}"
 
-    if [[ "${extension}" == @(qml|svg|png|qm|js) ||
+    if [[ "${extension}" == @(qml|svg|png|jpg|qm|js) ||
           "${basename}" == "qmldir" ]]; then
         echo "    <file>$filename</file>" >> $RESOURCE_FILE
     fi

tests/ui/modules/Linphone/Contact/ContactDescription.qml

@@ -7,6 +7,7 @@ import Linphone.Styles 1.0
 Column {
   property alias sipAddress: sipAddress.text
   property alias username: username.text
+  property int horizontalTextAlignment
 
   // Username.
   Text {
@@ -17,6 +18,7 @@ Column {
     font.bold: true
     font.pointSize: ContactDescriptionStyle.username.fontSize
     height: parent.height / 2
+    horizontalAlignment: horizontalTextAlignment
     verticalAlignment: Text.AlignBottom
     width: parent.width
   }
@@ -29,6 +31,7 @@ Column {
     color: ContactDescriptionStyle.sipAddress.color
     font.pointSize: ContactDescriptionStyle.sipAddress.fontSize
     height: parent.height / 2
+    horizontalAlignment: horizontalTextAlignment
     verticalAlignment: Text.AlignTop
     width: parent.width
   }

tests/ui/modules/Linphone/Image/RoundedImage.qml

+import QtQuick 2.7
+
+// ===================================================================
+
+Item {
+  property alias source: image.source
+
+  Item {
+    id: imageContainer
+
+    anchors.fill: parent
+    layer.enabled: true
+    visible: false
+
+    Image {
+      id: image
+
+      anchors.fill: parent
+      fillMode: Image.PreserveAspectCrop
+    }
+  }
+
+  Rectangle {
+    anchors.fill: parent
+    layer.enabled: true
+    layer.samplerName: 'mask'
+    radius: parent.width / 2
+
+    layer.effect: ShaderEffect {
+      property var image: imageContainer
+
+      fragmentShader: "
+        uniform lowp sampler2D image;
+        uniform lowp sampler2D mask;
+        uniform lowp float qt_Opacity;
+
+        varying highp vec2 qt_TexCoord0;
+
+        void main () {
+          gl_FragColor = texture2D(image, qt_TexCoord0) *
+            texture2D(mask, qt_TexCoord0).a *
+            qt_Opacity;
+        }
+      "
+    }
+  }
+}

tests/ui/modules/Linphone/Styles/Contact/AvatarStyle.qml

@@ -13,6 +13,6 @@ QtObject {
   property QtObject mask: QtObject {
     property color color: Colors.r
 
-    property int radius: 50
+    property int radius: 500
   }
 }

tests/ui/modules/Linphone/qmldir

@@ -51,6 +51,7 @@ TransparentComboBox  1.0 Form/TransparentComboBox.qml
 
 # Image
 Icon                 1.0 Image/Icon.qml
+RoundedImage         1.0 Image/RoundedImage.qml
 
 # InvertedMouseArea
 InvertedMouseArea    1.0 InvertedMouseArea.qml

tests/ui/views/Calls/Calls.qml

@@ -38,13 +38,8 @@ Window {
       resizeAInPriority: true
 
       // Call.
-      childA: Rectangle {
+      childA: StartingIncomingCall {
         anchors.fill: parent
-        color: 'orange'
-
-        Text {
-          text: 'hello'
-        }
       }
 
       // Chat.

tests/ui/views/Calls/StartingCall.qml

+import QtQuick 2.7
+
+Item {
+
+
+
+}

tests/ui/views/Calls/StartingIncomingCall.qml

+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+import Linphone 1.0
+
+Rectangle {
+  color: '#EAEAEA'
+
+  ColumnLayout {
+    anchors {
+      fill: parent
+      margins: 20
+    }
+
+    spacing: 0
+
+    // Call type.
+    Column {
+      Layout.fillWidth: true
+
+      Text {
+        color: '#8E8E8E'
+        font.bold: true
+        font.pointSize: 17
+        horizontalAlignment: Text.AlignHCenter
+        text: 'INCOMING CALL'
+        width: parent.width
+      }
+
+      Text {
+        color: '#8E8E8E'
+        font.bold: true
+        font.pointSize: 17
+        horizontalAlignment: Text.AlignHCenter
+        text: '...'
+        width: parent.width
+      }
+    }
+
+    // Contact area.
+    Item {
+      id: contactContainer
+
+      Layout.fillWidth: true
+      Layout.fillHeight: true
+
+      Item {
+        anchors.verticalCenter: parent.verticalCenter
+        implicitHeight: contactDescription.height + image.height
+        width: parent.width
+
+        ContactDescription {
+          id: contactDescription
+
+          height: 60
+          horizontalTextAlignment: Text.AlignHCenter
+          sipAddress: 'mister-meow@sip-linphone.org'
+          username: 'Mister Meow'
+          width: parent.width
+        }
+
+        RoundedImage {
+          id: image
+
+          function _computeImageSize () {
+            var height = contactContainer.height - contactDescription.height
+            var width = contactContainer.width
+
+            var size = height < 400 ? height : 400
+            return size < width ? size : width
+          }
+
+          anchors.top: contactDescription.bottom
+          anchors.horizontalCenter: parent.horizontalCenter
+          height: _computeImageSize()
+          source: "qrc:/imgs/cat_contact.jpg"
+          width: height
+        }
+      }
+    }
+
+    // Actions area.
+    ActionBar {
+      Layout.alignment: Qt.AlignHCenter
+      Layout.bottomMargin: 20
+      Layout.topMargin: 20
+      iconSize: 40
+
+      ActionButton {
+        icon: 'cam'
+      }
+
+      ActionButton {
+        icon: 'call'
+      }
+
+      ActionButton {
+        icon: 'hangup'
+      }
+    }
+  }
+}

tests/ui/views/Calls/StartingOutgoingCall.qml

+import QtQuick 2.7
+
+Item {
+
+
+}