feat(ui/views/App/Main/Contacts): supports many sip addresses

linphone-desktop/resources.qrc

@@ -212,9 +212,9 @@
     <file>ui/modules/Common/Helpers/InvertedMouseArea.qml</file>
     <file>ui/modules/Common/Image/Icon.qml</file>
     <file>ui/modules/Common/Image/RoundedImage.qml</file>
-    <file>ui/modules/Common/Menu/ActionMenuEntry.qml</file>
-    <file>ui/modules/Common/Menu/ActionMenu.qml</file>
-    <file>ui/modules/Common/Menu/Menu.qml</file>
+    <file>ui/modules/Common/Menus/ActionMenuEntry.qml</file>
+    <file>ui/modules/Common/Menus/ActionMenu.qml</file>
+    <file>ui/modules/Common/Menus/Menu.qml</file>
     <file>ui/modules/Common/Misc/Borders.qml</file>
     <file>ui/modules/Common/Misc/Collapse.qml</file>
     <file>ui/modules/Common/Misc/ForceScrollBar.qml</file>
@@ -252,8 +252,8 @@
     <file>ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/TransparentTextInputStyle.qml</file>
-    <file>ui/modules/Common/Styles/Menu/ActionMenuStyle.qml</file>
-    <file>ui/modules/Common/Styles/Menu/MenuStyle.qml</file>
+    <file>ui/modules/Common/Styles/Menus/ActionMenuStyle.qml</file>
+    <file>ui/modules/Common/Styles/Menus/MenuStyle.qml</file>
     <file>ui/modules/Common/Styles/Misc/CollapseStyle.qml</file>
     <file>ui/modules/Common/Styles/Misc/ForceScrollBarStyle.qml</file>
     <file>ui/modules/Common/Styles/Misc/PanedStyle.qml</file>
@@ -277,6 +277,7 @@
     <file>ui/modules/Linphone/Contact/ContactDescription.qml</file>
     <file>ui/modules/Linphone/Contact/Contact.qml</file>
     <file>ui/modules/Linphone/Contact/MessagesCounter.qml</file>
+    <file>ui/modules/Linphone/Menus/SipAddressesMenu.qml</file>
     <file>ui/modules/Linphone/Notifications/Notification.qml</file>
     <file>ui/modules/Linphone/Notifications/NotificationReceivedCall.qml</file>
     <file>ui/modules/Linphone/Notifications/NotificationReceivedFileMessage.qml</file>
@@ -294,6 +295,7 @@
     <file>ui/modules/Linphone/Styles/Contact/ContactDescriptionStyle.qml</file>
     <file>ui/modules/Linphone/Styles/Contact/ContactStyle.qml</file>
     <file>ui/modules/Linphone/Styles/Contact/MessagesCounterStyle.qml</file>
+    <file>ui/modules/Linphone/Styles/Menus/SipAddressesMenuStyle.qml</file>
     <file>ui/modules/Linphone/Styles/Notifications/NotificationReceivedCallStyle.qml</file>
     <file>ui/modules/Linphone/Styles/Notifications/NotificationReceivedFileMessageStyle.qml</file>
     <file>ui/modules/Linphone/Styles/Notifications/NotificationReceivedMessageStyle.qml</file>

linphone-desktop/ui/modules/Common/Styles/qmldir

@@ -38,8 +38,8 @@ singleton FormVGroupStyle           1.0 Form/Placements/FormVGroupStyle.qml
 singleton TabButtonStyle            1.0 Form/Tab/TabButtonStyle.qml
 singleton TabContainerStyle         1.0 Form/Tab/TabContainerStyle.qml
 
-singleton ActionMenuStyle           1.0 Menu/ActionMenuStyle.qml
-singleton MenuStyle                 1.0 Menu/MenuStyle.qml
+singleton ActionMenuStyle           1.0 Menus/ActionMenuStyle.qml
+singleton MenuStyle                 1.0 Menus/MenuStyle.qml
 
 singleton CollapseStyle             1.0 Misc/CollapseStyle.qml
 singleton ForceScrollBarStyle       1.0 Misc/ForceScrollBarStyle.qml

linphone-desktop/ui/modules/Common/qmldir

