code looks proper. Do testing and see if it works or not?
After performing the testing, the red dot is still showing. Should it appear immediately, or will it take some time?
1 Like
Please apply the command.
bench build --force
Then reload Ctrl+Shift+R and check it.
1 Like
Also remove above line.
1 Like
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
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
Also as you can see i clicked on mark all as read, but the no. of notifications is still showing.
1 Like
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
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
i just want that if i click on mark all as read the no. of notification vanishes.
1 Like
Not yet
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
Specially in dark mode it’s so hard to see the little green dot
1 Like
Hi
how can we override this class in our custom app ?
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
I’m not using that now
You can check the following repo Frappe JS Override Example
In the given repo, you can check the app.bundle.js file in which I have overridden the FileUploader.
Also don’t forget to add the app_include_js entry in hooks.py.
If it does not work try rebuilding the assets with the following command bench build --app app_name