Page MenuHomePhabricator

Align Notifications/Echo to WikimediaUI color palette
Closed, ResolvedPublic

Description

Align all colors to overhauled WikimediaUI color palette.

Event Timeline

Change 383016 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Echo@master] Replacing fallback color for code hygiene

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

Change 383021 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Echo@master] Align popup message color to toast message in MinervaNeue

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

Change 383036 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Echo@master] Fix CrossWiki-/BundleGroup layout

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

@Pginer-WMF Replacing NotificationItemWidget's background-color from currently #f1f1f1 with #f8f9fa would result in a somewhat dissatisfying:

T177723 NotificationItemWidget _f8f9fa - Notifications - Wikipedia 2017-10-08.png (934×1 px, 120 KB)

The footer buttons are not clearly distinct from the items. Ideas?

Change 383037 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Echo@master] Replace subtle greys with WikimediaUI color palette ones

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

Before 383036After
T177723 Cross-Wiki+Bundle _before - Notifications - Wikipedia 2017-10-08.png (826×1 px, 105 KB)
T177723 Cross-Wiki+Bundle _post - Notifications - Wikipedia 2017-10-08.png (786×1 px, 104 KB)

The before/after comparison shows another change apart from color. When expanding a bundle, part of the parent bundle is shown after its contents to emphasise that those are shown inside. This white stripe seems to be gone with the change.

Change 383037 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Replace subtle greys with WikimediaUI color palette ones

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

Change 383021 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Align popup message color to toast message in MinervaNeue

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

@Pginer-WMF Sorry, yes, that white area via margin-bottom is back in.

Change 383036 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Fix CrossWiki-/BundleGroup layout

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

Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

Checked in betalabs and wmf.6 - the white stripe is present for bundled notifications. However, there is a slight visual difference (quite minor) between cross-wiki bundled notifications and the same wiki notifications bundle.
cross-wiki bundle

Screen Shot 2017-11-06 at 6.56.06 PM.png (605×518 px, 71 KB)

the same wiki bundled notifications

Screen Shot 2017-11-06 at 6.59.16 PM.png (309×479 px, 37 KB)

If @Pginer-WMF regarding the above - should it be adjusted?

If @Pginer-WMF regarding the above - should it be adjusted?

It would be nice to be the same, but I'm more concerned about the padding around the bundled elements. There the top padding seems much smaller than the padding on the other sides. I marked top and bottom paddings in red and blue to illustrate the issue:

bundle-spacing-issue.png (339×519 px, 36 KB)

I think the space was better balanced before, so I'm not sure what has introduced this regression.

I think it is not as clear that those elements are sub-elements while there is too much going (borders, backgrounds, box-shadows, double margins) on to visualize that parent>child idea.

Change 390299 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Echo@master] Equal CrossWiki/BundleNotificationItemWidget group's padding

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

Change 390299 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Equal CrossWiki/BundleNotificationItemWidget group's padding

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

Checked in betalabs - the padding is equalized.

Screen Shot 2017-11-09 at 3.30.02 PM.png (386×510 px, 30 KB)

The remaining pieces here are a fallback color handled in https://gerrit.wikimedia.org/r/#/c/383016/ and the question about read notifications handled in T78594.

Change 383016 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Replacing fallback color for code hygiene

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