on xenial help sign in
Make the menus and submenus not go outside the screen when popping out
commit2d8c8aaaf2949de2967a4dbbd5d10ae5e2086e5b authorAlbert Astals Cid <albert.astals@canonical.com> dateTue 24 Jan 2017, 14:54 (10 years ago) parent75ef09c
3 files changed+103−17
qml/ApplicationMenus/MenuBar.qml+2−2 qml/ApplicationMenus/MenuPopup.qml+47−15 tests/qmltests/Stage/tst_DesktopStage.qml+54
qml/ApplicationMenus/MenuBar.qml+2−2
@@ -134,8 +134,8 @@ Item {
134134 Component {
135135 id: menuComponent
136136 MenuPopup {
137− x: visualItem.x - units.gu(1)
138− anchors.top: parent.bottom
137+ desiredX: visualItem.x - units.gu(1)
138+ desiredY: parent.height
139139 unityMenuModel: root.unityMenuModel.submenu(visualItem.__ownIndex)
140140
141141 Component.onCompleted: reset();
qml/ApplicationMenus/MenuPopup.qml+47−15
@@ -16,16 +16,48 @@
1616
1717import QtQuick 2.4
1818import QtQuick.Layouts 1.1
19−import QtQuick.Window 2.2
2019import Ubuntu.Components 1.3
2120import Ubuntu.Components.ListItems 1.3 as ListItems
2221import "../Components"
22+import "."
2323
2424UbuntuShape {
2525 id: root
2626 objectName: "menu"
2727 backgroundColor: theme.palette.normal.overlay
2828
29+ // true for submenus that need to show on the other side of their parent
30+ // if they don't fit when growing right
31+ property bool substractWidth: false
32+
33+ property real desiredX
34+ x: {
35+ var dummy = visible; // force recalc when shown/hidden
36+ var parentTopLeft = parent.mapToItem(null, 0, 0);
37+ var farX = ApplicationMenusLimits.screenWidth;
38+ if (parentTopLeft.x + width + desiredX <= farX) {
39+ return desiredX;
40+ } else {
41+ if (substractWidth) {
42+ return -width;
43+ } else {
44+ return farX - parentTopLeft.x - width;
45+ }
46+ }
47+ }
48+
49+ property real desiredY
50+ y: {
51+ var dummy = visible; // force recalc when shown/hidden
52+ var parentTopLeft = parent.mapToItem(null, 0, 0);
53+ var bottomY = ApplicationMenusLimits.screenHeight;
54+ if (parentTopLeft.y + height + desiredY <= bottomY) {
55+ return desiredY;
56+ } else {
57+ return bottomY - parentTopLeft.y - height;
58+ }
59+ }
60+
2961 property alias unityMenuModel: repeater.model
3062
3163 function show() {
@@ -64,9 +96,9 @@ UbuntuShape {
6496 readonly property int currentIndex: currentItem ? currentItem.__ownIndex : -1
6597
6698 property real __minimumWidth: units.gu(20)
67− property real __maximumWidth: Screen.width * 0.7
99+ property real __maximumWidth: ApplicationMenusLimits.screenWidth * 0.7
68100 property real __minimumHeight: units.gu(2)
69− property real __maximumHeight: Screen.height * 0.7
101+ property real __maximumHeight: ApplicationMenusLimits.screenHeight * 0.7
70102
71103 signal dismissAll()
72104
@@ -257,8 +289,9 @@ UbuntuShape {
257289 popup = submenuComponent.createObject(focusScope, {
258290 objectName: loader.objectName + "-",
259291 unityMenuModel: model,
260− x: Qt.binding(function() { return root.width }),
261− y: Qt.binding(function() {
292+ substractWidth: true,
293+ desiredX: Qt.binding(function() { return root.width }),
294+ desiredY: Qt.binding(function() {
262295 var dummy = listView.contentY; // force a recalc on contentY change.
263296 return mapToItem(container, 0, y).y;
264297 })
@@ -375,19 +408,18 @@ UbuntuShape {
375408 id: submenuLoader
376409 source: "MenuPopup.qml"
377410
411+ property real desiredX
412+ property real desiredY
413+ property bool substractWidth
378414 property var unityMenuModel: null
379415 signal retreat()
380416
381− Binding {
382− target: item
383− property: "unityMenuModel"
384− value: submenuLoader.unityMenuModel
385− }
386−
387− Binding {
388− target: item
389− property: "objectName"
390− value: submenuLoader.objectName + "menu"
417+ onLoaded: {
418+ item.unityMenuModel = Qt.binding(function() { return submenuLoader.unityMenuModel; });
419+ item.objectName = Qt.binding(function() { return submenuLoader.objectName + "menu"; });
420+ item.desiredX = Qt.binding(function() { return submenuLoader.desiredX; });
421+ item.desiredY = Qt.binding(function() { return submenuLoader.desiredY; });
422+ item.substractWidth = Qt.binding(function() { return submenuLoader.substractWidth; });
391423 }
392424
393425 Keys.onLeftPressed: retreat()
tests/qmltests/Stage/tst_DesktopStage.qml+54
@@ -29,6 +29,7 @@ import ".." // For EdgeBarrierControls
2929import "../../../qml/Stage"
3030import "../../../qml/Components"
3131import "../../../qml/Components/PanelState"
32+import "../../../qml/ApplicationMenus"
3233
3334Item {
3435 id: root
@@ -44,6 +45,8 @@ Item {
4445 }
4546
4647 Component.onCompleted: {
48+ ApplicationMenusLimits.screenWidth = Qt.binding( function() { return stageLoader.width; } );
49+ ApplicationMenusLimits.screenHeight = Qt.binding( function() { return stageLoader.height; } );
4750 QuickUtils.keyboardAttached = true;
4851 theme.name = "Ubuntu.Components.Themes.SuruDark";
4952 resetGeometry();
@@ -830,5 +833,56 @@ Item {
830833 mouseRelease(decoration);
831834 tryCompare(Mir, "cursorName", "");
832835 }
836+
837+ function test_menuPositioning_data() {
838+ return [
839+ {tag: "good", windowPosition: Qt.point(units.gu(10), units.gu(10)), expectedMenuCoordinates: Qt.point(units.gu(21.5), units.gu(3)) },
840+ {tag: "collides right", windowPosition: Qt.point(units.gu(100), units.gu(10)), expectedMenuCoordinates: Qt.point(units.gu(12), units.gu(3)) },
841+ {tag: "collides bottom", windowPosition: Qt.point(units.gu(10), units.gu(80)), expectedMenuCoordinates: Qt.point(units.gu(21.5), units.gu(-5.25)) },
842+ ]
843+ }
844+
845+ function test_menuPositioning(data) {
846+ var appDelegate = startApplication("dialer-app");
847+ appDelegate.windowedX = data.windowPosition.x;
848+ appDelegate.windowedY = data.windowPosition.y;
849+
850+ var menuItem = findChild(appDelegate, "menuBar-item3");
851+ menuItem.show();
852+
853+ var menu = findChild(appDelegate, "menuBar-item3-menu");
854+
855+ tryCompare(menu, "x", data.expectedMenuCoordinates.x);
856+ tryCompare(menu, "y", data.expectedMenuCoordinates.y);
857+ }
858+
859+ function test_submenuPositioning_data() {
860+ return [
861+ {tag: "good", windowPosition: Qt.point(units.gu(10), units.gu(10)), expectedMenuCoordinates: Qt.point(units.gu(20), units.gu(10.25)) },
862+ {tag: "collides right", windowPosition: Qt.point(units.gu(100), units.gu(10)), expectedMenuCoordinates: Qt.point(units.gu(-20), units.gu(10.25)) },
863+ {tag: "collides bottom", windowPosition: Qt.point(units.gu(10), units.gu(80)), expectedMenuCoordinates: Qt.point(units.gu(20), units.gu(0)) },
864+ ]
865+ }
866+
867+ function test_submenuPositioning(data) {
868+ var appDelegate = startApplication("dialer-app");
869+ appDelegate.windowedX = data.windowPosition.x;
870+ appDelegate.windowedY = data.windowPosition.y;
871+
872+ var menuItem = findChild(appDelegate, "menuBar-item3");
873+ menuItem.show();
874+
875+ var menu = findChild(appDelegate, "menuBar-item3-menu");
876+ menuItem = findChild(menu, "menuBar-item3-menu-item3-actionItem");
877+ tryCompare(menuItem, "visible", true);
878+ mouseMove(menuItem);
879+ mouseClick(menuItem);
880+
881+ menu = findChild(appDelegate, "menuBar-item3-menu-item3-menu");
882+
883+ console.log(menu, menu.x);
884+ tryCompare(menu, "x", data.expectedMenuCoordinates.x);
885+ tryCompare(menu, "y", data.expectedMenuCoordinates.y);
886+ }
833887 }
834888}