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 added a subscriber: Niedzielski.

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 added a subscriber: Mholloway.

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 added a subscriber: RHo.

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 added a subscriber: ABorbaWMF.

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.