Merge lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/acceptTheComboButton into lp:ubuntu-ui-toolkit/staging

Proposed by Christian Dywan on 2016-05-23
Status: Merged
Approved by: Tim Peeters on 2016-07-26
Approved revision: 2002
Merged at revision: 2043
Proposed branch: lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/acceptTheComboButton
Merge into: lp:ubuntu-ui-toolkit/staging
Prerequisite: lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/acceptTheListItem
Diff against target: 264 lines (+59/-23)
7 files modified
examples/ubuntu-ui-toolkit-gallery/Buttons.qml (+8/-8)
src/Ubuntu/Components/1.3/ComboButton.qml (+13/-0)
src/Ubuntu/Components/Themes/Ambiance/1.3/ComboButtonStyle.qml (+5/-1)
src/Ubuntu/UbuntuToolkit/ucabstractbutton.cpp (+1/-1)
src/Ubuntu/UbuntuToolkit/ucstyleditembase_p.h (+1/-1)
tests/unit/visual/tst_combobutton.13.qml (+23/-10)
tests/unit/visual/tst_focus.13.qml (+8/-2)
To merge this branch: bzr merge lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/acceptTheComboButton
Reviewer Review Type Date Requested Status
ubuntu-sdk-build-bot continuous-integration Approve on 2016-07-26
Tim Peeters 2016-05-23 Approve on 2016-07-26
Review via email: mp+295458@code.launchpad.net

Commit Message

Enter/Return to trigger, Space to expand ComboButton

To post a comment you must log in.
1987. By Christian Dywan on 2016-06-02

Merge lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/staging

1988. By Christian Dywan on 2016-06-02

Tab focus in/ out test cases for ComboButton

1989. By Christian Dywan on 2016-06-03

Fix merging mistakes gone wrong unnoticed

1990. By Christian Dywan on 2016-06-03

Update unit test: panel becomes invisible rather than translucent

1991. By Christian Dywan on 2016-06-03

Add unit tests for ComboButton keys

1992. By Christian Dywan on 2016-06-14

Merge lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/visualSuffixes

1993. By Christian Dywan on 2016-06-16

Merge lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/staging

1994. By Christian Dywan on 2016-06-16

Use tryCompare when checking combo height/ expansion

1995. By Christian Dywan on 2016-06-20

Alias activeFocusOnTab rather than unsetting it

Otherwise the component seemingly doesn't support focus.

1996. By Christian Dywan on 2016-06-21

Add internal comment for ComboButton.keyNavigationFocus

1997. By Christian Dywan on 2016-07-14

Use ListItem(WithLabel) for ComboButton's in the gallery

1998. By Christian Dywan on 2016-07-14

Put the ComboButton back in charge of its own keyNavigationFocus

1999. By Christian Dywan on 2016-07-14

AbstractButton shouldn't by default accept Tab

This is enabled in the styles that support focus. Invisible
(Shift)Tab movement out of the box is not useful.

2000. By Christian Dywan on 2016-07-14

AbstractButton shouldn't act as a FocusScope

2001. By Christian Dywan on 2016-07-14

Merge lp:ubuntu-ui-toolkit/staging

2002. By Christian Dywan on 2016-07-22

Fix dropdown button focussing the main item

Tim Peeters (tpeeters) wrote :

