feat(mainWindow): searchContact view

tests/languages/en.ts

@@ -112,4 +112,23 @@
         <translation>CANCEL</translation>
     </message>
 </context>
+<context>
+    <name>searchContact</name>
+    <message>
+        <source>searchContactPlaceholder</source>
+        <translation>Search contact</translation>
+    </message>
+    <message>
+        <source>selectAllContacts</source>
+        <translation>All</translation>
+    </message>
+    <message>
+        <source>selectConnectedContacts</source>
+        <translation>Connected</translation>
+    </message>
+    <message>
+        <source>addContact</source>
+        <translation>ADD CONTACT</translation>
+    </message>
+</context>
 </TS>

tests/languages/fr.ts

@@ -112,4 +112,23 @@
         <translation>ANNULER</translation>
     </message>
 </context>
+<context>
+    <name>searchContact</name>
+    <message>
+        <source>searchContactPlaceholder</source>
+        <translation>Rechercher contact</translation>
+    </message>
+    <message>
+        <source>selectAllContacts</source>
+        <translation>Tous</translation>
+    </message>
+    <message>
+        <source>selectConnectedContacts</source>
+        <translation>Connectés</translation>
+    </message>
+    <message>
+        <source>addContact</source>
+        <translation>AJOUTER CONTACT</translation>
+    </message>
+</context>
 </TS>

tests/linphone.pro

