From b06324ad80c4793262c053f1887ff4ef52cb377e Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Sat, 18 Apr 2020 11:19:50 +0200 Subject: [PATCH] css: improve gritters - have two containers, one of the top, on of the bottom; - remove gritting chat message when opening the chat. --- src/static/css/pad/gritter.css | 19 +++++-- src/static/js/chat.js | 26 +++++----- src/static/js/gritter.js | 28 +++++++---- src/static/js/pad_savedrevs.js | 4 +- .../skins/colibris/src/components/gritter.css | 50 +++++++++++++++---- 5 files changed, 90 insertions(+), 37 deletions(-) diff --git a/src/static/css/pad/gritter.css b/src/static/css/pad/gritter.css index 821c394c4..20d70be46 100644 --- a/src/static/css/pad/gritter.css +++ b/src/static/css/pad/gritter.css @@ -1,18 +1,23 @@ #gritter-container { position: absolute; - bottom: 20px; right: 50%; transform: translateX(50%); text-align: center; z-index: 9999; } +#gritter-container.top { + top: 20px; +} +#gritter-container.bottom { + bottom: 20px; +} .gritter-item.popup { position: relative; max-width: 450px; visibility: visible; - right: auto; - left: auto; + right: auto !important; + left: auto !important; top: auto; bottom: auto; } @@ -33,4 +38,12 @@ .gritter-item.error .popup-content { color: #a84341; background-color: #eed3d4; +} + +@media (max-width: 720px) { + #gritter-container { + left: 1rem; + right: 1rem; + transform: none; + } } \ No newline at end of file diff --git a/src/static/js/chat.js b/src/static/js/chat.js index 2d60f73ff..a00ac9d92 100755 --- a/src/static/js/chat.js +++ b/src/static/js/chat.js @@ -32,9 +32,12 @@ var chat = (function() { $("#chaticon").removeClass('visible'); $("#chatbox").addClass('visible'); - self.scrollDown(); + self.scrollDown(true); chatMentions = 0; Tinycon.setBubble(0); + $('.chat-gritter-msg').each(function() { + $.gritter.remove(this.id); + }); }, focus: function () { @@ -86,10 +89,10 @@ var chat = (function() $("#chatbox").removeClass('visible'); } }, - scrollDown: function() + scrollDown: function(force) { - if($('.chat-content').is(':visible')){ - if(!self.lastMessage || !self.lastMessage.position() || self.lastMessage.position().top < ($('#chattext').outerHeight() + 20)) { + if ($('#chatbox').hasClass('visible')) { + if (force || !self.lastMessage || !self.lastMessage.position() || self.lastMessage.position().top < ($('#chattext').outerHeight() + 20)) { // if we use a slow animate here we can have a race condition when a users focus can not be moved away // from the last message recieved. $('#chattext').animate({scrollTop: $('#chattext')[0].scrollHeight}, { duration: 400, queue: false }); @@ -155,14 +158,14 @@ var chat = (function() var alreadyFocused = $("#chatinput").is(":focus"); // does the user already have the chatbox open? - var chatOpen = $(".chat-content").is(":visible"); + var chatOpen = $("#chatbox").hasClass("visible"); // does this message contain this user's name? (is the curretn user mentioned?) var myName = $('#myusernameedit').val(); var wasMentioned = (text.toLowerCase().indexOf(myName.toLowerCase()) !== -1 && myName != "undefined"); if(wasMentioned && !alreadyFocused && !isHistoryAdd && !chatOpen) - { // If the user was mentioned show for twice as long and flash the browser window + { // If the user was mentioned, make the message sticky chatMentions++; Tinycon.setBubble(chatMentions); ctx.sticky = true; @@ -187,14 +190,11 @@ var chat = (function() if(!chatOpen && ctx.duration > 0) { $.gritter.add({ - // (string | mandatory) the heading of the notification - title: ctx.authorName, - // (string | mandatory) the text inside the notification - text: ctx.text, - // (bool | optional) if you want it to fade out on its own or just sit there + text: '' + ctx.authorName + '' + ctx.text, sticky: ctx.sticky, - // (int | optional) the time you want it to be alive for before fading out - time: ctx.duration + time: 5000, + position: 'bottom', + class_name: 'chat-gritter-msg' }); } } diff --git a/src/static/js/gritter.js b/src/static/js/gritter.js index 0e1d95ed7..b0be20ffd 100644 --- a/src/static/js/gritter.js +++ b/src/static/js/gritter.js @@ -50,7 +50,7 @@ * @see Gritter#removeSpecific(); */ $.gritter.remove = function(id, params){ - Gritter.removeSpecific(id, params || {}); + Gritter.removeSpecific(id.split('gritter-item-')[1], params || {}); } /** @@ -74,7 +74,8 @@ _custom_timer: 0, _item_count: 0, _is_setup: 0, - _tpl_wrap: '
', + _tpl_wrap_top: '
', + _tpl_wrap_bottom: '
', _tpl_close: '', _tpl_title: '

