refactoring (in progress)

tests/assets/images/delete_hovered.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="17px" viewBox="0 0 13 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
+    <title>delete_over</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="delete_over" stroke="#4B5964">
+            <path d="M6.52151164,16.5 L7.63225472,16.5 C10.0232133,16.5 10.4503886,14.2657143 10.4503886,14.2657143 L12.5,2.82411429 L0.5,2.82411429 L2.54982984,14.2657143 C2.54982984,14.2657143 2.9774419,16.5 5.36840046,16.5 L6.52151164,16.5 L6.52151164,16.5 Z M5.11222633,5.68445714 L5.11222633,16.5 L5.11222633,5.68445714 Z M7.88799207,5.68445714 L7.88799207,16.5 L7.88799207,5.68445714 Z M4.04472492,0.5 L8.95593026,0.5 L4.04472492,0.5 Z"></path>
+        </g>
+    </g>
+</svg>

tests/assets/images/delete_normal.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="17px" viewBox="0 0 13 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
+    <title>delete_default</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="delete_default" stroke="#96A6B1">
+            <path d="M6.52151164,16.5 L7.63225472,16.5 C10.0232133,16.5 10.4503886,14.2657143 10.4503886,14.2657143 L12.5,2.82411429 L0.5,2.82411429 L2.54982984,14.2657143 C2.54982984,14.2657143 2.9774419,16.5 5.36840046,16.5 L6.52151164,16.5 L6.52151164,16.5 Z M5.11222633,5.68445714 L5.11222633,16.5 L5.11222633,5.68445714 Z M7.88799207,5.68445714 L7.88799207,16.5 L7.88799207,5.68445714 Z M4.04472492,0.5 L8.95593026,0.5 L4.04472492,0.5 Z"></path>
+        </g>
+    </g>
+</svg>

tests/assets/images/delete_pressed.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="17px" viewBox="0 0 13 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
+    <title>delete_clic</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="delete_clic" stroke="#FF5E00">
+            <path d="M6.52151164,16.5 L7.63225472,16.5 C10.0232133,16.5 10.4503886,14.2657143 10.4503886,14.2657143 L12.5,2.82411429 L0.5,2.82411429 L2.54982984,14.2657143 C2.54982984,14.2657143 2.9774419,16.5 5.36840046,16.5 L6.52151164,16.5 L6.52151164,16.5 Z M5.11222633,5.68445714 L5.11222633,16.5 L5.11222633,5.68445714 Z M7.88799207,5.68445714 L7.88799207,16.5 L7.88799207,5.68445714 Z M4.04472492,0.5 L8.95593026,0.5 L4.04472492,0.5 Z"></path>
+        </g>
+    </g>
+</svg>

tests/assets/images/filter.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
+    <title>filter</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="filter" stroke-width="2" stroke="#CBCBCB">
+            <polygon points="1 1 13.9458114 1 8.94999981 8.51479915 8.94999981 14 6 11.8858351 6 8.51479915"></polygon>
+        </g>
+    </g>
+</svg>

tests/assets/old_images/led_green.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
-    <title>led_connected</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-7038.000000, -1852.000000)">
-            <g id="led_connected" sketch:type="MSLayerGroup" transform="translate(7010.000000, 1825.000000)">
-                <rect id="Rectangle-232-Copy-8" fill-opacity="0" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="90" height="90"></rect>
-                <g id="led_connected-copy" transform="translate(30.000000, 30.000000)" sketch:type="MSShapeGroup">
-                    <path d="M29.6572727,14.9745455 C29.6572727,23.0081818 23.1445455,29.52 15.1109091,29.52 C7.07727273,29.52 0.566363636,23.0081818 0.566363636,14.9745455 C0.566363636,6.94181818 7.07727273,0.429090909 15.1109091,0.429090909 C23.1445455,0.429090909 29.6572727,6.94181818 29.6572727,14.9745455 L29.6572727,14.9745455 Z" id="Fill-1" fill="#96C11F"></path>
-                    <path d="M29.6572727,14.9745455 C29.6572727,23.0081818 23.1445455,29.52 15.1109091,29.52 C7.07727273,29.52 0.566363636,23.0081818 0.566363636,14.9745455 C0.566363636,6.94181818 7.07727273,0.429090909 15.1109091,0.429090909 C23.1445455,0.429090909 29.6572727,6.94181818 29.6572727,14.9745455 L29.6572727,14.9745455 Z" id="Stroke-2" stroke="#FFFFFF" stroke-width="5"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

