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

[Tim Peeters]

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.

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.

[lp:~tpeeters/ubuntu-ui-toolkit/numHeaderActions]

1741. By Tim Peeters on 2015-12-09

clean

1742. By Tim Peeters on 2015-12-09

clean

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1742
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2601/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/1329
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1332
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1332/artifact/work/output/*zip*/output.zip
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/1328

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2601/rebuild

review: Needs Fixing (continuous-integration)

[lp:~tpeeters/ubuntu-ui-toolkit/numHeaderActions]

1743. By Tim Peeters on 2015-12-10

fix actionbar custom delegate test

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1743
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2608/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/1336
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1339
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1339/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/1335

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2608/rebuild

review: Approve (continuous-integration)

[Cris Dywan (kalikiana)]

Looks good.

review: Approve

=== modified file 'src/Ubuntu/Components/1.3/PageHeader.qml'
--- src/Ubuntu/Components/1.3/PageHeader.qml	2015-11-27 15:37:14 +0000
+++ src/Ubuntu/Components/1.3/PageHeader.qml	2015-12-10 12:03:49 +0000
@@ -144,6 +144,7 @@
       The default value of \l leadingActionBar actions is
       \l navigationActions, but that value can be changed to show
       different actions in front of the title.
+      The leading action bar has only one slot.
       See \l ActionBar.
      */
     readonly property alias leadingActionBar: leading
@@ -189,6 +190,9 @@
           }
       }
       \endqml
+      By default the trailing action bar automatically adapts
+      its number of slots to the available space in the range
+      from 3 to 6.
       See \l ActionBar.
       */
     readonly property alias trailingActionBar: trailing
@@ -200,7 +204,7 @@
             rightMargin: units.gu(1)
         }
         height: header.__styleInstance.contentHeight
-        numberOfSlots: 3
+        numberOfSlots: MathUtils.clamp(0.3*header.width/units.gu(4), 3, 6)
         delegate: header.__styleInstance.defaultActionDelegate
         visible: trailing.width > 0 // at least 1 visible action
     }
 
=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/ActionBarStyle.qml'
--- src/Ubuntu/Components/Themes/Ambiance/1.3/ActionBarStyle.qml	2015-10-21 19:33:28 +0000
+++ src/Ubuntu/Components/Themes/Ambiance/1.3/ActionBarStyle.qml	2015-12-10 12:03:49 +0000
@@ -41,6 +41,28 @@
 
     defaultNumberOfSlots: 3
 
+    Component {
+        id: fadeInComponent
+        SequentialAnimation {
+            id: fadeIn
+            property alias target: opacityAnimation.target
+            ScriptAction {
+                script: fadeIn.target.opacity = 0.0;
+            }
+            UbuntuNumberAnimation {
+                id: opacityAnimation
+                from: 0.0
+                to: 1.0
+                property: "opacity"
+                alwaysRunToEnd: true
+                duration: UbuntuAnimation.BriskDuration
+            }
+            ScriptAction {
+                script: fadeIn.destroy()
+            }
+        }
+    }
+
     Row {
         id: actionsContainer
 
@@ -55,9 +77,18 @@
             }
             return visibleActionList;
         }
+        function getReversedActions(actions) {
+            var newlist = [];
+            for (var i=actions.length-1; i >= 0; i--) {
+                newlist.push(actions[i]);
+            }
+            return newlist;
+        }
+
+        property var directActions: getReversedActions(visibleActions.slice(0, numberOfSlots.used))
         property var barActions: overflowAction.visible
-                                 ? visibleActions.slice(0, numberOfSlots.used).concat(overflowAction)
-                                 : visibleActions.slice(0, numberOfSlots.used)
+                                 ? directActions.concat(overflowAction)
+                                 : directActions
         property var overflowActions: visibleActions.slice(numberOfSlots.used,
                                                            numberOfSlots.requested)
 
@@ -81,6 +112,22 @@
             objectName: "actions_repeater"
             model: actionsContainer.barActions
             delegate: styledItem.delegate
