Page MenuHomePhabricator

[Design debt] Make app bar colors consistent everywhere on the app
Closed, ResolvedPublic

Description

Problem

After the app redesign introducing the Feed and bottom navigation, only the Feed, Reading list, History and Nearby had the app bar color updated to use the Accent50 (#3366cc) blue color, the rest kept the old #222.

Proposed solution

Colors noted are part of the WMF color palette (M82) or the new dark theme colors - see T95080

Light theme app bar colorDark theme app bar color
Articles and all sub-screens (Other languages, Find in page)#F8F9FA (Base90)#43464A (Base18)
Search articles#F8F9FA (Base90)#43464A (Base18)
All other screens#36C (Accent50)#2A4B8D (Accent30)

Event Timeline

Change 382501 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Make app bar colors consistent, pt. 1

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

Hey @RHo, does page editing stuff fall under article subscreens, or "other"?

hi @Mholloway - page editing falls under article subscreens. Also may be helpful to check out the gifs on T163595 showing the app bar transitions in light and dark mode on scroll.

Change 382723 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Add color transition for page toolbar colors in light mode

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

Hi @RHo, one more question: light toolbars need dark icons, but if the icons over the lead image (before we scroll down and the toolbar fades in) are dark, they often won't be very visible. I added a patch to animate a transition from light to dark in this situation but it's a substantial amount of code, and that code is unavoidably brittle because of how it has to interact with the activity lifecycle.

How important are the light toolbars? Do you have any other ideas for how to deal with the problem of dark toolbar icons over lead images? (cc @Dbrant )

Hi @Mholloway - I think this should be covered by the simplification of the transitions detailed on T163595. Basically the app bar scrolls off entirely so there's no need to darken icond on the toolbar first.

Ah, I see from the gifs that you're proposing eliminating the existing "delay" in the toolbar scrolling offscreen; I don't think that eliminates the code-level problem, unfortunately. Fundamentally the problem arises from having toolbar icons that might be one color or another based on the scroll state.

The toolbar should be light with dark icons when if scrolled back onscreen further down the article, though, right?

The animation isn't really the problem.

Hmm but there is never any transitions of icon colors *during* scrolling. The only time the icon colors transition occurs is when the entire toolbar transitions from transparent to light after a user scrolls back to the very top of an article with a lead image, and this transition (the entire toolbar color) occurs on the Chrome browser when loading a site with a specific color scheme (eg transition from a light colored address bar with dark icons on search to blue background with white icon when going to the Guardian site). Does the lack of transition whilst scrolling make this less complex?

Unfortunately it doesn't.

That said, like I said, I've written a patch that does what is asked and that I'm reasonably happy with. @Dbrant was pushing back on it in code review, so I will let him carry on with any further objections.

OK, updates to the section edit screen will be in the next patch in the series. Just to make things explicit for the remaining odds and ends, the following screens should all be accent50/accent30?

  • Login
  • Create account
  • Settings (and subscreens: About, Licenses)
  • Developer settings (and subscreens)

Change 382501 merged by jenkins-bot:
[apps/android/wikipedia@master] Make app bar colors consistent, pt. 1

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

Change 382723 merged by jenkins-bot:
[apps/android/wikipedia@master] Add on-scroll color transition for page toolbar icons

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

OK, updates to the section edit screen will be in the next patch in the series. Just to make things explicit for the remaining odds and ends, the following screens should all be accent50/accent30?

  • Login
  • Create account
  • Settings (and subscreens: About, Licenses)
  • Developer settings (and subscreens)

Yes!

Change 383613 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Update toolbar color for remaining screens

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

Change 383613 merged by jenkins-bot:
[apps/android/wikipedia@master] Update toolbar color for remaining screens

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

Hi @Mholloway - all looks good except the Editing screens should be counted as an Articles sub-screen.

Checked sample screens for:

Articles and all sub-screens (Other languages, Find in page)#F8F9FA (Base90)#43464A (Base18)
Article (on scrolling off from lead image)
Other languages
Find in page
Edit article appearing as Accent50 appearing as Accent30
Search articles#F8F9FA (Base90)#43464A (Base18)
Search
All other screens#36C (Accent50)#2A4B8D (Accent30)
Explore Feed
Reading lists
History
Nearby
Login
Create an account and subscreens
Settings (and subscreens: About, Licenses)
Developer settings (and subscreens)

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

Change 384071 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Tweak: Fix EditSectionActivity appbar color

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

@RHo Whoops! Looks like the EditSectionActivity tweak fell out of the last patch set by mistake.

Change 384071 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweak: Fix EditSectionActivity appbar color

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

All looks good now
Tested on Pixel (Android 8.0.0), Wikipedia v2.6.203-alpha-2017-10-23

Hi @Mholloway - all looks good except the Editing screens should be counted as an Articles sub-screen.

Checked sample screens for:

Articles and all sub-screens (Other languages, Find in page)#F8F9FA (Base90)#43464A (Base18)
Article (on scrolling off from lead image)
Other languages
Find in page
Edit article
image.png (1×1 px, 308 KB)
image.png (1×1 px, 301 KB)
Search articles#F8F9FA (Base90)#43464A (Base18)
Search
All other screens#36C (Accent50)#2A4B8D (Accent30)
Explore Feed
Reading lists
History
Nearby
Login
Create an account and subscreens
Settings (and subscreens: About, Licenses)
Developer settings (and subscreens)

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