vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

feat: move notification to sidebar

Browse source
This commit is contained in:
Ejaaz Khan 2025-12-03 23:36:53 +05:30
parent 7a99f885d4
commit b0cbb9b7dc
9 changed files with 101 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frappe/public/js/frappe/ui/notifications/notifications.js
View file

@ -8,7 +8,8 @@ frappe.ui.Notifications = class Notifications {
}
make() {
this.dropdown = $(".navbar").find(".dropdown-notifications").removeClass("hidden");
$(".standard-items-sections").find(".sidebar-notification").removeClass("hidden");
this.dropdown = $(".standard-items-sections").find(".dropdown-notifications");
this.dropdown_list = this.dropdown.find(".notifications-list");
this.header_items = this.dropdown_list.find(".header-items");
this.header_actions = this.dropdown_list.find(".header-actions");
@ -25,19 +26,19 @@ frappe.ui.Notifications = class Notifications {
setup_headers() {
// Add header actions
$(`<span class="notification-settings pull-right" data-action="go_to_settings">
$(`<span class="notification-settings" data-action="go_to_settings">
${frappe.utils.icon("setting-gear")}
</span>`)
.on("click", (e) => {
e.stopImmediatePropagation();
this.dropdown.dropdown("hide");
console.log("what");
frappe.set_route("Form", "Notification Settings", frappe.session.user);
})
.appendTo(this.header_actions)
.attr("title", __("Notification Settings"))
.tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" });
$(`<span class="mark-all-read pull-right" data-action="mark_all_as_read">
$(`<span class="mark-all-read" data-action="mark_all_as_read">
${frappe.utils.icon("mark-as-read")}
</span>`)
.on("click", (e) => this.mark_all_as_read(e))
@ -45,6 +46,16 @@ frappe.ui.Notifications = class Notifications {
.attr("title", __("Mark all as read"))
.tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" });
$(`<span class="close-notification-dialogue pull-right">
${frappe.utils.icon("x")}
</span>`)
.on("click", (e) => {
this.dropdown.addClass("hidden");
})
.appendTo(this.header_actions)
.attr("title", __("Close"))
.tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" });
this.categories = [
{
label: __("Notifications"),
@ -118,6 +129,7 @@ frappe.ui.Notifications = class Notifications {
}
setup_dropdown_events() {
const dropdown = this.dropdown;
this.dropdown.on("hide.bs.dropdown", (e) => {
let hide = $(e.currentTarget).data("closable");
$(e.currentTarget).data("closable", true);
@ -127,6 +139,21 @@ frappe.ui.Notifications = class Notifications {
this.dropdown.on("click", (e) => {
$(e.currentTarget).data("closable", true);
});
$(document).on("click", function (e) {
if (!dropdown.find(".notifications-list").is(e.target)) {
dropdown.addClass("hidden");
}
});
dropdown.find(".notification-item").on("click", (e) => {
dropdown.addClass("hidden");
});
$(document).on("page-change", function () {
if (dropdown && dropdown.length) {
dropdown.addClass("hidden");
}
});
}
};

16
frappe/public/js/frappe/ui/sidebar/sidebar.html
View file

@ -1,7 +1,21 @@
<div class="body-sidebar-container {%= expanded ? 'expanded' : ''%}">
<div class="body-sidebar-placeholder"></div>
<div class="body-sidebar">
<div class="standard-items-sections"></div>
<div class="standard-items-sections">
<div class="dropdown-notifications hidden">
<div class="notifications-list" role="menu">
<div class="notification-list-header">
<div class="header-items"></div>
<div class="header-actions"></div>
</div>
<div class="notification-list-body">
<div class="panel-notifications"></div>
<div class="panel-events"></div>
<div class="panel-changelog-feed"></div>
</div>
</div>
</div>
</div>
<div class="body-sidebar-top">
<div class="sidebar-items">
</div>

19
frappe/public/js/frappe/ui/sidebar/sidebar.js
View file

@ -236,12 +236,26 @@ frappe.ui.Sidebar = class Sidebar {
icon: "search",
type: "Button",
id: "navbar-modal-search",
class: "navbar-search-bar hidden",
},
{
label: "Notification",
icon: "bell",
type: "Button",
class: "sidebar-notification hidden",
onClick: () => {
this.wrapper.find(".dropdown-notifications").toggleClass("hidden");
if (frappe.is_mobile()) {
this.wrapper.removeClass("expanded");
}
},
},
];
this.standard_items.forEach((w) => {
this.add_item(this.$standard_items_sections, w);
});
this.setup_awesomebar();
this.setup_notifications();
this.standard_items_setup = true;
}
setup_awesomebar() {
@ -260,6 +274,11 @@ frappe.ui.Sidebar = class Sidebar {
}
}
}
setup_notifications() {
if (frappe.boot.desk_settings.notifications && frappe.session.user !== "Guest") {
this.notifications = new frappe.ui.Notifications();
}
}
add_item(container, item) {
this.items.push(
this.make_sidebar_item({

1
frappe/public/js/frappe/ui/sidebar/sidebar_item.js
View file

@ -368,6 +368,7 @@ frappe.ui.sidebar_item.TypeButton = class SidebarButton extends frappe.ui.sideba
super(item);
this.title = frappe.app.sidebar.workspace_title;
this.item.id && this.wrapper.attr("id", this.item.id);
this.item.class && this.wrapper.attr("class", this.item.class);
this.wrapper.attr("title", this.item.label);
this.setup_click();
}

2
frappe/public/js/frappe/ui/toolbar/awesome_bar.js
View file

@ -5,7 +5,7 @@ frappe.provide("frappe.tags");
frappe.search.AwesomeBar = class AwesomeBar {
setup(element) {
$(".search-bar").removeClass("hidden");
$(".search-bar, .navbar-search-bar").removeClass("hidden");
this.options = [];
this.global_results = [];

28
frappe/public/js/frappe/ui/toolbar/navbar.html
View file

@ -11,34 +11,6 @@
<ul class="nav navbar-nav d-none d-sm-flex" id="navbar-breadcrumbs"></ul>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-notifications dropdown-mobile hidden">
<button
class="btn-reset nav-link notifications-icon text-muted"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="notifications-seen">
<span class="sr-only">{{ __("No new notifications") }}</span>
<svg class="es-icon icon-sm" style="stroke:none;"><use href="#es-line-notifications"></use></svg>
</span>
<span class="notifications-unseen">
<span class="sr-only">{{ __("You have unseen notifications") }}</span>
<svg class="es-icon icon-sm"><use href="#es-line-notifications-unseen"></use></svg>
</span>
</button>
<div class="dropdown-menu notifications-list dropdown-menu-right" role="menu">
<div class="notification-list-header">
<div class="header-items"></div>
<div class="header-actions"></div>
</div>
<div class="notification-list-body">
<div class="panel-notifications"></div>
<div class="panel-events"></div>
<div class="panel-changelog-feed"></div>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown-message dropdown-mobile hidden">
<button
class="btn-reset nav-link notifications-icon text-muted"

7
frappe/public/js/frappe/ui/toolbar/toolbar.js
View file

@ -18,7 +18,6 @@ frappe.ui.toolbar.Toolbar = class {
});
// this.setup_awesomebar();
this.setup_notifications();
this.setup_help();
this.setup_read_only_mode();
this.setup_announcement_widget();
@ -181,12 +180,6 @@ frappe.ui.toolbar.Toolbar = class {
}
}
setup_notifications() {
if (frappe.boot.desk_settings.notifications && frappe.session.user !== "Guest") {
this.notifications = new frappe.ui.Notifications();
}
}
add_back_button() {
if (!frappe.is_mobile()) return;
this.navbar = $(".navbar-brand");

17
frappe/public/scss/desk/notification.scss
View file

@ -14,12 +14,20 @@
.mark-all-read {
margin-top: 2px;
margin-right: 15px;
margin-right: 4px;
cursor: pointer;
}
.close-notification-dialogue {
cursor: pointer;
.icon {
stroke-width: 2px;
}
}
.notification-settings {
margin-top: 2px;
margin-right: 4px;
cursor: pointer;
}
@ -51,7 +59,11 @@
padding: 0px;
min-height: 480px;
position: absolute;
top: 0;
box-shadow: var(--shadow-2xl);
background-color: var(--bg-color);
height: 100vh;
overflow: hidden;
.notification-list-header {
margin: 0px 10px;
@ -60,9 +72,8 @@
}
.notification-list-body {
// margin: 10px 0px;
max-height: 450px;
overflow-y: auto;
height: 93%;
.panel-events,
.panel-notifications {

20
frappe/public/scss/desk/sidebar.scss
View file

@ -155,6 +155,14 @@
}
}
}
.standard-items-sections {
.dropdown-notifications {
.notifications-list {
left: 3.4%;
}
}
}
}
@mixin body-sidebar-expanded {
@ -162,6 +170,11 @@
// make it an overlay on hover
position: absolute;
width: var(--sidebar-width);
.dropdown-notifications {
.notifications-list {
left: 100%;
}
}
}
// show placeholder so that main section remains static
@ -182,6 +195,13 @@
padding: 0px;
width: 0px;
overflow: hidden;
.standard-items-sections {
.dropdown-notifications {
.notifications-list {
left: 0;
}
}
}
}
}