feat(Timeline): supports the selection of contact

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

@@ -27,7 +27,7 @@ Item {
       effect: ShaderEffect {
         property var image: imageContainer
 
-        fragmentShader: "
+        fragmentShader: '
           uniform lowp sampler2D image;
           uniform lowp sampler2D mask;
           uniform lowp float qt_Opacity;
@@ -39,7 +39,7 @@ Item {
               texture2D(mask, qt_TexCoord0).a *
               qt_Opacity;
           }
-        "
+        '
       }
 
       enabled: true

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

@@ -7,7 +7,7 @@ import Common 1.0
 
 QtObject {
   property QtObject sipAddress: QtObject {
-    property color color: Colors.d
+    property color color: Colors.w
     property int fontSize: 10
   }
 

tests/ui/modules/Linphone/Styles/TimelineStyle.qml

@@ -7,9 +7,27 @@ import Common 1.0
 
 QtObject {
   property QtObject contact: QtObject {
-    property color colorA: Colors.g10
-    property color colorB: Colors.a
     property int height: 60
+
+    property QtObject backgroundColor: QtObject {
+      property color a: Colors.g10
+      property color b: Colors.a
+      property color selected: Colors.i
+    }
+
+    property QtObject sipAddress: QtObject {
+      property QtObject color: QtObject {
+        property color normal: Colors.w
+        property color selected: Colors.k
+      }
+    }
+
+    property QtObject username: QtObject {
+      property QtObject color: QtObject {
+        property color normal: Colors.j
+        property color selected: Colors.k
+      }
+    }
   }
 
   property QtObject legend: QtObject {

tests/ui/modules/Linphone/Timeline.qml

@@ -13,6 +13,14 @@ ColumnLayout {
 
   signal clicked (var contact)
 
+  // -----------------------------------------------------------------
+
+  function resetSelectedItem () {
+    view.currentIndex = -1
+  }
+
+  // -----------------------------------------------------------------
+
   spacing: 0
 
   Rectangle {
@@ -51,6 +59,7 @@ ColumnLayout {
 
     Layout.fillHeight: true
     Layout.fillWidth: true
+    currentIndex: -1
 
     delegate: Item {
       height: TimelineStyle.contact.height
@@ -58,10 +67,20 @@ ColumnLayout {
 
       Contact {
         anchors.fill: parent
-        color: index % 2 == 0
+        color: view.currentIndex === index
-          ? TimelineStyle.contact.colorA
+          ? TimelineStyle.contact.backgroundColor.selected
-          : TimelineStyle.contact.colorB
+          : (
+            index % 2 == 0
+              ? TimelineStyle.contact.backgroundColor.a
+              : TimelineStyle.contact.backgroundColor.b
+          )
         contact: $contact
+        sipAddressColor: view.currentIndex === index
+          ? TimelineStyle.contact.sipAddress.color.selected
+          : TimelineStyle.contact.sipAddress.color.normal
+        usernameColor: view.currentIndex === index
+          ? TimelineStyle.contact.username.color.selected
+          : TimelineStyle.contact.username.color.normal
       }
 
       MouseArea {
@@ -71,7 +90,10 @@ ColumnLayout {
           : Qt.ArrowCursor
         hoverEnabled: true
 
-        onClicked: timeline.clicked($contact)
+        onClicked: {
+          view.currentIndex = index
+          timeline.clicked($contact)
+        }
       }
     }
   }

tests/ui/views/App/MainWindow/MainWindow.qml

@@ -138,6 +138,8 @@ ApplicationWindow {
         }]
 
         onEntrySelected: {
+          timeline.resetSelectedItem()
+
           if (entry === 0) {
             setView('Home')
           } else if (entry === 1) {
@@ -148,6 +150,8 @@ ApplicationWindow {
 
       // History.
       Timeline {
+        id: timeline
+
         Layout.fillHeight: true
         Layout.fillWidth: true
         model: ContactsListModel {} // Use History list.