fix(app): refactoring

tests/imgs/delete.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="63px" height="82px" viewBox="0 0 63 82" 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>delete</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(-1451.000000, -7131.000000)">
+            <g id="delete" sketch:type="MSLayerGroup" transform="translate(1426.000000, 7115.000000)">
+                <g transform="translate(27.000000, 19.000000)" stroke="#444444" id="Delete-icon" stroke-width="5" sketch:type="MSShapeGroup" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M29.5231579,75.5263158 L34.8768421,75.5263158 C46.4010526,75.5263158 48.46,64.9796053 48.46,64.9796053 L58.3389474,10.9707368 L0.5,10.9707368 L10.38,64.9796053 C10.38,64.9796053 12.4410526,75.5263158 23.9652632,75.5263158 L29.5231579,75.5263158 L29.5231579,75.5263158 Z M22.7305263,24.4726842 L22.7305263,75.5263158 L22.7305263,24.4726842 Z M36.1094737,24.4726842 L36.1094737,75.5263158 L36.1094737,24.4726842 Z M17.5852632,9.09494702e-13 L41.2568421,9.09494702e-13 L17.5852632,9.09494702e-13 Z"></path>
+                </g>
+                <rect id="Rectangle-232-Copy-27" opacity="0" fill-opacity="0.7" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="120" height="120"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/resources.qrc

 <!DOCTYPE RCC><RCC version="1.0">
-<qresource prefix="/">
-  <!-- Languages. -->
-  <file>languages/en.qm</file>
+  <qresource prefix="/">
     <file>languages/fr.qm</file>
-
-  <!-- UI: Components. -->
+    <file>languages/en.qm</file>
+    <file>ui/components/scrollBar/ForceScrollBar.qml</file>
+    <file>ui/components/misc/MenuEntry.qml</file>
+    <file>ui/components/select/SelectContact.qml</file>
     <file>ui/components/collapse/Collapse.qml</file>
-  <file>ui/components/contact/Avatar.qml</file>
+    <file>ui/components/contact/Contact.qml</file>
     <file>ui/components/contact/ShortContactDescription.qml</file>
+    <file>ui/components/contact/Avatar.qml</file>
     <file>ui/components/dialog/DialogDescription.qml</file>
     <file>ui/components/dialog/DialogPlus.qml</file>
-  <file>ui/components/form/DarkButton.qml</file>
     <file>ui/components/form/CheckBoxText.qml</file>
     <file>ui/components/form/DropZone.qml</file>
-  <file>ui/components/form/ExclusiveButtons.qml</file>
     <file>ui/components/form/LightButton.qml</file>
-  <file>ui/components/form/SmallButton.qml</file>
-  <file>ui/components/form/ToolBarButton.qml</file>
+    <file>ui/components/form/ExclusiveButtons.qml</file>
+    <file>ui/components/form/ActionBar.qml</file>
+    <file>ui/components/form/ActionButton.qml</file>
     <file>ui/components/form/TransparentComboBox.qml</file>
-  <file>ui/components/misc/Contact.qml</file>
-  <file>ui/components/misc/MenuEntry.qml</file>
-  <file>ui/components/scrollBar/ForceScrollBar.qml</file>
-  <file>ui/components/select/SelectContact.qml</file>
-
-  <!-- UI: Views. -->
+    <file>ui/components/form/SmallButton.qml</file>
+    <file>ui/components/form/DarkButton.qml</file>
+    <file>ui/views/newCall.qml</file>
+    <file>ui/views/manageAccounts.qml</file>
+    <file>ui/views/mainWindow/mainWindow.qml</file>
     <file>ui/views/mainWindow/contacts.qml</file>
-  <file>ui/views/mainWindow/conversation.qml</file>
     <file>ui/views/mainWindow/home.qml</file>
