md snackbar for acp

public/less/admin/admin.less

@@ -22,6 +22,7 @@
 
 @import "./modules/alerts";
 @import "./modules/selectable";
+@import "./modules/snackbar";
 
 .admin {
 	background: #fff;

public/less/admin/modules/snackbar.less

@@ -0,0 +1,57 @@
+#snackbar-container {
+	position:fixed;
+	left:20px;
+	bottom:0;
+	z-index:99999
+}
+
+.snackbar {
+	overflow:hidden;
+	clear:both;
+	min-width:288px;
+	max-width:568px;
+	cursor:pointer;
+	opacity:0;
+}
+
+.snackbar.snackbar-opened {
+	height:auto;
+	opacity:1;
+}
+
+@media (max-width:767px) {
+	#snackbar-container {
+		left:0!important;
+		right:0;
+		width:100%
+	}
+
+	#snackbar-container .snackbar {
+		min-width:100%;
+	}
+
+	#snackbar-container [class="snackbar snackbar-opened"]~.snackbar.toast {
+		margin-top:20px;
+	}
+
+	#snackbar-container [class="snackbar snackbar-opened"] {
+		border-radius:0;
+		margin-bottom:0;
+	}
+}
+
+.snackbar {
+	background-color: #323232;
+	color: #FFFFFF;
+	font-size: 14px;
+	border-radius: 2px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+	height: 0;
+	.transition(.25s ease-in-out opacity);
+}
+
+.snackbar.snackbar-opened {
+	padding: 10px 15px;
+	margin-bottom: 20px;
+	height: auto;
+}

public/src/admin/admin.js

@@ -21,6 +21,7 @@
 		});
 
 		$('[component="logout"]').on('click', app.logout);
+		app.alert = launchSnackbar;
 	});
 
 	socket.emit('admin.config.get', function(err, config) {
@@ -100,4 +101,16 @@
 			});
 		});
 	}
+
+	function launchSnackbar(params) {
+		var bar = $.snackbar({
+			content: "<strong>" + params.title + "</strong> &nbsp;&nbsp;&nbsp;&nbsp;" + params.message,
+			timeout: 3000,
+			htmlAllowed: true
+		});
+
+		if (params.clickfn) {
+			bar.on('click', clickfn);
+		}
+	}
 }());

public/vendor/snackbar/snackbar.min.js

@@ -0,0 +1,2 @@
+/* SnackbarJS - MIT LICENSE (https://github.com/FezVrasta/snackbarjs/blob/master/LICENSE.md) */
+!function(t){"function"==typeof define&&define.amd&&t(jQuery)}(function(t){function a(t){return"undefined"!=typeof t&&null!==t?!0:!1}t(document).ready(function(){t("body").append("<div id=snackbar-container/>")}),t(document).on("click","[data-toggle=snackbar]",function(){t(this).snackbar("toggle")}).on("click","#snackbar-container .snackbar",function(){t(this).snackbar("hide")}),t.snackbar=function(n){if(a(n)&&n===Object(n)){var e,o=!1;a(n.id)?t("#"+n.id).length?e=t("#"+n.id):(e=t("<div/>").attr("id",""+n.id).attr("class","snackbar"),o=!0):(e=t("<div/>").attr("id","snackbar"+Date.now()).attr("class","snackbar"),o=!0);var i=e.hasClass("snackbar-opened");a(n.style)?(i?e.attr("class","snackbar snackbar-opened "+n.style):e.attr("class","snackbar "+n.style),e.attr("data-style",n.style)):i?e.attr("class","snackbar snackbar-opened"):e.attr("class","snackbar"),n.htmlAllowed=a(n.htmlAllowed)?n.htmlAllowed:!1,n.timeout=a(n.timeout)?n.timeout:3e3,e.attr("data-timeout",n.timeout),n.content=n.htmlAllowed?n.content:t("<p>"+n.content+"</p>").text(),a(n.htmlAllowed)&&e.attr("data-html-allowed",n.htmlAllowed),a(n.content)&&(e.find(".snackbar-content").length?e.find(".snackbar-content").html(n.content):e.prepend("<span class=snackbar-content>"+n.content+"</span>"),e.attr("data-content",n.content)),o?e.appendTo("#snackbar-container"):e.insertAfter("#snackbar-container .snackbar:last-child"),a(n.action)&&"toggle"==n.action&&(n.action=i?"hide":"show");var s=Date.now();e.data("animationId1",s),setTimeout(function(){e.data("animationId1")===s&&(a(n.action)&&"show"!=n.action?a(n.action)&&"hide"==n.action&&e.removeClass("snackbar-opened"):e.addClass("snackbar-opened"))},50);var c=Date.now();return e.data("animationId2",c),0!==n.timeout&&setTimeout(function(){e.data("animationId2")===c&&e.removeClass("snackbar-opened")},n.timeout),e}return!1},t.fn.snackbar=function(n){if("undefined"!=typeof n){var e={};if(this.hasClass("snackbar"))return e={id:this.attr("id"),content:t(this).attr("data-content"),style:t(this).attr("data-style"),timeout:t(this).attr("data-timeout"),htmlAllowed:t(this).attr("data-html-allowed")},("show"===n||"hide"===n||"toggle"==n)&&(e.action=n),t.snackbar(e);a(n)&&"show"!==n&&"hide"!==n&&"toggle"!=n||(e={content:t(this).attr("data-content"),style:t(this).attr("data-style"),timeout:t(this).attr("data-timeout"),htmlAllowed:t(this).attr("data-html-allowed")}),a(n)&&(e.id=this.attr("data-snackbar-id"),("show"===n||"hide"===n||"toggle"==n)&&(e.action=n));var o=t.snackbar(e);return this.attr("data-snackbar-id",o.attr("id")),o}}});

src/views/admin/header.tpl

@@ -7,6 +7,7 @@
 	<link rel="stylesheet" href="{relative_path}/vendor/jquery/css/smoothness/jquery-ui-1.10.4.custom.min.css?{cache-buster}">
 	<link rel="stylesheet" type="text/css" href="{relative_path}/admin.css?{cache-buster}" />
 	<link rel="stylesheet" type="text/css" href="{relative_path}/vendor/mdl/mdl.min.css?{cache-buster}" />
+	<link rel="stylesheet" type="text/css" href="{relative_path}/vendor/snackbar/snackbar.min.css?{cache-buster}" />
 	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
 	<script>
@@ -54,6 +55,7 @@
 		<script type="text/javascript" src="{relative_path}/vendor/jquery/deserialize/jquery.deserialize.min.js?{cache-buster}"></script>
 		<script type="text/javascript" src="{relative_path}/vendor/mousetrap/mousetrap.js?{cache-buster}"></script>
 		<script type="text/javascript" src="{relative_path}/vendor/jquery/js/jquery-ui-1.10.4.custom.js?{cache-buster}"></script>
+		<script type="text/javascript" src="{relative_path}/vendor/snackbar/snackbar.min.js?{cache-buster}"></script>
 
 		<!-- BEGIN scripts -->
 		<script type="text/javascript" src="{scripts.src}"></script>