[[title]]

', _tpl_item: [ @@ -114,6 +115,7 @@ var title = params.title, text = params.text, image = params.image || '', + position = params.position || 'top', sticky = params.sticky || false, item_class = params.class_name || $.gritter.options.class_name, time_alive = params.time || ''; @@ -158,7 +160,11 @@ return false; } - $('#gritter-container').append(tmp); + if (['top', 'bottom'].indexOf(position) == -1) { + position = 'top'; + } + + $('#gritter-container.' + position).append(tmp); var item = $('#gritter-item-' + this._item_count); @@ -199,9 +205,11 @@ this['_after_close_' + unique_id](e, manual_close); // Remove container if empty - if ($('#gritter-container .gritter-item').length == 0) { - $('#gritter-container').remove(); - } + $('#gritter-container').each(function() { + if ($(this).find('.gritter-item').length == 0) { + $(this).remove(); + } + }) }, /** @@ -367,11 +375,13 @@ * @private */ _verifyWrapper: function(){ - - if($('#gritter-container').length == 0){ - $('#editorcontainerbox').append(this._tpl_wrap); + if ($('#gritter-container.top').length === 0) { + $('#editorcontainerbox').append(this._tpl_wrap_top); } + if ($('#gritter-container.bottom').length === 0) { + $('#editorcontainerbox').append(this._tpl_wrap_bottom); + } } } diff --git a/src/static/js/pad_savedrevs.js b/src/static/js/pad_savedrevs.js index c0edd3654..cb2198a55 100644 --- a/src/static/js/pad_savedrevs.js +++ b/src/static/js/pad_savedrevs.js @@ -24,7 +24,9 @@ exports.saveNow = function(){ // (string | mandatory) the text inside the notification text: _("pad.savedrevs.timeslider") || "You can view saved revisions in the timeslider", // (bool | optional) if you want it to fade out on its own or just sit there - sticky: false + sticky: false, + time: 3000, + class_name: "saved-revision", }); } diff --git a/src/static/skins/colibris/src/components/gritter.css b/src/static/skins/colibris/src/components/gritter.css index 6272323e4..fa255fe4a 100644 --- a/src/static/skins/colibris/src/components/gritter.css +++ b/src/static/skins/colibris/src/components/gritter.css @@ -1,7 +1,3 @@ -#gritter-container { - top: 20px; - bottom: auto; -} .gritter-item:not(.error) .popup-content{ background-color: #64d29b; background-color: var(--primary-color); @@ -9,29 +5,61 @@ color: var(--bg-color); } .gritter-item .popup-content { - margin-bottom: 10px; + padding: 15px; box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); } +#gritter-container.bottom .gritter-item .popup-content { + margin-top: 10px; +} +#gritter-container.top .gritter-item .popup-content { + margin-bottom: 10px; +} .gritter-item p { - margin: 0; + margin: 0 !important; } .gritter-item .gritter-title { margin-bottom: 10px; } .gritter-item .gritter-close { - margin-left: 10px; - margin-right: -5px; + margin-left: 15px; + margin-right: 0px; } .gritter-item:not(.error) .gritter-close .buttonicon { color: #ffffff; color: var(--bg-color); } -.gritter-item.popup > .popup-content { +/* CHAT GRIITER ITEM */ +.gritter-item.chat-gritter-msg:not(.error) .popup-content { + background-color: white; + background-color: var(--bg-color); + color: #485365; + color: var(--text-color); +} +.gritter-item.chat-gritter-msg .gritter-content { + text-align: left; +} +.gritter-item.chat-gritter-msg .author-name { + font-weight: bold; + margin-right: 5px; +} +.gritter-item.chat-gritter-msg:not(.error) .gritter-close .buttonicon { + color: #485365; + color: var(--text-color); +} + +.gritter-item.saved-revision { + max-width: 600px; +} + +#gritter-container.top .gritter-item.popup > .popup-content { transform: scale(0.8) translateY(-100px); } +#gritter-container.bottom .gritter-item.popup > .popup-content { + transform: scale(0.8) translateY(0px); +} .gritter-item.popup.popup-show > .popup-content { - transform: scale(1) translateY(0); - transition: all 0.4s cubic-bezier(0.74, -0.05, 0.27, 1.75) + transform: scale(1) translateY(0) !important; + transition: all 0.4s cubic-bezier(0.74, -0.05, 0.27, 1.75) !important; } \ No newline at end of file