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