feat(ui/modules/Common/Menus): Big API changes, better and cleaner

linphone-desktop/resources.qrc

@@ -221,10 +221,10 @@
     <file>ui/modules/Common/Image/Icon.qml</file>
     <file>ui/modules/Common/Image/RoundedImage.qml</file>
     <file>ui/modules/Common/Indicators/VuMeter.qml</file>
-    <file>ui/modules/Common/Menus/ActionMenuEntry.qml</file>
-    <file>ui/modules/Common/Menus/ActionMenu.qml</file>
+    <file>ui/modules/Common/Menus/ApplicationMenu.qml</file>
     <file>ui/modules/Common/Menus/DropDownDynamicMenu.qml</file>
-    <file>ui/modules/Common/Menus/Menu.qml</file>
+    <file>ui/modules/Common/Menus/DropDownStaticMenuEntry.qml</file>
+    <file>ui/modules/Common/Menus/DropDownStaticMenu.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>
@@ -261,8 +261,8 @@
     <file>ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/TransparentTextInputStyle.qml</file>
     <file>ui/modules/Common/Styles/Indicators/VuMeterStyle.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/Menus/ApplicationMenuStyle.qml</file>
+    <file>ui/modules/Common/Styles/Menus/DropDownStaticMenuStyle.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>

linphone-desktop/ui/modules/Common/Form/+linux/SearchBox.qml

