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

Re: Notifications slight tweak, visual improvement

Post by VSE » Wed Nov 16, 2016 4:41 pm

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 » Wed Nov 16, 2016 8:50 pm

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 » Sun Nov 20, 2016 7:34 am

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 » Mon Nov 21, 2016 8:57 pm

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: 123
Joined: Thu Sep 09, 2010 11:36 am
Location: Munich, Germany

Re: Notifications slight tweak, visual improvement

Post by Marc » Tue Nov 22, 2016 9:11 am

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 » 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.
-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 » Fri Dec 09, 2016 8:28 pm

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