Page MenuHomePhabricator

Build the UI for downloading compilations
Closed, ResolvedPublic

Assigned To
Authored By
NHarateh_WMF
Jun 9 2017, 4:53 PM
Referenced Files
F10180772: image.png
Oct 13 2017, 12:29 PM
F9070444: launcher-GEL-08142017230416.png
Aug 14 2017, 10:57 PM
F9070440: main-MainActivity-08142017234049.png
Aug 14 2017, 10:57 PM
F9070669: image.png
Aug 14 2017, 10:57 PM
F9070589: image.png
Aug 14 2017, 10:57 PM
F9070652: image.png
Aug 14 2017, 10:57 PM
F9068685: A04iii downloading paused.png
Aug 14 2017, 5:06 PM
F9068763: A06iii - multiple compilations.png
Aug 14 2017, 5:06 PM

Description

Show the download progress and controls to pause/ cancel an article pack being downloaded.

QA test

(A) Review all screens where the article pack in-progress download UI is shown.

  1. Go to Offline compilations (aka Offline Library) by selecting the overflow menu item on the Explore feed.
  2. Tap the action to 'Add' to Offline library which bring up a list of all packs available for download
  3. Tap on the overflow menu of an article pack and select the option to "Download". It is expected that UI for the download in progress (comprising a progress bar, estimated remaining time & data, pause and cancel actions) should display below the relevant list item.
  4. Tap on a second article pack to open its details screen.
  5. On the details screen tap on the "Download" action button. It is expected that UI for the in-progress download will appear in place of the download action button.
  6. Return to the Offline Compilations screen. It is expected that the compilations being downloaded will now appear as list items in the "My compilations" list, including the in-progress download UI.
  7. Exit the app, then swipe to show the device's Notifications drawer. It is expected that there is a notification showing the download in progress here.
  8. It is expected that tapping on the body of the notification takes the user back to Offline compilations in the app where they can choose to pause/ cancel the download.

(B) Check that pause, resume and stop actions cancel works on each screen where the in-progress download is shown.
Steps per above, and for each screen where the in-progress download UI is displayed, check the following:

  1. Tap on the cancel icon, it is expected that a dialog will appear asking the user to confirm the cancellation of the download.
  2. Tap on "Yes" to confirm, it is expected that the in-progress download will be stopped, and the particular pack will no longer show the in-progress download UI. It should also no longer appear in the user's "My compilations" (aka "My Offline library") list.
Mocks
All compilations - one download in progress
A03iii - All available as standalone 'store'.png (1×720 px, 138 KB)
Details screen - download in progress
A04iii downloading paused.png (1×720 px, 155 KB)
Details screen - download paused
A04ii downloading state.png (1×720 px, 155 KB)
"My Offline Library"
A06 downloading.png (1×720 px, 84 KB)
Offline Library - multiple in-progress
A06iii - multiple compilations.png (1×720 px, 121 KB)

See Zeplin for most up to date redline mocks https://zpl.io/GaRQKKV

Event Timeline

Change 367894 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Compilations: close the loop.

https://gerrit.wikimedia.org/r/367894

Change 367894 merged by jenkins-bot:
[apps/android/wikipedia@master] Compilations: close the loop.

https://gerrit.wikimedia.org/r/367894

RHo subscribed.

A few pieces not quite as expected....
Visual design (specific to the download progress UI):

image.png (680×1 px, 112 KB)

  • progress bar corner radii should be 2dp on all corners
  • space between icons and end of progress bar should be 24dp
  • Download bar background color = Base70 (#C8CCD1)
  • Progress bar color = Accent50 (#3366CC)
  • Time/data estimation = Material Caption secondary (Roboto Regular 12sp) in rgba (0,0,0,.54) for Light mode
  • Cancel & Pause/resume icons color = Material secondary icon in rgba(0,0,0,.54) for Light mode
  • cancel icon should be 16dp from RHS edge of list item
  • Background color of the download UI area is transparent on the details screen, and Base90 in Light mode (Base12 in Dark mode) when shown as an extension of the list item:

image.png (552×1 px, 220 KB)

image.png (220×1 px, 59 KB)

Functionality/Behavior:

  • Missing the action to toggle pause/resume downloading on all screens
  • Inconsistent actions on the notification - On Nexus 5 (Android 6.0.1) there are no actions, whilst on Pixel (7.1.2) there is only the action to cancel the download:
Pixel with cancel action
main-MainActivity-08142017234049.png (1×1 px, 94 KB)
Nexus without any actions
launcher-GEL-08142017230416.png (1×1 px, 1 MB)
  • Tapping on the download notification does nothing (filed as a separate ticket T172860)
Dbrant subscribed.

Change 380978 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Design tweaks: download progress widget updates.

https://gerrit.wikimedia.org/r/380978

Done, except:

  • progress bar corner radii should be 2dp on all corners

Unfortunately the default built-in component doesn't provide this option, so this would necessitate creating a custom ProgressBar component; I suggest backlogging this part. (The material guide doesn't seem to specify rounded corners?)

Change 380978 merged by jenkins-bot:
[apps/android/wikipedia@master] Design tweaks: download progress widget updates.

https://gerrit.wikimedia.org/r/380978

LGTM – I've created a separate task T178161 for the pause/resume action.

image.png (1×2 px, 605 KB)

Tested on Nexus (6.0.1), Wikipedia v2.6.203-alpha-2017-10-12