feat(components/Form): Collapse and buttons

tests/imgs/collapse.svg

+<?xml version="1.0" encoding="windows-1252"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g id="Icons" style="opacity:0.75;">
+	<g id="collapse">
+		<polygon id="arrow_1_" style="fill-rule:evenodd;clip-rule:evenodd;" points="6.697,15.714 12,10.412 17.303,15.714 18.717,14.3    12,7.583 5.283,14.3   "/>
+	</g>
+</g>
+<g id="Guides" style="display:none;">
+</g>
+</svg>
\ No newline at end of file

tests/imgs/start_conference.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="98px" height="98px" viewBox="0 0 98 98" 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>options_start_conference + Rectangle 250 Copy 4</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(-1988.000000, -22533.000000)">
+            <g id="options_start_conference-+-Rectangle-250-Copy-4" sketch:type="MSLayerGroup" transform="translate(1982.000000, 22527.000000)">
+                <path d="M29.1812277,50.1602766 C33.6890844,50.1602766 37.3442279,53.822334 37.3442279,58.3347999 C37.3442279,60.4942384 36.5076472,62.460088 35.1410015,63.9212235 C34.9474125,64.1263356 35.0234653,64.0917662 34.8114393,64.2761366 L35.1525246,64.5065996 C47.5191703,69.8994343 44.3503038,78.9658496 44.3503038,78.9658496 C36.3831972,81.4963335 29.1950555,81.1045464 29.1950555,81.1045464 L29.0129897,81.1045464 C29.0129897,81.1045464 21.8248481,81.4963335 13.8600461,78.9658496 C13.8600461,78.9658496 10.6888749,69.8994343 23.0578253,64.5065996 L23.3966059,64.2761366 C23.1845799,64.0917662 23.2606327,64.1263356 23.0693484,63.9212235 C21.7027027,62.460088 20.8661219,60.4942384 20.8661219,58.3347999 C20.8661219,53.822334 24.5189608,50.1602766 29.0268175,50.1602766 L29.1812277,50.1602766 L29.1812277,50.1602766 Z M76.9492981,50.1602766 C81.4571548,50.1602766 85.1099937,53.822334 85.1099937,58.3347999 C85.1099937,60.4942384 84.2711083,62.460088 82.9067672,63.9212235 C82.7154829,64.1263356 82.7892311,64.0917662 82.5772051,64.2761366 L82.9182904,64.5065996 C95.2872407,69.8994343 92.1160696,78.9658496 92.1160696,78.9658496 C84.1512675,81.4963335 76.9608213,81.1045464 76.9608213,81.1045464 L76.7787555,81.1045464 C76.7787555,81.1045464 69.5906139,81.4963335 61.6281165,78.9658496 C61.6281165,78.9658496 58.4546407,69.8994343 70.823591,64.5065996 L71.1623717,64.2761366 C70.9503457,64.0917662 71.0287031,64.1263356 70.8351142,63.9212235 C69.4684685,62.460088 68.6318877,60.4942384 68.6318877,58.3347999 C68.6318877,53.822334 72.2870312,50.1602766 76.7925833,50.1602766 L76.9492981,50.1602766 L76.9492981,50.1602766 Z M53.0641106,8.91891892 C57.5719673,8.91891892 61.2248062,12.5786717 61.2248062,17.0934423 C61.2248062,19.2528808 60.3882254,21.2187304 59.0215797,22.6798659 C58.8302954,22.884978 58.9063482,22.8527132 58.6943222,23.034779 L59.0354075,23.2629374 C71.4020532,28.6557721 68.230882,37.7244919 68.230882,37.7244919 C60.26608,40.2549759 53.0779384,39.8631888 53.0779384,39.8631888 L52.893568,39.8631888 C52.893568,39.8631888 45.7054264,40.2549759 37.742929,37.7244919 C37.742929,37.7244919 34.5694532,28.6557721 46.9384035,23.2629374 L47.2794888,23.034779 C47.0651582,22.8527132 47.1435156,22.884978 46.9499267,22.6798659 C45.583281,21.2187304 44.7467002,19.2528808 44.7467002,17.0934423 C44.7467002,12.5786717 48.4018437,8.91891892 52.9073958,8.91891892 L53.0641106,8.91891892 L53.0641106,8.91891892 Z M66.1336686,92.8627697 C58.3163629,100.657029 45.6408967,100.657029 37.823591,92.8627697 M39.5520637,101.104127 L37.823591,92.8627697 L46.087995,91.1389063 L39.5520637,101.104127 Z M8.91891892,42.9168238 C8.91891892,31.8914729 17.8793212,22.9564215 28.9369369,22.9564215 M21.8686361,18.3471611 L28.9369369,22.9564215 L24.3138487,30.0016761 L21.8686361,18.3471611 Z M76.4630212,22.9564215 C87.5183323,22.9564215 96.4810392,31.8937775 96.4810392,42.9168238 M101.104127,35.8692646 L96.4810392,42.9168238 L89.4150429,38.3075634 L101.104127,35.8692646 Z" id="options_start_conference" stroke="#444444" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup"></path>
+                <rect id="Rectangle-250-Copy-4" fill-opacity="0" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="109.14064" height="109.14064"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/languages/en.ts

