Notifications slight tweak, visual improvement

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The next feature release of phpBB 3 will be 3.2/Rhea followed by 3.3.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.1. If you need support for phpBB 3.1 please visit the 3.1.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 670
Joined: Mon Mar 08, 2010 9:18 am

Notifications slight tweak, visual improvement

Post by VSE » Sat Nov 05, 2016 7:51 am

Why don't we display our notifications bubble like every other site and app that does notifications, with a nice little number bubble instead of our plain-text typewriter style?

Only updated the Notifications but should also apply to PM notification:
Screen Shot 2016-11-05 at 12.46.15 AM.png
Screen Shot 2016-11-05 at 12.46.15 AM.png (11.33 KiB) Viewed 4296 times

Simple CSS tweak, could go into 3.2.x IMO.
Screen Shot 2016-11-05 at 12.46.46 AM.png
Screen Shot 2016-11-05 at 12.46.46 AM.png (19.71 KiB) Viewed 4296 times
Of course if the value is 0, then don't display any bubble.
Has an irascible disposition.

User avatar
3Di
Registered User
Posts: 695
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano (I) Frankfurt (D)
Contact:

Re: Notifications slight tweak, visual improvement

Post by 3Di » Sat Nov 05, 2016 10:06 pm

+1 for both (PMs and Notifications)

but a no-no IMO for the background color that should be neutral (transparent), having in mind darker and lighter styles.
Want to compensate me for my interest? Don't ask me, just do it
I'm available for custom phpBB jobs, you can PM me the details.
New: my Live Board, Extensions and Tools for phpBB - Men at works.

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1732
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Notifications slight tweak, visual improvement

Post by DavidIQ » Sat Nov 05, 2016 10:14 pm

I like it. Darker styles can just do their own override for this.
Image

User avatar
JimA
Community Team Leader
Community Team Leader
Posts: 63
Joined: Sun Aug 24, 2008 2:29 pm

Re: Notifications slight tweak, visual improvement

Post by JimA » Sat Nov 05, 2016 10:18 pm

+1, as long as it's easy to change the colour, which I presume it is given it's a small CSS change.
Image Jim Mossing Holsteyn - Moderator Team Member
Knowledge Base | Documentation | Board rules

No support here on Area51, please visit the Support forums over at phpBB.com

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 670
Joined: Mon Mar 08, 2010 9:18 am

Re: Notifications slight tweak, visual improvement

Post by VSE » Sat Nov 05, 2016 10:27 pm

The color would in reality come from Prosilver's color scheme, which is what is used for Alerts. It's the salmony red color. That way other styles would mostly be unaffected as we're not adding something new in terms of styling.
Has an irascible disposition.

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 670
Joined: Mon Mar 08, 2010 9:18 am

Re: Notifications slight tweak, visual improvement

Post by VSE » Sat Nov 05, 2016 10:47 pm

Here it is mocked up again using Prosilver's colors (note the color is the same color you get when you mouseover the link and the icon/text turn to this red).

No alerts
Screen Shot 2016-11-05 at 3.38.08 PM.png
Screen Shot 2016-11-05 at 3.38.08 PM.png (17.21 KiB) Viewed 4234 times
1 Alert
Screen Shot 2016-11-05 at 3.44.02 PM.png
Screen Shot 2016-11-05 at 3.44.02 PM.png (16.67 KiB) Viewed 4234 times
Both have alerts
Screen Shot 2016-11-05 at 3.44.49 PM.png
Screen Shot 2016-11-05 at 3.44.49 PM.png (18.94 KiB) Viewed 4234 times
Has an irascible disposition.

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 670
Joined: Mon Mar 08, 2010 9:18 am

Re: Notifications slight tweak, visual improvement

Post by VSE » Sat Nov 05, 2016 11:20 pm

Has an irascible disposition.

User avatar
3Di
Registered User
Posts: 695
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano (I) Frankfurt (D)
Contact:

Re: Notifications slight tweak, visual improvement

Post by 3Di » Sun Nov 06, 2016 12:59 am

I see now. I'ts ok I can say.

Edit: it's ok just because it's a kind of fast hack that doesn't impact on other things. ;)
Want to compensate me for my interest? Don't ask me, just do it
I'm available for custom phpBB jobs, you can PM me the details.
New: my Live Board, Extensions and Tools for phpBB - Men at works.

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 670
Joined: Mon Mar 08, 2010 9:18 am

Re: Notifications slight tweak, visual improvement

Post by VSE » Mon Nov 07, 2016 6:44 pm

It's not a hack at all. It's a core styling change.
Has an irascible disposition.

User avatar
javiexin
Registered User
Posts: 90
Joined: Thu Dec 22, 2011 10:04 am

Re: Notifications slight tweak, visual improvement

Post by javiexin » Wed Nov 16, 2016 4:15 am

What happens on responsive cases? I mean when no messages exist.

Now, the 0 gives a clue that nothing is pending, but nothing bit the icon seems not too intuitive. Maybe adding an uncolored 0 bubble... (dark blue with white number for prosilver).

Thanks,
-javiexin

Post Reply