feat(mainWindow): home view implemented

tests/languages/en.ts

@@ -10,6 +10,29 @@
 </context>
 <context>
     <name>home</name>
+    <message>
+        <source>displayTooltip</source>
+        <translation>Display tooltips to discover Linphone Desktop</translation>
+    </message>
+    <message>
+        <source>invitContactQuestion</source>
+        <translation>Are your friends already know Linphone?</translation>
+    </message>
+    <message>
+        <source>invitContact</source>
+        <translation>INVIT YOUR FRIENDS</translation>
+    </message>
+    <message>
+        <source>addContactQuestion</source>
+        <translation>Quickly add your contacts in your notebook.</translation>
+    </message>
+    <message>
+        <source>addContact</source>
+        <translation>ADD CONTACTS</translation>
+    </message>
+</context>
+<context>
+    <name>mainWindow</name>
     <message>
         <source>mainSearchBarPlaceholder</source>
         <translation>Search contact, start call, start chat...</translation>

tests/languages/fr.ts

@@ -10,6 +10,29 @@
 </context>
 <context>
     <name>home</name>
+    <message>
+        <source>displayTooltip</source>
+        <translation>Afficher les tooltips pour découvrir Linphone Desktop</translation>
+    </message>
+    <message>
+        <source>invitContactQuestion</source>
+        <translation>Vos amis connaissent-ils déjà Linphone ?</translation>
+    </message>
+    <message>
+        <source>invitContact</source>
+        <translation>INVITER VOS AMIS</translation>
+    </message>
+    <message>
+        <source>addContactQuestion</source>
+        <translation>Ajouter vos contacts dans votre carnet d&apos;adresses.</translation>
+    </message>
+    <message>
+        <source>addContact</source>
+        <translation>AJOUTER CONTACTS</translation>
+    </message>
+</context>
+<context>
+    <name>mainWindow</name>
     <message>
         <source>mainSearchBarPlaceholder</source>
         <translation>Chercher contact, commencer appel ou chat...</translation>

tests/linphone.pro

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

tests/resources.qrc

@@ -9,6 +9,7 @@
   <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/DialogCheckBox.qml</file>
   <file>ui/components/form/ToolBarButton.qml</file>
   <file>ui/components/form/TransparentComboBox.qml</file>
   <file>ui/components/misc/Contact.qml</file>
@@ -16,7 +17,8 @@
   <file>ui/components/select/SelectContact.qml</file>
 
   <!-- UI: Views. -->
-  <file>ui/views/home/home.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>
 

tests/src/main.cpp

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

tests/ui/components/form/DialogButton.qml

@@ -4,15 +4,22 @@ import QtQuick.Controls 2.0
 // ===================================================================
 
 Button {
+    property string backgroundColor: '#434343'
+    property string textColor: '#FFFFFF'
+
     background: Rectangle {
-        color: button.down ? '#FE5E00' : '#434343'
-        implicitWidth: 120
+        color: button.down ? '#FE5E00' : backgroundColor
+        implicitHeight: 30
+        implicitWidth: 160
         radius: 4
     }
     contentItem: Text {
-        color: '#FFFFFF'
-        text: button.text
+        color: button.down ? '#FFFFFF' : textColor
+        font.pointSize: 8
+        font.weight: Font.DemiBold
         horizontalAlignment: Text.AlignHCenter
+        id: text
+        text: button.text
         verticalAlignment: Text.AlignVCenter
     }
     id: button

tests/ui/components/form/DialogCheckBox.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+// ===================================================================
+
+CheckBox {
+    id: checkBox
+    indicator: Rectangle {
+        border.color: checkBox.down ? '#FE5E00' : '#8E8E8E'
+        implicitHeight: 18
+        implicitWidth: 18
+        radius: 3
+        x: checkBox.leftPadding
+        y: parent.height / 2 - height / 2
+
+        Rectangle {
+            color: checkBox.down ? '#FE5E00' : '#8E8E8E'
+            height: 10
+            radius: 2
+            visible: checkBox.checked
+            width: 10
+            x: 4
+            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/views/mainWindow/home.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+
+import 'qrc:/ui/components/form'
+
+// ===================================================================
+
+ColumnLayout {
+    spacing: 0
+
+    Item {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        Item {
+            anchors.fill: parent
+            anchors.leftMargin: 50
+            anchors.topMargin: 50
+
+            Column {
+                spacing: 30
+
+                // Invit friends.
+                Column {
+                    spacing: 8
+
+                    Text {
+                        text: qsTr('invitContactQuestion')
+                        font.weight: Font.DemiBold
+                        color: '#5A585B'
+                        font.pointSize: 11
+                    }
+
+                    DialogButton {
+                        backgroundColor: '#D1D1D1'
+                        text: qsTr('invitContact')
+                        textColor: '#5A585B'
+                    }
+                }
+
+                // Add contacts.
+                Column {
+                    spacing: 8
+
+                    Text {
+                        text: qsTr('addContactQuestion')
+                        font.weight: Font.DemiBold
+                        color: '#5A585B'
+                        font.pointSize: 11
+                    }
+
+                    DialogButton {
+                        backgroundColor: '#D1D1D1'
+                        text: qsTr('addContact')
+                        textColor: '#5A585B'
+                    }
+                }
+            }
+        }
+    }
+
+    // Tooltip checkbox area.
+    Item {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 70
+
+        DialogCheckBox {
+            anchors.left: parent.left
+            anchors.leftMargin: 50
+            anchors.verticalCenter: parent.verticalCenter
+            text: qsTr('displayTooltip')
+        }
+    }
+}

tests/ui/views/home/home.qml → tests/ui/views/mainWindow/mainWindow.qml

@@ -24,7 +24,7 @@ ApplicationWindow {
                 Layout.fillHeight: parent.height
                 image: 'qrc:/imgs/collapse.svg'
                 onCollapsed: {
-                    mainWindow.height = collapsed ? 480 : 70
+                    mainWindow.height = collapsed ? 500 : 70
                 }
             }
 
@@ -95,7 +95,7 @@ ApplicationWindow {
     }
     id: mainWindow
     minimumHeight: 70
-    minimumWidth: 640
+    minimumWidth: 780
     title: 'Linphone'
     visible: true
 
@@ -123,11 +123,13 @@ ApplicationWindow {
                 entryName: qsTr('contactsEntry')
             }
 
-            Rectangle {
+            // History.
+            Item {
                 Layout.fillHeight: true
                 Layout.preferredWidth: parent.width
             }
 
+            // Logo.
             Rectangle {
                 Layout.preferredWidth: 250
                 Layout.preferredHeight: 70
@@ -136,10 +138,10 @@ ApplicationWindow {
         }
 
         // Main content.
-        Rectangle {
+        Loader {
             Layout.fillHeight: true
             Layout.fillWidth: true
-            color: 'blue'
+            source: 'qrc:/ui/views/mainWindow/home.qml'
         }
     }
 }