tests/assets/old_images/led_orange.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
-    <title>led_inprogress</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-7038.000000, -2116.000000)">
-            <g id="led_inprogress" sketch:type="MSLayerGroup" transform="translate(7010.000000, 2089.000000)">
-                <rect id="Rectangle-232-Copy-6" fill-opacity="0" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="90" height="90"></rect>
-                <g id="led_inprogress-copy" transform="translate(30.000000, 30.000000)" sketch:type="MSShapeGroup">
-                    <path d="M29.6572727,14.9745455 C29.6572727,23.0081818 23.1445455,29.52 15.1109091,29.52 C7.07727273,29.52 0.566363636,23.0081818 0.566363636,14.9745455 C0.566363636,6.94181818 7.07727273,0.429090909 15.1109091,0.429090909 C23.1445455,0.429090909 29.6572727,6.94181818 29.6572727,14.9745455 L29.6572727,14.9745455 Z" id="Fill-1" fill="#FFA645"></path>
-                    <path d="M29.6572727,14.9745455 C29.6572727,23.0081818 23.1445455,29.52 15.1109091,29.52 C7.07727273,29.52 0.566363636,23.0081818 0.566363636,14.9745455 C0.566363636,6.94181818 7.07727273,0.429090909 15.1109091,0.429090909 C23.1445455,0.429090909 29.6572727,6.94181818 29.6572727,14.9745455 L29.6572727,14.9745455 Z" id="Stroke-2" stroke="#FFFFFF" stroke-width="5"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

tests/assets/old_images/led_red.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
-    <title>led_error</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-7038.000000, -1993.000000)">
-            <g id="led_error" sketch:type="MSLayerGroup" transform="translate(7010.000000, 1966.000000)">
-                <rect id="Rectangle-232-Copy-7" fill-opacity="0" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="90" height="90"></rect>
-                <g id="led_error-copy" transform="translate(30.000000, 30.000000)" sketch:type="MSShapeGroup">
-                    <path d="M29.6572727,14.9745455 C29.6572727,23.0081818 23.1445455,29.52 15.1109091,29.52 C7.07727273,29.52 0.566363636,23.0081818 0.566363636,14.9745455 C0.566363636,6.94181818 7.07727273,0.429090909 15.1109091,0.429090909 C23.1445455,0.429090909 29.6572727,6.94181818 29.6572727,14.9745455 L29.6572727,14.9745455 Z" id="Fill-1" fill="#FF0000"></path>
-                    <path d="M29.6572727,14.9745455 C29.6572727,23.0081818 23.1445455,29.52 15.1109091,29.52 C7.07727273,29.52 0.566363636,23.0081818 0.566363636,14.9745455 C0.566363636,6.94181818 7.07727273,0.429090909 15.1109091,0.429090909 C23.1445455,0.429090909 29.6572727,6.94181818 29.6572727,14.9745455 L29.6572727,14.9745455 Z" id="Stroke-2" stroke="#FFFFFF" stroke-width="5"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

tests/assets/old_images/led_white.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
-    <title>led_disconnected</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-7038.000000, -2235.000000)">
-            <g id="led_disconnected" sketch:type="MSLayerGroup" transform="translate(7010.000000, 2208.000000)">
-                <rect id="Rectangle-232-Copy-5" fill-opacity="0" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="90" height="90"></rect>
-                <g id="led_disconnected-copy" transform="translate(30.000000, 30.000000)" sketch:type="MSShapeGroup">
-                    <path d="M29.6572727,14.9745455 C29.6572727,23.0081818 23.1445455,29.52 15.1109091,29.52 C7.07727273,29.52 0.566363636,23.0081818 0.566363636,14.9745455 C0.566363636,6.94181818 7.07727273,0.429090909 15.1109091,0.429090909 C23.1445455,0.429090909 29.6572727,6.94181818 29.6572727,14.9745455 L29.6572727,14.9745455 Z" id="Fill-1" fill="#E1E1E1"></path>
-                    <path d="M29.6572727,14.9745455 C29.6572727,23.0081818 23.1445455,29.52 15.1109091,29.52 C7.07727273,29.52 0.566363636,23.0081818 0.566363636,14.9745455 C0.566363636,6.94181818 7.07727273,0.429090909 15.1109091,0.429090909 C23.1445455,0.429090909 29.6572727,6.94181818 29.6572727,14.9745455 L29.6572727,14.9745455 Z" id="Stroke-2" stroke="#FFFFFF" stroke-width="5"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

tests/resources.qrc

@@ -5,6 +5,9 @@
     <file>assets/images/call_hovered.svg</file>
     <file>assets/images/call_normal.svg</file>
     <file>assets/images/call_pressed.svg</file>
+    <file>assets/images/chat_hovered.svg</file>
+    <file>assets/images/chat_normal.svg</file>
+    <file>assets/images/chat_pressed.svg</file>
     <file>assets/images/chevron_green.svg</file>
     <file>assets/images/chevron_orange.svg</file>
     <file>assets/images/chevron_red.svg</file>
@@ -12,6 +15,10 @@
     <file>assets/images/collapse.svg</file>
     <file>assets/images/contact_normal.svg</file>
     <file>assets/images/contact_selected.svg</file>
+    <file>assets/images/delete_hovered.svg</file>
+    <file>assets/images/delete_normal.svg</file>
+    <file>assets/images/delete_pressed.svg</file>
+    <file>assets/images/filter.svg</file>
     <file>assets/images/history.svg</file>
     <file>assets/images/home_normal.svg</file>
     <file>assets/images/home_selected.svg</file>
@@ -39,10 +46,6 @@
     <file>assets/old_images/history.svg</file>
     <file>assets/old_images/home.svg</file>
     <file>assets/old_images/incoming_call.svg</file>
-    <file>assets/old_images/led_green.svg</file>
-    <file>assets/old_images/led_orange.svg</file>
-    <file>assets/old_images/led_red.svg</file>
-    <file>assets/old_images/led_white.svg</file>
     <file>assets/old_images/lost_incoming_call.svg</file>
     <file>assets/old_images/lost_outgoing_call.svg</file>
     <file>assets/old_images/micro.svg</file>
@@ -52,9 +55,6 @@
     <file>assets/ressources_svg/avatar_L.svg</file>
     <file>assets/ressources_svg/avatar_s.svg</file>
     <file>assets/ressources_svg/avatar_xs.svg</file>
-    <file>assets/ressources_svg/chat_clic.svg</file>
-    <file>assets/ressources_svg/chat_default.svg</file>
-    <file>assets/ressources_svg/chat_over.svg</file>
     <file>ui/modules/Common/Animations/CaterpillarAnimation.qml</file>
     <file>ui/modules/Common/Borders.qml</file>
     <file>ui/modules/Common/Collapse.qml</file>
@@ -74,6 +74,7 @@
     <file>ui/modules/Common/Form/SmallButton.qml</file>
     <file>ui/modules/Common/Form/TextButtonA.qml</file>
     <file>ui/modules/Common/Form/TextButtonB.qml</file>
+    <file>ui/modules/Common/Form/TextField.qml</file>
     <file>ui/modules/Common/Form/TransparentComboBox.qml</file>
     <file>ui/modules/Common/Image/Icon.qml</file>
     <file>ui/modules/Common/Image/RoundedImage.qml</file>
@@ -102,6 +103,7 @@
     <file>ui/modules/Common/Styles/Form/SmallButtonStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/TextButtonAStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/TextButtonBStyle.qml</file>
+    <file>ui/modules/Common/Styles/Form/TextFieldStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/TransparentComboBoxStyle.qml</file>
     <file>ui/modules/Common/Styles/Menu/ActionMenuStyle.qml</file>
     <file>ui/modules/Common/Styles/Menu/MenuStyle.qml</file>
