Adjust header behaviour & UI in multi select mode

[Olga Kemmet]

Steps to reproduce:

1. Open Messaging app (or Address Book app, Phone app), make sure you have a list in your messages view
2. Long press on any of the list items

Actual Result:
3. Header is changing and shows an X button on the left hand side and two action buttons on the right hand side. Selection checkboxes appear from the left hand side.

Expected result - desired solution:
- The header should display a BACK button instead of the "X" on the left hand side, same as we have in all other headers
- Remove the change in the background colour when a list item is selected, change in the colour of the checkbox is enough
- Add labels for all visible actions in this mode in the header, except for 'BACK'
- Tapping on the BACK in this mode, cancels the multi-select mode and does NOT navigate back to the previous view
- There is no title in this header

Please see attached wireframe for reference. This change applies across all apps which use a multi select in their list views.

[Tim Peeters (tpeeters)]

Header modes are planned for later in UITK. For now, this can be implemented by using a custom Page.head.contents that contains all the buttons (the default back button can be removed by setting Page.head.backAction to an Action which is not visible). This is already being worked on for the clock-app, see https://imgur.com/Av0tPY1

[Nekhelesh Ramananthan (nik90)]

As tim mentioned above, I have been working on this for the clock app and have proposed a merge. The behaviour and UI can be seen in https://imgur.com/a/zopnJ for different cases. Hope this helps with the implementation in other apps.

@Design, please review the screenshots linked in this comment, and approve please. If you want to test on the phone, then you can download the click package at https://www.dropbox.com/s/h6d32cc46nid73d/com.ubuntu.clock_3.1._armhf.click?dl=0 and see for yourself :-)

[Tim Peeters (tpeeters)]

At the previous London sprint we decided to do the header modes after rtm, so I did not work on this yet.

With this new planning, I'll start on this bug the coming week (there is some other header work ongoing now which is better to land first).

[Giorgio Venturi (giorgio-venturi-deactivatedaccount)]

I reviewed Nik's clock implementation and it works great! Well done

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

Fix committed into lp:ubuntu-clock-app at revision 108, scheduled for release in ubuntu-clock-app, milestone rtm

[Tim Peeters (tpeeters)]

Changed status to Incomplete because we are still having some discussions whether this is the best (and a consistent) way to show that you are in selection mode.

[Tim Peeters (tpeeters)]

After some discussion it was decided that the actions on the right side in selection mode will have a text label.

The look of the back button is still open. It may or may not have a label under it.

[Giorgio Venturi (giorgio-venturi-deactivatedaccount)]

Back will have no label and will vertically centred in the middle

[PS Jenkins bot (ps-jenkins)]

Fix committed into lp:ubuntu-ui-toolkit/staging at revision None, scheduled for release in ubuntu-ui-toolkit, milestone Unknown

[Launchpad Janitor (janitor)]

This bug was fixed in the package ubuntu-ui-toolkit - 1.1.1279+14.10.20141007-0ubuntu1

---------------
ubuntu-ui-toolkit (1.1.1279+14.10.20141007-0ubuntu1) 14.09; urgency=medium

  [ Michael Sheldon ]
  * Removes the keyboard anchor animation as this is now implemented
    in the keyboard.

  [ Tim Peeters ]
  * PageStack push returns the pushed page. Fixes LP: #1361919
  * Add selection mode as a preset to the header configuration.
    Fixes LP: #1370146.

  [ Zsombor Egri ]
  * Fix Dialog foreground sizing. Fixes LP: #1337555, LP: #1337556.
  * Workaround for StateSaver to fall back to use qgetenv() when
    QStandardPaths fails to return XDG_RUNTIME_DIR path.
    Fixes LP: #1363112.

  [ Christian Dywan ]
  * Add unit tests for MathUtils API.
    Fixes LP: #1244685.
  * Text field hint should use the same font as the editor.
    Fixes LP: #1237400.
  * Read-only text fields mustn't have a clear button.
    Fixes LP: #1337257.
  * autopilot package should source-depend on QML plugin.
    Fixes LP: #1236085.

  [ CI bot ]
  * Resync trunk
 -- Ubuntu daily release <email address hidden> Tue, 07 Oct 2014 12:09:39 +0000