-  <file>ui/views/mainWindow/mainWindow.qml</file>
-  <file>ui/views/manageAccounts.qml</file>
-  <file>ui/views/newCall.qml</file>
-
-  <!-- Images. -->
-  <file>imgs/avatar.svg</file>
-  <file>imgs/camera.svg</file>
-  <file>imgs/chat_attachment.svg</file>
-  <file>imgs/collapse.svg</file>
-  <file>imgs/led_absent.svg</file>
-  <file>imgs/led_connected.svg</file>
+    <file>ui/views/mainWindow/conversation.qml</file>
     <file>imgs/led_disconnected.svg</file>
-  <file>imgs/led_do_not_disturb.svg</file>
-  <file>imgs/phone.svg</file>
-  <file>imgs/start_conference.svg</file>
     <file>imgs/valid.svg</file>
-</qresource>
+    <file>imgs/led_do_not_disturb.svg</file>
+    <file>imgs/conference.svg</file>
+    <file>imgs/cam.svg</file>
+    <file>imgs/chat_attachment.svg</file>
+    <file>imgs/led_connected.svg</file>
+    <file>imgs/led_absent.svg</file>
+    <file>imgs/call.svg</file>
+    <file>imgs/collapse.svg</file>
+    <file>imgs/delete.svg</file>
+    <file>imgs/contact.svg</file>
+  </qresource>
 </RCC>

tests/ui/components/collapse/Collapse.qml

