From 2dd1a68117ad903c05eb079920bc2d054f7ee41c Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Tue, 25 Oct 2016 14:38:42 +0200 Subject: [PATCH] feat(Popup/DropDownMenu): better attributes to deal with relative items --- tests/ui/modules/Common/Paned.qml | 3 +- .../ui/modules/Common/Popup/DropDownMenu.qml | 30 ++++++++++++++----- tests/ui/modules/Common/SearchBox.qml | 4 +-- .../ui/modules/Linphone/Call/CallControls.qml | 5 ++-- 4 files changed, 29 insertions(+), 13 deletions(-) diff --git a/tests/ui/modules/Common/Paned.qml b/tests/ui/modules/Common/Paned.qml index ccdee93b4..5daddc49f 100644 --- a/tests/ui/modules/Common/Paned.qml +++ b/tests/ui/modules/Common/Paned.qml @@ -27,9 +27,9 @@ Item { property alias childA: contentA.data property alias childB: contentB.data property bool defaultClosed: false + property bool resizeAInPriority: false property int closingEdge: Qt.LeftEdge // `LeftEdge` or `RightEdge`. property int defaultChildAWidth - property bool resizeAInPriority: false // User limits: string or int values. // By default: no limits. @@ -251,7 +251,6 @@ Item { onDoubleClicked: _inverseClosingState() onMouseXChanged: pressed && _applyLimitsOnUserMove(mouseX - _mouseStart) - onPressed: _mouseStart = mouseX Rectangle { diff --git a/tests/ui/modules/Common/Popup/DropDownMenu.qml b/tests/ui/modules/Common/Popup/DropDownMenu.qml index fd7e623c7..c7dfd3da8 100644 --- a/tests/ui/modules/Common/Popup/DropDownMenu.qml +++ b/tests/ui/modules/Common/Popup/DropDownMenu.qml @@ -9,11 +9,19 @@ import Utils 1.0 // =================================================================== Rectangle { - property bool drawOnRoot: false - property int entryHeight // Only with a ListView child. - property int maxMenuHeight // Only with a ListView child. + // Attributes used only with a ListView child. + property int entryHeight + property int maxMenuHeight + + // Optionnal parameter, if defined and if a click is detected + // on it, menu is not closed. property var launcher + + // Optionnal parameters, set the position of Menu relative + // to this item. property var relativeTo + property int relativeX: 0 + property int relativeY: 0 default property alias _content: content.data @@ -25,9 +33,9 @@ Rectangle { return } - if (drawOnRoot) { - this.x = relativeTo.mapToItem(null, relativeTo.width, 0).x - this.y = relativeTo.mapToItem(null, relativeTo.width, 0).y + if (relativeTo != null) { + this.x = relativeTo.mapToItem(null, relativeX, relativeY).x + this.y = relativeTo.mapToItem(null, relativeX, relativeY).y } visible = true @@ -49,6 +57,11 @@ Rectangle { return content.height } + console.assert( + entryHeight != null, + '`entryHeight` must be defined when used with `ListView`.' + ) + var height = model.count * entryHeight return (maxMenuHeight !== undefined && height > maxMenuHeight) ? maxMenuHeight @@ -61,12 +74,14 @@ Rectangle { Keys.onEscapePressed: hideMenu() + // Set parent menu to root. Component.onCompleted: { - if (drawOnRoot) { + if (relativeTo != null) { parent = Utils.getTopParent(this) } } + // Menu content. Rectangle { id: content @@ -79,6 +94,7 @@ Rectangle { } } + // Inverted mouse area to detect click outside menu. InvertedMouseArea { anchors.fill: parent enabled: parent.visible diff --git a/tests/ui/modules/Common/SearchBox.qml b/tests/ui/modules/Common/SearchBox.qml index cd315d91e..e7317a7e2 100644 --- a/tests/ui/modules/Common/SearchBox.qml +++ b/tests/ui/modules/Common/SearchBox.qml @@ -21,8 +21,8 @@ Item { property alias placeholderText: searchField.placeholderText - signal menuClosed () - signal menuOpened () + signal menuClosed + signal menuOpened function _hideMenu () { menu.hideMenu() diff --git a/tests/ui/modules/Linphone/Call/CallControls.qml b/tests/ui/modules/Linphone/Call/CallControls.qml index 972e31756..d021ca9a7 100644 --- a/tests/ui/modules/Linphone/Call/CallControls.qml +++ b/tests/ui/modules/Linphone/Call/CallControls.qml @@ -50,13 +50,14 @@ RowLayout { } DropDownMenu { - drawOnRoot: true id: menu + entryHeight: 22 height: 100 - width: 120 launcher: button relativeTo: button + relativeX: button.width + width: 120 Rectangle { color: 'red'