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
@@ -15,7 +18,7 @@ Item {
 
   // ---------------------------------------------------------------------------
 
-	visible: false
+  visible: false
 
   function show () {
     if (popup.visible) {
@@ -56,25 +59,25 @@ Item {
 
   // ---------------------------------------------------------------------------
 
-	Controls.Popup {
-		id: popup
+  Controls.Popup {
+    id: popup
+
+    height: wrapper._content.height
+    width: wrapper._content.width
 
-		background: Rectangle {
+    background: Rectangle {
+      color: PopupStyle.backgroundColor
       height: popup.height
       width: popup.width
 
-			layer {
-				enabled: true
-				effect: PopupShadow {}
-			}
-		}
-
-    contentItem: Column {
-      id: internalData
+      layer {
+        enabled: true
+        effect: PopupShadow {}
+      }
     }
 
     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,116 +7,111 @@ import Linphone.Styles 1.0
 
 // =============================================================================
 
-AbstractDropDownMenu {
+Popup {
   id: callStatistics
 
   property var call
 
   // ---------------------------------------------------------------------------
 
-  function _computeHeight () {
-    return CallStatisticsStyle.height
-  }
-
-  // ---------------------------------------------------------------------------
-
-  Component {
-    id: line
-
-    RowLayout {
-      spacing: CallStatisticsStyle.spacing
-      width: parent.width
-
-      // -----------------------------------------------------------------------
+  Rectangle {
+    color: CallStatisticsStyle.color
+    height: CallStatisticsStyle.height
+    width: callStatistics.width
 
-      Text {
-        Layout.preferredWidth: CallStatisticsStyle.key.width
+    Row {
+      anchors {
+        fill: parent
+        topMargin: CallStatisticsStyle.topMargin
+        leftMargin: CallStatisticsStyle.leftMargin
+        rightMargin: CallStatisticsStyle.rightMargin
+      }
 
-        color: CallStatisticsStyle.key.color
-        elide: Text.ElideRight
+      Loader {
+        property string $label: qsTr('audioStatsLabel')
+        property var $data: callStatistics.call.audioStats
 
-        font {
-          pointSize: CallStatisticsStyle.key.fontSize
-          bold: true
-        }
+        sourceComponent: media
+        width: parent.width / 2
+      }
 
-        horizontalAlignment: Text.AlignRight
-        verticalAlignment: Text.AlignVCenter
+      Loader {
+        property string $label: qsTr('videoStatsLabel')
+        property var $data: callStatistics.call.videoStats
 
-        text: modelData.key
+        sourceComponent: media
+        width: parent.width / 2
       }
+    }
 
-      // -----------------------------------------------------------------------
+    // -------------------------------------------------------------------------
+    // Line.
+    // -------------------------------------------------------------------------
 
-      Text {
-        Layout.fillWidth: true
+    Component {
+      id: line
 
-        color: CallStatisticsStyle.value.color
-        elide: Text.ElideRight
-        font.pointSize: CallStatisticsStyle.value.fontSize
+      RowLayout {
+        spacing: CallStatisticsStyle.spacing
+        width: parent.width
 
-        text: modelData.value
-      }
-    }
-  }
+        Text {
+          Layout.preferredWidth: CallStatisticsStyle.key.width
 
-  // ---------------------------------------------------------------------------
+          color: CallStatisticsStyle.key.color
+          elide: Text.ElideRight
 
-  Component {
-    id: media
+          font {
+            pointSize: CallStatisticsStyle.key.fontSize
+            bold: true
+          }
 
-    Column {
-      Text {
-        color: CallStatisticsStyle.title.color
+          horizontalAlignment: Text.AlignRight
+          verticalAlignment: Text.AlignVCenter
 
-        font {
-          bold: true
-          pointSize: CallStatisticsStyle.title.fontSize
+          text: modelData.key
         }
 
-        elide: Text.ElideRight
-        horizontalAlignment: Text.AlignHCenter
-        text: $label
+        Text {
+          Layout.fillWidth: true
 
-        height: contentHeight + CallStatisticsStyle.title.bottomMargin
-        width: parent.width
-      }
+          color: CallStatisticsStyle.value.color
+          elide: Text.ElideRight
+          font.pointSize: CallStatisticsStyle.value.fontSize
 
-      Repeater {
-        model: $data
-        delegate: line
+          text: modelData.value
+        }
       }
     }
-  }
 
-  // ---------------------------------------------------------------------------
+    // -------------------------------------------------------------------------
+    // Media.
+    // -------------------------------------------------------------------------
 
-  Rectangle {
-    anchors.fill: parent
-    color: CallStatisticsStyle.color
+    Component {
+      id: media
 
-    Row {
-      anchors {
-        fill: parent
-        topMargin: CallStatisticsStyle.topMargin
-        leftMargin: CallStatisticsStyle.leftMargin
-        rightMargin: CallStatisticsStyle.rightMargin
-      }
+      Column {
+        Text {
+          color: CallStatisticsStyle.title.color
 
-      Loader {
-        property string $label: qsTr('audioStatsLabel')
-        property var $data: callStatistics.call.audioStats
+          font {
+            bold: true
+            pointSize: CallStatisticsStyle.title.fontSize
+          }
 
-        sourceComponent: media
-        width: parent.width / 2
-      }
+          elide: Text.ElideRight
+          horizontalAlignment: Text.AlignHCenter
+          text: $label
 
-      Loader {
-        property string $label: qsTr('videoStatsLabel')
-        property var $data: callStatistics.call.videoStats
+          height: contentHeight + CallStatisticsStyle.title.bottomMargin
+          width: parent.width
+        }
 
-        sourceComponent: media
-        width: parent.width / 2
+        Repeater {
+          model: $data
+          delegate: line
+        }
       }
     }
   }

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
         }