join call message: new design

GitLab: #1325
Change-Id: I1ed0784197936121e70b47e9d7015d13aa7a8738

resources/icons/phone_in_talk_24dp.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path id="phone_in_talk_FILL0_wght400_GRAD0_opsz24_1_" data-name="phone_in_talk_FILL0_wght400_GRAD0_opsz24 (1)" d="M134.222-832a6,6,0,0,0-1.811-4.411A6,6,0,0,0,128-838.222V-840a7.737,7.737,0,0,1,3.122.633,8.132,8.132,0,0,1,2.533,1.711,8.133,8.133,0,0,1,1.711,2.533A7.74,7.74,0,0,1,136-832Zm-3.556,0a2.572,2.572,0,0,0-.778-1.889,2.571,2.571,0,0,0-1.889-.778v-1.778a4.283,4.283,0,0,1,3.144,1.3,4.283,4.283,0,0,1,1.3,3.144Zm4.4,8a13.343,13.343,0,0,1-5.489-1.211,16.42,16.42,0,0,1-4.933-3.433,16.42,16.42,0,0,1-3.433-4.933A13.343,13.343,0,0,1,120-839.067a.9.9,0,0,1,.267-.667.9.9,0,0,1,.667-.267h3.6a.827.827,0,0,1,.556.211.812.812,0,0,1,.289.5l.578,3.111a1.567,1.567,0,0,1-.022.6.934.934,0,0,1-.244.422l-2.156,2.178a10.745,10.745,0,0,0,1.056,1.589,15.638,15.638,0,0,0,1.344,1.478,15.651,15.651,0,0,0,1.444,1.278,14.051,14.051,0,0,0,1.6,1.078l2.089-2.089a1.245,1.245,0,0,1,.522-.3,1.431,1.431,0,0,1,.633-.056l3.067.622a1.029,1.029,0,0,1,.511.322.782.782,0,0,1,.2.522v3.6a.9.9,0,0,1-.267.667A.9.9,0,0,1,135.067-824Zm-12.378-10.667,1.467-1.467-.378-2.089H121.8a18.259,18.259,0,0,0,.311,1.8A9.736,9.736,0,0,0,122.689-834.667Zm7.956,7.956a11.029,11.029,0,0,0,1.767.6,10.838,10.838,0,0,0,1.811.289v-1.956l-2.089-.422ZM122.689-834.667ZM130.644-826.711Z" transform="translate(-120 840)"/>
+</svg>

src/app/commoncomponents/CallMessageDelegate.qml

@@ -25,15 +25,17 @@ import net.jami.Constants 1.1
 SBSMessageBase {
     id: root
 
-    component JoinCallButton: PushButton {
+    component JoinCallButton: MaterialButton {
         visible: root.isActive
         toolTipText: JamiStrings.joinCall
-        preferredSize: visible ? 40 : 0
-        imageColor: callLabel.color
-        normalColor: "transparent"
-        hoveredColor: Qt.rgba(255, 255, 255, 0.2)
-        border.width: 1
-        border.color: callLabel.color
+        color: JamiTheme.blackColor
+        background.opacity: hovered ? 0.2 : 0.1
+        hoveredColor: JamiTheme.blackColor
+        contentColorProvider: JamiTheme.textColor
+        textOpacity: hovered ? 1 : 0.5
+        buttontextHeightMargin: 16
+        textLeftPadding: 9
+        textRightPadding: 9
     }
 
     property bool isRemoteImage
@@ -43,6 +45,9 @@ SBSMessageBase {
     readers: Readers
     formattedTime: MessagesAdapter.getFormattedTime(Timestamp)
 
+    bubble.border.color: CurrentConversation.color
+    bubble.border.width: root.isActive ? 1.5 : 0
+
     Connections {
         target: CurrentConversation
         enabled: root.isActive
@@ -69,18 +74,18 @@ SBSMessageBase {
 
                 Layout.margins: 8
                 Layout.fillWidth: true
-                Layout.rightMargin: root.timeWidth + 16
+                Layout.rightMargin: root.isActive ? 0 : root.timeWidth + 16
+                Layout.leftMargin: root.isActive ? 10 : 8
 
                 text: {
                     if (root.isActive)
-                        return JamiStrings.joinCall;
+                        return JamiStrings.startedACall;
                     return Body;
                 }
                 horizontalAlignment: Qt.AlignHCenter
 
                 font.pointSize: JamiTheme.mediumFontSize
                 font.hintingPreference: Font.PreferNoHinting
-                font.bold: true
                 renderType: Text.NativeRendering
                 textFormat: Text.MarkdownText
 
@@ -89,17 +94,21 @@ SBSMessageBase {
 
             JoinCallButton {
                 id: joinCallInAudio
+                Layout.topMargin: 4
+                Layout.bottomMargin: 4
 
-                source: JamiResources.place_audiocall_24dp_svg
+                text: JamiStrings.joinInAudio
                 onClicked: MessagesAdapter.joinCall(ActionUri, DeviceId, ConfId, true)
             }
 
             JoinCallButton {
                 id: joinCallInVideo
+                text: JamiStrings.joinInVideo
+                Layout.topMargin: 4
+                Layout.bottomMargin: 4
 
-                source: JamiResources.videocam_24dp_svg
                 onClicked: MessagesAdapter.joinCall(ActionUri, DeviceId, ConfId)
-                Layout.rightMargin: parent.spacing
+                Layout.rightMargin: 4
             }
         }
     ]
@@ -110,5 +119,8 @@ SBSMessageBase {
             duration: 100
         }
     }
-    Component.onCompleted: opacity = 1
+    Component.onCompleted: {
+        bubble.timestampItem.visible = !root.isActive;
+        opacity = 1;
+    }
 }

src/app/commoncomponents/MaterialButton.qml

@@ -46,6 +46,7 @@ AbstractButton {
     property real textRightPadding
     property real fontSize: JamiTheme.buttontextFontPixelSize
     property real textAlignment: Text.AlignHCenter
+    property real textOpacity: 1
     checkable: false
     checked: false
 
@@ -159,6 +160,7 @@ AbstractButton {
             horizontalAlignment: root.textAlignment
             color: contentColorProvider
             font.pixelSize: fontSize
+            opacity: root.textOpacity
         }
     }
 

src/app/constant/JamiStrings.qml

@@ -772,6 +772,9 @@ Item {
     property string edit: qsTr("Edit")
     property string edited: qsTr("Edited")
     property string joinCall: qsTr("Join call")
+    property string joinInAudio: qsTr("Join in audio")
+    property string joinInVideo: qsTr("Join in video")
+    property string startedACall: qsTr("Started a call")
     property string wantToJoin: qsTr("A call is in progress. Do you want to join the call?")
     property string needsHost: qsTr("Current host for this swarm seems unreachable. Do you want to host the call?")
     property string selectHost: qsTr("Select dedicated device for hosting future calls in this swarm. If not set, the host will be the device starting a call.")

src/app/mainview/components/SmartListItemDelegate.qml

@@ -220,7 +220,8 @@ ItemDelegate {
         // Show that a call is ongoing for groups indicator
         ResponsiveImage {
             visible: ActiveCallsCount && !root.highlighted
-            source: JamiResources.videocam_24dp_svg
+            source: JamiResources.phone_in_talk_24dp_svg
+            containerWidth: 16
             color: JamiTheme.primaryForegroundColor
         }