Ubuntu UI Toolkit

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

actionVisibility
Merge into staging

Proposed by Tim Peeters on 2014-05-10

Status:

Merged

Approved by:

Zsombor Egri on 2014-05-14

Approved revision:

1054

Merged at revision:

1051

Proposed branch:

lp:~tpeeters/ubuntu-ui-toolkit/actionVisibility

Merge into:

lp:ubuntu-ui-toolkit/staging

Diff against target:

179 lines (+64/-12)

4 files modified

modules/Ubuntu/Components/Action.qml (+0/-4)
modules/Ubuntu/Components/Themes/Ambiance/NewHeaderStyle.qml (+26/-6)
tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_header.py (+33/-0)
tests/resources/toolbar/headerTools.qml (+5/-2)

To merge this branch:

bzr merge lp:~tpeeters/ubuntu-ui-toolkit/actionVisibility

Critical

Fix Released

Link a bug report

Reviewer	Review Type	Date Requested	Status
Zsombor Egri		2014-05-10	Approve on 2014-05-14
Nekhelesh Ramananthan (community)	testing		Approve on 2014-05-13
PS Jenkins bot	continuous-integration		Approve on 2014-05-12
Review via email: mp+219109@code.launchpad.net

Commit message

Take visibility of actions into account when determining whether an overflow is needed in header.

Description of the change

Take visibility of actions into account when determining whether an overflow is needed in header.

lp:~tpeeters/ubuntu-ui-toolkit/actionVisibility updated on 2014-05-12

1051. By Tim Peeters on 2014-05-10: clarify comment
1052. By Tim Peeters on 2014-05-10: better test code
1053. By Tim Peeters on 2014-05-12: wake up CI

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-05-12:

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

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/actionVisibility updated on 2014-05-12

1054. By Tim Peeters on 2014-05-12: kick jenkins

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-05-12:

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

