CallInformationOverlay: new design

GitLab: #1417
Change-Id: I11267d130f83421f23656f65925996caded6c10b

src/app/commoncomponents/BaseModalDialog.qml

@@ -28,6 +28,7 @@ Popup {
     // convient access to closePolicy
     property bool autoClose: true
     property alias backgroundColor: container.color
+    property alias backgroundOpacity: container.background.opacity
     property alias title: titleText.text
     property var popupcontainerSubContentLoader: containerSubContentLoader
 

src/app/mainview/components/CallInformationOverlay.qml

@@ -24,17 +24,15 @@ import net.jami.Constants 1.1
 import Qt5Compat.GraphicalEffects
 import "../../commoncomponents"
 
-Popup {
+BaseModalDialog {
     id: root
 
     property real maxHeight: parent.height * 40 / 100
-    property real maxTextWidth: parent.width * 30 / 100
+    property real maxTextWidth: parent.width * 20 / 100
 
     property var advancedList
     property var fps
-
-    width: container.width
-    height: container.height
+    maximumPopupWidth: popupContent.width + 2 * popupMargins
     closePolicy: Popup.NoAutoClosed
 
     onClosed: {
@@ -48,43 +46,15 @@ Popup {
         AvAdapter.setRendererInfo();
     }
 
-    background: Rectangle {
-        color: JamiTheme.transparentColor
-    }
-
-    Rectangle {
-        id: container
-
-        color: JamiTheme.blackColor
-        opacity: 0.85
-        radius: 10
-        width: windowContent.width
-        height: windowContent.height
-
-        PushButton {
-            id: closeButton
-
-            anchors.top: container.top
-            anchors.topMargin: 5
-            anchors.right: container.right
-            anchors.rightMargin: 5
-            normalColor: JamiTheme.transparentColor
-            imageColor: JamiTheme.callInfoColor
-            source: JamiResources.round_close_24dp_svg
-            circled: false
-            toolTipText: JamiStrings.close
-
-            onClicked: {
-                root.close();
-            }
-        }
+    backgroundColor: JamiTheme.darkGreyColor
+    backgroundOpacity: 0.77
 
-        RowLayout {
+    popupContent: RowLayout {
         id: windowContent
+        spacing: JamiTheme.callInformationBlockSpacing
 
         ColumnLayout {
             spacing: JamiTheme.callInformationBlockSpacing
-                Layout.margins: JamiTheme.callInformationlayoutMargins
             Layout.preferredWidth: callInfoListview.width
             Layout.alignment: Qt.AlignTop
 
@@ -92,7 +62,10 @@ Popup {
                 id: textTest
                 color: JamiTheme.callInfoColor
                 text: JamiStrings.callInformation
-                    font.pointSize: JamiTheme.titleFontPointSize
+                font.pointSize: JamiTheme.menuFontSize
+                font.bold: true
+                Layout.maximumWidth: root.maxTextWidth
+                elide: Text.ElideRight
             }
 
             ListView {
@@ -101,11 +74,9 @@ Popup {
                 model: advancedList
                 Layout.preferredWidth: root.maxTextWidth
                 Layout.preferredHeight: contentItem.childrenRect.height < root.maxHeight ? contentItem.childrenRect.height : root.maxHeight
-                    spacing: JamiTheme.callInformationBlockSpacing
                 clip: true
 
                 delegate: Column {
-                        spacing: JamiTheme.callInformationElementsSpacing
 
                     Text {
                         color: JamiTheme.callInfoColor
@@ -130,8 +101,11 @@ Popup {
 
                         property bool showAll: false
                         width: callInfoListview.width
+                        bottomPadding: JamiTheme.callInformationBlockSpacing
+                        topPadding: JamiTheme.callInformationBlockSpacing
 
                         RowLayout {
+
                             Text {
                                 color: JamiTheme.callInfoColor
                                 text: JamiStrings.sockets
@@ -140,7 +114,7 @@ Popup {
                                 width: socketLayout.width
                             }
 
-                                PushButton {
+                            JamiPushButton {
                                 source: socketLayout.showAll ? JamiResources.expand_less_24dp_svg : JamiResources.expand_more_24dp_svg
                                 normalColor: JamiTheme.transparentColor
                                 Layout.preferredWidth: 20
@@ -199,14 +173,16 @@ Popup {
 
         ColumnLayout {
             spacing: JamiTheme.callInformationBlockSpacing
-                Layout.margins: JamiTheme.callInformationlayoutMargins
             Layout.preferredWidth: renderersInfoListview.width
             Layout.alignment: Qt.AlignTop
 
             Text {
                 color: JamiTheme.callInfoColor
                 text: JamiStrings.renderersInformation
-                    font.pointSize: JamiTheme.titleFontPointSize
+                font.pointSize: JamiTheme.menuFontSize
+                font.bold: true
+                elide: Text.ElideRight
+                Layout.maximumWidth: root.maxTextWidth
             }
 
             ListView {
@@ -250,4 +226,3 @@ Popup {
         }
     }
 }
-}