diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 06e8f33c92..3127c1bd90 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -249,5 +249,36 @@ function removeDateSetter(e) { $block.find('.time').val(''); } +function showToastMessage(message, $button, lifespan) { + var $toast = $('
'); + var $closeBtn = $('×'); + $toast.append($closeBtn); + var $content = $(''); + $content.html(message); + $toast.append($content); + if($button) { + $button.addClass('action-button'); + $button.bind('click', hideToastMessage); + $content.append($button); + } + $closeBtn.bind('click', hideToastMessage); + if($('.toast-notification')[0]) { + var targetY = $('.toast-notification').offset().top + $('.toast-notification').outerHeight(); + $toast.css('top', (targetY + 10) + 'px'); + } + $body.prepend($toast); + $toast.fadeIn(200); + + if(lifespan) { + $toast.timer = setTimeout(function() { + $toast.fadeOut(300); + }, lifespan * 1000); + } +} + +function hideToastMessage(e) { + e.preventDefault(); + $(this).closest('.toast-notification').remove(); +} diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 008e742bc2..27cd5e3a96 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -221,4 +221,62 @@ body.show-wip { @include position(absolute, 0px 0px 0 0); } } +} + +.toast-notification { + display: none; + position: fixed; + top: 20px; + right: 20px; + z-index: 99999; + max-width: 350px; + padding: 15px 20px 17px; + border-radius: 3px; + border: 1px solid #333; + @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)); + background-color: rgba(30, 30, 30, .92); + @include box-shadow(0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset); + font-size: 13px; + text-align: center; + color: #fff; + @include transition(all .2s); + + p, span { + color: #fff; + } + + strong { + display: block; + margin-bottom: 10px; + font-size: 16px; + font-weight: 700; + text-align: center; + } + + .close-button { + position: absolute; + top: 0; + right: 0; + width: 27px; + height: 27px; + font-size: 22px; + font-weight: 700; + line-height: 25px; + color: #aaa; + text-align: center; + + .close-icon { + font-size: 16px; + font-weight: 700; + } + } + + .action-button { + @include blue-button; + @include box-sizing(border-box); + width: 100%; + margin-top: 10px; + font-size: 12px; + text-align: center; + } } \ No newline at end of file diff --git a/cms/templates/unit.html b/cms/templates/unit.html index 3d48461231..5434c11845 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -113,4 +113,5 @@ -%block> + +%block> \ No newline at end of file