Bell Notification

NCP · June 4, 2024, 8:38am

That for, you have to customize the notification.js file and develop it according to the scenario.

class NotificationsView extends BaseNotificationsView {
	make() {

	    // existing methods here

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

		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");
		}
	}
	// existing methods here
}

Output:

rs115199789 · June 4, 2024, 11:43am

can you share the path of notification.js i can’t find it in the directory

NCP · June 4, 2024, 11:46am

github.com

frappe/frappe/blob/develop/frappe/public/js/frappe/ui/notifications/notifications.js#L183


      
          
          	show() {
          		this.container.show();
          	}
          
          	hide() {
          		this.container.hide();
          	}
          }
          
          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.setup_notification_listeners();
          		this.get_notifications_list(this.max_length).then((r) => {
          			if (!r.message) return;
          			this.dropdown_items = r.message.notification_logs;

rs115199789 · June 4, 2024, 11:47am

Thanks alot

4nimzz · June 5, 2024, 1:54am

hi @NCP , thank you for this, but I want to clarify, should I just add scripts without deleting any?
I’m sorry, I have little knowledge in this.

4nimzz · June 5, 2024, 3:17am

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");
		}
	}

NCP · June 5, 2024, 4:22am

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

4nimzz · June 5, 2024, 5:19am

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

NCP · June 5, 2024, 5:20am

Please apply the command.

bench build --force

Then reload Ctrl+Shift+R and check it.

NCP · June 5, 2024, 5:23am

Also remove above line.

rs115199789 · June 5, 2024, 5:37am

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.

NCP · June 5, 2024, 5:40am

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.

rs115199789 · June 5, 2024, 5:40am

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

rs115199789 · June 5, 2024, 5:42am

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();
	});
    }

NCP · June 5, 2024, 5:42am

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.

rs115199789 · June 5, 2024, 5:43am

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

Alexis_Dali · October 1, 2024, 9:26am

Hello @rs115199789
Do you solve this issue…?

rs115199789 · October 4, 2024, 6:14am

Not yet

trainingacademy · October 17, 2024, 7:05am

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.

rs115199789 · October 18, 2024, 5:34am

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