From ea3fa0ff1d38f6db979f9ec2e6b1e5fdcbbc452a Mon Sep 17 00:00:00 2001 From: psychobunny Date: Fri, 21 Aug 2015 17:46:14 -0400 Subject: [PATCH] md snackbar for acp --- public/less/admin/admin.less | 1 + public/less/admin/modules/snackbar.less | 57 +++++++++++++++++++++++++ public/src/admin/admin.js | 13 ++++++ public/vendor/snackbar/snackbar.min.js | 2 + src/views/admin/header.tpl | 2 + 5 files changed, 75 insertions(+) create mode 100644 public/less/admin/modules/snackbar.less create mode 100644 public/vendor/snackbar/snackbar.min.js diff --git a/public/less/admin/admin.less b/public/less/admin/admin.less index ed6bd03e2c..e3296d7929 100644 --- a/public/less/admin/admin.less +++ b/public/less/admin/admin.less @@ -22,6 +22,7 @@ @import "./modules/alerts"; @import "./modules/selectable"; +@import "./modules/snackbar"; .admin { background: #fff; diff --git a/public/less/admin/modules/snackbar.less b/public/less/admin/modules/snackbar.less new file mode 100644 index 0000000000..215f3a7a31 --- /dev/null +++ b/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; +} diff --git a/public/src/admin/admin.js b/public/src/admin/admin.js index d20f71bca6..dd53664a87 100644 --- a/public/src/admin/admin.js +++ b/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: "" + params.title + "     " + params.message, + timeout: 3000, + htmlAllowed: true + }); + + if (params.clickfn) { + bar.on('click', clickfn); + } + } }()); \ No newline at end of file diff --git a/public/vendor/snackbar/snackbar.min.js b/public/vendor/snackbar/snackbar.min.js new file mode 100644 index 0000000000..7955e8bb16 --- /dev/null +++ b/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("
")}),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/views/admin/header.tpl b/src/views/admin/header.tpl index 11fd6bbd93..41c7e21c68 100644 --- a/src/views/admin/header.tpl +++ b/src/views/admin/header.tpl @@ -7,6 +7,7 @@ + +