Fix ACP alerts to use same system as client (NodeBB#6396)

* Fix PostCSS warning message * Fix disconnect indicator styling Would increase size of quick actions when active * Use same alert system in ACP and client - Remove snackbar - Add styling and fix template for ACP (based on Persona)
0x1d · Mar 26, 2018 · dcf1865 · dcf1865
1 parent dae6acd
commit dcf1865
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 124 deletions.
diff --git a/public/less/admin/admin.less b/public/less/admin/admin.less
@@ -30,7 +30,6 @@
 
 @import "./modules/alerts";
 @import "./modules/selectable";
-@import "./modules/snackbar";
 @import "./modules/nprogress";
 @import "./modules/search";
 

diff --git a/public/less/admin/header.less b/public/less/admin/header.less
@@ -51,7 +51,7 @@
 		}
 
 		.fa {
-			margin-top: 12px;
+			line-height: 44px;
 			font-size: 25px;
 		}
 
@@ -112,8 +112,4 @@
 			}
 		}
 	}
-
-	.reconnect-spinner {
-		line-height: 44px;
-	}
 }
diff --git a/public/less/admin/modules/alerts.less b/public/less/admin/modules/alerts.less
@@ -1,35 +1,95 @@
 .alert-window {
-	position:fixed;
-	width:300px;
-	z-index:10;
-	.toaster-alert {
-		.pointer;
-	}
+	position: fixed;
+	width: 300px;
+	z-index: 10002;
+
+	right: 20px;
+	bottom: 0px;
 
 	.alert {
-		img {
-			float:left;
-			padding-right:10px;
+		.close {
+			color: inherit;
 		}
-	}
-}
 
-.alert-left-top {
-	left:20px;
-	top:70px;
-}
+		&::before {
+			position: relative;
+			top: -15px;
+			left: -15px;
+			display: block;
+			height: 2px;
+			width: 0;
+			transition: inherit;
+		}
 
-.alert-left-bottom {
-	left:20px;
-	bottom:20px;
-}
+		&.alert-info::before {
+			background-color: @brand-info;
+		}
 
-.alert-right-top {
-	right:20px;
-	top:70px;
-}
+		&.alert-warning::before {
+			background-color: @brand-warning;
+		}
+
+		&.alert-success::before {
+			background-color: @brand-success;
+		}
 
-.alert-right-bottom {
-	right:20px;
-	bottom:20px;
+		&.alert-danger::before {
+			background-color: @brand-danger;
+		}
+
+		&.animate {
+			&.alert-info::before {
+				background-color: lighten(@brand-info, 25%);
+			}
+
+			&.alert-warning::before {
+				background-color: lighten(@brand-warning, 25%);
+			}
+
+			&.alert-success::before {
+				background-color: lighten(@brand-success, 25%);
+			}
+
+			&.alert-danger::before {
+				background-color: lighten(@brand-danger, 25%);
+			}
+
+			&::before {
+				width: ~"calc(100% + 50px)";
+			}
+		}
+
+		background-color: white;
+		border: 0;
+		border-left: 5px solid !important;
+		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
+
+		strong {
+			text-transform: uppercase;
+		}
+
+		p {
+			padding: 10px 0px 0px;
+		}
+
+		&.alert-info {
+			color: @brand-info;
+			border-color: @brand-info;
+		}
+
+		&.alert-warning {
+			color: @brand-warning;
+			border-color: @brand-warning;
+		}
+
+		&.alert-success {
+			color: @brand-success;
+			border-color: @brand-success;
+		}
+
+		&.alert-danger {
+			color: @brand-danger;
+			border-color: @brand-danger;
+		}
+	}
 }
diff --git a/public/less/admin/modules/snackbar.less b/public/less/admin/modules/snackbar.less
diff --git a/public/src/admin/admin.js b/public/src/admin/admin.js
@@ -38,7 +38,6 @@
 		}
 
 		$('[component="logout"]').on('click', app.logout);
-		app.alert = launchSnackbar;
 
 		configureSlidemenu();
 		setupNProgress();
@@ -141,24 +140,6 @@
 		});
 	}
 
-	function launchSnackbar(params) {
-		var message = (params.title ? '<strong>' + params.title + '</strong>' : '') + (params.message ? params.message : '');
-
-		require(['translator'], function (translator) {
-			translator.translate(message, function (html) {
-				var bar = $.snackbar({
-					content: html,
-					timeout: params.timeout || 3000,
-					htmlAllowed: true,
-				});
-
-				if (params.clickfn) {
-					bar.on('click', params.clickfn);
-				}
-			});
-		});
-	}
-
 	function configureSlidemenu() {
 		var env = utils.findBootstrapEnvironment();
 

diff --git a/public/vendor/snackbar/snackbar.min.js b/public/vendor/snackbar/snackbar.min.js
diff --git a/src/meta/js.js b/src/meta/js.js
@@ -85,7 +85,6 @@ JS.scripts = {
 		'public/vendor/semver/semver.browser.js',
 		'public/vendor/jquery/serializeObject/jquery.ba-serializeobject.min.js',
 		'public/vendor/jquery/deserialize/jquery.deserialize.min.js',
-		'public/vendor/snackbar/snackbar.min.js',
 		'public/vendor/slideout/slideout.min.js',
 		'public/vendor/nprogress.min.js',
 	],

diff --git a/src/meta/minifier.js b/src/meta/minifier.js
@@ -280,7 +280,9 @@ function buildCSS(data, callback) {
 			clean({
 				processImportFrom: ['local'],
 			}),
-		] : [autoprefixer]).process(lessOutput.css).then(function (result) {
+		] : [autoprefixer]).process(lessOutput.css, {
+			from: undefined,
+		}).then(function (result) {
 			process.nextTick(callback, null, { code: result.css });
 		}, function (err) {
 			process.nextTick(callback, err);

diff --git a/src/views/admin/footer.tpl b/src/views/admin/footer.tpl
@@ -3,10 +3,7 @@
 	</div>
 
 
-	<div class="alert-window alert-left-top"></div>
-	<div class="alert-window alert-left-bottom"></div>
-	<div class="alert-window alert-right-top"></div>
-	<div class="alert-window alert-right-bottom"></div>
+	<div class="alert-window" component="toaster/tray"></div>
 
 	<div id="footer" class="container" style="padding-top: 50px; display:none;">
 		<footer class="footer">Copyright &copy; 2015 <a target="_blank" href="https://nodebb.org">NodeBB</a> by <a target="_blank" href="https://github.com/psychobunny">psychobunny</a>, <a href="https://github.com/julianlam" target="_blank">julianlam</a>, <a href="https://github.com/barisusakli" target="_blank">barisusakli</a> from <a target="_blank" href="http://www.designcreateplay.com">designcreateplay</a></footer>