Merge lp:~tpeeters/ubuntu-ui-toolkit/numHeaderActions into lp:ubuntu-ui-toolkit/staging

Proposed by Tim Peeters on 2015-12-09
Status: Merged
Approved by: Christian Dywan on 2015-12-10
Approved revision: 1743
Merged at revision: 1752
Proposed branch: lp:~tpeeters/ubuntu-ui-toolkit/numHeaderActions
Merge into: lp:ubuntu-ui-toolkit/staging
Diff against target: 257 lines (+127/-10)
5 files modified
src/Ubuntu/Components/1.3/PageHeader.qml (+5/-1)
src/Ubuntu/Components/Themes/Ambiance/1.3/ActionBarStyle.qml (+49/-2)
src/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml (+2/-2)
tests/unit_x11/tst_components/tst_actionbar.qml (+1/-1)
tests/unit_x11/tst_components/tst_pageheader.qml (+70/-4)
To merge this branch: bzr merge lp:~tpeeters/ubuntu-ui-toolkit/numHeaderActions
Reviewer Review Type Date Requested Status
Christian Dywan (community) 2015-12-09 Approve on 2015-12-10
PS Jenkins bot continuous-integration Approve on 2015-12-10
Review via email: mp+280081@code.launchpad.net

Commit message

Implement header slot management for convergence:
- Adapt the number of action slots to the width of the view.
- When a new action appears, show a quick fade-in.
- Reverse the order of the actions in the header.
- Update icon width to 4GU.

Description of the change

Implement header slot management for convergence:

- Adapt the number of action slots in the PageHeader to the width of the view. See UX specs: https://docs.google.com/document/d/1nFm8xiYhKXXuEO_IvMXoD0lASbYzYXva1BWMVanU3iw/edit#heading=h.88faiaf1ywf2

- When a new action appears in the PageHeader due to resizing, show a quick fade-in. This was reviewed with Olga and Ben K at the sprint.

- Reverse the order of the actions in the header (first action on the right side). This change was reviewed at the sprint with Olga and Ben K.

- Icon width was updated from 5GU to 4GU. This was reviewed with Jouni at the sprint.

To post a comment you must log in.
1741. By Tim Peeters on 2015-12-09

clean

1742. By Tim Peeters on 2015-12-09

clean

1743. By Tim Peeters on 2015-12-10

fix actionbar custom delegate test

Christian Dywan (kalikiana) wrote :