@@ -33,7 +33,7 @@ Item {
 
   // ---------------------------------------------------------------------------
 
-  function hideMenu () {
+  function closeMenu () {
     if (!_isOpen) {
       return
     }
@@ -41,7 +41,7 @@ Item {
     _isOpen = false
   }
 
-  function showMenu () {
+  function openMenu () {
     if (_isOpen) {
       return
     }
@@ -68,16 +68,16 @@ Item {
       icon: 'search'
       width: parent.width
 
-      Keys.onEscapePressed: searchBox.hideMenu()
+      Keys.onEscapePressed: searchBox.closeMenu()
       Keys.onReturnPressed: {
-        searchBox.hideMenu()
+        searchBox.closeMenu()
         searchBox.enterPressed()
       }
 
       onActiveFocusChanged: {
         if (activeFocus && !_isOpen) {
           searchBox.menuRequested()
-          searchBox.showMenu()
+          searchBox.openMenu()
         }
       }
 
@@ -96,7 +96,7 @@ Item {
       // So It's necessary to map the keys events.
       Keys.forwardTo: searchField
 
-      onMenuClosed: searchBox.hideMenu()
+      onClosed: searchBox.closeMenu()
 
       ScrollableListView {
         id: list
@@ -121,7 +121,7 @@ Item {
 
       ScriptAction {
         script: {
-          menu.show()
+          menu.open()
 
           searchBox.menuOpened()
         }
@@ -134,7 +134,7 @@ Item {
 
       ScriptAction {
         script: {
-          menu.hide()
+          menu.close()
           searchField.focus = false
 
           searchBox.menuClosed()

linphone-desktop/ui/modules/Common/Form/SearchBox.qml

@@ -38,7 +38,7 @@ Item {
 
   // ---------------------------------------------------------------------------
 
-  function hideMenu () {
+  function closeMenu () {
     if (!_isOpen) {
       return
     }
@@ -46,7 +46,7 @@ Item {
     _isOpen = false
   }
 
-  function showMenu () {
+  function openMenu () {
     if (_isOpen) {
       return
     }
@@ -60,7 +60,7 @@ Item {
   }
 
   function _handleCoords () {
-    searchBox.hideMenu()
+    searchBox.closeMenu()
 
     var point = searchBox.mapToItem(null, 0, searchBox.height)
 
@@ -82,16 +82,16 @@ Item {
       icon: 'search'
       width: parent.width
 
-      Keys.onEscapePressed: searchBox.hideMenu()
+      Keys.onEscapePressed: searchBox.closeMenu()
       Keys.onReturnPressed: {
-        searchBox.hideMenu()
+        searchBox.closeMenu()
         searchBox.enterPressed()
       }
 
       onActiveFocusChanged: {
         if (activeFocus && !_isOpen) {
           searchBox.menuRequested()
-          searchBox.showMenu()
+          searchBox.openMenu()
         }
       }
 
@@ -118,7 +118,7 @@ Item {
 
       requestActivate: true
 
-      onVisibleChanged: !visible && searchBox.hideMenu()
+      onVisibleChanged: !visible && searchBox.closeMenu()
 
       DropDownDynamicMenu {
         id: menu
@@ -127,7 +127,7 @@ Item {
         // So It's necessary to map the keys events.
         Keys.forwardTo: searchField
 
-        onMenuClosed: searchBox.hideMenu()
+        onClosed: searchBox.closeMenu()
 
         ScrollableListView {
           id: list
@@ -153,8 +153,8 @@ Item {
 
       ScriptAction {
         script: {
-          menu.show()
-          desktopPopup.show()
+          menu.open()
+          desktopPopup.open()
 
           searchBox.menuOpened()
         }
@@ -167,9 +167,9 @@ Item {
 
       ScriptAction {
         script: {
-          menu.hide()
+          menu.close()
           searchField.focus = false
-          desktopPopup.hide()
+          desktopPopup.close()
 
           searchBox.menuClosed()
         }

linphone-desktop/ui/modules/Common/Menus/ActionMenu.qml

-import QtQuick 2.7
-import QtQuick.Layouts 1.3
-
-import Common.Styles 1.0
-
-// =============================================================================
-
-ColumnLayout {
-  id: menu
-
-  spacing: ActionMenuStyle.spacing
-
-  property int entryHeight
-  property int entryWidth
-}

linphone-desktop/ui/modules/Common/Menus/Menu.qml → linphone-desktop/ui/modules/Common/Menus/ApplicationMenu.qml

@@ -35,7 +35,7 @@ Rectangle {
 
   // ---------------------------------------------------------------------------
 
-  color: MenuStyle.backgroundColor
+  color: ApplicationMenuStyle.backgroundColor
   implicitHeight: content.height
   width: entryWidth
 
@@ -43,19 +43,19 @@ Rectangle {
     id: content
 
     anchors.centerIn: parent
-    spacing: MenuStyle.spacing
+    spacing: ApplicationMenuStyle.spacing
 
     Repeater {
       model: entries
 
       Rectangle {
         color: mouseArea.pressed
-          ? MenuStyle.entry.color.pressed
+          ? ApplicationMenuStyle.entry.color.pressed
           : (_selectedEntry === index
-             ? MenuStyle.entry.color.selected
+             ? ApplicationMenuStyle.entry.color.selected
              : (mouseArea.containsMouse
-                ? MenuStyle.entry.color.hovered
-                : MenuStyle.entry.color.normal
+                ? ApplicationMenuStyle.entry.color.hovered
+                : ApplicationMenuStyle.entry.color.normal
                )
             )
         height: menu.entryHeight
@@ -64,13 +64,13 @@ Rectangle {
         RowLayout {
           anchors {
             left: parent.left
-            leftMargin: MenuStyle.entry.leftMargin
+            leftMargin: ApplicationMenuStyle.entry.leftMargin
             right: parent.right
-            rightMargin: MenuStyle.entry.rightMargin
+            rightMargin: ApplicationMenuStyle.entry.rightMargin
             verticalCenter: parent.verticalCenter
           }
 
-          spacing: MenuStyle.entry.spacing
+          spacing: ApplicationMenuStyle.entry.spacing
 
           Icon {
             icon: modelData.icon + (
@@ -78,15 +78,15 @@ Rectangle {
                 ? '_selected'
                 : '_normal'
             )
-            iconSize: MenuStyle.entry.iconSize
+            iconSize: ApplicationMenuStyle.entry.iconSize
           }
 
           Text {
             Layout.fillWidth: true
             color: _selectedEntry === index
-              ? MenuStyle.entry.text.color.selected
-              : MenuStyle.entry.text.color.normal
-            font.pointSize: MenuStyle.entry.text.fontSize
+              ? ApplicationMenuStyle.entry.text.color.selected
+              : ApplicationMenuStyle.entry.text.color.normal
+            font.pointSize: ApplicationMenuStyle.entry.text.fontSize
             height: parent.height
             text: modelData.entryName
             verticalAlignment: Text.AlignVCenter
@@ -100,9 +100,9 @@ Rectangle {
 
           height: parent.height
           color: _selectedEntry === index
-            ? MenuStyle.entry.indicator.color
+            ? ApplicationMenuStyle.entry.indicator.color
             : 'transparent'
-          width: MenuStyle.entry.indicator.width
+          width: ApplicationMenuStyle.entry.indicator.width
         }
 
         MouseArea {

linphone-desktop/ui/modules/Common/Menus/DropDownDynamicMenu.qml

@@ -22,17 +22,17 @@ Item {
 
   // ---------------------------------------------------------------------------
 
-  signal menuClosed
-  signal menuOpened
+  signal closed
+  signal opened
 
   // ---------------------------------------------------------------------------
 
-  function show () {
-    popup.show()
+  function open () {
+    popup.open()
   }
 
-  function hide () {
-    popup.hide()
+  function close () {
+    popup.close()
   }
 
   // ---------------------------------------------------------------------------
@@ -63,11 +63,15 @@ Item {
 
   // ---------------------------------------------------------------------------
 
+  visible: false
+
+  // ---------------------------------------------------------------------------
+
   Popup {
     id: popup
 
-    onShown: menu.menuOpened()
-    onHidden: menu.menuClosed()
+    onOpened: menu.opened()
+    onClosed: menu.closed()
 
     Item {
       id: menuContent

linphone-desktop/ui/modules/Common/Menus/DropDownStaticMenu.qml

+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+import Common 1.0
+import Common.Styles 1.0
+
+// =============================================================================
+
+Item {
+  id: menu
+
+  // ---------------------------------------------------------------------------
+
+  property alias relativeTo: popup.relativeTo
+  property alias relativeX: popup.relativeX
+  property alias relativeY: popup.relativeY
+
+  property alias entryHeight: menuContent.entryHeight
+  property alias entryWidth: menuContent.entryWidth
+
+  default property alias _content: menuContent.data
+
+  // ---------------------------------------------------------------------------
+
+  signal closed
+  signal opened
+
+  // ---------------------------------------------------------------------------
+
+  function open () {
+    popup.open()
+  }
+
+  function close () {
+    popup.close()
+  }
+
+  // ---------------------------------------------------------------------------
+
+  visible: false
+
+  // ---------------------------------------------------------------------------
+
+  Popup {
+    id: popup
+
+    onOpened: menu.opened()
+    onClosed: menu.closed()
+
+    ColumnLayout {
+      id: menuContent
+
+      property int entryHeight
+      property int entryWidth
+
+      spacing: DropDownStaticMenuStyle.spacing
+      height: menu._content.length
+      width: menu.entryWidth
+    }
+  }
+}

linphone-desktop/ui/modules/Common/Menus/ActionMenuEntry.qml → linphone-desktop/ui/modules/Common/Menus/DropDownStaticMenuEntry.qml

@@ -12,10 +12,10 @@ Rectangle {
   signal clicked
 
   color: mouseArea.pressed
-    ? ActionMenuStyle.entry.color.pressed
+    ? DropDownStaticMenuStyle.entry.color.pressed
     : (mouseArea.containsMouse
-       ? ActionMenuStyle.entry.color.hovered
-       : ActionMenuStyle.entry.color.normal
+       ? DropDownStaticMenuStyle.entry.color.hovered
+       : DropDownStaticMenuStyle.entry.color.normal
       )
   height: parent.entryHeight
   width: parent.entryWidth
@@ -25,14 +25,14 @@ Rectangle {
 
     anchors {
       left: parent.left
-      leftMargin: ActionMenuStyle.entry.leftMargin
+      leftMargin: DropDownStaticMenuStyle.entry.leftMargin
       right: parent.right
-      rightMargin: ActionMenuStyle.entry.rightMargin
+      rightMargin: DropDownStaticMenuStyle.entry.rightMargin
     }
 
-    color: ActionMenuStyle.entry.text.color
+    color: DropDownStaticMenuStyle.entry.text.color
     elide: Text.ElideRight
-    font.pointSize: ActionMenuStyle.entry.text.fontSize
+    font.pointSize: DropDownStaticMenuStyle.entry.text.fontSize
 
     height: parent.height
     verticalAlignment: Text.AlignVCenter

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

@@ -10,24 +10,24 @@ Item {
 
   // ---------------------------------------------------------------------------
 
-  property alias popupX: popup.x
-  property alias popupY: popup.y
+  property alias popupX: window.x
+  property alias popupY: window.y
   property bool requestActivate: false
   property int flags: Qt.SplashScreen
 
-  readonly property alias popupWidth: popup.width
-  readonly property alias popupHeight: popup.height
+  readonly property alias popupWidth: window.width
+  readonly property alias popupHeight: window.height
 
   default property alias _content: content.data
   property bool _isOpen: false
 
   // ---------------------------------------------------------------------------
 
-  function show () {
+  function open () {
     _isOpen = true
   }
 
-  function hide () {
+  function close () {
     _isOpen = false
   }
 
@@ -45,7 +45,7 @@ Item {
   y: 0
 
   Window {
-    id: popup
+    id: window
 
     // Used for internal purposes only. Like Notifications.
     objectName: '__internalWindow'
@@ -70,7 +70,7 @@ Item {
 
     PropertyChanges {
       opacity: 1.0
-      target: popup
+      target: window
     }
   }
 
@@ -81,10 +81,10 @@ Item {
 
       ScriptAction {
         script: {
-          popup.showNormal()
+          window.showNormal()
 
           if (wrapper.requestActivate) {
-            popup.requestActivate()
+            window.requestActivate()
           }
         }
       }
@@ -95,7 +95,7 @@ Item {
       to: ''
 
       ScriptAction {
-        script: popup.hide()
+        script: window.hide()
       }
     }
   ]

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

@@ -18,14 +18,12 @@ Item {
 
   // ---------------------------------------------------------------------------
 
-  signal hidden
-  signal shown
+  signal closed
+  signal opened
 
   // ---------------------------------------------------------------------------
 
-  visible: false
-
-  function show () {
+  function open () {
     if (popup.visible) {
       return
     }
@@ -51,7 +49,7 @@ Item {
     popup.open()
   }
 
-  function hide () {
+  function close () {
     if (!popup.visible) {
       return
     }
@@ -64,6 +62,10 @@ Item {
 
   // ---------------------------------------------------------------------------
 
+  visible: false
+
+  // ---------------------------------------------------------------------------
+
   Controls.Popup {
     id: popup
 
@@ -85,7 +87,7 @@ Item {
 
     Component.onCompleted: parent = Utils.getTopParent(this)
 
-    onClosed: wrapper.hidden()
-    onOpened: wrapper.shown()
+    onClosed: wrapper.closed()
+    onOpened: wrapper.opened()
   }
 }

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

@@ -40,8 +40,8 @@ singleton TabContainerStyle         1.0 Form/Tab/TabContainerStyle.qml
 
 singleton VuMeterStyle              1.0 Indicators/VuMeterStyle.qml
 
-singleton ActionMenuStyle           1.0 Menus/ActionMenuStyle.qml
-singleton MenuStyle                 1.0 Menus/MenuStyle.qml
+singleton ApplicationMenuStyle      1.0 Menus/ApplicationMenuStyle.qml
+singleton DropDownStaticMenuStyle   1.0 Menus/DropDownStaticMenuStyle.qml
 
 singleton CollapseStyle             1.0 Misc/CollapseStyle.qml
 singleton ForceScrollBarStyle       1.0 Misc/ForceScrollBarStyle.qml

linphone-desktop/ui/modules/Common/qmldir

@@ -61,10 +61,10 @@ RoundedImage            1.0 Image/RoundedImage.qml
 
 VuMeter                 1.0 Indicators/VuMeter.qml
 
-ActionMenu              1.0 Menus/ActionMenu.qml
-ActionMenuEntry         1.0 Menus/ActionMenuEntry.qml
+ApplicationMenu         1.0 Menus/ApplicationMenu.qml
 DropDownDynamicMenu     1.0 Menus/DropDownDynamicMenu.qml
-Menu                    1.0 Menus/Menu.qml
+DropDownStaticMenu      1.0 Menus/DropDownStaticMenu.qml
+DropDownStaticMenuEntry 1.0 Menus/DropDownStaticMenuEntry.qml
 
 Borders                 1.0 Misc/Borders.qml
 Collapse                1.0 Misc/Collapse.qml

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

@@ -59,30 +59,26 @@ ListView {
         : 'burger_menu'
       iconSize: CallsStyle.entry.iconMenuSize
 
-      onClicked: popup.show()
+      onClicked: menu.open()
 
-      Popup {
-        id: popup
+      DropDownStaticMenu {
+        id: menu
 
         relativeTo: callControls
         relativeX: callControls.width
 
-        ActionMenu {
-          id: actionMenu
+        entryHeight: CallsStyle.entry.height
+        entryWidth: CallsStyle.entry.width
 
-          entryHeight: CallsStyle.entry.height
-          entryWidth: CallsStyle.entry.width
+        Repeater {
+          model: params.actions
 
-          Repeater {
-            model: params.actions
+          DropDownStaticMenuEntry {
+            entryName: modelData.name
 
-            ActionMenuEntry {
-              entryName: modelData.name
-
-              onClicked: {
-                popup.hide()
-                params.actions[index].handler()
-              }
+            onClicked: {
+              menu.close()
+              params.actions[index].handler()
             }
           }
         }

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

@@ -18,7 +18,7 @@ Item {
 
   // ---------------------------------------------------------------------------
 
-  function show () {
+  function open () {
     var length = sipAddresses.length
     if (!length) {
       return
@@ -28,7 +28,7 @@ Item {
       return sipAddressesMenu.sipAddressClicked(sipAddresses[0])
     }
 
-    menu.show()
+    menu.open()
   }
 
   function _fillModel () {
@@ -104,7 +104,7 @@ Item {
           hoverEnabled: true
 
           onClicked: {
-            menu.hide()
+            menu.close()
             sipAddressesMenu.sipAddressClicked($sipAddress)
           }
         }

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

@@ -91,7 +91,7 @@ SearchBox {
               ActionButton {
                 icon: 'video_call'
                 onClicked: {
-                  searchBox.hideMenu()
+                  searchBox.closeMenu()
                   searchBox.launchVideoCall(interpretableSipAddress)
                 }
               }
@@ -99,7 +99,7 @@ SearchBox {
               ActionButton {
                 icon: 'call'
                 onClicked: {
-                  searchBox.hideMenu()
+                  searchBox.closeMenu()
                   searchBox.launchCall(interpretableSipAddress)
                 }
               }
@@ -107,7 +107,7 @@ SearchBox {
               ActionButton {
                 icon: 'chat'
                 onClicked: {
-                  searchBox.hideMenu()
+                  searchBox.closeMenu()
                   searchBox.launchChat(interpretableSipAddress)
                 }
               }
@@ -127,7 +127,7 @@ SearchBox {
         width: parent.width
 
         onClicked: {
-          searchBox.hideMenu()
+          searchBox.closeMenu()
           searchBox.addContact(interpretableSipAddress)
         }
 
@@ -218,7 +218,7 @@ SearchBox {
             hoverEnabled: true
 
             onClicked: {
-              searchBox.hideMenu()
+              searchBox.closeMenu()
               searchBox.entryClicked($entry)
             }
           }
@@ -234,7 +234,7 @@ SearchBox {
           ActionButton {
             icon: 'video_call'
             onClicked: {
-              searchBox.hideMenu()
+              searchBox.closeMenu()
               searchBox.launchVideoCall($entry.sipAddress)
             }
           }
@@ -242,7 +242,7 @@ SearchBox {
           ActionButton {
             icon: 'call'
             onClicked: {
-              searchBox.hideMenu()
+              searchBox.closeMenu()
               searchBox.launchCall($entry.sipAddress)
             }
           }
@@ -250,7 +250,7 @@ SearchBox {
           ActionButton {
             icon: 'chat'
             onClicked: {
-              searchBox.hideMenu()
+              searchBox.closeMenu()
               searchBox.launchChat($entry.sipAddress)
             }
           }

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

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

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

@@ -70,7 +70,7 @@ Rectangle {
         iconSize: CallStyle.header.iconSize
         useStates: false
 
-        onClicked: callStatistics.show()
+        onClicked: callStatistics.open()
 
         // See: http://www.linphone.org/docs/liblinphone/group__call__misc.html#ga62c7d3d08531b0cc634b797e273a0a73
         Timer {

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

@@ -123,7 +123,7 @@ ColumnLayout  {
           ActionButton {
             icon: 'history'
 
-            onClicked: sipAddressesMenu.showMenu()
+            onClicked: sipAddressesMenu.open()
           }
         }
 

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

@@ -132,17 +132,17 @@ ColumnLayout {
 
                 ActionButton {
                   icon: 'video_call'
-                  onClicked: actions.itemAt(0).show()
+                  onClicked: actions.itemAt(0).open()
                 }
 
                 ActionButton {
                   icon: 'call'
-                  onClicked: actions.itemAt(1).show()
+                  onClicked: actions.itemAt(1).open()
                 }
 
                 ActionButton {
                   icon: 'chat'
-                  onClicked: actions.itemAt(2).show()
+                  onClicked: actions.itemAt(2).open()
                 }
               }
 

linphone-desktop/ui/views/App/Main/MainWindow.js

@@ -13,7 +13,7 @@ function handleActiveFocusItemChanged (activeFocusItem) {
   var smartSearchBar = window._smartSearchBar
 
   if (activeFocusItem == null && smartSearchBar) {
-    smartSearchBar.hideMenu()
+    smartSearchBar.closeMenu()
   }
 }
 

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

@@ -204,7 +204,7 @@ ApplicationWindow {
 
           spacing: 0
 
-          Menu {
+          ApplicationMenu {
             id: menu
 
             entryHeight: MainWindowStyle.menu.entryHeight