From dcf1865b542a6793da14c743c0070c4a9d0eb451 Mon Sep 17 00:00:00 2001 From: Peter Jaszkowiak Date: Mon, 26 Mar 2018 09:55:01 -0600 Subject: [PATCH] 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) --- public/less/admin/admin.less | 1 - public/less/admin/header.less | 6 +- public/less/admin/modules/alerts.less | 118 ++++++++++++++++++------ public/less/admin/modules/snackbar.less | 65 ------------- public/src/admin/admin.js | 19 ---- public/vendor/snackbar/snackbar.min.js | 2 - src/meta/js.js | 1 - src/meta/minifier.js | 4 +- src/views/admin/footer.tpl | 5 +- 9 files changed, 94 insertions(+), 127 deletions(-) delete mode 100644 public/less/admin/modules/snackbar.less delete mode 100644 public/vendor/snackbar/snackbar.min.js diff --git a/public/less/admin/admin.less b/public/less/admin/admin.less index e5bff2c1f3..e4549085c2 100644 --- 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 index 76c49602c8..3d73e08a1e 100644 --- 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 index 8d52e439e1..6463576efc 100644 --- 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; + } + + &::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; -} diff --git a/public/less/admin/modules/snackbar.less b/public/less/admin/modules/snackbar.less deleted file mode 100644 index b27cfdb14e..0000000000 --- a/public/less/admin/modules/snackbar.less +++ /dev/null @@ -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; -} diff --git a/public/src/admin/admin.js b/public/src/admin/admin.js index be224d2812..b654210f37 100644 --- 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 ? '' + params.title + '' : '') + (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 deleted file mode 100644 index 7955e8bb16..0000000000 --- a/public/vendor/snackbar/snackbar.min.js +++ /dev/null @@ -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("
")}),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("
").attr("id",""+n.id).attr("class","snackbar"),o=!0):(e=t("
").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("

"+n.content+"

").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(""+n.content+""),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}}}); \ No newline at end of file diff --git a/src/meta/js.js b/src/meta/js.js index a6dc73331e..c2ccdabedf 100644 --- 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 index e14761a707..a7e2e422ed 100644 --- 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 index de228ce0d7..1f6d36eb70 100644 --- a/src/views/admin/footer.tpl +++ b/src/views/admin/footer.tpl @@ -3,10 +3,7 @@
-
-
-
-
+