feat(ui/views/App/Calls/Incall): use `Popup` in `CallStatistics`

linphone-desktop/ui/modules/Common/Popup/Popup.qml

 import QtQuick 2.7
 import QtQuick.Controls 2.1 as Controls
 
+import Common.Styles 1.0
 import Utils 1.0
 
 // =============================================================================
 
 Item {
+  id: wrapper
+
   // Optionnal parameters, set the position of popup relative to this item.
   property var relativeTo
   property int relativeX: 0
@@ -59,7 +62,11 @@ Item {
   Controls.Popup {
     id: popup
 
+    height: wrapper._content.height
+    width: wrapper._content.width
+
     background: Rectangle {
+      color: PopupStyle.backgroundColor
       height: popup.height
       width: popup.width
 
@@ -69,10 +76,6 @@ Item {
       }
     }
 
-    contentItem: Column {
-      id: internalData
-    }
-
     padding: 0
 
     Component.onCompleted: parent = Utils.getTopParent(this)

linphone-desktop/ui/modules/Common/qmldir

@@ -70,7 +70,6 @@ Collapse                1.0 Misc/Collapse.qml
 ForceScrollBar          1.0 Misc/ForceScrollBar.qml
 Paned                   1.0 Misc/Paned.qml
 
-AbstractDropDownMenu    1.0 Popup/AbstractDropDownMenu.qml
 DesktopPopup            1.0 Popup/DesktopPopup.qml
 DropDownDynamicMenu     1.0 Popup/DropDownDynamicMenu.qml
 Popup                   1.0 Popup/Popup.qml

linphone-desktop/ui/modules/Linphone/Calls/CallStatistics.qml

@@ -7,18 +7,46 @@ import Linphone.Styles 1.0
 
 // =============================================================================
 
-AbstractDropDownMenu {
+Popup {
   id: callStatistics
 
   property var call
 
   // ---------------------------------------------------------------------------
 
-  function _computeHeight () {
-    return CallStatisticsStyle.height
+  Rectangle {
+    color: CallStatisticsStyle.color
+    height: CallStatisticsStyle.height
+    width: callStatistics.width
+
+    Row {
+      anchors {
+        fill: parent
+        topMargin: CallStatisticsStyle.topMargin
+        leftMargin: CallStatisticsStyle.leftMargin
+        rightMargin: CallStatisticsStyle.rightMargin
       }
 
-  // ---------------------------------------------------------------------------
+      Loader {
+        property string $label: qsTr('audioStatsLabel')
+        property var $data: callStatistics.call.audioStats
+
+        sourceComponent: media
+        width: parent.width / 2
+      }
+
+      Loader {
+        property string $label: qsTr('videoStatsLabel')
+        property var $data: callStatistics.call.videoStats
+
+        sourceComponent: media
+        width: parent.width / 2
+      }
+    }
+
+    // -------------------------------------------------------------------------
+    // Line.
+    // -------------------------------------------------------------------------
 
     Component {
       id: line
@@ -27,8 +55,6 @@ AbstractDropDownMenu {
         spacing: CallStatisticsStyle.spacing
         width: parent.width
 
-      // -----------------------------------------------------------------------
-
         Text {
           Layout.preferredWidth: CallStatisticsStyle.key.width
 
@@ -46,8 +72,6 @@ AbstractDropDownMenu {
           text: modelData.key
         }
 
-      // -----------------------------------------------------------------------
-
         Text {
           Layout.fillWidth: true
 
@@ -60,7 +84,9 @@ AbstractDropDownMenu {
       }
     }
 
-  // ---------------------------------------------------------------------------
+    // -------------------------------------------------------------------------
+    // Media.
+    // -------------------------------------------------------------------------
 
     Component {
       id: media
@@ -88,36 +114,5 @@ AbstractDropDownMenu {
         }
       }
     }
-
-  // ---------------------------------------------------------------------------
-
-  Rectangle {
-    anchors.fill: parent
-    color: CallStatisticsStyle.color
-
-    Row {
-      anchors {
-        fill: parent
-        topMargin: CallStatisticsStyle.topMargin
-        leftMargin: CallStatisticsStyle.leftMargin
-        rightMargin: CallStatisticsStyle.rightMargin
-      }
-
-      Loader {
-        property string $label: qsTr('audioStatsLabel')
-        property var $data: callStatistics.call.audioStats
-
-        sourceComponent: media
-        width: parent.width / 2
-      }
-
-      Loader {
-        property string $label: qsTr('videoStatsLabel')
-        property var $data: callStatistics.call.videoStats
-
-        sourceComponent: media
-        width: parent.width / 2
-      }
-    }
   }
 }

linphone-desktop/ui/modules/Linphone/Calls/Calls.qml

@@ -64,7 +64,6 @@ ListView {
       Popup {
         id: popup
 
-        implicitWidth: actionMenu.width
         relativeTo: callControls
         relativeX: callControls.width
 

linphone-desktop/ui/modules/Linphone/qmldir

@@ -31,3 +31,5 @@ SmartSearchBar      1.0 SmartSearchBar/SmartSearchBar.qml
 TelKeypad           1.0 TelKeypad/TelKeypad.qml
 
 Timeline            1.0 Timeline/Timeline.qml
+
+SipAddressesView    1.0 View/SipAddressesView.qml

linphone-desktop/ui/views/App/Calls/Incall.js

@@ -24,7 +24,7 @@ function handleStatusChanged (status) {
     }
 
     telKeypad.visible = false
-    callStatistics.hideMenu()
+    callStatistics.hide()
   }
 }
 

linphone-desktop/ui/views/App/Calls/Incall.qml

@@ -70,7 +70,7 @@ Rectangle {
         iconSize: CallStyle.header.iconSize
         useStates: false
 
-        onClicked: callStatistics.showMenu()
+        onClicked: callStatistics.show()
 
         // See: http://www.linphone.org/docs/liblinphone/group__call__misc.html#ga62c7d3d08531b0cc634b797e273a0a73
         Timer {
@@ -88,7 +88,6 @@ Rectangle {
           call: incall.call
           width: container.width
 
-          launcher: callQuality
           relativeTo: callQuality
           relativeY: CallStyle.header.stats.relativeY
         }