git.iko.soy/unity8
on xenial help sign in
Menu layout fixes
6c699edNick Dedekind
qml/ApplicationMenus/MenuPopup.qml+157−113
compare with xenial
unifiedsplit
@@ -26,18 +26,18 @@ UbuntuShape {
26 objectName: "menu"
26 objectName: "menu"
27 backgroundColor: theme.palette.normal.overlay
27 backgroundColor: theme.palette.normal.overlay
28
28
29− property alias unityMenuModel: listView.model
29+ property alias unityMenuModel: repeater.model
30
30
31 readonly property real __ajustedMinimumHeight: {
31 readonly property real __ajustedMinimumHeight: {
32 if (listView.contentHeight > __minimumHeight) {
32 if (listView.contentHeight > __minimumHeight) {
33− return units.gu(30);
33+ return __minimumHeight;
34 }
34 }
35 return Math.max(listView.contentHeight, units.gu(2));
35 return Math.max(listView.contentHeight, units.gu(2));
36 }
36 }
37
37
38 readonly property real __minimumWidth: units.gu(20)
38 readonly property real __minimumWidth: units.gu(20)
39− readonly property real __minimumHeight: units.gu(30)
40 readonly property real __maximumWidth: Screen.width * 0.7
39 readonly property real __maximumWidth: Screen.width * 0.7
40+ readonly property real __minimumHeight: units.gu(30)
41 readonly property real __maximumHeight: Screen.height * 0.7
41 readonly property real __maximumHeight: Screen.height * 0.7
42
42
43 function show() {
43 function show() {
@@ -63,13 +63,13 @@ UbuntuShape {
63 d.dismissAll();
63 d.dismissAll();
64 }
64 }
65
65
66− implicitWidth: container.width
66+ implicitWidth: focusScope.width
67− implicitHeight: MathUtils.clamp(listView.contentHeight, __ajustedMinimumHeight, __maximumHeight)
67+ implicitHeight: focusScope.height
68
68
69 MenuNavigator {
69 MenuNavigator {
70 id: d
70 id: d
71 objectName: "d"
71 objectName: "d"
72− itemView: listView
72+ itemView: repeater
73
73
74 property Item currentItem: null
74 property Item currentItem: null
75 property Item hoveredItem: null
75 property Item hoveredItem: null
@@ -86,13 +86,26 @@ UbuntuShape {
86 }
86 }
87
87
88 onSelect: {
88 onSelect: {
89− currentItem = listView.itemAt(index);
89+ currentItem = repeater.itemAt(index);
90+ if (currentItem) {
91+ if (currentItem.y < listView.contentY) {
92+ listView.contentY = currentItem.y;
93+ } else if (currentItem.y + currentItem.height > listView.contentY + listView.height) {
94+ listView.contentY = currentItem.y + currentItem.height - listView.height;
95+ }
96+ }
90 }
97 }
91 }
98 }
92
99
100+ MouseArea {
101+ // Eat events.
102+ anchors.fill: parent
103+ }
104+
93 Item {
105 Item {
94 id: focusScope
106 id: focusScope
95− anchors.fill: parent
107+ width: container.width
108+ height: container.height
96 focus: visible
109 focus: visible
97
110
98 Keys.onUpPressed: d.selectPrevious(d.currentIndex)
111 Keys.onUpPressed: d.selectPrevious(d.currentIndex)
@@ -108,17 +121,17 @@ UbuntuShape {
108 id: container
121 id: container
109 objectName: "container"
122 objectName: "container"
110
123
111− width: listView.contentWidth
124+ height: MathUtils.clamp(listView.contentHeight, __ajustedMinimumHeight, __maximumHeight)
112− height: parent.height
125+ width: menuColumn.width
113 spacing: 0
126 spacing: 0
114
127
115− // FIXME use ListView.header - tried but was flaky with positionViewAtIndex.
128+ // Header - scroll up
116 Item {
129 Item {
117− Layout.fillWidth: true;
130+ Layout.fillWidth: true
118− Layout.maximumHeight: units.gu(3)
131+ height: units.gu(3)
119− Layout.minimumHeight: units.gu(3)
120 visible: listView.contentHeight > root.height
132 visible: listView.contentHeight > root.height
121 enabled: !listView.atYBeginning
133 enabled: !listView.atYBeginning
134+ z: 1
122
135
123 Rectangle {
136 Rectangle {
124 color: enabled ? theme.palette.normal.overlayText :
137 color: enabled ? theme.palette.normal.overlayText :
@@ -143,47 +156,35 @@ UbuntuShape {
143 MouseArea {
156 MouseArea {
144 anchors.fill: parent
157 anchors.fill: parent
145 onPressed: {
158 onPressed: {
146− var index = listView.indexAt(0, listView.contentY);
159+ var item = menuColumn.childAt(0, listView.contentY);
147− listView.positionViewAtIndex(index-1, ListView.Beginning);
160+ if (item) {
161+ var previousItem = item;
162+ do {
163+ previousItem = repeater.itemAt(previousItem.__ownIndex-1);
164+ if (!previousItem) {
165+ listView.contentY = 0;
166+ return;
167+ }
168+ } while (previousItem.__isSeparator);
169+
170+ listView.contentY = previousItem.y
171+ }
148 }
172 }
149 }
173 }
150 }
174 }
151
175
152− ListView {
176+ // Menu Items
177+ Flickable {
153 id: listView
178 id: listView
154− objectName: "listView"
155− Layout.fillHeight: true
156− Layout.fillWidth: true
157− contentWidth: MathUtils.clamp(contentItem.childrenRect.width,
158− __minimumWidth,
159− __maximumWidth)
160−
161− orientation: Qt.Vertical
162− interactive: contentHeight > height
163 clip: interactive
179 clip: interactive
164− highlightFollowsCurrentItem: false
165−
166− highlight: Rectangle {
167− color: "transparent"
168− border.width: units.dp(1)
169− border.color: UbuntuColors.orange
170− z: 1
171
180
172− width: listView.width
181+ Layout.fillHeight: true
173− height: d.currentItem ? d.currentItem.height : 0
182+ Layout.fillWidth: true
174− y: d.currentItem ? d.currentItem.y : 0
183+ contentHeight: menuColumn.height
175− visible: d.currentItem
184+ interactive: height < contentHeight
176− }
177−
178− function itemAt(index) {
179− if (index > count || index < 0) return null;
180− currentIndex = index;
181− return currentItem;
182− }
183
185
184 MouseArea {
186 MouseArea {
185− id: menuMouseArea
186− anchors.fill: listView
187+ anchors.fill: parent
187 hoverEnabled: true
188 hoverEnabled: true
188 propagateComposedEvents: true // propogate events so we send clicks to children.
189 propagateComposedEvents: true // propogate events so we send clicks to children.
189 z: 1 // on top so we override any other hovers
190 z: 1 // on top so we override any other hovers
@@ -195,7 +196,7 @@ UbuntuShape {
195
196
196 if (!d.hoveredItem || !d.currentItem ||
197 if (!d.hoveredItem || !d.currentItem ||
197 !d.hoveredItem.contains(Qt.point(pos.x - d.currentItem.x, pos.y - d.currentItem.y))) {
198 !d.hoveredItem.contains(Qt.point(pos.x - d.currentItem.x, pos.y - d.currentItem.y))) {
198− d.hoveredItem = listView.itemAt(listView.indexAt(pos.x, pos.y));
199+ d.hoveredItem = menuColumn.childAt(pos.x, pos.y)
199 if (!d.hoveredItem || !d.hoveredItem.enabled)
200 if (!d.hoveredItem || !d.hoveredItem.enabled)
200 return false;
201 return false;
201 d.currentItem = d.hoveredItem;
202 d.currentItem = d.hoveredItem;
@@ -216,89 +217,121 @@ UbuntuShape {
216 }
217 }
217 }
218 }
218
219
219− delegate: Loader {
220+ ColumnLayout {
220− id: loader
221+ id: menuColumn
221− objectName: root.objectName + "-item" + __ownIndex
222+ spacing: 0
222
223
223− property int __ownIndex: index
224+ Repeater {
225+ id: repeater
224
226
225− width: root.width
227+ Loader {
226− enabled: model.isSeparator ? false : model.sensitive
228+ id: loader
229+ objectName: root.objectName + "-item" + __ownIndex
227
230
228− sourceComponent: {
231+ property int __ownIndex: index
229− if (model.isSeparator) {
232+ property bool __isSeparator: model.isSeparator
230− return separatorComponent;
231− }
232− return menuItemComponent;
233− }
234
233
235− property Item popup: null
234+ enabled: __isSeparator ? false : model.sensitive
236−
235+
237− Component {
236+ sourceComponent: {
238− id: menuItemComponent
237+ if (model.isSeparator) {
239− MenuItem {
238+ return separatorComponent;
240− id: menuItem
241− menuData: model
242− objectName: loader.objectName + "-actionItem"
243−
244− action.onTriggered: {
245− d.currentItem = loader;
246−
247− if (hasSubmenu) {
248− if (!popup) {
249− var model = root.unityMenuModel.submenu(__ownIndex);
250− popup = submenuComponent.createObject(focusScope, {
251− objectName: loader.objectName + "-",
252− unityMenuModel: model,
253− x: Qt.binding(function() { return root.width }),
254− y: Qt.binding(function() { return loader.y })
255− });
256− } else if (popup) {
257− popup.visible = true;
258− }
259− popup.retreat.connect(function() {
260− popup.destroy();
261− popup = null;
262− menuItem.forceActiveFocus();
263− })
264− } else {
265− root.unityMenuModel.activate(__ownIndex);
266 }
239 }
240+ return menuItemComponent;
267 }
241 }
268
242
269− Connections {
243+ property Item popup: null
270− target: d
244+
271− onCurrentIndexChanged: {
245+ Layout.fillWidth: true
272− if (popup && d.currentIndex != __ownIndex) {
246+
247+ Component {
248+ id: menuItemComponent
249+ MenuItem {
250+ id: menuItem
251+ menuData: model
252+ objectName: loader.objectName + "-actionItem"
253+
254+ width: MathUtils.clamp(implicitWidth, __minimumWidth, __maximumWidth)
255+
256+ action.onTriggered: {
257+ d.currentItem = loader;
258+
259+ if (hasSubmenu) {
260+ if (!popup) {
261+ var model = root.unityMenuModel.submenu(__ownIndex);
262+ popup = submenuComponent.createObject(focusScope, {
263+ objectName: loader.objectName + "-",
264+ unityMenuModel: model,
265+ x: Qt.binding(function() { return root.width }),
266+ y: Qt.binding(function() {
267+ var dummy = listView.contentY; // force a recalc on contentY change.
268+ return mapToItem(container, 0, y).y;
269+ })
270+ });
271+ } else if (popup) {
273− popup.visible = false;
272+ popup.visible = true;
273+ }
274+ popup.retreat.connect(function() {
275+ popup.destroy();
276+ popup = null;
277+ menuItem.forceActiveFocus();
278+ })
279+ } else {
280+ root.unityMenuModel.activate(__ownIndex);
281+ }
274 }
282 }
283+
284+ Connections {
285+ target: d
286+ onCurrentIndexChanged: {
287+ if (popup && d.currentIndex != __ownIndex) {
288+ popup.visible = false;
289+ }
275− }
290+ }
276− onDismissAll: {
291+ onDismissAll: {
277− if (popup) {
292+ if (popup) {
278− popup.destroy();
293+ popup.destroy();
279− popup = null;
294+ popup = null;
295+ }
296+ }
280 }
297 }
281 }
298 }
282 }
299 }
283− }
284− }
285
300
286− Component {
301+ Component {
287− id: separatorComponent
302+ id: separatorComponent
288− ListItems.ThinDivider {
303+ ListItems.ThinDivider {
289− objectName: loader.objectName + "-separator"
304+ objectName: loader.objectName + "-separator"
305+ implicitHeight: units.dp(2)
306+ }
307+ }
290 }
308 }
309+
291 }
310 }
292 }
311 }
293− } // ListView
294
312
295− // FIXME use ListView.footer - tried but was flaky with positionViewAtIndex.
313+ // Highlight
314+ Rectangle {
315+ color: "transparent"
316+ border.width: units.dp(1)
317+ border.color: UbuntuColors.orange
318+ z: 1
319+
320+ width: listView.width
321+ height: d.currentItem ? d.currentItem.height : 0
322+ y: d.currentItem ? d.currentItem.y : 0
323+ visible: d.currentItem
324+ }
325+
326+ } // Flickable
327+
328+ // Header - scroll down
296 Item {
329 Item {
297− Layout.fillWidth: true;
330+ Layout.fillWidth: true
298− Layout.maximumHeight: units.gu(3)
331+ height: units.gu(3)
299− Layout.minimumHeight: units.gu(3)
300 visible: listView.contentHeight > root.height
332 visible: listView.contentHeight > root.height
301 enabled: !listView.atYEnd
333 enabled: !listView.atYEnd
334+ z: 1
302
335
303 Rectangle {
336 Rectangle {
304 color: enabled ? theme.palette.normal.overlayText :
337 color: enabled ? theme.palette.normal.overlayText :
@@ -323,8 +356,19 @@ UbuntuShape {
323 MouseArea {
356 MouseArea {
324 anchors.fill: parent
357 anchors.fill: parent
325 onPressed: {
358 onPressed: {
326− var index = listView.indexAt(0, listView.contentY);
359+ var item = menuColumn.childAt(0, listView.contentY + listView.height);
327− listView.positionViewAtIndex(index+1, ListView.Beginning);
360+ if (item) {
361+ var nextItem = item;
362+ do {
363+ nextItem = repeater.itemAt(nextItem.__ownIndex+1);
364+ if (!nextItem) {
365+ listView.contentY = listView.contentHeight - listView.height;
366+ return;
367+ }
368+ } while (nextItem.__isSeparator);
369+
370+ listView.contentY = nextItem.y - listView.height
371+ }
328 }
372 }
329 }
373 }
330 }
374 }
tests/qmltests/ApplicationMenuDataLoader.qml+13−5
@@ -10,6 +10,7 @@ Object {
10
10
11 Connections {
11 Connections {
12 id: sMgrHandler
12 id: sMgrHandler
13+ target: null
13 onSurfaceCreated: {
14 onSurfaceCreated: {
14 var fakeMenuPath = "/" + surface.persistentId.replace(/\W+/g, "");
15 var fakeMenuPath = "/" + surface.persistentId.replace(/\W+/g, "");
15
16
@@ -25,21 +26,28 @@ Object {
25 var data = [];
26 var data = [];
26 if (root === undefined) root = true;
27 if (root === undefined) root = true;
27
28
28− if (prefix === undefined) prefix = "menu"
29−
30 for (var i = 0; i < length; i++) {
29 for (var i = 0; i < length; i++) {
31
30
31+ var menuName = prefix;
32+ if (menuName === undefined) {
33+ var chars = Math.random() * 20;
34+ menuName = "";
35+ for (var x = 0; x < chars; x++) {
36+ menuName += String.fromCharCode((Math.random() * 26) + 65);
37+ }
38+ }
39+
32 var menuCode = String.fromCharCode(i+65);
40 var menuCode = String.fromCharCode(i+65);
33
41
34 var isSeparator = !root && separatorInterval > 0 && ((i+1) % separatorInterval == 0);
42 var isSeparator = !root && separatorInterval > 0 && ((i+1) % separatorInterval == 0);
35 var row = {
43 var row = {
36 "rowData": { // 1
44 "rowData": { // 1
37− "label": prefix + "&" + menuCode,
45+ "label": menuName + "&" + menuCode,
38 "sensitive": true,
46 "sensitive": true,
39 "isSeparator": isSeparator,
47 "isSeparator": isSeparator,
40 "icon": "",
48 "icon": "",
41 "ext": {},
49 "ext": {},
42− "action": prefix + menuCode,
50+ "action": menuName + menuCode,
43 "actionState": {},
51 "actionState": {},
44 "isCheck": false,
52 "isCheck": false,
45 "isRadio": false,
53 "isRadio": false,
@@ -49,7 +57,7 @@ Object {
49 }
57 }
50 var isSubmenu = root === undefined || root === true || (submenuInterval > 0 && ((i+1) % submenuInterval == 0));
58 var isSubmenu = root === undefined || root === true || (submenuInterval > 0 && ((i+1) % submenuInterval == 0));
51 if (isSubmenu && !isSeparator && depth > 1) {
59 if (isSubmenu && !isSeparator && depth > 1) {
52− row["submenu"] = generateTestData(length, depth-1, submenuInterval, separatorInterval, prefix + menuCode + ".", false);
60+ row["submenu"] = generateTestData(length, depth-1, submenuInterval, separatorInterval,prefix, false);
53 }
61 }
54 data[i] = row;
62 data[i] = row;
55 }
63 }
tests/qmltests/ApplicationMenus/tst_MenuBar.qml+5−5
@@ -65,7 +65,7 @@ Item {
65
65
66 unityMenuModel: UnityMenuModel {
66 unityMenuModel: UnityMenuModel {
67 id: menuBackend
67 id: menuBackend
68− modelData: appMenuData.generateTestData(7,5,2,3,"menu")
68+ modelData: appMenuData.generateTestData(17,5,2,3)
69 }
69 }
70 }
70 }
71 }
71 }
@@ -83,12 +83,12 @@ Item {
83
83
84 function init() {
84 function init() {
85 menuBar.dismiss();
85 menuBar.dismiss();
86− menuBackend.modelData = appMenuData.generateTestData(5,5,2,3,"menu")
86+ menuBackend.modelData = appMenuData.generateTestData(5,5,2,3)
87 activatedSpy.clear();
87 activatedSpy.clear();
88 }
88 }
89
89
90 function test_mouseNavigation() {
90 function test_mouseNavigation() {
91− menuBackend.modelData = appMenuData.generateTestData(3,3,0,0,"menu");
91+ menuBackend.modelData = appMenuData.generateTestData(3,3,0,0);
92 wait(50) // wait for row to build
92 wait(50) // wait for row to build
93 var priv = findInvisibleChild(menuBar, "d");
93 var priv = findInvisibleChild(menuBar, "d");
94
94
@@ -114,7 +114,7 @@ Item {
114 }
114 }
115
115
116 function test_keyboardNavigation_RightKeySelectsNextMenuItem(data) {
116 function test_keyboardNavigation_RightKeySelectsNextMenuItem(data) {
117− menuBackend.modelData = appMenuData.generateTestData(3,3,0,0,"menu");
117+ menuBackend.modelData = appMenuData.generateTestData(3,3,0,0);
118 var priv = findInvisibleChild(menuBar, "d");
118 var priv = findInvisibleChild(menuBar, "d");
119
119
120 var menuItem0 = findChild(menuBar, "menuBar-item0"); verify(menuItem0);
120 var menuItem0 = findChild(menuBar, "menuBar-item0"); verify(menuItem0);
@@ -139,7 +139,7 @@ Item {
139 }
139 }
140
140
141 function test_keyboardNavigation_LeftKeySelectsPreviousMenuItem(data) {
141 function test_keyboardNavigation_LeftKeySelectsPreviousMenuItem(data) {
142− menuBackend.modelData = appMenuData.generateTestData(3,3,0,0,"menu");
142+ menuBackend.modelData = appMenuData.generateTestData(3,3,0,0);
143 var priv = findInvisibleChild(menuBar, "d");
143 var priv = findInvisibleChild(menuBar, "d");
144
144
145 var menuItem0 = findChild(menuBar, "menuBar-item0"); verify(menuItem0);
145 var menuItem0 = findChild(menuBar, "menuBar-item0"); verify(menuItem0);