Page MenuHomePhabricator

Update visual design of citation (reference) bottom sheets
Closed, ResolvedPublic

Assigned To
Authored By
RHo
Jul 24 2017, 1:28 PM
Referenced Files
F10178736: image.png
Oct 13 2017, 11:54 AM
F9627639: image.png
Sep 18 2017, 5:48 PM
F9627360: Article - citation - Light w redlines.png
Sep 18 2017, 5:13 PM
F9534561: Screenshot_20170914-125041.png
Sep 14 2017, 4:56 PM
F9532404: image.png
Sep 14 2017, 3:12 PM
F8995002: main-MainActivity-08092017123807.png
Aug 9 2017, 11:01 AM
F8994999: main-MainActivity-08092017123458.png
Aug 9 2017, 11:01 AM

Description

Problem

The current appearance of citation/reference panes on the Android app is outdated and inconsistent with styling of other bottom sheets in the app.

Current citation panel:

Proposed solution


  • Notes on design:

    • Introduction of a citation header in the bottom sheet that notes the reference number
    • Dark mode utilizes the standard colors for the dark mode sheet background, text and link colors (per T95080)
    • In case where there is there is more than one reference together <--moved to a separate ticket T172283
      • the bottom sheet opens at a standard height (1/2 of height of device)
      • users may swipe left in the bottom sheet to advance through the references in that group
      • a series of indicator dots denotes the number of references in the group and the current (active) reference shown

    See Zeplin board for redline version of mocks tagged with "Dark mode" and "Citation"

    Event Timeline

    Change 368211 had a related patch set uploaded (by Dbrant; owner: Dbrant):
    [apps/android/wikipedia@master] Update styling of Reference bottom sheet.

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

    Change 368211 merged by jenkins-bot:
    [apps/android/wikipedia@master] Update styling of Reference bottom sheet.

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

    Looks good @Dbrant, with just a couple of color tweaks:

    Light:

    main-MainActivity-08092017123458.png (1×1 px, 266 KB)

    • Title and non-link text is #222 (Base10)
    • divider is #000000 @opacity 0.12

    Dark:

    main-MainActivity-08092017123807.png (1×1 px, 270 KB)

    • 'Reference' title text in #c8ccd1 (Base70)
    • non-link text in reference is #F8F9FA (Base90)
    • divider is #FFFFFF @opacity 0.20

    @RHo I wonder if we can use this as an opportunity to start capturing "standardizations" in our color schemes. Specifically:

    • Can the "non-link" text color become the standard primary text color for all bottom sheets? (e.g. link preview? wiktionary? add to reading list?) Indeed, can it be the primary text color everywhere in the app (except the actual page content), such as feed card contents, list item titles, etc?
    • Can the "title" color become the the standard title color for all bottom sheets? (again, link preview; wiktionary; add to reading list? And can it be the color for feed card titles, too?)
    • Can the divider color be used for all dividers in the app? (e.g. list item separator, link preview, page description...)

    yes for sure, the different component colors are now detailed in T172984

    @Dbrant are you hanging onto this task intentionally or can I pick it up for the remaining tweaks?

    Dbrant added a subscriber: Dbrant.

    By all means!

    Change 377783 had a related patch set uploaded (by Mholloway; owner: Mholloway):
    [apps/android/wikipedia@master] Hygiene: update reference dialog colors

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

    Hey @RHo, one note on the colors specified above:

    The way this works under the hood with the color consolidation we're aiming for is to designate the various views with attributes like "textColorPrimary" or "textColorTertiary" that take on different values depending on the theme applied. textColorPrimary is defined as @base10 in the light theme and @base90 in dark theme. textColorTertiary is defined as @base30 in the light theme and @base70 in dark theme. So this works fine for the dialog body text; it's textColorPrimary.

    The problem is with having the title be @base10 in the light theme and @base70 in the dark theme; this would mean we'd need to define a one-off attribute just for this particular view; doable but rather undesirable. Can we just use either textColorPrimary or textColorTertiary, or is it important that we use @base10 and @base70 specifically here?

    Hi @Mholloway – that checks out, I've updated the 'Reference' title on dark mode to be @base90 in the Zeplin

    Hi @Mholloway - just found a small visual bug in the reference pane whereby there is a 'gap' in the top and bottom of long references. Can it be fixed as part of this ticket?

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

    Steps to repro above bug:
    1. Go to an article containing a long reference (eg. Barack Obama article, citation no. 35)
    2. Tap on the citation number in that article to open the citation pane
    3. Scroll down to the end of the citation which will extend the citation pane to full screen and note the text scrolled inside the pane

    Hi @Mholloway - just found a small visual bug in the reference pane whereby there is a 'gap' in the top and bottom of long references. Can it be fixed as part of this ticket?

    Sure, we can pull that in.

    OK, so I took a look at the reference gap, and here's the scoop:

    The "gap" is actually just view padding, which is trivially easy to change or remove. But I'm guessing we don't actually want to remove the body top and bottom padding unconditionally, or we'll end up with this for short references (the typical case):

    Screenshot_20170914-125041.png (2×1 px, 416 KB)

    I'm guessing what we actually want is something like a 16dp padding on the body TextView, for which the top and bottom padding animate down to 0dp as the user scrolls down (if the reference text is long enough to be scrollable). That's a bit more involved, and probably a big enough chunk of work to merit its own Phab ticket.

    Change 377783 merged by jenkins-bot:
    [apps/android/wikipedia@master] Design tweak: update reference dialog colors

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

    hi @Mholloway - besides the 16dp top padding, can we also set a minimum height for the citation text pane? Something like this:

    Article - citation - Light w redlines.png (1×720 px, 149 KB)

    I think that would work, with the caveat that a hard-coded minHeight might not correctly handle a situation where the user has adjusted the text size to something very large.

    Ah that is a good point for future dynamic text work - we do not currently have the text size changed on the citation pane:

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

    Since Nougat the text size can also be changed through the device's accessibility settings, and this applies to the text in both the WebView and the native components.

    I tested this and it looks fine with the largest text size, though.

    Change 378751 had a related patch set uploaded (by Mholloway; owner: Mholloway):
    [apps/android/wikipedia@master] Design tweak: Update size and padding of reference dialog components

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

    Change 378751 merged by jenkins-bot:
    [apps/android/wikipedia@master] Design tweak: Update size and padding of reference dialog components

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

    LGTM

    image.png (1×4 px, 1 MB)

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