Page MenuHomePhabricator

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

Description

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

Change it to be displayed like so:

  • 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
bmansurov updated the task description. (Show Details)Dec 5 2016, 9:54 PM

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

Nirzar updated the task description. (Show Details)Dec 6 2016, 10:18 PM

@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 Analysis to Upcoming on the Readers-Web-Backlog board.

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

Restricted Application added a project: Collaboration-Team-Triage. ยท View Herald TranscriptDec 13 2016, 10:30 PM
ovasileva updated the task description. (Show Details)Dec 19 2016, 5:27 PM

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

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

bmansurov moved this task from To Do to Doing on the Reading-Web-Sprint-90-๐ŸŒ board.

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

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

Yes, that sounds great.

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

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

bmansurov removed bmansurov as the assignee of this task.Jan 19 2017, 7:27 PM

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

@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:

@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.

bmansurov moved this task from Needs More Work to Doing on the Reading-Web-Sprint-90-๐ŸŒ board.

@bmansurov sure thing, i was in the zoneeeeeeee

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

bmansurov removed bmansurov as the assignee of this task.Jan 25 2017, 11:23 PM
phuedx assigned this task to Nirzar.Jan 26 2017, 2:06 PM
phuedx added a subscriber: phuedx.

@Nirzar: I've updated the staging server. You should be able to test these changes here: http://reading-web-staging.wmflabs.org/w/index.php?title=Main_Page&action=toggle_view_mobile.

can we fix padding to .circle to

padding: 0 7px;

it's not a circle anymore

bmansurov moved this task from Needs More Work to Doing on the Reading-Web-Sprint-90-๐ŸŒ board.

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?


Nirzar added a comment.EditedJan 26 2017, 11:01 PM

@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

bmansurov reassigned this task from bmansurov to Nirzar.Jan 27 2017, 6:53 PM

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

ovasileva closed this task as Resolved.Jan 30 2017, 8:04 PM

looks good from here