chatview: set timestamp component height

+ give the component some height when the hour is not shown
+ make sure the hour is shown if the day is shown

Change-Id: Ia6e4266539d60577899af63beca8017c6140644c
GitLab: #827

src/app/commoncomponents/TimestampInfo.qml

@@ -24,7 +24,7 @@ import net.jami.Models 1.1
 import net.jami.Adapters 1.1
 import net.jami.Constants 1.1
 
-ColumnLayout{
+ColumnLayout {
     id: root
 
     property bool showTime
@@ -33,6 +33,8 @@ ColumnLayout{
     property string formattedDay
     property real detailsOpacity: 0.6
 
+    spacing: 0
+
     Connections {
         target: MessagesAdapter.messageListModel
         function onTimestampUpdate() {
@@ -45,9 +47,13 @@ ColumnLayout{
     Item {
         visible: showDay
         Layout.alignment: Qt.AlignHCenter
-        Layout.fillHeight: true
+
+        Layout.preferredHeight: childrenRect.height
         Layout.fillWidth: true
         Layout.topMargin: JamiTheme.dayTimestampTopMargin
+        Layout.bottomMargin: formattedTimeLabel.visible ?
+                                 0 :
+                                 JamiTheme.dayTimestampBottomMargin
 
         Rectangle {
             id: line
@@ -55,30 +61,21 @@ ColumnLayout{
             height: 1
             opacity: detailsOpacity
             color:JamiTheme.timestampColor
-            width: chatView.width - JamiTheme.timestampLinePadding
+            width: parent.width - JamiTheme.timestampLinePadding
             anchors.centerIn: parent
         }
 
         Rectangle {
             id: dayRectangle
 
-            width: borderRectangle.width
+            width: formattedDayLabel.width + JamiTheme.dayTimestampVPadding
-            height: borderRectangle.height
+            height: formattedDayLabel.height + JamiTheme.dayTimestampHPadding
             radius: 5
             color: JamiTheme.chatviewBgColor
             Layout.fillHeight: true
             anchors.centerIn: parent
 
-            Rectangle {
+            border { color:  JamiTheme.timestampColor; width: 1 }
-                id: borderRectangle
-
-                border { color:  JamiTheme.timestampColor; width: 1}
-                opacity: detailsOpacity
-                width: formattedDayLabel.width + JamiTheme.dayTimestampVPadding
-                height: formattedDayLabel.height + JamiTheme.dayTimestampHPadding
-                radius: dayRectangle.radius
-                color: JamiTheme.transparentColor
-            }
 
             Text {
                 id: formattedDayLabel
@@ -97,10 +94,10 @@ ColumnLayout{
         text: formattedTime
         Layout.bottomMargin: JamiTheme.timestampBottomMargin
         Layout.topMargin: JamiTheme.timestampTopMargin
-        Layout.alignment: Qt.AlignHCenter
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
         color: JamiTheme.timestampColor
-        visible: showTime
+        visible: showTime || showDay
-        height: visible * implicitHeight
+        Layout.preferredHeight: visible * implicitHeight
         font.pointSize: JamiTheme.timestampFont
     }
 }

src/app/constant/JamiTheme.qml

@@ -328,9 +328,10 @@ Item {
 
     //TimestampInfo
     property int timestampLinePadding: 40
-    property int dayTimestampTopMargin: 30
+    property int dayTimestampTopMargin: 8
-    property int timestampBottomMargin: 42
+    property int dayTimestampBottomMargin: 8
-    property int timestampTopMargin: 20
+    property int timestampBottomMargin: 16
+    property int timestampTopMargin: 16
     property int dayTimestampHPadding: 16
     property real dayTimestampVPadding: 32
     property real timestampFont: calcSize(12)