Notifications slight tweak, visual improvement

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.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
MattF
Extension Customisations
Extension Customisations
Posts: 675
Joined: Mon Mar 08, 2010 9:18 am

Notifications slight tweak, visual improvement

Post by MattF »

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 22071 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 22071 times
Of course if the value is 0, then don't display any bubble.
Has an irascible disposition.

User avatar
3Di
Registered User
Posts: 951
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano 🇮🇹 Frankfurt 🇩🇪
Contact:

Re: Notifications slight tweak, visual improvement

Post by 3Di »

+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.
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades

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

Re: Notifications slight tweak, visual improvement

Post by DavidIQ »

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

User avatar
JimA
Former Team Member
Posts: 66
Joined: Sun Aug 24, 2008 2:29 pm

Re: Notifications slight tweak, visual improvement

Post by JimA »

+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
MattF
Extension Customisations
Extension Customisations
Posts: 675
Joined: Mon Mar 08, 2010 9:18 am

Re: Notifications slight tweak, visual improvement

Post by MattF »

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
MattF
Extension Customisations
Extension Customisations
Posts: 675
Joined: Mon Mar 08, 2010 9:18 am

Re: Notifications slight tweak, visual improvement

Post by MattF »

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 22009 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 22009 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 22009 times
Has an irascible disposition.

User avatar
MattF
Extension Customisations
Extension Customisations
Posts: 675
Joined: Mon Mar 08, 2010 9:18 am

Re: Notifications slight tweak, visual improvement

Post by MattF »

Has an irascible disposition.

User avatar
3Di
Registered User
Posts: 951
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano 🇮🇹 Frankfurt 🇩🇪
Contact:

Re: Notifications slight tweak, visual improvement

Post by 3Di »

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. ;)
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades

User avatar
MattF
Extension Customisations
Extension Customisations
Posts: 675
Joined: Mon Mar 08, 2010 9:18 am

Re: Notifications slight tweak, visual improvement

Post by MattF »

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 »

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