Notifications slight tweak, visual improvement

[MattF]

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.

[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]

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

[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

[Marc]

Correct, this change will also be available in 3.1.11.

[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

[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.

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