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

Re: Notifications slight tweak, visual improvement

Post by MattF »

javiexin wrote: 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
Like any modern notification system, when there are no notices, there is nothing shown. Having a 0 is pointless. When there is nothing, there is nothing. When there is something, there's a noticeable alert badge icon presented to grab your attention. So your attention is only drawn when there is information your brain requires.
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 »

I have tested this, and I must say that I like it, and I have included it in my private prosilver-based style.

These are the changes:
  • In navbar_header.html, add a class to the strong element within li.icon-pm class="bubble <!-- IF PRIVATE_MESSAGE_COUNT -->set<!-- ELSE -->unset<!-- ENDIF -->" and similarly to the strong element within li.icon-notification class="bubble <!-- IF NOTIFICATIONS_COUNT -->set<!-- ELSE -->unset<!-- ENDIF -->"
  • In my custom CSS, add the following (that is almost identical to the original code by VSE)

    Code: Select all

    /* Notifications and PMs notices */
    .bubble {
    	padding: 4px;
    	border-radius: 40px;
    	margin: 0 0 0 4px;
    	font-size: 0.9em;
    }
    
    .bubble.set {
    	background-color: #FF6F60;
    	color: white;
    }
    
    .bubble.unset {
    	background-color: #12A3EB;
    	color: white;
    }
    
I am not particularly thrilled with the colours, but I do like a lot the idea. And, if you want to "hide" the 0 notifications, simply set .bubble.unset to display: none;, and you are done.
Now, I will try to add it to MCP as well.

Regards,
-javiexin

Rhino.Freak
Registered User
Posts: 48
Joined: Thu Dec 24, 2015 10:47 am

Re: Notifications slight tweak, visual improvement

Post by Rhino.Freak »

simple and effective. Great to see it coming in 3.2.x

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

Re: Notifications slight tweak, visual improvement

Post by javiexin »

Merged into 3.1.11: https://github.com/phpbb/phpbb/pull/4504

Sorry I didn't see the topic before I posted my latest comments.
-javiexin

User avatar
Marc
Development Team Leader
Development Team Leader
Posts: 185
Joined: Thu Sep 09, 2010 11:36 am
Location: Munich, Germany

Re: Notifications slight tweak, visual improvement

Post by Marc »

Correct, this change will also be available in 3.1.11.

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

Re: Notifications slight tweak, visual improvement

Post by javiexin »

I would hace preferred a CSS only solution, as the js deletion of the message is not configurable in child styles or anything else... Using a display none property seems to me more configurable than dom element deletion.
-javiexin

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

Re: Notifications slight tweak, visual improvement

Post by javiexin »

javiexin wrote: Tue Nov 22, 2016 10:40 am I would hace preferred a CSS only solution, as the js deletion of the message is not configurable in child styles or anything else... Using a display none property seems to me more configurable than dom element deletion.
Any chance this could be changed, even before 3.1.11? I am fine with all, EXCEPT the js modification that deletes the DOM object, and the template structure that forces to not display the notification bubble when there are none. This should be a choice from the style developer, and not force it.
I can make a proposal, using CSS classes instead of eliminating the element (either at document creation, or later on, at runtime through JS).
How should I make the proposal, as a PR agains phpbb/3.1.x? Otherwise?

And yes, I could use a child style and make these changes, but I would have to maintain a full new copy of ajax.js, just for one tiny change, and I could possibly miss some relevant bugs fixed there.
I think we can have it both ways (no buble, o different bubble) with a single solution.

Regards,
-javiexin

PD: New PR submitted. Identical results, but more configurable. https://github.com/phpbb/phpbb/pull/4572

Post Reply