Merge pull request #1848 from netchampfaris/remove-offcanvas

notification sidebar replaced with dropdown

frappe/public/css/docs.css

@@ -161,6 +161,13 @@ body {
   margin-right: 3px;
   border-radius: 4px;
 }
+.dropdown-navbar-new-comments > a {
+  border: 0;
+  margin-left: 15px;
+}
+.dropdown-navbar-new-comments .dropdown-menu {
+  margin-top: 0;
+}
 .navbar-new-comments {
   display: inline-block;
   min-width: 24px;

frappe/public/css/navbar.css

@@ -27,6 +27,26 @@
   margin-right: 3px;
   border-radius: 4px;
 }
+.dropdown-navbar-new-comments > a {
+  border: 0;
+  margin-left: 15px;
+}
+.dropdown-navbar-new-comments .dropdown-menu {
+  margin-top: 0;
+}
+@media (max-width: 767px) {
+  .dropdown-navbar-new-comments.open .dropdown-menu {
+    position: absolute;
+    border-top: 1px solid rgba(0, 0, 0, 0.14902);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    background-color: #fff;
+    right: 0;
+    left: auto;
+  }
+  .dropdown-navbar-new-comments.open .dropdown-menu > li > a {
+    padding: 12px;
+  }
+}
 .navbar-new-comments {
   display: inline-block;
   min-width: 24px;

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -9,12 +9,17 @@
 			</ul>
 		</div>
 		<div class="navbar-center text-ellipsis" style="display: none;"></div>
-		<ul class="nav navbar-nav navbar-right visible-xs visible-sm">
-			<li>
-				<a class="toggle-navbar-new-comments" title="{%= __("Unread Messages") %}">
+
+		<ul class="nav navbar-nav navbar-right">
+			<div class="dropdown dropdown-navbar-new-comments">
+				<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 					<span class="navbar-new-comments">0</span></a>
-			</li>
+				</a>
+				<ul class="dropdown-menu" id="dropdown-notification" role="menu" style="max-height: 480px; overflow-y: auto;">
+				</ul>
+			</div>
 		</ul>
+
 		<div class="hidden-xs hidden-sm">
 			<ul class="nav navbar-nav navbar-right">
 				<li class="dropdown">
@@ -47,13 +52,6 @@
 	                        {%= __("Logout") %}</a></li>
 	                </ul>
 				</li>
-	            <li class="dropdown">
-	    			<a class="dropdown-toggle" href="#" data-toggle="dropdown"
-	    				title="{%= __("Unread Messages") %}"
-	    				onclick="return false;"><span class="navbar-new-comments">0</span></a>
-	    			<ul class="dropdown-menu" id="navbar-notification" role="menu" style="max-height: 480px; overflow-y: auto;">
-	    			</ul>
-	            </li>
 	        </ul>
 	        <form class="navbar-form navbar-right" role="search" onsubmit="return false;">
 	          <div class="form-group form-group-sm ui-front">

frappe/public/js/frappe/ui/toolbar/notifications.js

@@ -7,8 +7,7 @@ frappe.ui.notifications.update_notifications = function() {
 	var other = keys(frappe.boot.notification_info.open_count_other).sort();
 
 	// clear toolbar / sidebar notifications
-	frappe.ui.notifications.navbar_notification = $("#navbar-notification").empty();
-	frappe.ui.notifications.sidebar_notification = $("#sidebar-notification").empty();
+	frappe.ui.notifications.dropdown_notification = $("#dropdown-notification").empty();
 
 	// add these first.
 	frappe.ui.notifications.add_notification("Comment");
@@ -24,8 +23,7 @@ frappe.ui.notifications.update_notifications = function() {
 	// add a divider
 	if(frappe.ui.notifications.total) {
 		var divider = '<li class="divider"></li>';
-		frappe.ui.notifications.navbar_notification.append($(divider));
-		frappe.ui.notifications.sidebar_notification.append($(divider));
+		frappe.ui.notifications.dropdown_notification.append($(divider));
 	}
 
 	// add to toolbar and sidebar
@@ -36,7 +34,7 @@ frappe.ui.notifications.update_notifications = function() {
 	});
 
 	// set click events
-	$("#navbar-notification a, #sidebar-notification a").on("click", function() {
+	$("#dropdown-notification a").on("click", function() {
 		var doctype = $(this).attr("data-doctype");
 		var config = frappe.ui.notifications.config[doctype] || {};
 		if (config.route) {
@@ -73,8 +71,7 @@ frappe.ui.notifications.add_notification = function(doctype, notifications_map)
 				data_doctype: doctype
 			});
 
-		frappe.ui.notifications.navbar_notification.append($(notification_row));
-		frappe.ui.notifications.sidebar_notification.append($(notification_row));
+		frappe.ui.notifications.dropdown_notification.append($(notification_row));
 
 		frappe.ui.notifications.total += count;
 	}

frappe/public/less/navbar.less

@@ -35,6 +35,31 @@
 	border-radius: 4px;
 }
 
+.dropdown-navbar-new-comments {
+	& > a {
+		border: 0;
+		margin-left: 15px;
+	}
+	.dropdown-menu {
+		margin-top: 0;
+	}
+}
+
+@media (max-width: 767px) {
+	.dropdown-navbar-new-comments.open .dropdown-menu {
+		position: absolute;
+		border-top: 1px solid rgba(0, 0, 0, 0.14902);
+		box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+		background-color: #fff;
+		right: 0;
+		left: auto;
+
+		& > li > a {
+			padding: 12px;
+		}
+	}
+}
+
 .navbar-new-comments {
 	display: inline-block;
 	min-width: 24px;