@@ -2,10 +2,10 @@
 <!DOCTYPE TS>
 <TS version="2.1">
 <context>
-    <name>SearchBar</name>
+    <name>main_window</name>
     <message>
-        <source>helloWorld</source>
-        <translation>Hello World</translation>
+        <source>mainSearchBarPlaceholder</source>
+        <translation>Search contact, start call, start chat...</translation>
     </message>
 </context>
 </TS>

tests/languages/fr.ts

@@ -2,10 +2,10 @@
 <!DOCTYPE TS>
 <TS version="2.1">
 <context>
-    <name>SearchBar</name>
+    <name>main_window</name>
     <message>
-        <source>helloWorld</source>
-        <translation>Bonjour le monde</translation>
+        <source>mainSearchBarPlaceholder</source>
+        <translation>Chercher contact, commencer appel ou chat...</translation>
     </message>
 </context>
 </TS>

tests/linphone.pro

@@ -19,7 +19,7 @@ TRANSLATIONS = \
 lupdate_only{
   # Each component folder must be added explicitly.
   SOURCES = \
-    ui/components/SearchBar/*.qml \
+    ui/components/Form/*.qml \
     ui/views/*.qml
 }
 

tests/resources.qrc

@@ -5,7 +5,13 @@
   <file>languages/fr.qm</file>
 
   <!-- UI. -->
-  <file>ui/components/SearchBar/SearchBar.qml</file>
+  <file>ui/components/Form/Collapse.qml</file>
+  <file>ui/components/Form/RoundButton.qml</file>
+  <file>ui/components/Form/ToolBarButton.qml</file>
   <file>ui/views/main_window.qml</file>
+
+  <!-- Images. -->
+  <file>imgs/collapse.svg</file>
+  <file>imgs/start_conference.svg</file>
 </qresource>
 </RCC>

tests/src/app.cpp

@@ -4,6 +4,7 @@
 
 #include "app.hpp"
 
+#define APPLICATION_NAME "Linphone"
 #define LANGUAGES_PATH ":/languages/"
 
 // ===================================================================
@@ -16,4 +17,7 @@ App::App(int &argc, char **argv) : QGuiApplication(argc, argv) {
   } else {
     qWarning() << "No translation found.";
   }
+
+  // Set application name.
+  QCoreApplication::setApplicationName(APPLICATION_NAME);
 }

tests/src/app.hpp

@@ -4,6 +4,7 @@
 #include <QGuiApplication>
 #include <QTranslator>
 
+// TODO: Make it Singleton.
 class App : public QGuiApplication {
 public:
   App (int &argc, char **argv);

tests/ui/components/Form/Collapse.qml

+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)
+        rotate.start()
+    }
+
+    Image {
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+        id: backgroundImage
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: updateCollapse()
+        }
+    }
+
+    RotationAnimation {
+        direction: RotationAnimation.Clockwise
+        duration: 200
+        from: enabled ? 0 : 180
+        id: rotate
+        property: 'rotation'
+        target: backgroundImage
+        to: enabled ? 180 : 0
+    }
+}

tests/ui/components/Form/RoundButton.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+Button {
+    property alias image: backgroundImage.source
+
+    Image {
+        anchors.fill: parent
+        id: backgroundImage
+    }
+}

tests/ui/components/Form/ToolBarButton.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+ToolButton {
+    property alias image: backgroundImage.source
+
+    Image {
+        anchors.fill: parent
+        id: backgroundImage
+    }
+}

tests/ui/components/SearchBar/SearchBar.qml

-import QtQuick 2.5
-
-Text {
-    anchors.centerIn: parent
-    text: qsTr('helloWorld')
-}

tests/ui/views/main_window.qml

@@ -2,21 +2,52 @@ import QtQuick 2.5
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.3
 
-import "qrc:/ui/components/SearchBar"
+import 'qrc:/ui/components/Form'
 
 ApplicationWindow {
-    id: mainWindow
-    visible: true
-
     header: ToolBar {
+        background: Rectangle {
+            color: '#EAEAEA'
+        }
+        height: 70
+
         RowLayout {
             anchors.fill: parent
-        }
-    }
+            anchors.rightMargin: 10
 
-    footer: TabBar {
+            // Collapse.
+            Collapse {
+                image: '/imgs/collapse.svg'
+                onCollapsed: {
+                    mainWindow.height = collapsed ? 480 : 70
+                }
+            }
 
-    }
+            // User info.
+            // TODO
+
+            // Search.
+            TextField {
+                signal searchTextChanged (string text)
 
-    SearchBar {}
+                background: Rectangle {
+                    color: '#FFFFFF'
+                    implicitHeight: 30
+                }
+                id: searchText
+                Layout.fillWidth: true
+                onTextChanged: searchTextChanged(text)
+                placeholderText: qsTr('mainSearchBarPlaceholder')
+            }
+
+            // Start conference.
+            ToolBarButton {
+                image: '/imgs/start_conference.svg'
+            }
+        }
+    }
+    id: mainWindow
+    minimumHeight: 70
+    minimumWidth: 640
+    visible: true
 }