Bell Notification

ERPNext User Forum
7

hi @NCP Can you please check if I added this correctly, thank you.

class NotificationsView extends BaseNotificationsView {
	make() {
		this.notifications_icon = this.parent.find(".notifications-icon");
		this.notifications_icon
			.attr("title", __("Notifications"))
			.tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" });

		this.createUnreadCountElement();
		this.applyUnreadCountStyles();

		this.setup_notification_listeners();
		this.get_notifications_list(this.max_length).then((r) => {
			if (!r.message) return;
			this.dropdown_items = r.message.notification_logs;
			frappe.update_user_info(r.message.user_info);
			this.render_notifications_dropdown();
			this.display_unread_count(); // Add this line
			if (this.settings.seen == 0 && this.dropdown_items.length > 0) {
				this.toggle_notification_icon(false);
			}
		});
	}

	createUnreadCountElement() {
		this.unreadCountElement = document.createElement('span');
		this.unreadCountElement.classList.add('unread-count');
		this.notifications_icon[0].appendChild(this.unreadCountElement);
	}

	applyUnreadCountStyles() {
		$(this.unreadCountElement).css({
			"position": "absolute",
			"top": "-10px",
			"right": "-10px",
			"background-color": "red",
			"color": "white",
			"border-radius": "50%",
			"padding": "2px 6px",
			"font-size": "12px",
			"font-weight": "bold",
			"display": "none"
		});
	}

	display_unread_count() {
		let unreadCount = this.dropdown_items.filter(item => !item.read).length;
		if (unreadCount > 0) {
			$(this.unreadCountElement).text(unreadCount).css("display", "block");
		} else {
			$(this.unreadCountElement).css("display", "none");
		}
	}
1 Like
8

code looks proper. Do testing and see if it works or not?

9

After performing the testing, the red dot is still showing. Should it appear immediately, or will it take some time?

1 Like
10

Please apply the command.

bench build --force

Then reload Ctrl+Shift+R and check it.

1 Like
11

Also remove above line.

1 Like
13

Working Fine for me thank you @NCP

how can i make change to my frappe cloud server , i tested this one on my local server.

1 Like
15

It’s difficult to changed it in the frappe cloud, we don’t suggest to changes add into the core code.
I don’t know, it is possible to overide it in the custom app or not.

1 Like
16

Also as you can see i clicked on mark all as read, but the no. of notifications is still showing.
Capture

1 Like
17

here is the code.

 class NotificationsView extends BaseNotificationsView {
  make() {
	this.notifications_icon = this.parent.find(".notifications-icon");
	this.notifications_icon
		.attr("title", __("Notifications"))
		.tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" });

	this.createUnreadCountElement();
	this.applyUnreadCountStyles();

	this.setup_notification_listeners();
	this.get_notifications_list(this.max_length).then((r) => {
		if (!r.message) return;
		this.dropdown_items = r.message.notification_logs;
		frappe.update_user_info(r.message.user_info);
		this.render_notifications_dropdown();
		this.display_unread_count(); // Add this line
		
	});
}

createUnreadCountElement() {
	this.unreadCountElement = document.createElement('span');
	this.unreadCountElement.classList.add('unread-count');
	this.notifications_icon[0].appendChild(this.unreadCountElement);
}

applyUnreadCountStyles() {
	$(this.unreadCountElement).css({
		"position": "absolute",
		"top": "-10px",
		"right": "-10px",
		"background-color": "red",
		"color": "white",
		"border-radius": "50%",
		"padding": "2px 6px",
		"font-size": "12px",
		"font-weight": "bold",
		"display": "none"
          	});
                 }

display_unread_count() {
	let unreadCount = this.dropdown_items.filter(item => !item.read).length;
	if (unreadCount > 0) {
		$(this.unreadCountElement).text(unreadCount).css("display", "block");
	} else {
		$(this.unreadCountElement).css("display", "none");
	}
}

update_dropdown() {
	this.get_notifications_list(1).then((r) => {
		if (!r.message) return;
		let new_item = r.message.notification_logs[0];
		frappe.update_user_info(r.message.user_info);
		this.dropdown_items.unshift(new_item);
		if (this.dropdown_items.length > this.max_length) {
			this.container.find(".recent-notification").last().remove();
			this.dropdown_items.pop();
		}

		this.insert_into_dropdown();
	});
    }
1 Like
18

This is a sample script to get you started. Now, you need to develop it according to your specific scenario. This platform is not intended for developing the entire script or providing every detail.

1 Like
19

:frowning: i just want that if i click on mark all as read the no. of notification vanishes.

1 Like
20

Hello @rs115199789
Do you solve this issue…?

21

Not yet

22

It would be nice if this code can be used to enlarge the dot on the bell-icon and change the colour to orange or red. The dot on previous versions were much more visible. On all my V15 systems, the dot is green and very small. And yes, I can use this to modify my own servers but I am not sure why the default indication has been made with such low visibility.

1 Like
23

Specially in dark mode it’s so hard to see the little green dot

1 Like
24

Hi

how can we override this class in our custom app ?

25

@rs115199789 Hello My friend.
Do you solved this issue…?
Mark All As Read not working for me.

26

Hi @Alexis_Dali
Sorry mate still facing the issue and im not using that anymore, also i guess you need to make some changes in the core file to do that.

Thank You

27

Hello @rs115199789 Thank you for your replay.!
So what are you using now.?

28

I’m not using that now :frowning: