feat(MainWindow/Conversation): use the final style

tests/assets/images/contact_edit_hovered.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="19px" viewBox="0 0 22 19" 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>contact_edit_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">
+        <g id="contact_edit_over" stroke="#4B5964">
+            <path d="M8.54029156,2.5 C10.850165,2.5 12.7226588,4.39098325 12.7226588,6.72356259 C12.7226588,7.83995271 12.2940348,8.85494372 11.5935908,9.61033703 C11.4952898,9.71653609 11.5340928,9.69793625 11.4252454,9.79333541 L11.5997595,9.91213435 C17.938579,12.6985097 16.3132304,17.3824682 16.3132304,17.3824682 C12.2309551,18.6900566 8.54685822,18.4888584 8.54685822,18.4888584 L8.45333302,18.4888584 C8.45333302,18.4886584 4.7688382,18.6900566 0.686761802,17.3824682 C0.686761802,17.3824682 -0.938586743,12.6985097 5.40043177,9.91213435 L5.57494581,9.79333541 C5.4660984,9.69793625 5.50490141,9.71653609 5.40660046,9.61033703 C4.70635541,8.85494372 4.27753243,7.83995271 4.27753243,6.72356259 C4.27753243,4.39098325 6.15002629,2.5 8.45989968,2.5 L8.54029156,2.5 L8.54029156,2.5 Z" stroke-linejoin="round"></path>
+            <path d="M15.75,3.5 L21.5833333,3.5"></path>
+            <path d="M15.75,6.5 L21.5833333,6.5"></path>
+            <path d="M15.75,0.5 L21.5833333,0.5"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/assets/images/contact_edit_normal.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="19px" viewBox="0 0 22 19" 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>contact_edit_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">
+        <g id="contact_edit_default">
+            <path d="M8.54029156,2.5 C10.850165,2.5 12.7226588,4.39098325 12.7226588,6.72356259 C12.7226588,7.83995271 12.2940348,8.85494372 11.5935908,9.61033703 C11.4952898,9.71653609 11.5340928,9.69793625 11.4252454,9.79333541 L11.5997595,9.91213435 C17.938579,12.6985097 16.3132304,17.3824682 16.3132304,17.3824682 C12.2309551,18.6900566 8.54685822,18.4888584 8.54685822,18.4888584 L8.45333302,18.4888584 C8.45333302,18.4886584 4.7688382,18.6900566 0.686761802,17.3824682 C0.686761802,17.3824682 -0.938586743,12.6985097 5.40043177,9.91213435 L5.57494581,9.79333541 C5.4660984,9.69793625 5.50490141,9.71653609 5.40660046,9.61033703 C4.70635541,8.85494372 4.27753243,7.83995271 4.27753243,6.72356259 C4.27753243,4.39098325 6.15002629,2.5 8.45989968,2.5 L8.54029156,2.5 L8.54029156,2.5 Z" stroke="#96A5B1" stroke-linejoin="round"></path>
+            <path d="M15.75,3.5 L21.5833333,3.5" stroke="#96A6B1"></path>
+            <path d="M15.75,6.5 L21.5833333,6.5" stroke="#96A6B1"></path>
+            <path d="M15.75,0.5 L21.5833333,0.5" stroke="#96A6B1"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/assets/images/contact_edit_pressed.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="19px" viewBox="0 0 22 19" 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>contact_edit_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">
+        <g id="contact_edit_clic" stroke="#FF5E00">
+            <path d="M8.54029156,2.5 C10.850165,2.5 12.7226588,4.39098325 12.7226588,6.72356259 C12.7226588,7.83995271 12.2940348,8.85494372 11.5935908,9.61033703 C11.4952898,9.71653609 11.5340928,9.69793625 11.4252454,9.79333541 L11.5997595,9.91213435 C17.938579,12.6985097 16.3132304,17.3824682 16.3132304,17.3824682 C12.2309551,18.6900566 8.54685822,18.4888584 8.54685822,18.4888584 L8.45333302,18.4888584 C8.45333302,18.4886584 4.7688382,18.6900566 0.686761802,17.3824682 C0.686761802,17.3824682 -0.938586743,12.6985097 5.40043177,9.91213435 L5.57494581,9.79333541 C5.4660984,9.69793625 5.50490141,9.71653609 5.40660046,9.61033703 C4.70635541,8.85494372 4.27753243,7.83995271 4.27753243,6.72356259 C4.27753243,4.39098325 6.15002629,2.5 8.45989968,2.5 L8.54029156,2.5 L8.54029156,2.5 Z" stroke-linejoin="round"></path>
+            <path d="M15.75,3.5 L21.5833333,3.5"></path>
+            <path d="M15.75,6.5 L21.5833333,6.5"></path>
+            <path d="M15.75,0.5 L21.5833333,0.5"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/resources.qrc

