chatview: implement ContactMessageDelegate

GitLab: #670
Change-Id: Iab928c87f409713f867d47a2f87e53537af444b5

qml.qrc

@@ -174,6 +174,7 @@
         <file>src/commoncomponents/ReadStatus.qml</file>
         <file>src/commoncomponents/GeneratedMessageDelegate.qml</file>
         <file>src/commoncomponents/DataTransferMessageDelegate.qml</file>
+        <file>src/commoncomponents/ContactMessageDelegate.qml</file>
         <file>src/mainview/components/ScrollToBottomButton.qml</file>
         <file>src/commoncomponents/TypingDots.qml</file>
         <file>src/commoncomponents/JamiScrollBar.qml</file>

src/commoncomponents/ContactMessageDelegate.qml

+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ * Author: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import net.jami.Models 1.1
+import net.jami.Adapters 1.1
+import net.jami.Constants 1.1
+
+Column {
+    id: root
+
+    property bool showTime: false
+    property int seq: MsgSeq.single
+    property alias font: textLabel.font
+
+    width: ListView.view ? ListView.view.width : 0
+
+    spacing: 2
+    topPadding: 12
+    bottomPadding: 12
+
+    Rectangle {
+        id: msg
+
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        width: childrenRect.width + 12
+        height: JamiTheme.contactMessageAvatarSize + 12
+        radius: JamiTheme.contactMessageAvatarSize / 2 + 6
+
+        color: "transparent"
+        border.width: 1
+        border.color: CurrentConversation.isCoreDialog ? JamiTheme.messageInBgColor : CurrentConversation.color
+
+        RowLayout {
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            Avatar {
+                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
+                width: parent.width
+                text: Body
+                horizontalAlignment: Qt.AlignHCenter
+                font.pointSize: JamiTheme.contactEventPointSize
+                font.bold: true
+                color: JamiTheme.chatviewTextColor
+            }
+        }
+    }
+
+    Item {
+        id: infoCell
+
+        width: parent.width
+        height: childrenRect.height
+
+        Label {
+            text: MessagesAdapter.getFormattedTime(Timestamp)
+            color: JamiTheme.timestampColor
+            visible: showTime || seq === MsgSeq.last
+            height: visible * implicitHeight
+            font.pointSize: 9
+
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    opacity: 0
+    Behavior on opacity { NumberAnimation { duration: 100 } }
+    Component.onCompleted: opacity = 1
+}

src/commoncomponents/SBSMessageBase.qml

@@ -99,7 +99,7 @@ Control {
                     type: seq
                     color: isOutgoing ?
                                JamiTheme.messageOutBgColor :
-                               JamiTheme.messageInBgColor
+                               CurrentConversation.isCoreDialog ? JamiTheme.messageInBgColor : Qt.lighter(CurrentConversation.color, 1.5)
                     radius: msgRadius
                     anchors.right: isOutgoing ? parent.right : undefined
                     width: innerContent.childrenRect.width

src/commoncomponents/TextMessageDelegate.qml

@@ -61,9 +61,14 @@ SBSMessageBase {
             onLinkHovered: root.hoveredLink = hoveredLink
             onLinkActivated: Qt.openUrlExternally(hoveredLink)
             readOnly: true
-            color: isOutgoing ?
-                       JamiTheme.messageOutTxtColor :
-                       JamiTheme.messageInTxtColor
+            color: {
+                var luma = 0.2126 * bubble.color.r + 0.7152 * bubble.color.g + 0.0722 * bubble.color.b // ITU-R BT.709
+
+                return luma < 0.60 ?
+                       JamiTheme.chatviewTextColorLight :
+                       JamiTheme.chatviewTextColorDark
+
+            }
 
             TapHandler {
                 acceptedButtons: Qt.RightButton

src/constant/JamiTheme.qml

@@ -156,10 +156,12 @@ Item {
     property color jamiLightBlue: darkTheme ? "#003b4e" : Qt.rgba(59, 193, 211, 0.3)
     property color jamiDarkBlue: darkTheme ? "#28b1ed" : "#003b4e"
     property color chatviewTextColor: darkTheme ? "#f0f0f0" : "#353637"
+    property color chatviewTextColorLight: "#f0f0f0"
+    property color chatviewTextColorDark: "#353637"
     property color timestampColor: darkTheme ? "#bbb" : "#777"
-    property color messageOutBgColor: darkTheme ? "#28b1ed" : "#cfd8dc"
     property color messageOutTxtColor: chatviewTextColor
-    property color messageInBgColor: darkTheme? "#616161" : "#cfebf5"
+    property color messageInBgColor: darkTheme ? "#28b1ed" : "#cfd8dc"
+    property color messageOutBgColor: darkTheme? "#616161" : "#cfebf5"
     property color messageInTxtColor: chatviewTextColor
     property color fileOutTimestampColor: darkTheme ? "#eee" : "#555"
     property color fileInTimestampColor: darkTheme ? "#999" : "#555"
@@ -371,6 +373,11 @@ Item {
     // Details page
     property real detailsPageMinWidth: 300
 
+    // Messages point size
+    property real contactEventPointSize: 10 + fontSizeOffset
+    property int contactMessageAvatarSize: 24
+
+
     function setTheme(dark) {
         darkTheme = dark
     }

src/currentconversation.cpp

@@ -59,6 +59,7 @@ CurrentConversation::updateData()
             set_isRequest(convInfo.isRequest);
             set_readOnly(convInfo.readOnly);
             set_needsSyncing(convInfo.needsSyncing);
+            set_color(Utils::getAvatarColor(convId).name());
             set_isSip(accInfo.profileInfo.type == profile::Type::SIP);
             set_callId(convInfo.getCallId());
             set_allMessagesLoaded(convInfo.allMessagesLoaded);

src/currentconversation.h

@@ -41,6 +41,7 @@ class CurrentConversation final : public QObject
     QML_PROPERTY(bool, needsSyncing)
     QML_PROPERTY(bool, isSip)
     QML_PROPERTY(QString, callId)
+    QML_PROPERTY(QString, color)
     QML_PROPERTY(call::Status, callState)
     QML_PROPERTY(bool, inCall)
     QML_PROPERTY(bool, isTemporary)

src/mainview/components/FilesToSendDelegate.qml

@@ -34,7 +34,7 @@ Rectangle {
 
     radius: JamiTheme.filesToSendDelegateRadius
 
-    color: JamiTheme.messageInBgColor
+    color: CurrentConversation.color
 
     ColumnLayout {
         id: delegateFileWrapperColumnLayout

src/mainview/components/MessageListView.qml

@@ -214,7 +214,7 @@ JamiListView {
         }
         DelegateChoice {
             roleValue: Interaction.Type.CONTACT
-            GeneratedMessageDelegate {
+            ContactMessageDelegate {
                 Component.onCompleted: {
                     if (index)
                         computeTimestampVisibility(this, index)

src/mainview/components/SwarmDetailsPanel.qml

@@ -29,7 +29,7 @@ import "../../commoncomponents"
 Rectangle {
     id: root
 
-    color: JamiTheme.buttonTintedBlue
+    color: CurrentConversation.color
 
     ColumnLayout {
         id: swarmProfileDetails
@@ -108,8 +108,8 @@ Rectangle {
 
                 /*FilterTabButton {
                     id: aboutTabButton
-                    backgroundColor: JamiTheme.buttonTintedBlue
-                    hoverColor: JamiTheme.buttonTintedBlue
+                    backgroundColor: CurrentConversation.color
+                    hoverColor: CurrentConversation.color
                     borderWidth: 4
                     bottomMargin: JamiTheme.settingsMarginSize
                     fontSize: JamiTheme.menuFontSize
@@ -121,8 +121,8 @@ Rectangle {
 
                 FilterTabButton {
                     id: membersTabButton
-                    backgroundColor: JamiTheme.buttonTintedBlue
-                    hoverColor: JamiTheme.buttonTintedBlue
+                    backgroundColor: CurrentConversation.color
+                    hoverColor: CurrentConversation.color
                     borderWidth: 4
                     bottomMargin: JamiTheme.settingsMarginSize
                     fontSize: JamiTheme.menuFontSize
@@ -139,8 +139,8 @@ Rectangle {
 
                 /*FilterTabButton {
                     id: documentsTabButton
-                    backgroundColor: JamiTheme.buttonTintedBlue
-                    hoverColor: JamiTheme.buttonTintedBlue
+                    backgroundColor: CurrentConversation.color
+                    hoverColor: CurrentConversation.color
                     borderWidth: 4
                     bottomMargin: JamiTheme.settingsMarginSize
                     fontSize: JamiTheme.menuFontSize