@@ -56,9 +56,9 @@ InvertedMouseArea    1.0 Helpers/InvertedMouseArea.qml
 Icon                 1.0 Image/Icon.qml
 RoundedImage         1.0 Image/RoundedImage.qml
 
-ActionMenu           1.0 Menu/ActionMenu.qml
-ActionMenuEntry      1.0 Menu/ActionMenuEntry.qml
-Menu                 1.0 Menu/Menu.qml
+ActionMenu           1.0 Menus/ActionMenu.qml
+ActionMenuEntry      1.0 Menus/ActionMenuEntry.qml
+Menu                 1.0 Menus/Menu.qml
 
 Borders              1.0 Misc/Borders.qml
 Collapse             1.0 Misc/Collapse.qml

linphone-desktop/ui/modules/Linphone/Menus/SipAddressesMenu.qml

+import QtQuick 2.7
+
+import Common 1.0
+import Linphone.Styles 1.0
+
+// =============================================================================
+
+Item {
+  id: sipAddressesMenu
+
+  // ---------------------------------------------------------------------------
+
+  property alias launcher: menu.launcher
+  property alias relativeTo: menu.relativeTo
+  property alias relativeX: menu.relativeX
+  property alias relativeY: menu.relativeY
+
+  property var sipAddresses: []
+
+  // ---------------------------------------------------------------------------
+
+  function showMenu () {
+    var length = sipAddresses.length
+    if (!length) {
+      return
+    }
+
+    if (length === 1) {
+      return sipAddressesMenu.sipAddressClicked(sipAddresses[0])
+    }
+
+    menu.showMenu()
+  }
+
+  function _fillModel () {
+    model.clear()
+
+    sipAddresses.forEach(function (sipAddress) {
+      model.append({ $sipAddress: sipAddress })
+    })
+  }
+
+  // ---------------------------------------------------------------------------
+
+  signal sipAddressClicked (string sipAddress)
+
+  // ---------------------------------------------------------------------------
+
+  onSipAddressesChanged: _fillModel()
+
+  // ---------------------------------------------------------------------------
+
+  DropDownDynamicMenu {
+    id: menu
+
+    parent: sipAddressesMenu.parent
+
+    entryHeight: SipAddressesMenuStyle.entry.height
+    maxMenuHeight: SipAddressesMenuStyle.maxHeight
+    width: SipAddressesMenuStyle.entry.width
+
+    ScrollableListView {
+      id: list
+
+      anchors.fill: parent
+      spacing: SipAddressesMenuStyle.spacing
+
+      model: ListModel {
+        id: model
+
+        Component.onCompleted: _fillModel()
+      }
+
+      delegate: Rectangle {
+        height: menu.entryHeight
+        width: parent.width
+
+        color: mouseArea.pressed
+          ? SipAddressesMenuStyle.entry.color.pressed
+          : (
+            mouseArea.containsMouse
+              ? SipAddressesMenuStyle.entry.color.hovered
+              : SipAddressesMenuStyle.entry.color.normal
+          )
+
+        Text {
+          anchors {
+            left: parent.left
+            leftMargin: SipAddressesMenuStyle.entry.leftMargin
+            right: parent.right
+            rightMargin: SipAddressesMenuStyle.entry.rightMargin
+          }
+
+          color: SipAddressesMenuStyle.entry.text.color
+          elide: Text.ElideRight
+          font.pointSize: SipAddressesMenuStyle.entry.text.fontSize
+          height: parent.height
+          text: $sipAddress
+          verticalAlignment: Text.AlignVCenter
+        }
+
+        MouseArea {
+          id: mouseArea
+
+          anchors.fill: parent
+          hoverEnabled: true
+
+          onClicked: {
+            menu.hideMenu()
+            sipAddressesMenu.sipAddressClicked($sipAddress)
+          }
+        }
+      }
+    }
+  }
+}

linphone-desktop/ui/modules/Linphone/Styles/Menus/SipAddressesMenuStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// =============================================================================
+
+QtObject {
+  property int spacing: 1
+  property int maxHeight: 164
+
+  property QtObject entry: QtObject {
+    property int leftMargin: 18
+    property int rightMargin: 8
+    property int height: 40
+    property int width: 300
+
+    property QtObject color: QtObject {
+      property color hovered: Colors.j
+      property color normal: Colors.g
+      property color pressed: Colors.i
+    }
+
+    property QtObject text: QtObject {
+      property color color: Colors.k
+      property int fontSize: 10
+    }
+  }
+}