code looks fine. Thanks.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'examples/ubuntu-ui-toolkit-gallery/Buttons.qml'
2--- examples/ubuntu-ui-toolkit-gallery/Buttons.qml 2016-02-12 10:55:51 +0000
3+++ examples/ubuntu-ui-toolkit-gallery/Buttons.qml 2016-07-22 15:03:38 +0000
4@@ -110,8 +110,8 @@
5 width: parent.width < units.gu(30)? parent.width : units.gu(30)
6 comboList: UbuntuListView {
7 model: 10
8- delegate: Standard {
9- text: "item #" + modelData
10+ delegate: ListItemWithLabel {
11+ title.text: "item #" + modelData
12 }
13 }
14 }
15@@ -125,8 +125,8 @@
16 width: parent.width < units.gu(30)? parent.width : units.gu(30)
17 comboList: UbuntuListView {
18 model: 10
19- delegate: Standard {
20- text: "item #" + modelData
21+ delegate: ListItemWithLabel {
22+ title.text: "item #" + modelData
23 }
24 }
25 }
26@@ -141,8 +141,8 @@
27 width: parent.width < units.gu(30)? parent.width : units.gu(30)
28 comboList: UbuntuListView {
29 model: 10
30- delegate: Standard {
31- text: "item #" + modelData
32+ delegate: ListItemWithLabel {
33+ title.text: "item #" + modelData
34 }
35 }
36 }
37@@ -157,8 +157,8 @@
38 width: parent.width < units.gu(30)? parent.width : units.gu(30)
39 comboList: UbuntuListView {
40 model: 10
41- delegate: Standard {
42- text: "item #" + modelData
43+ delegate: ListItemWithLabel {
44+ title.text: "item #" + modelData
45 }
46 }
47 }
48
49=== modified file 'src/Ubuntu/Components/1.3/ComboButton.qml'
50--- src/Ubuntu/Components/1.3/ComboButton.qml 2016-05-25 12:48:10 +0000
51+++ src/Ubuntu/Components/1.3/ComboButton.qml 2016-07-22 15:03:38 +0000
52@@ -331,6 +331,19 @@
53 onClicked: {
54 // toggle expanded
55 combo.expanded = !combo.expanded;
56+ combo.forceActiveFocus()
57+ }
58+ }
59+
60+ Keys.onReleased: {
61+ if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return) {
62+ // Enter or Return should trigger, not expand
63+ event.accepted = true;
64+ combo.trigger();
65+ } else if (event.key == Qt.Key_Space) {
66+ // Space should expand, not trigger
67+ event.accepted = true;
68+ combo.expanded = !combo.expanded;
69 }
70 }
71
72
73=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/ComboButtonStyle.qml'
74--- src/Ubuntu/Components/Themes/Ambiance/1.3/ComboButtonStyle.qml 2016-02-09 15:56:48 +0000
75+++ src/Ubuntu/Components/Themes/Ambiance/1.3/ComboButtonStyle.qml 2016-07-22 15:03:38 +0000
76@@ -237,6 +237,9 @@
77 }
78 }
79 }
80+
81+ FocusShape {
82+ }
83 }
84
85 Item {
86@@ -247,7 +250,8 @@
87 top: mainButton.bottom
88 right: parent.right
89 }
90- opacity: styledItem.expanded && (styledItem.comboList.length > 0)? 1.0 : 0.0
91+ // Hide panel to suppress keyboard input including (Shift)Tab
92+ visible: styledItem.expanded && (styledItem.comboList.length > 0)
93
94 ShaderEffectSource {
95 id: listContent
96
97=== modified file 'src/Ubuntu/UbuntuToolkit/ucabstractbutton.cpp'
98--- src/Ubuntu/UbuntuToolkit/ucabstractbutton.cpp 2016-07-07 08:42:42 +0000
99+++ src/Ubuntu/UbuntuToolkit/ucabstractbutton.cpp 2016-07-22 15:03:38 +0000
100@@ -35,12 +35,12 @@
101 , acceptEvents(true)
102 , pressAndHoldConnected(false)
103 {
104+ isFocusScope = false;
105 }
106 void UCAbstractButtonPrivate::init()
107 {
108 Q_Q(UCAbstractButton);
109 q->setActiveFocusOnPress(true);
110- q->setActiveFocusOnTab(true);
111 }
112
113 /*!
114
115=== modified file 'src/Ubuntu/UbuntuToolkit/ucstyleditembase_p.h'
116--- src/Ubuntu/UbuntuToolkit/ucstyleditembase_p.h 2016-07-07 07:21:48 +0000
117+++ src/Ubuntu/UbuntuToolkit/ucstyleditembase_p.h 2016-07-22 15:03:38 +0000
118@@ -43,7 +43,7 @@
119 Q_PROPERTY(bool activeFocusOnTab
120 READ activeFocusOnTab2
121 WRITE setActiveFocusOnTab2
122- NOTIFY activeFocusOnTabChanged2 FINAL)
123+ NOTIFY activeFocusOnTabChanged2)
124 Q_PRIVATE_PROPERTY(UCStyledItemBase::d_func(), QQmlComponent *style READ style WRITE setStyle RESET resetStyle NOTIFY styleChanged FINAL DESIGNABLE false)
125 Q_PRIVATE_PROPERTY(UCStyledItemBase::d_func(), QQuickItem *__styleInstance READ styleInstance NOTIFY styleInstanceChanged FINAL DESIGNABLE false)
126 Q_PRIVATE_PROPERTY(UCStyledItemBase::d_func(), QString styleName READ styleName WRITE setStyleName NOTIFY styleNameChanged FINAL REVISION 2)
127
128=== modified file 'tests/unit/visual/tst_combobutton.13.qml'
129--- tests/unit/visual/tst_combobutton.13.qml 2016-06-15 13:46:51 +0000
130+++ tests/unit/visual/tst_combobutton.13.qml 2016-07-22 15:03:38 +0000
131@@ -139,7 +139,7 @@
132 rectCombo.expanded = true;
133 waitForRendering(rectCombo);
134 var comboListPanel = findChild(rectCombo, "combobutton_combopanel");
135- tryCompareFunction(function() { return comboListPanel.opacity}, 1.0);
136+ tryCompareFunction(function() { return comboListPanel.visible}, true);
137 }
138
139 function test_expandRectComboThroughClick() {
140@@ -148,7 +148,7 @@
141 waitForRendering(rectCombo);
142 compare(rectCombo.expanded, true, "combo is not expanded");
143 var comboListPanel = findChild(rectCombo, "combobutton_combopanel");
144- tryCompareFunction(function() { return comboListPanel.opacity}, 1.0);
145+ tryCompareFunction(function() { return comboListPanel.visible}, true);
146 }
147
148 function test_autoCollapse() {
149@@ -157,12 +157,12 @@
150 mouseClick(dropDown, dropDown.width / 2, dropDown.height / 2);
151 waitForRendering(rectCombo);
152 compare(rectCombo.expanded, true, "combo is not expanded");
153- tryCompareFunction(function() { return comboListPanel.opacity}, 1.0);
154+ tryCompareFunction(function() { return comboListPanel.visible}, true);
155
156 mouseClick(rectCombo, rectCombo.width / 2, rectCombo.collapsedHeight / 2);
157 waitForRendering(rectCombo);
158 compare(rectCombo.expanded, false, "combo is not collapsed");
159- tryCompareFunction(function() { return comboListPanel.opacity}, 0.0);
160+ tryCompareFunction(function() { return comboListPanel.visible}, false);
161 }
162
163 function test_flickRectCombo() {
164@@ -174,7 +174,7 @@
165 var comboList = findChild(rectCombo, "combobutton_combolist");
166 mouseClick(dropDown, dropDown.width / 2, dropDown.height / 2);
167 waitForRendering(rectCombo);
168- tryCompareFunction(function() { return comboListPanel.opacity}, 1.0);
169+ tryCompareFunction(function() { return comboListPanel.visible}, true);
170 verify(comboList.height > rectCombo.expandedHeight);
171 // comboList flicker is the combolist parent's parent
172 var comboListFlicker = findChild(rectCombo, "combobutton_contentflicker");
173@@ -196,10 +196,11 @@
174 var comboList = findChild(columnCombo, "combobutton_combolist");
175 columnCombo.expanded = true;
176 waitForRendering(columnCombo);
177- tryCompareFunction(function() { return comboListPanel.opacity}, 1.0);
178+ tryCompareFunction(function() { return comboListPanel.visible}, true);
179 var comboListFlicker = findChild(columnCombo, "combobutton_contentflicker");
180+ waitForRendering(comboListFlicker);
181 compare(comboListFlicker.interactive, false, "combo list holder must not be interactive");
182- compare(comboListFlicker.height, columnCombo.comboListHeight, "combo list height differs from the holder height");
183+ tryCompare(comboListFlicker, 'height', columnCombo.comboListHeight, 500, "combo list height differs from the holder height");
184 }
185
186 function test_emptyComboExpanded() {
187@@ -208,7 +209,7 @@
188 combo.expanded = true;
189 waitForRendering(combo);
190 waitForRendering(comboListPanel);
191- tryCompareFunction(function() { return comboListPanel.opacity}, 0.0, 1000);
192+ tryCompareFunction(function() { return comboListPanel.visible}, false, 1000);
193 }
194
195 function test_longCombo() {
196@@ -217,7 +218,7 @@
197 longCombo.expanded = true;
198 waitForRendering(longCombo);
199 waitForRendering(comboListPanel);
200- tryCompareFunction(function() { return comboListPanel.opacity}, 1.0);
201+ tryCompareFunction(function() { return comboListPanel.visible}, true);
202 verify(comboListPanel.height < longCombo.expandedHeight);
203 }
204
205@@ -227,9 +228,21 @@
206 listCombo.expanded = true;
207 waitForRendering(listCombo);
208 waitForRendering(comboListPanel);
209- tryCompareFunction(function() { return comboListPanel.opacity}, 1.0);
210+ tryCompareFunction(function() { return comboListPanel.visible}, true);
211
212 compare(list.height, comboList.height, "list and comboList height differs");
213 }
214+
215+ function test_expand_via_keyboard() {
216+ rectCombo.forceActiveFocus();
217+ waitForRendering(rectCombo);
218+ tryCompare(rectCombo, 'expanded', false, 500, "ComboBox not expanded after focus");
219+ keyClick(Qt.Key_Space);
220+ waitForRendering(rectCombo);
221+ verify(rectCombo.expanded, true, "ComboBox was expanded via the Space key");
222+ keyClick(Qt.Key_Space);
223+ waitForRendering(rectCombo);
224+ tryCompare(rectCombo, 'expanded', false, 500, "ComboBox was collapsed via the Space key");
225+ }
226 }
227 }
228
229=== modified file 'tests/unit/visual/tst_focus.13.qml'
230--- tests/unit/visual/tst_focus.13.qml 2016-06-15 13:46:51 +0000
231+++ tests/unit/visual/tst_focus.13.qml 2016-07-22 15:03:38 +0000
232@@ -279,6 +279,8 @@
233 {tag: "ActionBar", from: 'actionBarShare_button', to: picker, key: Qt.Key_Tab},
234 {tag: "ActionBar(back)", from: picker, to: 'actionBarShare_button', key: Qt.Key_Backtab},
235 */
236+ {tag: "ComboButton", from: pickerPanel, to: comboButton, key: Qt.Key_Tab},
237+ {tag: "ComboButton(back)", from: comboButton, to: pickerPanel, key: Qt.Key_Backtab},
238 // Left click/ tap
239 {tag: "TextField(click)", from: dummy, to: textField, key: Qt.LeftButton},
240 {tag: "TextArea(click)", from: dummy, to: textArea, key: Qt.LeftButton},
241@@ -370,10 +372,11 @@
242
243 var center = centerOf(dropdownButton);
244 mouseClick(dropdownButton, center.x, center.y);
245+ waitForRendering(dropdownButton);
246 waitForRendering(comboButton);
247 // FIXME: lp#1368390: Buttons shouldn't grab input focus on click
248- compare(dropdownButton.focus, true, "Dropdown button hasn't got focused!");
249- compare(comboButton.focus, true, "ComboButton hasn't been focused!");
250+ compare(dropdownButton.activeFocus, false, "Dropdown button hasn't got focused!");
251+ compare(comboButton.activeFocus, true, "ComboButton hasn't been focused!");
252 comboButton.expanded = false;
253 waitForRendering(comboButton);
254 }
255@@ -448,6 +451,9 @@
256 {tag: "ListItem/Enter", key: Qt.Key_Enter, item: listItem, signalName: 'onClicked'},
257 {tag: "ListItem/Return", key: Qt.Key_Return, item: listItem, signalName: 'onClicked'},
258 {tag: "ListItem/Space", key: Qt.Key_Space, item: listItem, signalName: 'onClicked'},
259+ {tag: "ComboButton/Enter", key: Qt.Key_Enter, item: button , signalName: 'onTriggered'},
260+ {tag: "ComboButton/Return", key: Qt.Key_Return, item: button, signalName: 'onTriggered'},
261+ {tag: "ComboButton/Space", key: Qt.Key_Space, item: button, signalName: 'onTriggered'},
262 ];
263 }
264 function test_trigger_via_keyboard(data) {

Subscribers

People subscribed via source and target branches