@@ -144,6 +146,7 @@
     <file>ui/views/App/ManageAccounts.qml</file>
     <file>ui/views/App/NewCall.qml</file>
     <file>ui/views/App/qmldir</file>
+    <file>ui/views/App/Styles/MainWindow/ContactsStyle.qml</file>
     <file>ui/views/App/Styles/MainWindow/MainWindowStyle.qml</file>
     <file>ui/views/App/Styles/qmldir</file>
   </qresource>

tests/ui/modules/Common/Collapse.qml

@@ -32,7 +32,6 @@ Item {
     id: button
 
     anchors.centerIn: parent
-    background: CollapseStyle.background
     icon: 'collapse'
     iconSize: CollapseStyle.iconSize
     useStates: false

tests/ui/modules/Common/Colors.qml

@@ -23,9 +23,7 @@ QtObject {
 
   property color r: '#8F8F8F'
 
-  property color s: '#D64D00'
 
-  property color t: '#FF8600'
 
   // -----------------------------------------------------------------
   // OK.
@@ -41,6 +39,8 @@ QtObject {
   property color j75: '#BF4B5964'
   property color k:   '#FFFFFF'
   property color k50: '#32FFFFFF'
+  property color s:   '#D64D00'
+  property color t:   '#FF8600'
   property color u:   '#B1B1B1'
   property color v:   '#E2E2E2'
 }

tests/ui/modules/Common/Form/TextField.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0 as Controls
+
+import Common 1.0
+import Common.Styles 1.0
+
+// ===================================================================
+
+Controls.TextField {
+  property string icon
+
+  background: Rectangle {
+    border {
+      color: TextFieldStyle.background.border.color
+      width: TextFieldStyle.background.border.width
+    }
+    color: TextFieldStyle.background.color
+    implicitHeight: TextFieldStyle.background.height
+
+    radius: TextFieldStyle.background.radius
+  }
+
+  color: TextFieldStyle.text.color
+  font.pointSize: TextFieldStyle.text.fontSize
+
+  Icon {
+    id: icon
+
+    anchors {
+      right: parent.right
+      rightMargin: parent.rightPadding
+      verticalCenter: parent.verticalCenter
+    }
+
+    iconSize: parent.contentHeight
+    visible: !parent.text
+  }
+}

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

@@ -17,4 +17,7 @@ Image {
   source: icon
     ? Constants.imagesPath + icon + Constants.imagesFormat
     : ''
+
+  // Warning: Perfomance cost.
+  mipmap: true
 }

tests/ui/modules/Common/SearchBox.qml

@@ -1,6 +1,6 @@
 import QtQuick 2.7
-import QtQuick.Controls 2.0
 
+import Common 1.0
 import Common.Styles 1.0
 import Utils 1.0
 
@@ -68,27 +68,13 @@ Item {
     TextField {
       id: searchField
 
-      background: SearchBoxStyle.searchFieldBackground
+      icon: 'search'
-      color: SearchBoxStyle.text.color
-      font.pointSize: SearchBoxStyle.text.fontSize
       width: parent.width
 
       Keys.onEscapePressed: searchBox.hideMenu()
 
       onActiveFocusChanged: activeFocus && searchBox.showMenu()
       onTextChanged: _filter()
-
-      Icon {
-        anchors {
-          right: parent.right
-          rightMargin: parent.rightPadding
-          verticalCenter: parent.verticalCenter
-        }
-
-        icon: 'search'
-        iconSize: parent.contentHeight
-        visible: !parent.text
-      }
     }
 
     // Wrap the search box menu in a window.

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

@@ -6,10 +6,4 @@ import QtQuick 2.7
 QtObject {
   property int animationDuration: 200
   property int iconSize: 14
-
-  property Rectangle background: Rectangle {
-    // Do not use `Colors` singleton.
-    // Collapse uses an icon without background color.
-    color: 'transparent'
-  }
 }

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

@@ -8,10 +8,10 @@ import Common 1.0
 QtObject {
   property color backgroundColor: Colors.g20
 
-  property Rectangle contentItem: Rectangle {
+  property QtObject contentItem: QtObject {
-    implicitHeight: 100
+    property int implicitHeight: 100
-    implicitWidth: 8
+    property int implicitWidth: 8
-    radius: 10
+    property int radius: 10
   }
 
   property QtObject color: QtObject {

tests/ui/modules/Common/Styles/Form/TextButtonBStyle.qml

@@ -7,14 +7,14 @@ import Common 1.0
 
 QtObject {
   property QtObject backgroundColor: QtObject {
-    property color hovered: Colors.p
+    property color hovered: Colors.s
-    property color normal: Colors.m
+    property color normal: Colors.i
-    property color pressed: Colors.i
+    property color pressed: Colors.t
   }
 
   property QtObject textColor: QtObject {
-    property color hovered: Colors.d
+    property color hovered: Colors.k
-    property color normal: Colors.d
+    property color normal: Colors.k
     property color pressed: Colors.k
   }
 }

tests/ui/modules/Common/Styles/Form/TextFieldStyle.qml

@@ -0,0 +1,24 @@
+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// ===================================================================
+
+QtObject {
+  property QtObject background: QtObject {
+    property color color: Colors.k
+    property int height: 36
+    property int radius: 4
+
+    property QtObject border: QtObject {
+      property color color: '#CBCBCB'
+      property int width: 1
+    }
+  }
+
+  property QtObject text: QtObject {
+    property color color: Colors.d
+    property int fontSize: 10
+  }
+}

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

@@ -7,20 +7,4 @@ import Common 1.0
 
 QtObject {
   property color shadowColor: Colors.f
-
-  property Rectangle searchFieldBackground: Rectangle {
-    implicitHeight: 40
-
-    border {
-      color: '#CBCBCB'
-      width: 1
-    }
-
-    radius: 4
-  }
-
-  property QtObject text: QtObject {
-    property color color: Colors.d
-    property int fontSize: 11
-  }
 }

tests/ui/modules/Common/Styles/qmldir

@@ -22,6 +22,7 @@ singleton ListFormStyle             1.0 Form/ListFormStyle.qml
 singleton SmallButtonStyle          1.0 Form/SmallButtonStyle.qml
 singleton TextButtonAStyle          1.0 Form/TextButtonAStyle.qml
 singleton TextButtonBStyle          1.0 Form/TextButtonBStyle.qml
+singleton TextFieldStyle            1.0 Form/TextFieldStyle.qml
 singleton TransparentComboBoxStyle  1.0 Form/TransparentComboBoxStyle.qml
 
 singleton ActionMenuStyle           1.0 Menu/ActionMenuStyle.qml

tests/ui/modules/Common/qmldir

@@ -39,6 +39,7 @@ LightButton          1.0 Form/LightButton.qml
 ListForm             1.0 Form/ListForm.qml
 TextButtonA          1.0 Form/TextButtonA.qml
 TextButtonB          1.0 Form/TextButtonB.qml
+TextField            1.0 Form/TextField.qml
 TransparentComboBox  1.0 Form/TransparentComboBox.qml
 
 # Image

tests/ui/modules/Linphone/PresenceLevel.qml

@@ -11,7 +11,7 @@ Item {
   property string icon: 'led'
 
   Icon {
-    anchors.fill:parent
+    anchors.fill: parent
 
     function _getColorString () {
       if (level === Presence.Green) {

tests/ui/modules/Linphone/Timeline.qml

@@ -7,8 +7,12 @@ import Linphone.Styles 1.0
 // ===================================================================
 
 ColumnLayout {
+  id: timeline
+
   property alias model: view.model
 
+  signal clicked (var contact)
+
   spacing: 0
 
   Rectangle {
@@ -48,13 +52,27 @@ ColumnLayout {
     Layout.fillHeight: true
     Layout.fillWidth: true
 
-    delegate: Contact {
+    delegate: Item {
-      color: index % 2 == 0
-        ? TimelineStyle.contact.colorA
-        : TimelineStyle.contact.colorB
-      contact: $contact
       height: TimelineStyle.contact.height
       width: parent.width
+
+      Contact {
+        anchors.fill: parent
+        color: index % 2 == 0
+          ? TimelineStyle.contact.colorA
+          : TimelineStyle.contact.colorB
+        contact: $contact
+      }
+
+      MouseArea {
+        anchors.fill: parent
+        cursorShape: containsMouse
+          ? Qt.PointingHandCursor
+          : Qt.ArrowCursor
+        hoverEnabled: true
+
+        onClicked: timeline.clicked($contact)
+      }
     }
   }
 }

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

@@ -1,36 +1,37 @@
 import QtQuick 2.7
-import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.3
 
 import Common 1.0
 import Linphone 1.0
 import Utils 1.0
 
-ColumnLayout {
+import App.Styles 1.0
-  spacing: 2
 
-  // Search bar.
+// ===================================================================
-  Item {
+
+ColumnLayout {
+  spacing: 0
+
+  // -----------------------------------------------------------------
+  // Search Bar & actions.
+  // -----------------------------------------------------------------
+
+  Rectangle {
     Layout.fillWidth: true
-    Layout.preferredHeight: 50
+    Layout.preferredHeight: ContactsStyle.bar.height
-    anchors.left: parent.left
+
-    anchors.leftMargin: 18
+    color: ContactsStyle.bar.color
-    anchors.right: parent.right
-    anchors.rightMargin: 18
 
     RowLayout {
-      anchors.verticalCenter: parent.verticalCenter
+      anchors.fill: parent
-      height: 30
+      anchors.leftMargin: ContactsStyle.bar.leftMargin
-      spacing: 20
+      anchors.rightMargin: ContactsStyle.bar.rightMargin
-      width: parent.width
+
+      spacing: 20
 
-      // TODO: Replace by top-level component.
       TextField {
         Layout.fillWidth: true
-        background: Rectangle {
+        icon: 'filter'
-          color: '#EAEAEA'
-          implicitHeight: 30
-        }
         placeholderText: qsTr('searchContactPlaceholder')
 
         onTextChanged: {
@@ -50,21 +51,23 @@ ColumnLayout {
 
       TextButtonB {
         text: qsTr('addContact')
-
         onClicked: window.setView('Contact')
       }
     }
   }
 
+  // -----------------------------------------------------------------
   // Contacts list.
+  // -----------------------------------------------------------------
+
   Rectangle {
     Layout.fillWidth: true
     Layout.fillHeight: true
-    color: '#F5F5F5'
+    color: ContactsStyle.backgroundColor
 
     ScrollableListView {
       anchors.fill: parent
-      spacing: 2
+      spacing: ContactsStyle.contacts.spacing
 
       model: ContactsListModel {
         id: contacts
@@ -138,16 +141,17 @@ ColumnLayout {
                 iconSize: parent.height
 
                 ActionButton {
-                  icon: 'cam'
+                  icon: 'video_call'
+                  onClicked: CallsWindow.show()
                 }
 
                 ActionButton {
                   icon: 'call'
+                  onClicked: CallsWindow.show()
                 }
 
                 ActionButton {
                   icon: 'chat'
-
                   onClicked: window.setView('Conversation')
                 }
               }

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

@@ -151,6 +151,8 @@ ApplicationWindow {
         Layout.fillHeight: true
         Layout.fillWidth: true
         model: ContactsListModel {} // Use History list.
+
+        onClicked: setView('Conversation')
       }
     }
 

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

@@ -0,0 +1,21 @@
+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// ===================================================================
+
+QtObject {
+  property color backgroundColor: '#FFFFFF'
+
+  property QtObject bar: QtObject {
+    property color color: '#F3F3F3'
+    property int height: 60
+    property int leftMargin: 18
+    property int rightMargin: 18
+  }
+
+  property QtObject contacts: QtObject {
+    property int spacing: 1
+  }
+}

tests/ui/views/App/Styles/qmldir

@@ -4,4 +4,5 @@ module App.Styles
 
 # Views styles -------------------------------------------------------
 
+singleton ContactsStyle   1.0 MainWindow/ContactsStyle.qml
 singleton MainWindowStyle 1.0 MainWindow/MainWindowStyle.qml