mirror of
https://github.com/NodeBB/NodeBB.git
synced 2026-02-26 00:21:16 +01:00
Fix ACP alerts to use same system as client (#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)
This commit is contained in:
Peter Jaszkowiak
committed by
Julian Lam
Julian Lam
parent
dae6acda82
commit
dcf1865b54
@@ -30,7 +30,6 @@
|
||||
|
||||
@import "./modules/alerts";
|
||||
@import "./modules/selectable";
|
||||
@import "./modules/snackbar";
|
||||
@import "./modules/nprogress";
|
||||
@import "./modules/search";
|
||||
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
}
|
||||
|
||||
.fa {
|
||||
margin-top: 12px;
|
||||
line-height: 44px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
@@ -112,8 +112,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reconnect-spinner {
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
display: block;
|
||||
height: 2px;
|
||||
width: 0;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&.alert-info::before {
|
||||
background-color: @brand-info;
|
||||
}
|
||||
|
||||
&.alert-warning::before {
|
||||
background-color: @brand-warning;
|
||||
}
|
||||
|
||||
&.alert-success::before {
|
||||
background-color: @brand-success;
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-left-top {
|
||||
left:20px;
|
||||
top:70px;
|
||||
}
|
||||
|
||||
.alert-left-bottom {
|
||||
left:20px;
|
||||
bottom:20px;
|
||||
}
|
||||
|
||||
.alert-right-top {
|
||||
right:20px;
|
||||
top:70px;
|
||||
}
|
||||
|
||||
.alert-right-bottom {
|
||||
right:20px;
|
||||
bottom:20px;
|
||||
}
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
#snackbar-container {
|
||||
position:fixed;
|
||||
left:20px;
|
||||
bottom:0;
|
||||
z-index:99999;
|
||||
|
||||
strong {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
@@ -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();
|
||||
|
||||
|
||||
2
public/vendor/snackbar/snackbar.min.js
vendored
2
public/vendor/snackbar/snackbar.min.js
vendored
@@ -1,2 +0,0 @@
|
||||
/* 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}}});
|
||||
@@ -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',
|
||||
],
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 © 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>
|
||||
|
||||
Reference in New Issue
Block a user