contactmessagebase: update design

Also move all spacing in TimeStampInfo, so sequences doesn't have
weird spacing and can better be controlled.

GitLab: #1243
Change-Id: Ica7235856c3a7ed38ed3e390c4bf14decede25b0

src/app/commoncomponents/CallMessageDelegate.qml

@@ -28,7 +28,7 @@ SBSMessageBase {
     component JoinCallButton: PushButton {
         visible: root.isActive
         toolTipText: JamiStrings.joinCall
-        preferredSize: 40
+        preferredSize: visible ? 40 : 0
         imageColor: callLabel.color
         normalColor: "transparent"
         hoveredColor: Qt.rgba(255, 255, 255, 0.2)

src/app/commoncomponents/ContactMessageDelegate.qml

@@ -30,17 +30,16 @@ Column {
     property int timestamp: Timestamp
     property string formattedTime: MessagesAdapter.getFormattedTime(Timestamp)
     property string formattedDay: MessagesAdapter.getFormattedDay(Timestamp)
-    property int seq: MsgSeq.single//a changer par textlabel
+    property int seq: MsgSeq.single
     property alias messageToSend: textLabel.text
 
     width: ListView.view ? ListView.view.width : 0
-    spacing: 2
+    spacing: 0
-    topPadding: 12
-    bottomPadding: 12
 
     ColumnLayout {
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width
+        spacing: 0
 
         TimestampInfo {
             id: timestampItem
@@ -52,43 +51,16 @@ Column {
             Layout.alignment: Qt.AlignHCenter
         }
 
-        Rectangle {
+        Label {
-            id: msg
+            id: textLabel
 
-            width: childrenRect.width
-            height: JamiTheme.contactMessageAvatarSize + 12
-            radius: JamiTheme.contactMessageAvatarSize / 2 + 6
             Layout.alignment: Qt.AlignCenter
-            color: "transparent"
+            width: parent.width
-            border.width: 1
+            text: Body
-            border.color: CurrentConversation.isCoreDialog ? JamiTheme.messageInBgColor : CurrentConversation.color
+            horizontalAlignment: Qt.AlignHCenter
-
+            font.pointSize: JamiTheme.smallFontSize
-            RowLayout {
+            color: JamiTheme.chatviewSecondaryInformationColor
-                anchors.verticalCenter: parent.verticalCenter
+            textFormat: TextEdit.PlainText
-
-                Avatar {
-                    Layout.leftMargin: 6
-                    width: JamiTheme.contactMessageAvatarSize
-                    height: JamiTheme.contactMessageAvatarSize
-                    visible: ActionUri !== ""
-                    imageId: ActionUri !== CurrentAccount.uri ? ActionUri : CurrentAccount.id
-                    showPresenceIndicator: false
-                    mode: ActionUri !== CurrentAccount.uri ? Avatar.Mode.Contact : Avatar.Mode.Account
-                }
-
-                Label {
-                    id: textLabel
-
-                    Layout.rightMargin: 6
-                    width: parent.width
-                    text: Body
-                    horizontalAlignment: Qt.AlignHCenter
-                    font.pointSize: JamiTheme.contactEventPointSize
-                    font.bold: true
-                    color: JamiTheme.chatviewTextColor
-                    textFormat: TextEdit.PlainText
-                }
-            }
         }
     }
     opacity: 0

src/app/commoncomponents/GeneratedMessageDelegate.qml

@@ -40,6 +40,7 @@ Column {
     ColumnLayout {
 
         width: parent.width
+        spacing: 0
 
         TimestampInfo {
             id: timestampItem

src/app/commoncomponents/SBSMessageBase.qml

@@ -90,7 +90,7 @@ Control {
             id: usernameblock
             Layout.preferredHeight: (seq === MsgSeq.first || seq === MsgSeq.single) ? 10 : 0
             visible: !isReply
-            Layout.topMargin: (seq === MsgSeq.first || seq === MsgSeq.single) && !isOutgoing ? 20 : 0
+            Layout.topMargin: (seq === MsgSeq.first || seq === MsgSeq.single) && !isOutgoing && !root.showTime ? 20 : 0
 
             Label {
                 id: username
@@ -98,7 +98,7 @@ Control {
                 font.bold: true
                 visible: (seq === MsgSeq.first || seq === MsgSeq.single) && !isOutgoing
                 font.pointSize: JamiTheme.smallFontSize
-                color: JamiTheme.chatviewUsernameColor
+                color: JamiTheme.chatviewSecondaryInformationColor
                 lineHeight: JamiTheme.usernameBlockLineHeight
                 leftPadding: JamiTheme.usernameBlockPadding
                 textFormat: TextEdit.PlainText
@@ -115,7 +115,7 @@ Control {
             Layout.fillWidth: true
             Layout.preferredHeight: childrenRect.height
 
-            Layout.topMargin: JamiTheme.sbsMessageBaseReplyTopMargin
+            Layout.topMargin: visible? JamiTheme.sbsMessageBaseReplyTopMargin : 0
             Layout.leftMargin: isOutgoing ? undefined : JamiTheme.sbsMessageBaseReplyMargin
             Layout.rightMargin: !isOutgoing ? undefined : JamiTheme.sbsMessageBaseReplyMargin
 

src/app/commoncomponents/TimestampInfo.qml

@@ -49,8 +49,7 @@ ColumnLayout {
 
         Layout.preferredHeight: childrenRect.height
         Layout.fillWidth: true
-        Layout.topMargin: JamiTheme.dayTimestampTopMargin
+        Layout.topMargin: 30
-        Layout.bottomMargin: formattedTimeLabel.visible ? 0 : JamiTheme.dayTimestampBottomMargin
 
         Rectangle {
             id: line
@@ -95,12 +94,12 @@ ColumnLayout {
         id: formattedTimeLabel
 
         text: formattedTime
-        Layout.bottomMargin: JamiTheme.timestampBottomMargin
+        Layout.topMargin: 30
-        Layout.topMargin: JamiTheme.timestampTopMargin
+        Layout.bottomMargin: 30
         Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
         color: JamiTheme.timestampColor
         visible: showTime || showDay
         Layout.preferredHeight: visible * implicitHeight
-        font.pointSize: JamiTheme.timestampFont
+        font.pointSize: JamiTheme.smallFontSize
     }
 }

src/app/constant/JamiTheme.qml

@@ -229,7 +229,7 @@ Item {
     property color previewCardContainerColor: darkTheme ? blackColor : whiteColor
     property color previewUrlColor: darkTheme ? "#eeeeee" : "#333"
     property color messageWebViewFooterButtonImageColor: darkTheme ? "#838383" : "#656565"
-    property color chatviewUsernameColor: "#A7A7A7"
+    property color chatviewSecondaryInformationColor: "#A7A7A7"
 
     // ChatView Footer
     property color chatViewFooterListColor: darkTheme ? blackColor : "#E5E5E5"
@@ -387,10 +387,6 @@ Item {
 
     // TimestampInfo
     property int timestampLinePadding: 40
-    property int dayTimestampTopMargin: 8
-    property int dayTimestampBottomMargin: 8
-    property int timestampBottomMargin: 16
-    property int timestampTopMargin: 16
     property int dayTimestampHPadding: 16
     property real dayTimestampVPadding: 32
     property real timestampFont: calcSize(12)

src/app/mainview/components/MessagesResearchView.qml

@@ -105,7 +105,7 @@ ListView {
                         Layout.rightMargin: 10
                         Layout.leftMargin: 10
                         font.pixelSize: 0
-                        color: JamiTheme.chatviewUsernameColor
+                        color: JamiTheme.chatviewSecondaryInformationColor
                         font.bold: true
                     }
 
@@ -145,7 +145,7 @@ ListView {
                 id: buttonJumpText
 
                 text: JamiStrings.jumpTo
-                color: buttonJumpTo.hovered ? JamiTheme.blueLinkColor : JamiTheme.chatviewUsernameColor
+                color: buttonJumpTo.hovered ? JamiTheme.blueLinkColor : JamiTheme.chatviewSecondaryInformationColor
                 font.underline: buttonJumpTo.hovered
                 anchors.centerIn: parent
                 font.pointSize: JamiTheme.jumpToFontSize