CallMessageDelegate: add icon and follow font-size

GitLab: #1463
Change-Id: I8c61d1c526ddf69ae910627d0804608fd17b5c45

resources/icons/incoming-call.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.08" height="22.08" viewBox="0 0 22.08 22.08">
+  <path id="noun-arrow-1167262" d="M35.45,26.488l-4.476,4.476V18.9H28.916V30.964l-4.476-4.476L23,27.955,29.945,34.9l6.971-6.945Z" transform="translate(8.913 -29.202) rotate(45)" stroke="#000" stroke-width="0.5"/>
+</svg>

resources/icons/missed-incoming-call.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="8.814" viewBox="0 0 16 8.814">
+  <g id="noun-missed-3555066" transform="translate(-23.455 -28)">
+    <g id="Group_82" data-name="Group 82" transform="translate(23.455 28)">
+      <path id="Path_289" data-name="Path 289" d="M37.727,37.615a2.761,2.761,0,0,1-1.964-.815L31.17,32.211l1.782-1.782,4.589,4.593a.268.268,0,0,0,.368,0l5.852-5.852,1.782,1.782L39.691,36.8A2.761,2.761,0,0,1,37.727,37.615Z" transform="translate(-29.543 -28.802)"/>
+      <path id="Path_290" data-name="Path 290" d="M28.518,35.555H26v-6.3A1.259,1.259,0,0,1,27.259,28h6.3v2.518H28.518Z" transform="translate(-26 -28)"/>
+    </g>
+  </g>
+</svg>

resources/icons/missed-outgoing-call.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="8.814" viewBox="0 0 16 8.814">
+  <g id="noun-missed-3555066" transform="translate(-0.001)">
+    <g id="Group_82" data-name="Group 82" transform="translate(0.001)">
+      <path id="Path_289" data-name="Path 289" d="M38.986,37.615A2.761,2.761,0,0,0,40.95,36.8l4.593-4.589-1.782-1.782-4.589,4.593a.268.268,0,0,1-.368,0L32.952,29.17,31.17,30.952,37.022,36.8A2.761,2.761,0,0,0,38.986,37.615Z" transform="translate(-31.17 -28.802)"/>
+      <path id="Path_290" data-name="Path 290" d="M31.036,35.555h2.518v-6.3A1.259,1.259,0,0,0,32.3,28H26v2.518h5.036Z" transform="translate(-17.555 -28)"/>
+    </g>
+  </g>
+</svg>

resources/icons/outgoing-call.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.08" height="22.08" viewBox="0 0 22.08 22.08">
+  <path id="noun-arrow-1167262" d="M12.45,7.589,7.974,12.064V0H5.916V12.064L1.44,7.588,0,9.055,6.945,16l6.971-6.945Z" transform="translate(10.267 21.654) rotate(-135)" stroke="#000" stroke-width="0.5"/>
+</svg>

src/app/commoncomponents/CallMessageDelegate.qml

@@ -18,6 +18,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 import net.jami.Models 1.1
 import net.jami.Adapters 1.1
 import net.jami.Constants 1.1
@@ -47,6 +48,8 @@ SBSMessageBase {
 
     bubble.border.color: CurrentConversation.color
     bubble.border.width: root.isActive ? 1.5 : 0
+    bubble.color: JamiTheme.messageInBgColor
+    bubble.opacity: 0.6
 
     Connections {
         target: CurrentConversation
@@ -65,7 +68,7 @@ SBSMessageBase {
     property bool isActive: LRCInstance.indexOfActiveCall(ConfId, ActionUri, DeviceId) !== -1
     visible: isActive || ConfId === "" || Duration > 0
 
-    property var baseColor: isOutgoing? CurrentConversation.color : JamiTheme.messageInBgColor
+    property var baseColor: JamiTheme.messageInBgColor
 
     innerContent.children: [
         RowLayout {
@@ -74,22 +77,59 @@ SBSMessageBase {
             spacing: 10
             visible: root.visible
 
-            Label {
+            Image {
+                id: statusIcon
+                Layout.leftMargin: 8
+                width: 10
+                height: 10
+                verticalAlignment: Qt.AlignVCenter
+                visible: !root.isActive
+
+                source: {
+                    if (root.isOutgoing) {
+                        if (Duration > 0)
+                            return "qrc:/icons/outgoing-call.svg";
+                        else
+                            return "qrc:/icons/missed-outgoing-call.svg";
+                    } else {
+                        if (Duration > 0)
+                            return "qrc:/icons/incoming-call.svg";
+                        else
+                            return "qrc:/icons/missed-incoming-call.svg";
+                    }
+                }
+                layer {
+                    enabled: true
+                    effect: ColorOverlay {
+                        color: {
+                            if (Duration > 0)
+                                return UtilsAdapter.luma(root.baseColor) ? JamiTheme.chatviewTextColorLight : JamiTheme.chatviewTextColorDark
+                            return JamiTheme.redColor
+                        }
+                    }
+                }
+
+            }
+
+            TextEdit {
                 id: callLabel
 
-                Layout.margins: 8
+                topPadding: 8
+                bottomPadding: 8
+
                 Layout.fillWidth: true
                 Layout.rightMargin: root.isActive ? 0 : root.timeWidth + 16
-                Layout.leftMargin: root.isActive ? 10 : 8
+                Layout.leftMargin: root.isActive ? 10 : -5 /* spacing is 10 and we want 5px with icon */
 
                 text: {
                     if (root.isActive)
                         return JamiStrings.startedACall;
                     return Body;
                 }
+                verticalAlignment: Qt.AlignVCenter
                 horizontalAlignment: Qt.AlignHCenter
 
-                font.pointSize: JamiTheme.mediumFontSize
+                font.pointSize: JamiTheme.smallFontSize
                 font.hintingPreference: Font.PreferNoHinting
                 renderType: Text.NativeRendering
                 textFormat: Text.MarkdownText

src/app/commoncomponents/SBSMessageBase.qml

@@ -405,6 +405,8 @@ Control {
                                 return -20;
                             if (root.bigMsg || bubble.isDeleted)
                                 return 5;
+                            if (root.type === Interaction.Type.CALL)
+                                return 8;
                             return 9;
                         }
                     }