@@ -12,6 +12,9 @@
     <file>assets/images/chevron_red.svg</file>
     <file>assets/images/chevron_white.svg</file>
     <file>assets/images/collapse.svg</file>
+    <file>assets/images/contact_edit_hovered.svg</file>
+    <file>assets/images/contact_edit_normal.svg</file>
+    <file>assets/images/contact_edit_pressed.svg</file>
     <file>assets/images/contact_normal.svg</file>
     <file>assets/images/contact_selected.svg</file>
     <file>assets/images/delete_hovered.svg</file>
@@ -143,6 +146,7 @@
     <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/ConversationStyle.qml</file>
     <file>ui/views/App/Styles/MainWindow/MainWindowStyle.qml</file>
     <file>ui/views/App/Styles/qmldir</file>
   </qresource>

tests/ui/modules/Common/Borders.qml

@@ -6,7 +6,7 @@ import QtQuick 2.7
 // rectangle side.
 // ===================================================================
 
-Item {
+Rectangle {
   property var borderColor
   property var borderWidth
 
@@ -22,6 +22,8 @@ Item {
 
   default property alias _content: content.data
 
+  color: 'transparent'
+
   Rectangle {
     id: bottomBorder
 

tests/ui/modules/Common/Colors.qml

@@ -9,6 +9,7 @@ QtObject {
   property color o: '#232323' // TextButtonA Hovered.
 
   property color q: '#E6E6E6'
+  property color d:   '#5A585B'
 
   // -----------------------------------------------------------------
   // OK.
@@ -16,7 +17,6 @@ QtObject {
 
   property color b:   '#5E5E5F'
   property color c:   '#CBCBCB'
-  property color d:   '#5A585B'
   property color e:   '#F3F3F3'
   property color f:   '#E8E8E8'
   property color g:   '#6B7A86'

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

@@ -12,7 +12,7 @@ QtObject {
   }
 
   property QtObject username: QtObject {
-    property color color: Colors.d
+    property color color: Colors.j
     property int fontSize: 11
   }
 }

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

@@ -33,7 +33,7 @@ QtObject {
   property QtObject legend: QtObject {
     property color backgroundColor: Colors.u
     property color color: Colors.k
-    property int fontSize: 12
+    property int fontSize: 11
     property int height: 30
     property int iconSize: 10
     property int leftMargin: 17

tests/ui/modules/Linphone/Timeline.qml

@@ -11,7 +11,7 @@ ColumnLayout {
 
   property alias model: view.model
 
-  signal clicked (var contact)
+  signal contactSelected (var contact)
 
   // -----------------------------------------------------------------
 
@@ -92,7 +92,7 @@ ColumnLayout {
 
         onClicked: {
           view.currentIndex = index
-          timeline.clicked($contact)
+          timeline.contactSelected($contact)
         }
       }
     }

tests/ui/scripts/Utils/utils.js

@@ -106,6 +106,19 @@ function clearTimeout (timer) {
 
 // -------------------------------------------------------------------
 
+// Connect a signal to a function only for one call.
+function connectOnce (signal, cb) {
+  var func = function () {
+    signal.disconnect(func)
+    cb.apply(this, arguments)
+  }
+
+  signal.connect(func)
+  return func
+}
+
+// -------------------------------------------------------------------
+
 // Basic assert function.
 function assert (condition, message) {
   if (!condition) {

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

@@ -29,6 +29,7 @@ ColumnLayout {
     Utils.openConfirmDialog(window, {
       descriptionText: qsTr('removeContactDescription'),
       exitHandler: function (status) {
+        // TODO
         console.log('remove contact', status)
       },
       title: qsTr('removeContactTitle')

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

 import QtQuick 2.7
-import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.3
 
 import Common 1.0
 import Linphone 1.0
 
+import App.Styles 1.0
+
+// ===================================================================
+
 ColumnLayout  {
+  property var contact
+
   spacing: 0
 
+  // -----------------------------------------------------------------
   // Contact bar.
+  // -----------------------------------------------------------------
+
   Rectangle {
     Layout.fillWidth: true
-    Layout.preferredHeight: 102
-    color: '#D1D1D1'
+    Layout.preferredHeight: ConversationStyle.bar.height
+    color: ConversationStyle.bar.backgroundColor
 
     RowLayout {
-      anchors.left: parent.left
-      anchors.leftMargin: 40
-      anchors.right: parent.right
-      anchors.rightMargin: 40
-      anchors.verticalCenter: parent.verticalCenter
-      height: 80
-      spacing: 50
-      width: parent.width
+      anchors {
+        fill: parent
+        leftMargin: ConversationStyle.bar.leftMargin
+        rightMargin: ConversationStyle.bar.rightMargin
+      }
+      spacing: ConversationStyle.bar.spacing
 
       Avatar {
-        Layout.fillHeight: true
-        Layout.preferredWidth: 80
-        presenceLevel: Presence.Green // TODO: Use C++.
-        username: 'Cameron Andrews' // TODO: Use C++.
+        Layout.preferredHeight: ConversationStyle.bar.avatarSize
+        Layout.preferredWidth: ConversationStyle.bar.avatarSize
+        presenceLevel: contact.presenceLevel
+        username: contact.username
       }
 
-      Column {
+      ContactDescription {
         Layout.fillHeight: true
         Layout.fillWidth: true
+        sipAddress: contact.sipAddresses[0]
+        sipAddressColor: ConversationStyle.bar.description.sipAddressColor
+        username: contact.username
+        usernameColor: ConversationStyle.bar.description.usernameColor
+      }
 
-        // Contact description.
-        ContactDescription {
-          height: parent.height * 0.60
-          sipAddress: 'cam.andrews@sip.linphone.org' // TODO: Use C++.
-          username: 'Cameron Andrews' // TODO: Use C++.
-          width: parent.width
-        }
-
-        // Contact actions.
-        Row {
-          height: parent.height * 0.40
-          width: parent.width
+      Row {
+        Layout.fillHeight: true
+        spacing: ConversationStyle.bar.actions.spacing
 
-          ActionBar {
-            iconSize: 32
-            width: parent.width / 2
+        ActionBar {
+          anchors.verticalCenter: parent.verticalCenter
+          iconSize: ConversationStyle.bar.actions.call.iconSize
 
-            ActionButton {
-              icon: 'cam'
-              onClicked: console.log('clicked!!!')
-            }
+          ActionButton {
+            icon: 'video_call'
+            onClicked: CallsWindow.show()
+          }
 
-            ActionButton {
-              icon: 'call'
-              onClicked: console.log('clicked!!!')
-            }
+          ActionButton {
+            icon: 'call'
+            onClicked: CallsWindow.show()
           }
+        }
 
-          ActionBar {
-            iconSize: 32
-            layoutDirection: Qt.RightToLeft
-            width: parent.width / 2
+        ActionBar {
+          anchors.verticalCenter: parent.verticalCenter
 
-            ActionButton {
-              icon: 'delete'
-              onClicked: console.log('clicked!!!')
-            }
+          ActionButton {
+            icon: 'contact_edit'
+            iconSize: ConversationStyle.bar.actions.edit.contactIconSize
 
-            ActionButton {
-              icon: 'contact'
-              onClicked: window.setView('Contact')
-            }
+            onClicked: console.log('clicked!!!') // TODO.
+          }
+
+          ActionButton {
+            icon: 'delete'
+            iconSize: ConversationStyle.bar.actions.edit.deleteIconSize
+
+            onClicked: window.setView('Contact') // TODO.
           }
         }
       }
     }
   }
 
-  // Messages/Calls filter.
-  Rectangle {
+  // -----------------------------------------------------------------
+  // Messages/Calls filters.
+  // -----------------------------------------------------------------
+
+  Borders {
     Layout.fillWidth: true
-    Layout.preferredHeight: 40
-    color: '#C7C7C7'
-
-    Rectangle {
-      anchors.fill: parent
-      anchors.leftMargin: 1
-
-      ExclusiveButtons {
-        anchors.left: parent.left
-        anchors.leftMargin: 40
-        anchors.verticalCenter: parent.verticalCenter
-        texts: [
-          qsTr('displayCallsAndMessages'),
-          qsTr('displayCalls'),
-          qsTr('displayMessages')
-        ]
+    Layout.preferredHeight: ConversationStyle.filters.height
+    borderColor: ConversationStyle.filters.border.color
+    bottomWidth: ConversationStyle.filters.border.bottomWidth
+    color: ConversationStyle.filters.backgroundColor
+    topWidth: ConversationStyle.filters.border.topWidth
+
+    ExclusiveButtons {
+      anchors {
+        left: parent.left
+        leftMargin: ConversationStyle.filters.leftMargin
+        verticalCenter: parent.verticalCenter
       }
+      texts: [
+        qsTr('displayCallsAndMessages'),
+        qsTr('displayCalls'),
+        qsTr('displayMessages')
+      ]
     }
   }
 
-  Borders {
-    Layout.fillHeight: true
-    Layout.fillWidth: true
-    borderColor: '#C7C7C7'
-    leftWidth: 1
-    topWidth: 1
+  // -----------------------------------------------------------------
+  // Chat.
+  // -----------------------------------------------------------------
 
-    Chat {
-      anchors.fill: parent
-    }
+  Chat {
+    Layout.fillWidth: true
+    Layout.fillHeight: true
   }
 }

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

@@ -13,8 +13,8 @@ import App.Styles 1.0
 ApplicationWindow {
   id: window
 
-  function setView (view) {
-    contentLoader.source = view + '.qml'
+  function setView (view, props) {
+    contentLoader.setSource(view + '.qml', props || {})
   }
 
   // -----------------------------------------------------------------
@@ -158,9 +158,9 @@ ApplicationWindow {
         Layout.fillWidth: true
         model: ContactsListModel {} // Use History list.
 
-        onClicked: {
+        onContactSelected: {
           menu.resetSelectedEntry()
-          setView('Conversation')
+          setView('Conversation', { contact: contact })
         }
       }
     }

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

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// ===================================================================
+
+QtObject {
+  property QtObject bar: QtObject {
+    property color backgroundColor: Colors.e
+    property int avatarSize: 60
+    property int height: 80
+    property int leftMargin: 40
+    property int rightMargin: 30
+    property int spacing: 20
+
+    property QtObject actions: QtObject {
+      property int spacing: 40
+
+      property QtObject call: QtObject {
+        property int iconSize: 40
+      }
+
+      property QtObject edit: QtObject {
+        property int contactIconSize: 22
+        property int deleteIconSize: 17
+      }
+    }
+
+    property QtObject description: QtObject {
+      property color sipAddressColor: Colors.g
+      property color usernameColor: Colors.j
+    }
+  }
+
+  property QtObject filters: QtObject {
+    property color backgroundColor: Colors.k
+    property int height: 51
+    property int leftMargin: 40
+
+    property QtObject border: QtObject {
+      property color color: Colors.p
+      property int bottomWidth: 1
+      property int topWidth: 0
+    }
+  }
+}

tests/ui/views/App/Styles/qmldir

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