Page MenuHomePhabricator

Tap a content pack to show a detail screen about it
Closed, ResolvedPublic2 Estimated Story Points

Description

A detail screen for a article pack (nee Offline compilation) should be shown when the list-item is tapped.

Mocks
Detail
A04.png (1×720 px, 154 KB)
Detail whilst downloading
A04ii downloading state.png (1×720 px, 155 KB)
Detail with downloading paused
A04iii downloading paused.png (1×720 px, 155 KB)
Example with a long description
A04 WikiMed example.png (1×720 px, 626 KB)

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

Event Timeline

Niedzielski subscribed.

We don't think this task in itself does anything, it's just an umbrella, so I've added the Epic tag.

Mholloway updated the task description. (Show Details)
Mholloway subscribed.

I guess this task could stand for filling in the detail screen, now that the empty activity is created?

Change 366745 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Add offline compilation detail view

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

Change 367917 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Compilation detail view: add download control widget

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

Change 366745 merged by jenkins-bot:
[apps/android/wikipedia@master] Add offline compilation detail view

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

Change 367917 merged by jenkins-bot:
[apps/android/wikipedia@master] Compilation detail view: add download control widget

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

Mholloway renamed this task from Tap a compilation to show a detail screen about a compilation to Tap a content pack to show a detail screen about it.Aug 11 2017, 12:51 PM
RHo subscribed.

A couple of visual design tweaks:

  • The screen should utilize a translucent status bar and scrim (same gradient values as on the Reading list)
  • Base background should be in Base80 color (for light mode)
  • Reduce the space between the short description and the version date + filesize info to 16dp
  • The Download button is 16dp from the left and right hand side edge of the screen
  • The download in progress bar and icons should be vertically centered in place of the download button:

image.png (1×1 px, 432 KB)

image.png (526×1 px, 89 KB)

  • Per the Wikimed example - the long description (if there is one) appears below the download button /progress bar in the Material Caption Secondary style (Roboto Regular 12sp).

Change 372451 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Design tweaks for compilation detail view

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

Hey @RHo, a couple of notes on this:

  • I don't think the Android platform makes it possible to achieve a perfectly transparent (as opposed to slightly darkened, translucent) status bar as you have it on the "expected" side. I think what you're seeing and showing in your "actual" screenshot is the translucent bar, only with the (system-enforced) tint, and sitting over the darkest part of the gradient. Scroll down a bit and you'll see what I mean. The closest we can probably get to the effect I think you're going for is to hide the status bar completely, if that is satisfactory.
  • I updated the code to put the long description view below the buttons/controls, but the existing ZIM files only have a single summary/description field, so I updated the views to use whatever exists in the summary space; therefore after the change you shouldn't be seeing any text below in the long description field (unless/until we update our ZIMs to accommodate a second description field).

Hi @Mholloway - I've seen the transparent status bar in a couple of places, notably on Play store app details, Play Music playlists and also Swarm check-in screens (see screenshots below). Can we check again?

Playstore eg
image.png (1×1 px, 672 KB)
GPM eg
image.png (1×1 px, 1 MB)
Foursquare/Swarm check-in
image.png (1×1 px, 926 KB)

Thanks, I couldn't find any examples of this happening IRL yesterday. There's some good stuff hidden from the public API with the @hide annotation that I might be able to get at using reflection if it comes to that.

Maybe @Dbrant knows a better way...

Change 372451 merged by jenkins-bot:
[apps/android/wikipedia@master] Design tweaks for compilation detail view

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

Change 372886 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Refactor/standardize status bar appearance in CollapsingToolbarLayouts.

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

Change 372886 merged by jenkins-bot:
[apps/android/wikipedia@master] Refactor/standardize status bar appearance in CollapsingToolbarLayouts.

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

ABorbaWMF subscribed.

Tested on a Nexus 4 with Android 5.1 and a Pixel with Android 7.1.1 on 2.6.201-alpha-2017-08-25

I have not seen a content pack with a long description yet, but the short description ones look fine.