Use statusBarSet() js function from Pillar

src/scripts/tutti/0_navbar.js

@@ -29,6 +29,27 @@ NavbarTransparent();
 
 
 /* Status Bar */
+function statusBarClear(delay_class, delay_html){
+	var statusBar = $("#status-bar");
+
+	if (!delay_class) { delay_class = 0 };
+	if (!delay_html) { delay_html = 250 };
+
+	if (delay_class == 0) {
+		statusBar.removeAttr('class');
+		return
+
+	} else {
+		setTimeout(function(){
+			statusBar.removeAttr('class');
+
+			setTimeout(function() {
+				statusBar.html('');
+			}, delay_html);
+		}, delay_class);
+	}
+}
+
 function statusBarSet(classes, html, icon_name, time){
 	/* Utility to notify the user by temporarily flashing text on the project header
 		 Usage:
@@ -59,14 +80,16 @@ function statusBarSet(classes, html, icon_name, time){
 		icon = '<i class="' + icon_name + '"></i>';
 	};
 
+	statusBarClear(0,0);
+
 	var text = icon + html;
-	$("#project-statusbar").addClass('active ' + classes);
-	$("#project-statusbar").html(text);
+	var statusBar = $("#status-bar");
+
+	statusBar
+		.addClass('active ' + classes)
+		.html(text);
 
 	/* Back to normal */
-	setTimeout(function(){
-	$("#project-statusbar").removeAttr('class');
-	$("#project-statusbar").html();
-	}, time);
+	statusBarClear(time, 250);
 };
 

src/styles/_project.sass

@@ -21,7 +21,7 @@
 	left: 0
 
 #project-side-container.collapsed+#project_context-header
-	span#project-statusbar
+	span#status-bar
 		left: $project-sidebar-width
 
 
@@ -233,7 +233,7 @@
 				text-decoration: none
 				outline: none
 
-span#project-statusbar
+span#status-bar
 	position: absolute
 	// left: $project_nav-width + $project-sidebar-width
 	left: 0

src/styles/base.sass

@@ -1091,3 +1091,24 @@ label, label.control-label
 			iframe
 				width: 853px
 				height: 480px
+
+#status-bar
+	opacity: 0
+	transition: all 250ms ease-in-out
+
+	i
+		margin-right: 5px
+
+	&.info
+		color: $color-info
+	&.error
+		color: $color-danger
+	&.warning
+		color: $color-warning
+	&.success
+		color: $color-success
+	&.default
+		color: $color-text-light
+
+	&.active
+		opacity: 1

src/templates/projects/edit.jade

@@ -70,7 +70,7 @@
 
 	#project_context-container
 		#project_context-header
-			span#project-statusbar
+			span#status-bar
 
 			span#project-edit-title
 				| Edit Project

src/templates/projects/edit_node_types.jade

@@ -71,7 +71,7 @@
 
 	#project_context-container
 		#project_context-header
-			span#project-statusbar
+			span#status-bar
 
 			span#project-edit-title
 				| Edit Project

src/templates/projects/sharing.jade

@@ -70,7 +70,7 @@
 
 	#project_context-container
 		#project_context-header
-			span#project-statusbar
+			span#status-bar
 
 			span#project-edit-title
 				| Manage team members for this project

src/templates/projects/view.jade

@@ -108,7 +108,7 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css', v
 	#project_context-container
 		| {% if project.has_method('PUT') %}
 		#project_context-header
-			span#project-statusbar
+			span#status-bar
 
 			ul.project-edit-tools.disabled
 				li.button-dropdown