Looks good.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'src/Ubuntu/Components/1.3/PageHeader.qml'
2--- src/Ubuntu/Components/1.3/PageHeader.qml 2015-11-27 15:37:14 +0000
3+++ src/Ubuntu/Components/1.3/PageHeader.qml 2015-12-10 12:03:49 +0000
4@@ -144,6 +144,7 @@
5 The default value of \l leadingActionBar actions is
6 \l navigationActions, but that value can be changed to show
7 different actions in front of the title.
8+ The leading action bar has only one slot.
9 See \l ActionBar.
10 */
11 readonly property alias leadingActionBar: leading
12@@ -189,6 +190,9 @@
13 }
14 }
15 \endqml
16+ By default the trailing action bar automatically adapts
17+ its number of slots to the available space in the range
18+ from 3 to 6.
19 See \l ActionBar.
20 */
21 readonly property alias trailingActionBar: trailing
22@@ -200,7 +204,7 @@
23 rightMargin: units.gu(1)
24 }
25 height: header.__styleInstance.contentHeight
26- numberOfSlots: 3
27+ numberOfSlots: MathUtils.clamp(0.3*header.width/units.gu(4), 3, 6)
28 delegate: header.__styleInstance.defaultActionDelegate
29 visible: trailing.width > 0 // at least 1 visible action
30 }
31
32=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/ActionBarStyle.qml'
33--- src/Ubuntu/Components/Themes/Ambiance/1.3/ActionBarStyle.qml 2015-10-21 19:33:28 +0000
34+++ src/Ubuntu/Components/Themes/Ambiance/1.3/ActionBarStyle.qml 2015-12-10 12:03:49 +0000
35@@ -41,6 +41,28 @@
36
37 defaultNumberOfSlots: 3
38
39+ Component {
40+ id: fadeInComponent
41+ SequentialAnimation {
42+ id: fadeIn
43+ property alias target: opacityAnimation.target
44+ ScriptAction {
45+ script: fadeIn.target.opacity = 0.0;
46+ }
47+ UbuntuNumberAnimation {
48+ id: opacityAnimation
49+ from: 0.0
50+ to: 1.0
51+ property: "opacity"
52+ alwaysRunToEnd: true
53+ duration: UbuntuAnimation.BriskDuration
54+ }
55+ ScriptAction {
56+ script: fadeIn.destroy()
57+ }
58+ }
59+ }
60+
61 Row {
62 id: actionsContainer
63
64@@ -55,9 +77,18 @@
65 }
66 return visibleActionList;
67 }
68+ function getReversedActions(actions) {
69+ var newlist = [];
70+ for (var i=actions.length-1; i >= 0; i--) {
71+ newlist.push(actions[i]);
72+ }
73+ return newlist;
74+ }
75+
76+ property var directActions: getReversedActions(visibleActions.slice(0, numberOfSlots.used))
77 property var barActions: overflowAction.visible
78- ? visibleActions.slice(0, numberOfSlots.used).concat(overflowAction)
79- : visibleActions.slice(0, numberOfSlots.used)
80+ ? directActions.concat(overflowAction)
81+ : directActions
82 property var overflowActions: visibleActions.slice(numberOfSlots.used,
83 numberOfSlots.requested)
84
85@@ -81,6 +112,22 @@
86 objectName: "actions_repeater"
87 model: actionsContainer.barActions
88 delegate: styledItem.delegate
89+ property int previousCount: count
90+ onCountChanged: {
91+ // after all itemAdded signals
92+ previousCount = count;
93+ }
94+
95+ function fadeIn(item) {
96+ var fadeObject = fadeInComponent.createObject(actionBarStyle,
97+ {"target": item});
98+ fadeObject.target = item;
99+ fadeObject.start();
100+ }
101+ onItemAdded: {
102+ if (count <= previousCount) return; // no items added
103+ if (index == 0) fadeIn(item);
104+ }
105 }
106
107 Action {
108
109=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml'
110--- src/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml 2015-09-21 14:44:13 +0000
111+++ src/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml 2015-12-10 12:03:49 +0000
112@@ -20,8 +20,8 @@
113 Item {
114 id: iconButtonStyle
115
116- implicitWidth: units.gu(5)
117- implicitHeight: units.gu(5)
118+ implicitWidth: units.gu(4)
119+ implicitHeight: units.gu(4)
120
121 /*!
122 The color of the icons.
123
124=== modified file 'tests/unit_x11/tst_components/tst_actionbar.qml'
125--- tests/unit_x11/tst_components/tst_actionbar.qml 2015-10-05 10:53:07 +0000
126+++ tests/unit_x11/tst_components/tst_actionbar.qml 2015-12-10 12:03:49 +0000
127@@ -271,7 +271,7 @@
128 var i = 0; var button; var n = shortActionList.length;
129 for (i = 0; i < n; i++) {
130 button = findChild(customDelegateBar, "custom_delegate_button_"+i);
131- compare(button.text, shortActionList[i].text, "Incorrect custom button " + i);
132+ compare(button.text, shortActionList[n-1-i].text, "Incorrect custom button " + i);
133 }
134 button = findChild(customDelegateBar, "custom_delegate_button_" + n);
135 compare(button, null, "Too many buttons.");
136
137=== modified file 'tests/unit_x11/tst_components/tst_pageheader.qml'
138--- tests/unit_x11/tst_components/tst_pageheader.qml 2015-11-27 15:49:52 +0000
139+++ tests/unit_x11/tst_components/tst_pageheader.qml 2015-12-10 12:03:49 +0000
140@@ -18,16 +18,23 @@
141 import Ubuntu.Components 1.3
142 import Ubuntu.Test 1.0
143
144-Item {
145+Rectangle {
146 // Wrap the root Item to work around bug #1504755 which
147 // causes the OverflowPanel to open behind the PageHeader
148 // without this wrapper Item.
149 id: wrapper
150- width: units.gu(50)
151+ width: units.gu(100)
152 height: units.gu(70)
153+ color: "darkgrey"
154
155- Item {
156- anchors.fill: parent
157+ Rectangle {
158+ anchors {
159+ top: parent.top
160+ bottom: parent.bottom
161+ left: parent.left
162+ }
163+ width: widthSwitch.checked ? parent.width : units.gu(40)
164+ color: "white"
165 id: root
166
167 property real initialHeaderHeight: units.gu(6)
168@@ -64,16 +71,39 @@
169 iconName: "info"
170 text: "second"
171 onTriggered: print("Trigger second action")
172+ objectName: "two"
173 },
174 Action {
175 iconName: "search"
176 text: "third"
177 onTriggered: print("Trigger third action")
178+ objectName: "three"
179 },
180 Action {
181 iconName: "appointment"
182 text: "fourth"
183 onTriggered: print("Trigger fourth action")
184+ objectName: "four"
185+ },
186+ Action {
187+ iconName: "attachment"
188+ text: "Attach"
189+ objectName: "five"
190+ },
191+ Action {
192+ iconName: "contact"
193+ text: "Contact"
194+ objectName: "six"
195+ },
196+ Action {
197+ iconName: "like"
198+ text: "Like"
199+ objectName: "seven"
200+ },
201+ Action {
202+ iconName: "lock"
203+ text: "Lock"
204+ objectName: "eight"
205 }
206 ]
207
208@@ -195,6 +225,14 @@
209 Label {
210 text: "extension"
211 }
212+
213+ Switch {
214+ id: widthSwitch
215+ checked: false
216+ }
217+ Label {
218+ text: "Resize with window"
219+ }
220 }
221
222 PageHeader {
223@@ -414,6 +452,34 @@
224 "Sections is not hidden by clearing the actions.");
225 }
226
227+ function wait_for_animation() {
228+ // One or more action fading animations with a duration
229+ // of UbuntuAnimation.BriskDuration = 333ms.
230+ wait(500);
231+ }
232+ function check_number_of_action_slots(widthGU, numberOfSlots) {
233+ var width = units.gu(widthGU);
234+ if (wrapper.width < width) {
235+ skip("Only for screen at least " + widthGU + " GU wide.");
236+ }
237+ root.width = width;
238+ compare(header.trailingActionBar.numberOfSlots, numberOfSlots,
239+ "Header with width " + widthGU + " GU does not have "
240+ + numberOfSlots + " action slots.");
241+ }
242+ function test_number_of_action_slots() {
243+ var initialWidth = root.width;
244+ // test for the values specified in the UX specs document
245+ check_number_of_action_slots(40, 3);
246+ check_number_of_action_slots(50, 3);
247+ check_number_of_action_slots(60, 4);
248+ check_number_of_action_slots(70, 5);
249+ check_number_of_action_slots(80, 6);
250+ check_number_of_action_slots(90, 6);
251+ check_number_of_action_slots(100, 6);
252+ root.width = initialWidth;
253+ }
254+
255 // The properties of header.sections, header.leadingActionBar and
256 // header.trailingActionBar are tested in tst_sections.qml and tst_actionbar.qml.
257 }

Subscribers

People subscribed via source and target branches