Unread counter disappear after reload or logout/login

dave1904

Hi, I'm using Slick theme and if a user gets a notification or chat message, the red counter icon appears in the navbar. If the user reloads the page or logs out and in again, the counter disappear. I got some messages from users that they don't get notified about new chat messages. In the mobile version it's even more confusing because you only see a message notification if you open the sidebar and scroll down to the chat area. I fixed that one by adding

<span component="chat/icon" class="fa fa-comment-o fa-fw" data-content="1"></span>

in the navbar-toggle class.

But the disappearing of notifications is a thing I don't know how to improve myself. Can somebody help out here?

Thanks and happy holidays

julian

It might be that when Persona received the ability to show the unread count, Slick didn't adopt that change.

@baris worked on the counts recently for Harmony, so he might know exactly where to look.

<baris>

I published a new version(v2.0.3) of slick theme that should fix this issue. https://github.com/pichalite/nodebb-theme-slick/commit/1907e9c61d4b6ba1640258a1b8851c81cf29661a

dave1904

thanks @baris this one works for notifications now. Chat notifications still have the same issue. Also for mobile, there should be a smiliar solution like for general notifications:

<div class="navbar-header">
   <button type="button" class="navbar-toggle" id="mobile-menu">
   <span component="notifications/icon" class="notification-icon fa fa-fw fa-bell-o" data-content="0"></span>
   // I added this one and did some crazy css stuff i don't wanna talk about
   <span component="chat/icon" class="fa fa-comment-o fa-fw" data-content="1"></span>
   <span class="icon-bar"></span>
...

Otherwise users see no notifications for new chat messages in existing chats (it seems you get no 'bell' notification then). They have to open the menu and scroll to the chat area.

<baris>

@dave1904 I published 2.0.4 with some more fixes, it should show a icon on mobile now. Fixed the chat icon as well.

dave1904

Awesome @baris, thank you so much. It's working.

I edited menu.tpl a bit more so that the user knows that the counter icon is related to notification or chat and that the zero count isn't shown on mobile:

<button type="button" class="navbar-toggle" id="mobile-menu">
	<!-- IF unreadCount.notification -->
		<span component="notifications/icon" class="notification-icon unread-count" data-content="{unreadCount.notification}">
			<i class="mobile-notification fa fa-fw fa-bell"></i>
		</span>
	<!-- ENDIF unreadCount.notification -->
	<!-- IF unreadCount.chat -->
		<span component="chat/icon" class="chat-notification-icon notification-icon unread-count" data-content="{unreadCount.chat}">
			<i class="mobile-notification fa fa-comment"></i>
		</span>
	<!-- ENDIF unreadCount.chat -->
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</button>

With some custom css. I'm sure that can be done better but it does its job.

Next job for me to look for will be to adopt the expand button in quick reply to normal reply like seen here. It's so cool and useful because often you write a quick answer and then decide that you want to add some extra stuff like code snippet or emoji. Currently in Slick you have to copy pasta your already written text.

Best wishes to you!
dave

<baris>

The quickreply functionality was added to persona by @julian here you should be able to apply to slick I guess. Keep in mind in v3.0 this functionality moved to core so all themes can add quick reply easier. https://github.com/NodeBB/NodeBB/blob/bootstrap5/public/src/modules/quickreply.js.