linphone-desktop/ui/modules/Linphone/Styles/qmldir

@@ -18,6 +18,8 @@ singleton ContactDescriptionStyle              1.0 Contact/ContactDescriptionSty
 singleton ContactStyle                         1.0 Contact/ContactStyle.qml
 singleton MessagesCounterStyle                 1.0 Contact/MessagesCounterStyle.qml
 
+singleton SipAddressesMenuStyle                1.0 Menus/SipAddressesMenuStyle.qml
+
 singleton NotificationStyle                    1.0 Notifications/NotificationStyle.qml
 singleton NotificationReceivedCallStyle        1.0 Notifications/NotificationReceivedCallStyle.qml
 singleton NotificationReceivedMessageStyle     1.0 Notifications/NotificationReceivedMessageStyle.qml

linphone-desktop/ui/modules/Linphone/qmldir

@@ -6,29 +6,23 @@ module Linphone
 
 # Components -------------------------------------------------------------------
 
-# Account
 AccountStatus       1.0 Account/AccountStatus.qml
 
-# CardBlock
 CardBlock           1.0 CardBlock.qml
 
-# Calls
 Calls               1.0 Calls/Calls.qml
 
-# Chat
 Chat                1.0 Chat/Chat.qml
 
-# Contact
 Avatar              1.0 Contact/Avatar.qml
 Contact             1.0 Contact/Contact.qml
 ContactDescription  1.0 Contact/ContactDescription.qml
 
-# Presence
+SipAddressesMenu    1.0 Menus/SipAddressesMenu.qml
+
 PresenceLevel       1.0 Presence/PresenceLevel.qml
 PresenceString      1.0 Presence/PresenceString.qml
 
-# SmartSearchBar
 SmartSearchBar      1.0 SmartSearchBar.qml
 
-# Timeline
 Timeline            1.0 Timeline.qml

linphone-desktop/ui/views/App/Main/Contacts.qml

@@ -131,19 +131,17 @@ ColumnLayout {
 
                 ActionButton {
                   icon: 'video_call'
-                  onClicked: CallsListModel.launchVideoCall($contact.vcard.sipAddresses[0]) // FIXME: Display menu if many addresses.
+                  onClicked: actions.itemAt(0).showMenu()
                 }
 
                 ActionButton {
                   icon: 'call'
-                  onClicked: CallsListModel.launchAudioCall($contact.vcard.sipAddresses[0]) // FIXME: Display menu if many addresses.
+                  onClicked: actions.itemAt(1).showMenu()
                 }
 
                 ActionButton {
                   icon: 'chat'
-                  onClicked: window.setView('Conversation', {
-                    sipAddress: $contact.vcard.sipAddresses[0] // FIXME: Display menu if many addresses.
-                  })
+                  onClicked: actions.itemAt(2).showMenu()
                 }
               }
 
@@ -162,6 +160,33 @@ ColumnLayout {
 
           // -------------------------------------------------------------------
 
+          Repeater {
+            id: actions
+
+            readonly property var handlers: [
+              CallsListModel.launchVideoCall,
+              CallsListModel.launchAudioCall,
+              function (sipAddress) {
+                window.setView('Conversation', {
+                  sipAddress: sipAddress
+                })
+              }
+            ]
+
+            model: handlers
+
+            SipAddressesMenu {
+              relativeTo: loader
+              relativeY: loader.height
+
+              sipAddresses: $contact.vcard.sipAddresses
+
+              onSipAddressClicked: actions.handlers[index](sipAddress)
+            }
+          }
+
+          // -------------------------------------------------------------------
+
           Rectangle {
             id: indicator
 
@@ -185,7 +210,7 @@ ColumnLayout {
               hoverEnabled: true
 
               onClicked: window.setView('ContactEdit', {
-                sipAddress: $contact.vcard.sipAddresses[0] // FIXME: Display menu if many addresses.
+                sipAddress: $contact.vcard.sipAddresses[0]
               })
             }