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.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.2.x. If you need support for phpBB 3.2.x please visit the 3.2.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: 674
Joined: Mon Mar 08, 2010 9:18 am

Notifications slight tweak, visual improvement

Post by VSE »

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

User avatar
3Di
Registered User
Posts: 773
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano (I) Frankfurt (D)
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.
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
👨‍🏫 | Take a tour to | The Studio | 👨‍🏫

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1836
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
Community Team Leader
Community Team Leader
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
VSE
Extension Customisations
Extension Customisations
Posts: 674
Joined: Mon Mar 08, 2010 9:18 am

Re: Notifications slight tweak, visual improvement

Post by VSE »

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: 674
Joined: Mon Mar 08, 2010 9:18 am

Re: Notifications slight tweak, visual improvement

Post by VSE »

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

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

Re: Notifications slight tweak, visual improvement

Post by VSE »

Has an irascible disposition.

User avatar
3Di
Registered User
Posts: 773
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano (I) Frankfurt (D)
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. ;)
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
👨‍🏫 | Take a tour to | The Studio | 👨‍🏫

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

Re: Notifications slight tweak, visual improvement

Post by VSE »

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