+            property int previousCount: count
+            onCountChanged: {
+                // after all itemAdded signals
+                previousCount = count;
+            }
+
+            function fadeIn(item) {
+                var fadeObject = fadeInComponent.createObject(actionBarStyle,
+                                                              {"target": item});
+                fadeObject.target = item;
+                fadeObject.start();
+            }
+            onItemAdded: {
+                if (count <= previousCount) return; // no items added
+                if (index == 0) fadeIn(item);
+            }
         }
 
         Action {
 
=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml'
--- src/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml	2015-09-21 14:44:13 +0000
+++ src/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml	2015-12-10 12:03:49 +0000
@@ -20,8 +20,8 @@
 Item {
     id: iconButtonStyle
 
-    implicitWidth: units.gu(5)
-    implicitHeight: units.gu(5)
+    implicitWidth: units.gu(4)
+    implicitHeight: units.gu(4)
 
     /*!
       The color of the icons.
 
=== modified file 'tests/unit_x11/tst_components/tst_actionbar.qml'
--- tests/unit_x11/tst_components/tst_actionbar.qml	2015-10-05 10:53:07 +0000
+++ tests/unit_x11/tst_components/tst_actionbar.qml	2015-12-10 12:03:49 +0000
@@ -271,7 +271,7 @@
             var i = 0; var button; var n = shortActionList.length;
             for (i = 0; i < n; i++) {
                 button = findChild(customDelegateBar, "custom_delegate_button_"+i);
-                compare(button.text, shortActionList[i].text, "Incorrect custom button " + i);
+                compare(button.text, shortActionList[n-1-i].text, "Incorrect custom button " + i);
             }
             button = findChild(customDelegateBar, "custom_delegate_button_" + n);
             compare(button, null, "Too many buttons.");
 
=== modified file 'tests/unit_x11/tst_components/tst_pageheader.qml'
--- tests/unit_x11/tst_components/tst_pageheader.qml	2015-11-27 15:49:52 +0000
+++ tests/unit_x11/tst_components/tst_pageheader.qml	2015-12-10 12:03:49 +0000
@@ -18,16 +18,23 @@
 import Ubuntu.Components 1.3
 import Ubuntu.Test 1.0
 
-Item {
+Rectangle {
     // Wrap the root Item to work around bug #1504755 which
     //  causes the OverflowPanel to open behind the PageHeader
     //  without this wrapper Item.
     id: wrapper
-    width: units.gu(50)
+    width: units.gu(100)
     height: units.gu(70)
+    color: "darkgrey"
 
-    Item {
-        anchors.fill: parent
+    Rectangle {
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.left
+        }
+        width: widthSwitch.checked ? parent.width : units.gu(40)
+        color: "white"
         id: root
 
         property real initialHeaderHeight: units.gu(6)
@@ -64,16 +71,39 @@
                 iconName: "info"
                 text: "second"
                 onTriggered: print("Trigger second action")
+                objectName: "two"
             },
             Action {
                 iconName: "search"
                 text: "third"
                 onTriggered: print("Trigger third action")
+                objectName: "three"
             },
             Action {
                 iconName: "appointment"
                 text: "fourth"
                 onTriggered: print("Trigger fourth action")
+                objectName: "four"
+            },
+            Action {
+                iconName: "attachment"
+                text: "Attach"
+                objectName: "five"
+            },
+            Action {
+                iconName: "contact"
+                text: "Contact"
+                objectName: "six"
+            },
+            Action {
+                iconName: "like"
+                text: "Like"
+                objectName: "seven"
+            },
+            Action {
+                iconName: "lock"
+                text: "Lock"
+                objectName: "eight"
             }
         ]
 
@@ -195,6 +225,14 @@
                 Label {
                     text: "extension"
                 }
+
+                Switch {
+                    id: widthSwitch
+                    checked: false
+                }
+                Label {
+                    text: "Resize with window"
+                }
             }
 
             PageHeader {
@@ -414,6 +452,34 @@
                         "Sections is not hidden by clearing the actions.");
             }
 
+            function wait_for_animation() {
+                // One or more action fading animations with a duration
+                // of UbuntuAnimation.BriskDuration = 333ms.
+                wait(500);
+            }
+            function check_number_of_action_slots(widthGU, numberOfSlots) {
+                var width = units.gu(widthGU);
+                if (wrapper.width < width) {
+                    skip("Only for screen at least " + widthGU + " GU wide.");
+                }
+                root.width = width;
+                compare(header.trailingActionBar.numberOfSlots, numberOfSlots,
+                        "Header with width " + widthGU + " GU does not have "
+                        + numberOfSlots + " action slots.");
+            }
+            function test_number_of_action_slots() {
+                var initialWidth = root.width;
+                // test for the values specified in the UX specs document
+                check_number_of_action_slots(40, 3);
+                check_number_of_action_slots(50, 3);
+                check_number_of_action_slots(60, 4);
+                check_number_of_action_slots(70, 5);
+                check_number_of_action_slots(80, 6);
+                check_number_of_action_slots(90, 6);
+                check_number_of_action_slots(100, 6);
+                root.width = initialWidth;
+            }
+
             // The properties of header.sections, header.leadingActionBar and
             //  header.trailingActionBar are tested in tst_sections.qml and tst_actionbar.qml.
         }