Page MenuHomePhabricator

Change how the notification count is displayed
Closed, ResolvedPublic3 Estimated Story Points

Description

Currently the notification count looks like this (notice the "1" in the top right corner):

Screen Shot 2016-12-05 at 4.45.28 PM.png (1ร—642 px, 396 KB)

Change it to be displayed like so:

Header - Signed - New Notification.png (1ร—750 px, 214 KB)

  • The change needs to be done in the feature branch called branding.

Specifications

https://zpl.io/2ckgFh
or see all mocks tagged by this phab card
https://app.zeplin.io/project.html#pid=57a120dbaa97eeab3c8805ae&dashboard&tags=branding

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Which code base is this about (and could it be associated to this task)? MobileFrontend? Notifications?

@Nirzar - do we have three states for notifications? Red - unread and unopened, blue - unread but opened, bell - read? On https://wikimedia.invisionapp.com/share/6Z9KIX3AD#/screens/209393219 there's three states, but not here.

ovasileva set the point value for this task to 2.Dec 8 2016, 1:43 PM
ovasileva moved this task from Needs Prioritization to Upcoming on the Readers-Web-Backlog board.

adding 2 points as agreed during backlog grooming and moving to Sprint + 1

Change 330382 had a related patch set uploaded (by Jdlrobson):
Notifications icon simplified to circle from bell

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

Jdlrobson changed the point value for this task from 2 to 3.Jan 18 2017, 6:59 PM
Jdlrobson moved this task from Needs Analysis to To Do on the Reading-Web-Sprint-90-๐ŸŒ board.

Change 330382 abandoned by Jdlrobson:
WIP: Notifications icon simplified to circle from bell

Reason:
Feel free to pick up this work!

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

Change 332901 had a related patch set uploaded (by Bmansurov):
Change display of notifications count

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

@Nirzar, how should the circle look when we have 99+ notifications? With the current dimensions this label doesn't fit into the circle. Can you create a mock for that? Thanks.

@bmansurov

notifff.png (1ร—750 px, 215 KB)

you can change the width the circle so it's kind of a pill shape. will that work in your opinion?

Change 332901 merged by jenkins-bot:
Change display of notifications count

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

This is ready for sign off in the branding branch which is currently checked out @
http://reading-web-staging.wmflabs.org/

Screen Shot 2017-01-24 at 12.30.10 PM.png (380ร—362 px, 35 KB)
@Nirzar - maybe it's just me, but the edges are looking a little pixelated?

this needs work. i wanted to post actual fixes but just keeping this comment so it doesn't go forward

No pixelation on my end:

Screen Shot 2017-01-24 at 1.10.13 PM.png (100ร—1 px, 14 KB)

@Nirzar, can you also include steps to reproduce issues?

There's no pixelation. but here are visual fixes that are needed, i'm just listing down overall fixes for header work based on what i'm seeing at staging

  1. the size of the notification circle is correct but the font size should be 13px. note: if you just change the font size, the circle shrinks so you will need to add extra padding to keep the circle the same
  1. in the outline version the border width is 1px, it needs to be 2px to match stroke width of icons
  1. the inset shadow for .header-container is missing.
box-shadow: inset 0px -1px 3px rgba(0,0,0,0.08)
Very imp: the border-bottom transparent shouldn't be there but i don't know why it's there so let's talk about removing it *
  1. might be related to border bottom but when i trigger search, the whole thing moves up by 1px which is very apparent and we need to fix it. it looks unstable
  1. the search icon is wrong size.

@Nirzar, some of the points don't belong to this task. Can you add those to the parent task? I'll take care of the notification related ones.

Change 333994 had a related patch set uploaded (by Bmansurov):
Notification count UI fixes

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

FYI be careful when testing developments in feature branch due to the open bug about template partials not invalidating the master template. I was running memcached so was not seeing what I should be seeing. Be sure to restart memcached before testing anything in the branding branch.

Change 333994 merged by jenkins-bot:
Notification count UI fixes

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

can we fix padding to .circle to

padding: 0 7px;

it's not a circle anymore

Change 334442 had a related patch set uploaded (by Bmansurov):
Make notification circle rounder

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

Should the number be vertically aligned?

Screen Shot 2017-01-26 at 2.58.44 PM.png (47ร—56 px, 7 KB)

Screen Shot 2017-01-26 at 2.57.48 PM.png (50ร—43 px, 7 KB)

@Jdlrobson yes but i thought if i ask for it, people will throw stuff at me :( actually the circle should be a circle even for 2 digits. if you look at the mocks. there's space

@Nirzar, it doesn't look like a circle in your mock too: T152457#2953443

@bmansurov that is for 3 characters, i wanted to have pill for 3 characters and circle for 2

Change 334427 had a related patch set uploaded (by Jdlrobson):
Update notification and search icons

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

Change 334427 merged by jenkins-bot:
Update notification and search icons

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

Change 334442 merged by jenkins-bot:
Make notification circle rounder

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

Signed off from design based on reading-web-staging

looks good from here