feat(timeline): use style file

tests/imgs/history.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="86px" height="86px" viewBox="0 0 86 86" 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>footer_history</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(-1888.000000, -16901.000000)">
+            <g id="footer_history" sketch:type="MSLayerGroup" transform="translate(1886.000000, 16899.000000)">
+                <path d="M85,45 C85,67.09 67.094,85 45,85 C22.91,85 5,67.09 5,45 C5,22.909 22.91,5 45,5 C67.094,5 85,22.909 85,45 L85,45 Z M44.99,14.493 L44.99,45.311 L67.939,45.311" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup"></path>
+                <rect id="Rectangle-250-Copy-8" fill-opacity="0" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="90" height="90"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

tests/resources.qrc

@@ -61,6 +61,7 @@
     <file>imgs/lost_incoming_call.svg</file>
     <file>imgs/conference.svg</file>
     <file>imgs/cam.svg</file>
+    <file>imgs/history.svg</file>
     <file>imgs/hangup.svg</file>
     <file>imgs/chat.svg</file>
     <file>imgs/chat_attachment.svg</file>

tests/ui/components/dialog/DialogDescription.qml

@@ -10,7 +10,7 @@ Item {
     property alias text: description.text
 
     height: (!text && DialogStyle.description.verticalMargin) || undefined
-    implicitHeight: (text && (description.implicitHeight + DialogStyle.description.verticalMargin)) ||
+    implicitHeight: (text && (description.implicitHeight + DialogStyle.description.verticalMargin * 2)) ||
         0
 
     Text {

tests/ui/components/timeline/Timeline.qml

 import QtQuick 2.7
-import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.3
 
 import 'qrc:/ui/components/contact'
@@ -8,6 +7,8 @@ import 'qrc:/ui/components/view'
 
 import 'qrc:/ui/style/components'
 
+// ===================================================================
+
 ColumnLayout {
     id: item
 
@@ -15,16 +16,19 @@ ColumnLayout {
 
     // Legend.
     Row {
-        Layout.preferredHeight: 35
-        spacing: 30
+        Layout.topMargin: TimelineStyle.legend.topMargin
+        Layout.bottomMargin: TimelineStyle.legend.bottomMargin
+        Layout.leftMargin: TimelineStyle.legend.leftMargin
+        spacing: TimelineStyle.legend.spacing
 
         Icon {
-            iconSize: 20
+            icon: TimelineStyle.legend.icon
+            iconSize: TimelineStyle.legend.iconSize
         }
 
         Text {
-            color: '#5A585B'
-            font.pointSize: 13
+            color: TimelineStyle.legend.color
+            font.pointSize: TimelineStyle.legend.fontSize
             height: parent.height
             text: qsTr('timelineTitle')
             verticalAlignment: Text.AlignVCenter

tests/ui/style/components/TimelineStyle.qml

@@ -4,8 +4,19 @@ import QtQuick 2.7
 import 'qrc:/ui/style/global'
 
 QtObject {
+    property QtObject legend: QtObject {
+        property int bottomMargin: 10
+        property int fontSize: 13
+        property int iconSize: 26
+        property int leftMargin: 18
+        property int spacing: 16
+        property int topMargin: 10
+        property string color: Colors.d
+        property string icon: 'history'
+    }
+
     property QtObject separator: QtObject {
         property int height: 1
-        property string color: '#DEDEDE'
+        property string color: Colors.e
     }
 }

tests/ui/style/global/Colors.qml

 pragma Singleton
 import QtQuick 2.7
 
+// TODO: Mutualize similar colors.
 QtObject {
     property string a: '#808080'
     property string b: '#5E5E5F'
     property string c: '#C5C5C5'
-    property string d: '#F4F4F4'
+    property string d: '#5A585B'
+    property string e: '#DEDEDE'
 }