unstable

tests/resources.qrc

@@ -75,6 +75,7 @@
     <file>ui/modules/Common/Styles/qmldir</file>
     <file>ui/modules/Common/Styles/SearchBoxStyle.qml</file>
     <file>ui/modules/Common/View/ScrollableListView.qml</file>
+    <file>ui/modules/Linphone/Call/CallControls.qml</file>
     <file>ui/modules/Linphone/Chat/Chat.qml</file>
     <file>ui/modules/Linphone/Chat/Event.qml</file>
     <file>ui/modules/Linphone/Chat/IncomingMessage.qml</file>

tests/ui/modules/Common/Borders.qml

@@ -7,8 +7,6 @@ import QtQuick 2.7
 // ===================================================================
 
 Item {
-  default property alias content: content.data
-
   property var borderColor
   property var borderWidth
 
@@ -22,6 +20,8 @@ Item {
   property int rightWidth: 0
   property int topWidth: 0
 
+  default property alias _content: content.data
+
   Rectangle {
     id: bottomBorder
 

tests/ui/modules/Common/Dialog/DialogPlus.qml

@@ -9,11 +9,11 @@ import Common.Styles 1.0
 // ===================================================================
 
 Window {
-  default property alias content: content.data // Required.
   property alias buttons: buttons.data // Optionnal.
   property alias descriptionText: description.text // Optionnal.
   property bool centeredButtons: false
 
+  default property alias _content: content.data // Required.
   property bool _disableExitStatus
 
   signal exitStatus (int status)

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

@@ -22,26 +22,30 @@ Item {
 
   Rectangle {
     anchors.fill: parent
-    layer.enabled: true
-    layer.samplerName: 'mask'
-    radius: parent.width / 2
 
-    layer.effect: ShaderEffect {
-      property var image: imageContainer
+    layer {
+      effect: ShaderEffect {
+        property var image: imageContainer
 
-      fragmentShader: "
-        uniform lowp sampler2D image;
-        uniform lowp sampler2D mask;
-        uniform lowp float qt_Opacity;
+        fragmentShader: "
+          uniform lowp sampler2D image;
+          uniform lowp sampler2D mask;
+          uniform lowp float qt_Opacity;
 
-        varying highp vec2 qt_TexCoord0;
+          varying highp vec2 qt_TexCoord0;
 
-        void main () {
-          gl_FragColor = texture2D(image, qt_TexCoord0) *
-            texture2D(mask, qt_TexCoord0).a *
-            qt_Opacity;
-        }
-      "
+          void main () {
+            gl_FragColor = texture2D(image, qt_TexCoord0) *
+              texture2D(mask, qt_TexCoord0).a *
+              qt_Opacity;
+          }
+        "
+      }
+
+      enabled: true
+      samplerName: 'mask'
     }
+
+    radius: parent.width / 2
   }
 }

tests/ui/modules/Common/InvertedMouseArea.qml

@@ -19,15 +19,7 @@ Item {
       _mouseArea = builder.createObject()
     }
 
-    _mouseArea.parent = (function () {
-      var root = item
-
-      while (root.parent != null) {
-        root = root.parent
-      }
-
-      return root
-    })()
+    _mouseArea.parent = Utils.getTopParent(item)
   }
 
   function _deleteMouseArea () {

tests/ui/modules/Common/Popup/DropDownMenu.qml

@@ -2,17 +2,26 @@ import QtQuick 2.7
 
 import Common 1.0
 import Common.Styles 1.0
+import Utils 1.0
 
 // ===================================================================
 // Low component to display a list/menu in a popup.
 // ===================================================================
 
 Rectangle {
-  default property alias content: content.data
-  property int entryHeight
-  property int maxMenuHeight
+  property bool drawOnRoot: false
+  property int entryHeight // Only with a ListView child.
+  property int maxMenuHeight // Only with a ListView child.
+  property var relativeTo
+
+  default property alias _content: content.data
 
   function show () {
+    if (drawOnRoot) {
+      this.x = relativeTo.mapToItem(null, relativeTo.width, 0).x
+      this.y = relativeTo.mapToItem(null, relativeTo.width, 0).y
+    }
+
     visible = true
   }
 
@@ -20,16 +29,28 @@ Rectangle {
     visible = false
   }
 
-  // Ugly. Just ugly.
-  // `model` is a reference on a unknown component!
-  // See usage with SearchBox.
-  implicitHeight: {
+  function _computeHeight () {
+    var model = _content[0].model
+    if (model == null) {
+      return content.height
+    }
+
     var height = model.count * entryHeight
-    return height > maxMenuHeight ? maxMenuHeight : height
+    return (maxMenuHeight !== undefined && height > maxMenuHeight)
+      ? maxMenuHeight
+      : height
   }
+
+  implicitHeight: _computeHeight()
   visible: false
   z: Constants.zPopup
 
+  Component.onCompleted: {
+    if (drawOnRoot) {
+      parent = Utils.getTopParent(this)
+    }
+  }
+
   Rectangle {
     id: content
 

tests/ui/modules/Common/Styles/PanedStyle.qml

@@ -9,7 +9,7 @@ QtObject {
   property int transitionDuration: 200
 
   property QtObject handle: QtObject {
-    property int width: 10
+    property int width: 5
 
     property QtObject color: QtObject {
       property color hovered: Colors.h

tests/ui/modules/Common/View/ScrollableListView.qml

@@ -6,8 +6,12 @@ import Common 1.0
 // ===================================================================
 
 ListView {
-  ScrollBar.vertical: ForceScrollBar {}
+  ScrollBar.vertical: ForceScrollBar {
+    id: scrollBar
+  }
+
   boundsBehavior: Flickable.StopAtBounds
   clip: true
+  contentWidth: width - scrollBar.width
   spacing: 0
 }

tests/ui/modules/Linphone/Call/CallControls.qml

@@ -0,0 +1,66 @@
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.0
+
+import Linphone 1.0
+import Common 1.0
+
+RowLayout {
+  implicitHeight: contact.height
+  spacing: 1
+
+  Rectangle {
+    Layout.fillWidth: true
+    color: '#434343'
+    implicitHeight: contact.height
+
+    Contact {
+      id: contact
+
+      anchors.fill: parent
+      presenceLevel: Presence.Green
+      sipAddress: 'math.hart@sip-linphone.org'
+      sipAddressColor: '#FFFFFF'
+      username: 'Mathilda Hart'
+      usernameColor: '#FFFFFF'
+    }
+  }
+
+  Rectangle {
+    id: button
+
+    Layout.preferredHeight: contact.height
+    Layout.preferredWidth: 42
+    color: '#434343'
+
+    Text {
+      anchors.centerIn: parent
+      color: '#FFFFFF'
+      text: '...'
+    }
+
+    MouseArea {
+      anchors.fill: parent
+      hoverEnabled: true
+
+      onClicked: {
+        menu.show()
+      }
+    }
+  }
+
+  DropDownMenu {
+    drawOnRoot: true
+    id: menu
+    entryHeight: 22
+    height: 100
+    width: 120
+    relativeTo: button
+    Keys.onEscapePressed: hide()
+
+    Rectangle {
+      color: 'red'
+      anchors.fill: parent
+    }
+  }
+}

tests/ui/modules/Linphone/Chat/Message.qml

@@ -5,9 +5,10 @@ import QtQuick 2.7
 Item {
   id: container
 
-  default property alias content: content.data
   property alias backgroundColor: rectangle.color
 
+  default property alias _content: content.data
+
   implicitHeight: text.contentHeight + text.padding * 2
 
   Rectangle {

tests/ui/modules/Linphone/Chat/OutgoingMessage.qml

@@ -1,26 +1,14 @@
-import QtQuick 2.7
-
 import Common 1.0
 import Linphone 1.0
 
-Item {
-  implicitHeight: message.height
-  width: parent.width - 16
+Message {
+  id: message
 
-  Message {
-    id: message
+  backgroundColor: '#E4E4E4'
 
-    anchors {
-      left: parent.left
-      right: parent.right
-    }
-
-    backgroundColor: '#E4E4E4'
-
-    // TODO: Success and re-send icon.
-    Icon {
-      iconSize: 16
-      icon: 'valid'
-    }
+  // TODO: Success and re-send icon.
+  Icon {
+    iconSize: 16
+    icon: 'valid'
   }
 }

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

@@ -12,7 +12,9 @@ Item {
   property alias image: avatar.image
   property alias presenceLevel: avatar.presenceLevel
   property alias sipAddress: description.sipAddress
+  property alias sipAddressColor: description.sipAddressColor
   property alias username: avatar.username
+  property alias usernameColor: description.usernameColor
 
   height: ContactStyle.height
 

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

@@ -7,6 +7,8 @@ import Linphone.Styles 1.0
 Column {
   property alias sipAddress: sipAddress.text
   property alias username: username.text
+  property color sipAddressColor: ContactDescriptionStyle.sipAddress.color
+  property color usernameColor: ContactDescriptionStyle.username.color
   property int horizontalTextAlignment
 
   // Username.
@@ -14,7 +16,8 @@ Column {
     id: username
 
     clip: true
-    color: ContactDescriptionStyle.username.color
+    color: usernameColor
+    elide: Text.ElideRight
     font.bold: true
     font.pointSize: ContactDescriptionStyle.username.fontSize
     height: parent.height / 2
@@ -27,8 +30,8 @@ Column {
   Text {
     id: sipAddress
 
-    clip: true
-    color: ContactDescriptionStyle.sipAddress.color
+    color: sipAddressColor
+    elide: Text.ElideRight
     font.pointSize: ContactDescriptionStyle.sipAddress.fontSize
     height: parent.height / 2
     horizontalAlignment: horizontalTextAlignment

tests/ui/modules/Linphone/qmldir

@@ -6,6 +6,9 @@ module Linphone
 
 # Components ---------------------------------------------------------
 
+# Call
+CallControls         1.0 Call/CallControls.qml
+
 # Chat
 Chat                 1.0 Chat/Chat.qml
 

tests/ui/scripts/Utils/utils.js

@@ -106,6 +106,19 @@ function clearTimeout (timer) {
 
 // -------------------------------------------------------------------
 
+// Returns the top (root) parent of one component.
+function getTopParent (component) {
+  var parent = component.parent
+
+  while (parent.parent != null) {
+    parent = parent.parent
+  }
+
+  return parent
+}
+
+// -------------------------------------------------------------------
+
 // Invoke a `cb` function with each value of the interval: `[0, n[`.
 // Return a mapped array created with the returned values of `cb`.
 function times (n, cb, context) {
@@ -144,7 +157,7 @@ function genRandomNumberBetweenIntervals (intervals) {
     return genRandomNumber(intervals[0][0], intervals[0][1])
   }
 
-  // Compute the number of values.
+  // Compute the intervals size.
   var size = 0
   intervals.forEach(function (interval) {
     size += interval[1] - interval[0]

tests/ui/views/Calls/Calls.qml

@@ -16,7 +16,7 @@ Window {
     anchors.fill: parent
     defaultChildAWidth: 250
     maximumLeftLimit: 300
-    minimumLeftLimit: 50
+    minimumLeftLimit: 150
 
     // Calls list.
     childA: ColumnLayout {
@@ -45,10 +45,95 @@ Window {
         }
       }
 
-      Rectangle {
+      ScrollableListView {
         Layout.fillWidth: true
         Layout.fillHeight: true
-        color: 'red'
+        spacing: 1
+        delegate: CallControls {
+          width: parent.width
+        }
+
+        model: ListModel {
+          ListElement {
+            $presence: 'do_not_disturb'
+            $sipAddress: 'charles.henri.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'disconnected'
+            $sipAddress: 'yesyes.nono.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'connected'
+            $sipAddress: 'nsa.sip.linphone.org'
+          }
+                    ListElement {
+            $presence: 'do_not_disturb'
+            $sipAddress: 'charles.henri.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'disconnected'
+            $sipAddress: 'yesyes.nono.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'connected'
+            $sipAddress: 'nsa.sip.linphone.org'
+          }          ListElement {
+            $presence: 'do_not_disturb'
+            $sipAddress: 'charles.henri.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'disconnected'
+            $sipAddress: 'yesyes.nono.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'connected'
+            $sipAddress: 'nsa.sip.linphone.org'
+          }          ListElement {
+            $presence: 'do_not_disturb'
+            $sipAddress: 'charles.henri.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'disconnected'
+            $sipAddress: 'yesyes.nono.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'connected'
+            $sipAddress: 'nsa.sip.linphone.org'
+          }          ListElement {
+            $presence: 'do_not_disturb'
+            $sipAddress: 'charles.henri.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'disconnected'
+            $sipAddress: 'yesyes.nono.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'connected'
+            $sipAddress: 'nsa.sip.linphone.org'
+          }          ListElement {
+            $presence: 'do_not_disturb'
+            $sipAddress: 'charles.henri.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'disconnected'
+            $sipAddress: 'yesyes.nono.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'connected'
+            $sipAddress: 'nsa.sip.linphone.org'
+          }          ListElement {
+            $presence: 'do_not_disturb'
+            $sipAddress: 'charles.henri.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'disconnected'
+            $sipAddress: 'yesyes.nono.sip.linphone.org'
+          }
+          ListElement {
+            $presence: 'connected'
+            $sipAddress: 'nsa.sip.linphone.org'
+          }
+        }
       }
     }
 

tests/ui/views/Calls/StartingCall.qml

@@ -5,12 +5,13 @@ import Common 1.0
 import Linphone 1.0
 
 Rectangle {
-  default property alias actionArea: actionArea.data
   property alias callType: callType.text
   property alias sipAddress: contactDescription.sipAddress
   property alias username: contactDescription.username
   property alias avatarImage: image.source
 
+  default property alias _actionArea: actionArea.data
+
   color: '#EAEAEA'
 
   ColumnLayout {