@@ -4,7 +4,6 @@ import QtQuick 2.7
 
 Item {
     property bool enabled: false
-    property alias image: backgroundImage.source
 
     signal collapsed (bool collapsed)
 
@@ -18,6 +17,7 @@ Item {
         anchors.fill: parent
         fillMode: Image.PreserveAspectFit
         id: backgroundImage
+        source: 'qrc:/imgs/collapse.svg'
 
         MouseArea {
             anchors.fill: parent

tests/ui/components/contact/Avatar.qml

 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import QtGraphicalEffects 1.0 // OpacityMask.
 
 // ===================================================================
 
@@ -44,8 +44,8 @@ Item {
     // Avatar.
     OpacityMask {
         anchors.fill: imageToFilter
-        source: imageToFilter
         maskSource: avatar
+        source: imageToFilter
     }
 
     // Presence.
@@ -55,13 +55,9 @@ Item {
         fillMode: Image.PreserveAspectFit
         height: parent.height/ 3
         id: presenceImage
-        source: (function () {
-            if (!presence) {
-                return ''
-            }
-
-            return 'qrc:/imgs/led_' + presence + '.svg'
-        })()
+        source: presence
+            ? 'qrc:/imgs/led_' + presence + '.svg'
+            : ''
         width: parent.width / 3
     }
 }

tests/ui/components/contact/Contact.qml

+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+import 'qrc:/ui/components/form'
+
+// ===================================================================
+
+Item {
+    property alias actions: actionBar.data
+    property alias image: avatar.image
+    property alias presence: avatar.presence
+    property alias sipAddress: contactDescription.sipAddress
+    property string username
+
+    id: contact
+    height: 50
+
+    RowLayout {
+        anchors.fill: parent
+        anchors.leftMargin: 14
+        anchors.rightMargin: 14
+        spacing: 14
+
+        Avatar {
+            Layout.preferredHeight: 32
+            Layout.preferredWidth: 32
+            id: avatar
+            username: contact.username
+        }
+
+        ShortContactDescription {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            id: contactDescription
+            username: contact.username
+        }
+
+        ActionBar {
+            Layout.preferredHeight: 32
+            id: actionBar
+        }
+    }
+}

tests/ui/components/contact/ShortContactDescription.qml

@@ -3,8 +3,8 @@ import QtQuick 2.7
 // ===================================================================
 
 Column {
-    property string sipAddress
-    property string username
+    property alias sipAddress: sipAddress.text
+    property alias username: username.text
 
     // Username.
     Text {
@@ -13,7 +13,7 @@ Column {
         font.pointSize: 11
         font.weight: Font.DemiBold
         height: parent.height / 2
-        text: username
+        id: username
         verticalAlignment: Text.AlignBottom
         width: parent.width
     }
@@ -23,7 +23,7 @@ Column {
         clip: true
         color: '#5A585B'
         height: parent.height / 2
-        text: sipAddress
+        id: sipAddress
         verticalAlignment: Text.AlignTop
         width: parent.width
     }

tests/ui/components/dialog/DialogDescription.qml

@@ -5,7 +5,6 @@ import QtQuick 2.7
 // ===================================================================
 
 Item {
-    property alias fontSize: description.font.pointSize
     property alias text: description.text
 
     height: text ? 90 : 25

tests/ui/components/dialog/DialogPlus.qml

@@ -7,7 +7,7 @@ import QtQuick.Window 2.2
 // ===================================================================
 
 Window {
-    default property alias contents: content.data // Required.
+    default property alias content: content.data // Required.
     property alias buttons: buttons.data // Required.
     property alias descriptionText: description.text // Optionnal.
 

tests/ui/components/form/ActionBar.qml

+import QtQuick 2.7
+
+// ===================================================================
+// Bar which can contains ActionButton.
+// ===================================================================
+
+Row {
+    property int iconSize
+    spacing: 8
+}

tests/ui/components/form/ToolBarButton.qml → tests/ui/components/form/ActionButton.qml

@@ -2,13 +2,21 @@ import QtQuick 2.7
 import QtQuick.Controls 2.0
 
 // ===================================================================
+// An animated small button with an image.
+// ===================================================================
+
+Button {
+    property int iconSize
+    property string icon
 
-ToolButton {
-    property alias image: backgroundImage.source
+    // Ugly hack, use current size, ActionBar size,
+    // or other parent height.
+    height: iconSize || parent.iconSize || parent.height
+    width: iconSize || parent.iconSize || parent.height
 
     Image {
         anchors.fill: parent
         fillMode: Image.PreserveAspectFit
-        id: backgroundImage
+        source: 'qrc:/imgs/' + parent.icon + '.svg'
     }
 }

tests/ui/components/form/CheckBoxText.qml

@@ -6,6 +6,14 @@ import QtQuick.Controls 2.0
 // ===================================================================
 
 CheckBox {
+    contentItem: Text {
+        color: checkBox.down ? '#FE5E00' : '#8E8E8E'
+        font: checkBox.font
+        horizontalAlignment: Text.AlignHCenter
+        leftPadding: checkBox.indicator.width + checkBox.spacing
+        text: checkBox.text
+        verticalAlignment: Text.AlignVCenter
+    }
     id: checkBox
     indicator: Rectangle {
         border.color: checkBox.down ? '#FE5E00' : '#8E8E8E'
@@ -25,12 +33,4 @@ CheckBox {
             y: 4
         }
     }
-    contentItem: Text {
-        color: checkBox.down ? '#FE5E00' : '#8E8E8E'
-        font: checkBox.font
-        horizontalAlignment: Text.AlignHCenter
-        leftPadding: checkBox.indicator.width + checkBox.spacing
-        text: checkBox.text
-        verticalAlignment: Text.AlignVCenter
-    }
 }

tests/ui/components/form/ExclusiveButtons.qml

@@ -12,14 +12,18 @@ Row {
 
     Repeater {
         model: texts
+
         SmallButton {
             anchors.verticalCenter: parent.verticalCenter
             backgroundColor: selectedButton === index
                 ? '#8E8E8E'
                 : (button.down
                    ? '#FE5E00'
+                   : (button.hovered
+                      ? '#C0C0C0'
                       : '#D1D1D1'
                      )
+                  )
             id: button
             text: modelData
 

tests/ui/components/form/LightButton.qml

 import QtQuick 2.7
-import QtQuick.Controls 2.0
 
 // ===================================================================
 

tests/ui/components/form/SmallButton.qml

@@ -7,7 +7,12 @@ Button {
     property alias backgroundColor: background.color
 
     background: Rectangle {
-        color: button.down ? '#FE5E00' : '#8E8E8E'
+        color: button.down
+            ? '#FE5E00'
+            : (button.hovered
+               ? '#C0C0C0'
+               : '#D1D1D1'
+              )
         id: background
         implicitHeight: 22
         radius: 10
@@ -20,5 +25,6 @@ Button {
         text: button.text
         verticalAlignment: Text.AlignVCenter
     }
+    hoverEnabled: true
     id: button
 }

tests/ui/components/form/TransparentComboBox.qml

@@ -14,8 +14,7 @@ ComboBox {
         background: Rectangle {
             color: delegate.down
                 ? '#FE5E00'
-                : (
-                    comboBox.currentIndex === index
+                : (comboBox.currentIndex === index
                    ? '#F0F0F0'
                    : '#FFFFFF'
                   )

tests/ui/components/misc/Contact.qml

-import QtQuick 2.7
-import QtQuick.Layouts 1.3
-
-Item {
-    property alias sipAddress: sipAddressText.text
-    property alias username: usernameText.text
-    property string avatar: 'qrc:/imgs/avatar.svg' // Default.
-
-    id: contact
-    height: 50
-
-    RowLayout {
-        anchors.fill: parent
-
-        // Avatar.
-        Image {
-            Layout.fillHeight: parent.height
-            Layout.margins: 5
-            Layout.preferredWidth: 50
-            fillMode: Image.PreserveAspectFit
-            id: avatarImage
-            source: contact.avatar
-        }
-
-        // Sip address & username.
-        Column {
-            Layout.fillHeight: parent.height
-            Layout.fillWidth: true
-
-            // Username.
-            Text {
-                clip: true
-                color: '#5A585B'
-                font.weight: Font.DemiBold
-                height: parent.height / 2
-                id: usernameText
-                verticalAlignment: Text.AlignBottom
-                width: parent.width
-            }
-
-            // Sip address.
-            Text {
-                clip: true
-                color: '#5A585B'
-                height: parent.height / 2
-                id: sipAddressText
-                verticalAlignment: Text.AlignTop
-                width: parent.width
-            }
-        }
-
-        // Actions.
-        Row {
-            Layout.fillHeight: parent.height
-            Layout.preferredWidth: 90
-            Layout.margins: 10
-
-            // Call.
-            Image {
-                fillMode: Image.PreserveAspectFit
-                height: parent.height
-                source: 'qrc:/imgs/phone.svg'
-                width: parent.width / 2
-            }
-
-            // Camera.
-            Image {
-                fillMode: Image.PreserveAspectFit
-                height: parent.height
-                source: 'qrc:/imgs/camera.svg'
-                width: parent.width / 2
-            }
-        }
-    }
-}

tests/ui/components/misc/MenuEntry.qml

@@ -13,6 +13,7 @@ Rectangle {
         spacing: 10
 
         Image {
+            fillMode: Image.PreserveAspectFit
             height: parent.height
             width: 30
         }
@@ -26,6 +27,7 @@ Rectangle {
         }
 
         Image {
+            fillMode: Image.PreserveAspectFit
             height: parent.height
         }
     }

tests/ui/components/select/SelectContact.qml

@@ -2,12 +2,13 @@ import QtGraphicalEffects 1.0
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 
-import 'qrc:/ui/components/misc'
+import 'qrc:/ui/components/contact'
+import 'qrc:/ui/components/form'
 
 // TODO: Contacts list.
 Item {
     function setPopupVisibility (visibility) {
-        popup.visible = popupShadow.visible = visibility
+        popup.visible = true
     }
 
     function filterContacts (text) {
@@ -92,9 +93,22 @@ Item {
             }
 
             delegate: Contact {
+                presence: $presence
                 sipAddress: $sipAddress
                 username: $username
                 width: parent.width
+
+                actions: [
+                    ActionButton {
+                        icon: 'call'
+                        onClicked: console.log('clicked')
+                    },
+
+                    ActionButton {
+                        icon: 'cam'
+                        onClicked: console.log('cam clicked')
+                    }
+                ]
             }
         }
     }

tests/ui/views/mainWindow/conversation.qml

@@ -48,40 +48,34 @@ ColumnLayout  {
                     height: parent.height * 0.40
                     width: parent.width
 
-                    Row {
-                        height: parent.height
-                        spacing: 10
+                    ActionBar {
+                        iconSize: 32
                         width: parent.width / 2
 
-                        Rectangle {
-                            color: 'blue'
-                            width: 32
-                            height: 32
+                        ActionButton {
+                            icon: 'cam'
+                            onClicked: console.log('clicked!!!')
                         }
 
-                        Rectangle {
-                            color: 'red'
-                            width: 32
-                            height: 32
+                        ActionButton {
+                            icon: 'call'
+                            onClicked: console.log('clicked!!!')
                         }
                     }
 
-                    Row {
-                        height: parent.height
+                    ActionBar {
+                        iconSize: 32
                         layoutDirection: Qt.RightToLeft
-                        spacing: 10
                         width: parent.width / 2
 
-                        Rectangle {
-                            color: 'green'
-                            width: 32
-                            height: 32
+                        ActionButton {
+                            icon: 'delete'
+                            onClicked: console.log('clicked!!!')
                         }
 
-                        Rectangle {
-                            color: 'orange'
-                            width: 32
-                            height: 32
+                        ActionButton {
+                            icon: 'contact'
+                            onClicked: console.log('clicked!!!')
                         }
                     }
                 }

tests/ui/views/mainWindow/mainWindow.qml

@@ -8,6 +8,24 @@ import 'qrc:/ui/components/form'
 import 'qrc:/ui/components/misc'
 
 ApplicationWindow {
+    function openWindow (name) {
+        var component = Qt.createComponent('qrc:/ui/views/' + name + '.qml');
+        if (component.status !== Component.Ready) {
+            console.debug('Window not ready.')
+            if(component.status === Component.Error) {
+                console.debug('Error:' + component.errorString())
+            }
+        } else {
+            component.createObject(mainWindow).show()
+        }
+    }
+
+    id: mainWindow
+    minimumHeight: 70
+    minimumWidth: 780
+    title: 'Linphone'
+    visible: true
+
     header: ToolBar {
         background: Rectangle {
             color: '#EAEAEA'
@@ -24,7 +42,6 @@ ApplicationWindow {
             Collapse {
                 Layout.preferredWidth: 25
                 Layout.fillHeight: parent.height
-                image: 'qrc:/imgs/collapse.svg'
                 onCollapsed: {
                     mainWindow.height = collapsed ? 500 : 70
                 }
@@ -39,18 +56,12 @@ ApplicationWindow {
             }
 
             // User actions.
-            ToolBarButton {
-                onClicked: {
-                    var component = Qt.createComponent('qrc:/ui/views/manageAccounts.qml');
-                    if (component.status !== Component.Ready) {
-                        console.debug('Window not ready.')
-                        if(component.status === Component.Error) {
-                            console.debug('Error:' + component.errorString())
-                        }
-                    } else {
-                        component.createObject(mainWindow).show()
-                    }
+            ActionButton {
+                onClicked: openWindow('manageAccounts')
             }
+
+            ActionButton {
+                onClicked: openWindow('newCall')
             }
 
             // Search.
@@ -68,18 +79,13 @@ ApplicationWindow {
             }
 
             // Start conference.
-            ToolBarButton {
-                Layout.fillHeight: parent.height
+            ActionButton {
                 Layout.preferredWidth: 32
-                image: 'qrc:/imgs/start_conference.svg'
+                Layout.preferredHeight: 32
+                icon: 'conference'
             }
         }
     }
-    id: mainWindow
-    minimumHeight: 70
-    minimumWidth: 780
-    title: 'Linphone'
-    visible: true
 
     RowLayout {
         anchors.fill: parent
@@ -123,7 +129,7 @@ ApplicationWindow {
         Loader {
             Layout.fillHeight: true
             Layout.fillWidth: true
-            source: 'qrc:/ui/views/mainWindow/conversation.qml'
+            source: 'qrc:/ui/views/mainWindow/contacts.qml'
         }
     }
 }

tests/ui/views/manageAccounts.qml

@@ -17,7 +17,6 @@ DialogPlus {
     }
 
     Item {
-        id: listViewContainer
         anchors.fill: parent
 
         ListView {