feat(home): splitted in tow areas

tests/languages/en.ts

@@ -9,11 +9,19 @@
     </message>
 </context>
 <context>
-    <name>mainWindow</name>
+    <name>home</name>
     <message>
         <source>mainSearchBarPlaceholder</source>
         <translation>Search contact, start call, start chat...</translation>
     </message>
+    <message>
+        <source>homeEntry</source>
+        <translation>Home</translation>
+    </message>
+    <message>
+        <source>contactsEntry</source>
+        <translation>Contacts</translation>
+    </message>
 </context>
 <context>
     <name>manageAccounts</name>

tests/languages/fr.ts

@@ -9,11 +9,19 @@
     </message>
 </context>
 <context>
-    <name>mainWindow</name>
+    <name>home</name>
     <message>
         <source>mainSearchBarPlaceholder</source>
         <translation>Chercher contact, commencer appel ou chat...</translation>
     </message>
+    <message>
+        <source>homeEntry</source>
+        <translation>Accueil</translation>
+    </message>
+    <message>
+        <source>contactsEntry</source>
+        <translation>Contacts</translation>
+    </message>
 </context>
 <context>
     <name>manageAccounts</name>

tests/linphone.pro

@@ -25,7 +25,8 @@ lupdate_only{
     ui/components/form/*.qml \
     ui/components/misc/*.qml \
     ui/components/select/*.qml \
-    ui/views/*.qml
+    ui/views/*.qml \
+    ui/views/home/*.qml
 }
 
 RESOURCES += \

tests/resources.qrc

@@ -9,14 +9,14 @@
   <file>ui/components/dialog/DialogPlus.qml</file>
   <file>ui/components/form/Collapse.qml</file>
   <file>ui/components/form/DialogButton.qml</file>
-  <file>ui/components/form/RoundButton.qml</file>
   <file>ui/components/form/ToolBarButton.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/select/SelectContact.qml</file>
 
   <!-- UI: Views. -->
-  <file>ui/views/mainWindow.qml</file>
+  <file>ui/views/home/home.qml</file>
   <file>ui/views/manageAccounts.qml</file>
   <file>ui/views/newCall.qml</file>
 

tests/src/main.cpp

@@ -8,7 +8,7 @@
 
 int main (int argc, char *argv[]) {
   App app(argc, argv);
-  QQmlApplicationEngine engine(QUrl("qrc:/ui/views/mainWindow.qml"));
+  QQmlApplicationEngine engine(QUrl("qrc:/ui/views/home/home.qml"));
 
   if (engine.rootObjects().isEmpty())
     return EXIT_FAILURE;

tests/ui/components/dialog/DialogDescription.qml

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

tests/ui/components/dialog/DialogPlus.qml

@@ -6,8 +6,8 @@ import QtQuick.Window 2.2
 
 Window {
     default property alias contents: content.data // Required.
-    property alias descriptionText: description.text // Optionnal.
     property alias buttons: buttons.data // Required.
+    property alias descriptionText: description.text // Optionnal.
     property bool centeredButtons // Optionnal.
 
     modality: Qt.WindowModal

tests/ui/components/form/Collapse.qml

@@ -1,18 +1,14 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 
+// ===================================================================
+
 Item {
     property bool enabled: false
     property alias image: backgroundImage.source
 
     signal collapsed (bool collapsed)
 
-    id: collapse
-
-    // Default.
-    height: 50
-    width: 50
-
     function updateCollapse () {
         enabled = !enabled
         collapsed(enabled)

tests/ui/components/form/DialogButton.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 
+// ===================================================================
+
 Button {
     background: Rectangle {
         color: button.down ? '#FE5E00' : '#434343'

tests/ui/components/form/RoundButton.qml

@@ -1,12 +0,0 @@
-import QtQuick 2.7
-import QtQuick.Controls 2.0
-
-Button {
-    property alias image: backgroundImage.source
-
-    Image {
-        anchors.fill: parent
-        id: backgroundImage
-        fillMode: Image.PreserveAspectFit
-    }
-}

tests/ui/components/form/ToolBarButton.qml

@@ -1,11 +1,14 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 
+// ===================================================================
+
 ToolButton {
     property alias image: backgroundImage.source
 
     Image {
         anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
         id: backgroundImage
     }
 }

tests/ui/components/misc/MenuEntry.qml

@@ -0,0 +1,37 @@
+import QtQuick 2.7
+
+Rectangle {
+    property alias entryName: text.text
+    property bool isSelected
+
+    color: isSelected ? '#434343' : '#8E8E8E'
+
+    Row {
+        anchors.fill: parent
+        anchors.leftMargin: 10
+        anchors.rightMargin: 10
+        spacing: 10
+
+        Image {
+            height: parent.height
+            width: 30
+        }
+
+        Text {
+            color: '#FFFFFF'
+            font.pointSize: 13
+            height: parent.height
+            id: text
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        Image {
+            height: parent.height
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: { } // TODO.
+    }
+}

tests/ui/components/select/SelectContact.qml

@@ -50,50 +50,50 @@ Item {
             // TODO: Remove, use C++ model instead.
             model: ListModel {
                 ListElement {
-                    _presence: 'connected'
-                    _sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
-                    _username: 'Toto'
+                    $presence: 'connected'
+                    $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
+                    $username: 'Toto'
                 }
                 ListElement {
-                    _presence: 'connected'
-                    _sipAddress: 'toto.lala.sip.linphone.org'
-                    _username: 'Toto'
+                    $presence: 'connected'
+                    $sipAddress: 'toto.lala.sip.linphone.org'
+                    $username: 'Toto'
                 }
                 ListElement {
-                    _presence: 'disconnected'
-                    _sipAddress: 'machin.truc.sip.linphone.org'
-                    _username: 'Toto'
+                    $presence: 'disconnected'
+                    $sipAddress: 'machin.truc.sip.linphone.org'
+                    $username: 'Toto'
                 }
                 ListElement {
-                    _presence: 'absent'
-                    _sipAddress: 'hey.listen.sip.linphone.org'
-                    _username: 'Toto'
+                    $presence: 'absent'
+                    $sipAddress: 'hey.listen.sip.linphone.org'
+                    $username: 'Toto'
                 }
                 ListElement {
-                    _presence: 'do_not_disturb'
-                    _sipAddress: 'valentin.cognito.sip.linphone.org'
-                    _username: 'Toto'
+                    $presence: 'do$not$disturb'
+                    $sipAddress: 'valentin.cognito.sip.linphone.org'
+                    $username: 'Toto'
                 }
                 ListElement {
-                    _presence: 'do_not_disturb'
-                    _sipAddress: 'charles.henri.sip.linphone.org'
-                    _username: 'Toto'
+                    $presence: 'do$not$disturb'
+                    $sipAddress: 'charles.henri.sip.linphone.org'
+                    $username: 'Toto'
                 }
                 ListElement {
-                    _presence: 'disconnected'
-                    _sipAddress: 'yesyes.nono.sip.linphone.org'
-                    _username: 'Toto'
+                    $presence: 'disconnected'
+                    $sipAddress: 'yesyes.nono.sip.linphone.org'
+                    $username: 'Toto'
                 }
                 ListElement {
-                    _presence: 'connected'
-                    _sipAddress: 'nsa.sip.linphone.org'
-                    _username: 'Toto'
+                    $presence: 'connected'
+                    $sipAddress: 'nsa.sip.linphone.org'
+                    $username: 'Toto'
                 }
             }
 
             delegate: Contact {
-                sipAddress: _sipAddress
-                username: _username
+                sipAddress: $sipAddress
+                username: $username
                 width: parent.width
             }
         }

tests/ui/views/home/home.qml

@@ -0,0 +1,145 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+
+import 'qrc:/ui/components/form'
+import 'qrc:/ui/components/misc'
+
+ApplicationWindow {
+    header: ToolBar {
+        background: Rectangle {
+            color: '#EAEAEA'
+        }
+        height: 70
+
+        RowLayout {
+            anchors.fill: parent
+            anchors.leftMargin: 20
+            anchors.rightMargin: 20
+            spacing: 20
+
+            // Collapse.
+            Collapse {
+                Layout.preferredWidth: 25
+                Layout.fillHeight: parent.height
+                image: 'qrc:/imgs/collapse.svg'
+                onCollapsed: {
+                    mainWindow.height = collapsed ? 480 : 70
+                }
+            }
+
+            // User info.
+            Column {
+                Layout.preferredWidth: 200
+                Layout.fillHeight: parent.height
+
+                // Username.
+                Text {
+                    clip: true
+                    color: '#5A585B'
+                    font.weight: Font.DemiBold
+                    height: parent.height / 2
+                    font.pointSize: 11
+                    text: 'Edward Miller'
+                    verticalAlignment: Text.AlignBottom
+                    width: parent.width
+                }
+
+                // Sip address.
+                Text {
+                    clip: true
+                    color: '#5A585B'
+                    height: parent.height / 2
+                    text: 'e.miller@sip-linphone.org'
+                    verticalAlignment: Text.AlignTop
+                    width: parent.width
+                }
+            }
+
+            // User actions.
+            ToolBarButton {
+                onClicked: {
+                    var component = Qt.createComponent('qrc:/ui/views/newCall.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()
+                    }
+                }
+            }
+
+            // Search.
+            TextField {
+                signal searchTextChanged (string text)
+
+                background: Rectangle {
+                    color: '#FFFFFF'
+                    implicitHeight: 30
+                }
+                id: searchText
+                Layout.fillWidth: true
+                onTextChanged: searchTextChanged(text)
+                placeholderText: qsTr('mainSearchBarPlaceholder')
+            }
+
+            // Start conference.
+            ToolBarButton {
+                Layout.fillHeight: parent.height
+                Layout.preferredWidth: 32
+                image: 'qrc:/imgs/start_conference.svg'
+            }
+        }
+    }
+    id: mainWindow
+    minimumHeight: 70
+    minimumWidth: 640
+    title: 'Linphone'
+    visible: true
+
+    RowLayout {
+        anchors.fill: parent
+        spacing: 0
+
+        // Main menu.
+        ColumnLayout {
+            Layout.fillHeight: true
+            Layout.preferredWidth: 250
+            spacing: 0
+
+            MenuEntry {
+                Layout.preferredHeight: 50
+                Layout.preferredWidth: parent.width
+                entryName: qsTr('homeEntry')
+            }
+
+            Item { Layout.preferredHeight: 2 }
+
+            MenuEntry {
+                Layout.preferredHeight: 50
+                Layout.preferredWidth: parent.width
+                entryName: qsTr('contactsEntry')
+            }
+
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.preferredWidth: parent.width
+            }
+
+            Rectangle {
+                Layout.preferredWidth: 250
+                Layout.preferredHeight: 70
+                color: '#EAEAEA'
+            }
+        }
+
+        // Main content.
+        Rectangle {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            color: 'blue'
+        }
+    }
+}

tests/ui/views/mainWindow.qml

@@ -1,69 +0,0 @@
-import QtQuick 2.7
-import QtQuick.Controls 2.0
-import QtQuick.Layouts 1.3
-
-import 'qrc:/ui/components/form'
-
-ApplicationWindow {
-    header: ToolBar {
-        background: Rectangle {
-            color: '#EAEAEA'
-        }
-        height: 70
-
-        RowLayout {
-            anchors.fill: parent
-            anchors.rightMargin: 10
-
-            // Collapse.
-            Collapse {
-                image: 'qrc:/imgs/collapse.svg'
-                onCollapsed: {
-                    mainWindow.height = collapsed ? 480 : 70
-                }
-            }
-
-            // User info.
-            // TODO
-
-            // User actions.
-            ToolBarButton {
-                onClicked: {
-                    var component = Qt.createComponent('qrc:/ui/views/newCall.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()
-                    }
-                }
-            }
-
-            // Search.
-            TextField {
-                signal searchTextChanged (string text)
-
-                background: Rectangle {
-                    color: '#FFFFFF'
-                    implicitHeight: 30
-                }
-                id: searchText
-                Layout.fillWidth: true
-                onTextChanged: searchTextChanged(text)
-                placeholderText: qsTr('mainSearchBarPlaceholder')
-            }
-
-            // Start conference.
-            ToolBarButton {
-                image: 'qrc:/imgs/start_conference.svg'
-            }
-        }
-    }
-    id: mainWindow
-    minimumHeight: 70
-    minimumWidth: 640
-    title: 'Linphone'
-    visible: true
-}