review: Approve (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-05-12:

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

review: Approve (continuous-integration)

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-05-13:

32 + property int maximumNumberOfActions: 3

Discuss this with UX, what will be the policy if more space is available (i.e. Landscape, tablet, desktop)

Revision history for this message

Nekhelesh Ramananthan (nik90) wrote on 2014-05-13:

Wow this works beautifully! Without this MP, here is how it looks. https://imgur.com/5SdHwlw.

After using this MP, when you navigate to the timer tab, you are shown a + button to create a new timer as shown at
https://imgur.com/BdwUU8m. After pressing on it, it hides the + button and shows the save and cancel button as seen in https://imgur.com/IvHiFO0. I did not see any Actions.visibility property being deprecated or anything. The show/hiding of actions seems to work nicely.

Approving.

review: Approve (testing)

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-05-13:

> 32 + property int maximumNumberOfActions: 3
>
> Discuss this with UX, what will be the policy if more space is available (i.e.
> Landscape, tablet, desktop)

Yes we will discuss that with design for sure. But for now on the phone this value is good, and having the property makes it easier to later automatically determine the correct amount on different form factors.

So, is the MR ready to go?

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-05-14:

Ok, ready to go now. Thx!

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Dan Chapman 

Tim Peeters

Tom Mirmar

Ubuntu SDK team

 === modified file 'modules/Ubuntu/Components/Action.qml'
 --- modules/Ubuntu/Components/Action.qml	2014-04-23 08:50:20 +0000
 +++ modules/Ubuntu/Components/Action.qml	2014-05-12 19:37:24 +0000
@@ -74,13 +74,9 @@
       */
      /*!
--      \deprecated
--      \b {visible is DEPRECATED. Use \l ActionItem to specify the representation of an \l Action.}
        The action is visible to the user
       */
      property bool visible: true
--    /*! \internal */
--    onVisibleChanged: print("Action.visible is a DEPRECATED property. Use ActionItems to specify the representation of an Action.")
      /*!
        Enable the action. It may be visible, but disabled.
 === modified file 'modules/Ubuntu/Components/Themes/Ambiance/NewHeaderStyle.qml'
 --- modules/Ubuntu/Components/Themes/Ambiance/NewHeaderStyle.qml	2014-05-06 16:25:45 +0000
 +++ modules/Ubuntu/Components/Themes/Ambiance/NewHeaderStyle.qml	2014-05-12 19:37:24 +0000
@@ -43,6 +43,14 @@
      property color textColor: Theme.palette.selected.backgroundText
      property real textLeftMargin: units.gu(2)
++    /*!
++      The number of slots for actions in the header, including the optional
++      (custom or automatic) back button in the left side of the header.
++      If the number of actions defined is larger than the numer of actions
++      specified here, extra actions are put into an overflow.
++     */
++    property int maximumNumberOfActions: 3
++
      implicitHeight: headerStyle.contentHeight + separator.height + separatorBottom.height
      BorderImage {
@@ -79,7 +87,8 @@
              height: parent ? parent.height : undefined
              width: visible ? units.gu(5) : 0
              action: styledItem.__customBackAction
--            visible: null !== styledItem.__customBackAction
++            visible: null !== styledItem.__customBackAction &&
++                     styledItem.__customBackAction.visible
              style: Theme.createStyleComponent("HeaderButtonStyle.qml", backButton)
+         }
@@ -196,13 +205,24 @@
      Row {
          id: actionsContainer
++        property var visibleActions: getVisibleActions(styledItem.actions)
++        function getVisibleActions(actions) {
++            var visibleActionList = [];
++            for (var i in actions) {
++                var action = actions[i];
++                if (action.visible) {
++                    visibleActionList.push(action);
++                }
++            }
++            return visibleActionList;
++        }
++
          QtObject {
              id: numberOfSlots
--            property int requested: styledItem.actions && styledItem.actions.hasOwnProperty("length") ?
--                                         styledItem.actions.length : 0
++            property int requested: actionsContainer.visibleActions.length
              property int left: tabsButton.visible || backButton.visible ||
                                 customBackButton.visible ? 1 : 0
--            property int right: 3 - left
++            property int right: headerStyle.maximumNumberOfActions - left
              property int overflow: actionsOverflowButton.visible ? 1 : 0
              property int used: Math.min(right - overflow, requested)
+         }
@@ -219,7 +239,7 @@
              AbstractButton {
                  id: actionButton
                  objectName: action.objectName + "_header_button"
--                action: styledItem.actions[index]
++                action: actionsContainer.visibleActions[index]
                  style: Theme.createStyleComponent("HeaderButtonStyle.qml", actionButton)
                  width: units.gu(5)
                  height: actionsContainer.height
@@ -250,7 +270,7 @@
                      Repeater {
                          model: numberOfSlots.requested - numberOfSlots.used
                          ListItem.Standard {
--                            action: styledItem.actions[numberOfSlots.used + index]
++                            action: actionsContainer.visibleActions[numberOfSlots.used + index]
                              objectName: action.objectName + "_header_overflow_button"
                              onClicked: actionsOverflowPopover.hide()
+                         }
 === modified file 'tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_header.py'
 --- tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_header.py	2014-05-02 11:04:44 +0000
 +++ tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_header.py	2014-05-12 19:37:24 +0000
@@ -43,12 +43,14 @@
          tools: ToolbarItems {
              back: ToolbarButton {
                  action: Action {
++                    id: cancelAction
                      iconName: "cancel"
                      text: "cancel"
                      onTriggered: label.text = "Cancel button clicked."
+                 }
+             }
              Repeater {
++                id: buttonRepeater
                  model: 5
                  ToolbarButton {
                      action: Action {
@@ -60,6 +62,22 @@
+                 }
+             }
+         }
++
++        Button {
++            objectName: "hide_actions_button"
++            anchors {
++                bottom: parent.bottom
++                horizontalCenter: parent.horizontalCenter
++            }
++            text: "Hide some actions"
++            onClicked: {
++                cancelAction.visible = false;
++                for (var i=0; i < 3; i++) {
++                    buttonRepeater.itemAt(i).action.visible = false;
++                }
++                // only three of five visible actions left
++            }
++        }
+     }
+ }
  """)
@@ -98,3 +116,18 @@
      def test_click_custom_back_button(self):
          self.header.click_custom_back_button()
          self.assertEqual(self.label.text, 'Cancel button clicked.')
++
++    def test_overflow_button(self):
++        # there are 5 actions plus a custom back action
++        overflow_button = self.header.select_single(
++            'AbstractButton',
++            objectName='actions_overflow_button')
++        self.assertEqual(overflow_button.visible, True)
++
++        hide_actions_button = self.main_view.select_single(
++            'Button',
++            objectName='hide_actions_button')
++        self.pointing_device.click_object(hide_actions_button)
++
++        # only three actions are visible
++        self.assertEqual(overflow_button.visible, False)
 === modified file 'tests/resources/toolbar/headerTools.qml'
 --- tests/resources/toolbar/headerTools.qml	2014-05-01 12:04:44 +0000
 +++ tests/resources/toolbar/headerTools.qml	2014-05-12 19:37:24 +0000
@@ -60,6 +60,7 @@
+             }
              ToolbarButton {
                  action: Action {
++                    id: action2
                      onTriggered: print("two!")
                      iconName: "contact"
                      text: "Second action"
@@ -71,9 +72,11 @@
                  action: Action {
                      text: "cancel"
                      iconName: "cancel"
--                    onTriggered: print("cancelled!")
++                    onTriggered: {
++                        action2.visible = false;
++                        visible = false;
++                    }
+                 }
--                anchors.verticalCenter: parent.verticalCenter
+             }
+         }
+     }