feat(ui/modules/Linphone/Contact/Avatar): uses the `RoundedImage` component

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

@@ -3,8 +3,11 @@ import QtQuick 2.7
 // ===================================================================
 
 Item {
+  id: item
+
   property alias source: image.source
-  property color colorMask: '#00000000'
+  property color backgroundColor: '#00000000'
+  property color foregroundColor: '#00000000'
   // vec4(0.812, 0.843, 0.866, 1.0) 0.9
 
   Item {
@@ -27,23 +30,25 @@ Item {
 
     layer {
       effect: ShaderEffect {
+        property color backgroundColor: item.backgroundColor
+        property color foregroundColor: item.foregroundColor
         property var image: imageContainer
-        property var color: colorMask
 
         fragmentShader: '
           uniform lowp sampler2D image;
           uniform lowp sampler2D mask;
-          uniform lowp vec4 color;
+          uniform lowp vec4 backgroundColor;
+          uniform lowp vec4 foregroundColor;
 
           uniform lowp float qt_Opacity;
           varying highp vec2 qt_TexCoord0;
 
           void main () {
             vec4 tex = texture2D(image, qt_TexCoord0);
+            vec4 interpolation = mix(backgroundColor, vec4(tex.rgb, 1.0), tex.a);
+            interpolation = mix(interpolation, vec4(foregroundColor.rgb, 1.0), foregroundColor.a);
 
-            gl_FragColor = mix(tex, vec4(color.rgb, 1.0), color.a) *
-              texture2D(mask, qt_TexCoord0) *
-              qt_Opacity;
+            gl_FragColor = interpolation * texture2D(mask, qt_TexCoord0) * qt_Opacity;
           }
         '
       }

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

 import QtQuick 2.7
 import QtGraphicalEffects 1.0
 
+import Common 1.0
 import Linphone 1.0
 import Linphone.Styles 1.0
 import Utils 1.0
@@ -8,12 +9,14 @@ import Utils 1.0
 // ===================================================================
 
 Item {
-  property alias image: imageToFilter.source
+  property alias image: roundedImage.source
   property alias presenceLevel: presenceLevel.level
   property string username
 
   property var _initialsRegex: /^\s*([^\s\.]+)(?:[\s\.]+([^\s\.]+))?/
 
+  // -----------------------------------------------------------------
+
   function _computeInitials () {
     var result = username.match(_initialsRegex)
 
@@ -29,16 +32,8 @@ Item {
     )
   }
 
-  // Image mask. (Circle)
-  Rectangle {
-    id: mask
-
-    anchors.fill: parent
-    color: AvatarStyle.mask.color
-    radius: AvatarStyle.mask.radius
-  }
+  // -----------------------------------------------------------------
 
-  // Initials.
   Text {
     anchors.centerIn: parent
     color: AvatarStyle.initials.color
@@ -55,24 +50,13 @@ Item {
     text: _computeInitials()
   }
 
-  Image {
-    anchors.fill: parent
-    id: imageToFilter
-    fillMode: Image.PreserveAspectFit
-
-    // Image must be invisible.
-    // The only visible image is the OpacityMask!
-    visible: false
-  }
+  RoundedImage {
+    id: roundedImage
 
-  // Avatar.
-  OpacityMask {
-    anchors.fill: imageToFilter
-    maskSource: mask
-    source: imageToFilter
+    anchors.fill: parent
+    backgroundColor: AvatarStyle.backgroundColor
   }
 
-  // Presence.
   PresenceLevel {
     id: presenceLevel
 

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

@@ -6,14 +6,11 @@ import Common 1.0
 // ===================================================================
 
 QtObject {
+  property color backgroundColor: Colors.r
+
   property QtObject initials: QtObject {
     property color color: Colors.k
     property int fontSize: 10
     property int ratio: 30
   }
-
-  property QtObject mask: QtObject {
-    property color color: Colors.r
-    property int radius: 500
-  }
 }