@@ -21,6 +21,8 @@ TRANSLATIONS = \
 lupdate_only{
   # Each component folder must be added explicitly.
   SOURCES = \
+    ui/components/collapse/*.qml \
+    ui/components/contact/*.qml \
     ui/components/dialog/*.qml \
     ui/components/form/*.qml \
     ui/components/misc/*.qml \

tests/resources.qrc

@@ -5,20 +5,26 @@
   <file>languages/fr.qm</file>
 
   <!-- UI: Components. -->
+  <file>ui/components/collapse/Collapse.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/Collapse.qml</file>
-  <file>ui/components/form/DialogButton.qml</file>
+  <file>ui/components/form/DarkButton.qml</file>
   <file>ui/components/form/DialogCheckBox.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/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/views/mainWindow/home.qml</file>
   <file>ui/views/mainWindow/mainWindow.qml</file>
+  <file>ui/views/mainWindow/searchContact.qml</file>
   <file>ui/views/manageAccounts.qml</file>
   <file>ui/views/newCall.qml</file>
 

tests/ui/components/form/Collapse.qml → tests/ui/components/collapse/Collapse.qml

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

tests/ui/components/contact/Avatar.qml

+import QtQuick 2.7
+
+Rectangle {
+    property string username
+    property string image
+
+    color: '#8F8F8F'
+    radius: 20
+
+    Text {
+        anchors.centerIn: parent
+        text: (function () {
+            var spaceIndex = username.indexOf(' ')
+            var firstLetter = username.charAt(0)
+
+            if (spaceIndex === -1) {
+                return firstLetter
+            }
+
+            return firstLetter + username.charAt(spaceIndex + 1)
+        })()
+        color: '#FFFFFF'
+    }
+}

tests/ui/components/dialog/DialogDescription.qml

 import QtQuick 2.7
 
+// ===================================================================
+// Description content used by dialogs.
 // ===================================================================
 
 Item {

tests/ui/components/dialog/DialogPlus.qml

@@ -2,12 +2,15 @@ import QtQuick 2.7
 import QtQuick.Layouts 1.3
 import QtQuick.Window 2.2
 
+// ===================================================================
+// Helper to build quickly dialogs.
 // ===================================================================
 
 Window {
     default property alias contents: content.data // Required.
     property alias buttons: buttons.data // Required.
     property alias descriptionText: description.text // Optionnal.
+
     property bool centeredButtons // Optionnal.
 
     modality: Qt.WindowModal

tests/ui/components/form/ExclusiveButtons.qml

+import QtQuick 2.7
+
+// ===================================================================
+
+Row {
+    property alias text1: button1.text
+    property alias text2: button2.text
+
+    property bool button1IsSelected: true
+
+    signal buttonChanged (int button)
+
+    spacing: 8
+
+    SmallButton {
+        anchors.verticalCenter: parent.verticalCenter
+        backgroundColor: button1IsSelected
+            ? '#8E8E8E'
+            : (button1.down
+               ? '#FE5E00'
+               : '#D1D1D1'
+              )
+        id: button1
+        onClicked: {
+            if (!button1IsSelected) {
+                button1IsSelected = true
+                buttonChanged(1)
+            }
+        }
+    }
+
+    SmallButton {
+        anchors.verticalCenter: parent.verticalCenter
+        backgroundColor: !button1IsSelected
+            ? '#8E8E8E'
+            : (button2.down
+               ? '#FE5E00'
+               : '#D1D1D1'
+              )
+        id: button2
+        onClicked: {
+            if (button1IsSelected) {
+                button1IsSelected = false
+                buttonChanged(2)
+            }
+        }
+    }
+}

tests/ui/components/form/LightButton.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+// ===================================================================
+
+DarkButton {
+    backgroundColor: '#D1D1D1'
+    textColor: '#5A585B'
+}

tests/ui/components/form/SmallButton.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+// ===================================================================
+
+Button {
+    property alias backgroundColor: background.color
+
+    background: Rectangle {
+        color: button.down ? '#FE5E00' : '#8E8E8E'
+        id: background
+        implicitHeight: 22
+        radius: 10
+    }
+    contentItem: Text {
+        color:'#FFFFFF'
+        font.pointSize: 8
+        horizontalAlignment: Text.AlignHCenter
+        id: text
+        text: button.text
+        verticalAlignment: Text.AlignVCenter
+    }
+    id: button
+}

tests/ui/components/scrollBar/ForceScrollBar.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+// ===================================================================
+
+ScrollBar {
+    background: Rectangle {
+        color: '#F4F4F4'
+    }
+    contentItem: Rectangle {
+        color: scrollBar.pressed ? '#5E5E5F' : '#C5C5C5'
+        implicitHeight: 100
+        implicitWidth: 8
+        radius: 10
+    }
+    id: scrollBar
+}

tests/ui/views/mainWindow/home.qml

@@ -4,8 +4,6 @@ import QtQuick.Layouts 1.3
 
 import 'qrc:/ui/components/form'
 
-// ===================================================================
-
 ColumnLayout {
     spacing: 0
 
@@ -32,10 +30,8 @@ ColumnLayout {
                         font.pointSize: 11
                     }
 
-                    DialogButton {
-                        backgroundColor: '#D1D1D1'
+                    LightButton {
                         text: qsTr('invitContact')
-                        textColor: '#5A585B'
                     }
                 }
 
@@ -50,10 +46,8 @@ ColumnLayout {
                         font.pointSize: 11
                     }
 
-                    DialogButton {
-                        backgroundColor: '#D1D1D1'
+                    LightButton {
                         text: qsTr('addContact')
-                        textColor: '#5A585B'
                     }
                 }
             }

tests/ui/views/mainWindow/mainWindow.qml

@@ -2,6 +2,7 @@ import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.3
 
+import 'qrc:/ui/components/collapse'
 import 'qrc:/ui/components/form'
 import 'qrc:/ui/components/misc'
 
@@ -59,7 +60,7 @@ ApplicationWindow {
             // User actions.
             ToolBarButton {
                 onClicked: {
-                    var component = Qt.createComponent('qrc:/ui/views/newCall.qml');
+                    var component = Qt.createComponent('qrc:/ui/views/manageAccounts.qml');
                     if (component.status !== Component.Ready) {
                         console.debug('Window not ready.')
                         if(component.status === Component.Error) {
@@ -141,7 +142,7 @@ ApplicationWindow {
         Loader {
             Layout.fillHeight: true
             Layout.fillWidth: true
-            source: 'qrc:/ui/views/mainWindow/home.qml'
+            source: 'qrc:/ui/views/mainWindow/searchContact.qml'
         }
     }
 }

tests/ui/views/mainWindow/searchContact.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+
+import 'qrc:/ui/components/contact'
+import 'qrc:/ui/components/form'
+import 'qrc:/ui/components/scrollBar'
+
+ColumnLayout {
+    spacing: 2
+
+    // Search bar.
+    Item {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 50
+        anchors.left: parent.left
+        anchors.leftMargin: 18
+        anchors.right: parent.right
+        anchors.rightMargin: 18
+
+        RowLayout {
+            anchors.verticalCenter: parent.verticalCenter
+            height: 30
+            spacing: 20
+            width: parent.width
+
+            TextField {
+                Layout.fillWidth: true
+                Layout.preferredHeight: parent.height
+                background: Rectangle {
+                    color: '#EAEAEA'
+                }
+                placeholderText: qsTr('searchContactPlaceholder')
+            }
+
+            ExclusiveButtons {
+                Layout.preferredHeight: parent.height
+                text1: qsTr('selectAllContacts')
+                text2: qsTr('selectConnectedContacts')
+            }
+
+            LightButton {
+                Layout.preferredHeight: parent.height
+                text: qsTr('addContact')
+            }
+        }
+    }
+
+    // Contacts list.
+    Rectangle {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        color: '#F5F5F5'
+
+        ListView {
+            ScrollBar.vertical: ForceScrollBar { }
+            anchors.fill: parent
+            boundsBehavior: Flickable.StopAtBounds
+            clip: true
+            highlightRangeMode: ListView.ApplyRange
+            spacing: 1
+
+            // TODO: Remove, use C++ model instead.
+            model: ListModel {
+                ListElement {
+                    $image: ''
+                    $presence: 'connected'
+                    $username: 'Isabella Ahornton'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'connected'
+                    $username: 'Mary Boreno'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'disconnected'
+                    $username: 'Cecelia Cyler'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'absent'
+                    $username: 'Daniel Elliott'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'do_not_disturb'
+                    $username: 'Effie Forton'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'do_not_disturb'
+                    $username: 'Agnes Hurner'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'disconnected'
+                    $username: 'Luke Leming'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'connected'
+                    $username: 'Olga Manning'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'connected'
+                    $username: 'Isabella Ahornton'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'connected'
+                    $username: 'Mary Boreno'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'disconnected'
+                    $username: 'Cecelia Cyler'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'absent'
+                    $username: 'Daniel Elliott'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'do_not_disturb'
+                    $username: 'Effie Forton'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'do_not_disturb'
+                    $username: 'Agnes Hurner'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'disconnected'
+                    $username: 'Luke Leming'
+                }
+                ListElement {
+                    $image: ''
+                    $presence: 'connected'
+                    $username: 'Olga Manning'
+                }
+            }
+            delegate: Rectangle {
+                color: '#FFFFFF'
+                height: 50
+                id: contact
+                width: parent.width
+
+                Item {
+                    anchors.verticalCenter: parent.verticalCenter
+                    height: 30
+                    width: parent.width
+
+                    RowLayout {
+                        anchors.fill: parent
+                        anchors.leftMargin: 15
+                        anchors.rightMargin: 15
+                        spacing: 15
+
+                        // Avatar.
+                        Avatar {
+                            Layout.fillHeight: parent.height
+                            Layout.preferredWidth: 30
+                            image: $image
+                            username: $username
+                        }
+
+                        // Presence.
+                        Item {
+                            Layout.fillHeight: parent.height
+                            Layout.preferredWidth: 20
+
+                            Image {
+                                anchors.fill: parent
+                                fillMode: Image.PreserveAspectFit
+                                source: 'qrc:/imgs/led_' + $presence + '.svg'
+                            }
+                        }
+
+                        // Username.
+                        Item {
+                            Layout.fillHeight: parent.height
+                            Layout.fillWidth: true
+
+                            Text {
+                                anchors.fill: parent
+                                clip: true
+                                color: '#5A585B'
+                                font.weight: Font.DemiBold
+                                text: $username
+                                verticalAlignment: Text.AlignVCenter
+
+                                MouseArea {
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    onEntered: contact.state = 'hover'
+                                    onExited: contact.state = ''
+                                }
+                            }
+                        }
+
+                        // Actions.
+                        // TODO.
+                    }
+                }
+
+                states: State {
+                    name: 'hover'
+                    PropertyChanges { target: contact; color: '#D1D1D1' }
+                }
+            }
+        }
+    }
+}

tests/ui/views/manageAccounts.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
 
 import 'qrc:/ui/components/dialog'
 import 'qrc:/ui/components/form'
+import 'qrc:/ui/components/scrollBar'
 
 DialogPlus {
     descriptionText: qsTr('manageAccountsDescription')
@@ -11,7 +12,7 @@ DialogPlus {
     minimumWidth: 480
     title: qsTr('manageAccountsTitle')
 
-    buttons: DialogButton {
+    buttons: DarkButton {
         text: qsTr('validate')
     }
 
@@ -20,6 +21,7 @@ DialogPlus {
         anchors.fill: parent
 
         ListView {
+            ScrollBar.vertical: ForceScrollBar { }
             anchors.fill: parent
             boundsBehavior: Flickable.StopAtBounds
             clip: true

tests/ui/views/newCall.qml

@@ -11,7 +11,7 @@ DialogPlus {
     minimumWidth: 420
     title: qsTr('newCallTitle')
 
-    buttons: DialogButton {
+    buttons: DarkButton {
         text: qsTr('cancel')
     }