unstable

tests/resources.qrc

@@ -53,6 +53,7 @@
     <file>ui/modules/Common/Menu/Menu.qml</file>
     <file>ui/modules/Common/Paned.qml</file>
     <file>ui/modules/Common/Popup/AbstractDropDownMenu.qml</file>
+    <file>ui/modules/Common/Popup/DesktopPopup.qml</file>
     <file>ui/modules/Common/Popup/DropDownDynamicMenu.qml</file>
     <file>ui/modules/Common/Popup/DropDownMenu.qml</file>
     <file>ui/modules/Common/Popup/PopupShadow.qml</file>

tests/ui/modules/Common/InvertedMouseArea.qml

@@ -57,7 +57,7 @@ Item {
       function _checkPosition (positionEvent) {
         // Propagate event.
         positionEvent.accepted = false
-
+        console.log('click', positionEvent.x, positionEvent.y)
         // Click is outside or not.
         if (!Utils.pointIsInItem(this, item, positionEvent)) {
           if (_timeout != null) {

tests/ui/modules/Common/Popup/AbstractDropDownMenu.qml

@@ -74,6 +74,13 @@ Item {
     }
   }
 
+  // Block clicks, wheel... below menu.
+  MouseArea {
+    anchors.fill: content
+    hoverEnabled: true
+    onWheel: {}
+  }
+
   // Menu content.
   Rectangle {
     id: content
@@ -102,19 +109,17 @@ Item {
 
   // -----------------------------------------------------------------
 
-  states: [
-    State {
-      name: 'opened'
-      when: _isOpen
+  states: State {
+    name: 'opened'
+    when: _isOpen
 
-      PropertyChanges {
-        focus: true // Necessary to use `Keys.onEscapePressed`.
-        opacity: 1
-        target: menu
-        visible: true
-      }
+    PropertyChanges {
+      focus: true // Necessary to use `Keys.onEscapePressed`.
+      opacity: 1
+      target: menu
+      visible: true
     }
-  ]
+  }
 
   transitions: [
     Transition {

tests/ui/modules/Common/Popup/DesktopPopup.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.7
+import QtQuick.Window 2.2
+
+import Utils 1.0
+
+Item {
+  id: wrapper
+
+  // Not a private property. Can be used with an id.
+  default property alias content: content.data
+
+  property alias popupX: popup.x
+  property alias popupY: popup.y
+
+  function show () {
+    popup.show()
+  }
+
+  function hide () {
+    popup.hide()
+  }
+
+  x: 0
+  y: 0
+  height: 0
+  width: 0
+  visible: false
+
+  Window {
+    id: popup
+
+    flags: Qt.SplashScreen
+    height: wrapper.content[0] != null ? wrapper.content[0].height : 0
+    width: wrapper.content[0] != null ? wrapper.content[0].width : 0
+
+    Item {
+      id: content
+
+      // Fake parent.
+      property var $parent: wrapper
+    }
+  }
+}

tests/ui/modules/Common/SearchBox.qml

@@ -2,7 +2,7 @@ import QtQuick 2.7
 import QtQuick.Controls 2.0
 
 import Common.Styles 1.0
-
+import Utils 1.0
 // ===================================================================
 // A reusable search input which display a entries model in a menu.
 // Each entry can be filtered with the search input.
@@ -41,6 +41,12 @@ Item {
     menuOpened()
   }
 
+  function getMenuInstance () {
+    console.log('instance parent', Utils.getTopParent(item))
+
+    return menu
+  }
+
   implicitHeight: searchField.height
 
   Item {
@@ -70,7 +76,7 @@ Item {
     DropDownDynamicMenu {
       id: menu
 
-      anchors.top: searchField.bottom
+      //anchors.top: searchField.bottom
       launcher: searchField
       width: searchField.width
 

tests/ui/modules/Common/qmldir

@@ -56,6 +56,7 @@ Menu                 1.0 Menu/Menu.qml
 Paned                1.0 Paned.qml
 
 # Popup
+DesktopPopup         1.0 Popup/DesktopPopup.qml
 DropDownDynamicMenu  1.0 Popup/DropDownDynamicMenu.qml
 DropDownMenu         1.0 Popup/DropDownMenu.qml
 PopupShadow          1.0 Popup/PopupShadow.qml

tests/ui/scripts/Utils/utils.js

@@ -108,10 +108,14 @@ function clearTimeout (timer) {
 
 // Returns the top (root) parent of one object.
 function getTopParent (object) {
-  var parent = object.parent
+  function _getTopParent (object) {
+    return object.$parent || object.parent
+  }
 
-  while (parent.parent != null) {
-    parent = parent.parent
+  var parent = _getTopParent(object)
+
+  while (_getTopParent(parent) != null) {
+    parent = _getTopParent(parent)
   }
 
   return parent
@@ -144,6 +148,7 @@ function qmlTypeof (object, className) {
 function pointIsInItem (source, target, point) {
   point = source.mapToItem(target.parent, point.x, point.y)
 
+  console.log('mapped point', point.x, point.y, target.x, target.y)
   return (
     point.x >= target.x &&
     point.y >= target.y &&

tests/ui/views/MainWindow/MainWindow.qml

@@ -71,20 +71,40 @@ ApplicationWindow {
         onClicked: Utils.openWindow('NewCall', window)
       }
 
+      DesktopPopup {
+        id: desktopPopup
+
+        property point coords: {
+          var point = searchBox.mapToItem(null, 0, searchBox.height)
+          point.x += window.x
+          point.y += window.y
+
+          return point
+        }
+
+        content: searchBox.getMenuInstance()
+        popupX: coords.x
+        popupY: coords.y
+
+        onVisibleChanged: !visible && searchBox._hideMenu()
+      }
+
       // Search.
       SearchBox {
+        id: searchBox
+
         Layout.fillWidth: true
         maxMenuHeight: 300 // See Hick's law for good choice.
         placeholderText: qsTr('mainSearchBarPlaceholder')
         entryHeight: 50
 
-        onMenuClosed: content.enabled = true
+        onMenuClosed: {
+          console.log('close')
+          desktopPopup.hide()
+        }
 
         onMenuOpened: {
-          if (!collapse.isCollapsed()) {
-            // TODO, open desktop popup.
-          }
-          content.enabled = false
+          desktopPopup.show()
         }
 
         model: model1
@@ -120,7 +140,6 @@ ApplicationWindow {
 
   RowLayout {
     anchors.fill: parent
-    id: content
     spacing: 0
 
     // Main menu.