diff --git a/src/static/css/pad.css b/src/static/css/pad.css
index bbbadbc18..6034b5edc 100644
--- a/src/static/css/pad.css
+++ b/src/static/css/pad.css
@@ -925,3 +925,95 @@ input[type=checkbox] {
#wrongPassword{
display:none;
}
+
+/* gritter stuff */
+#gritter-notice-wrapper {
+ position:fixed;
+ top:20px;
+ right:20px;
+ width:301px;
+ z-index:9999;
+}
+#gritter-notice-wrapper.bottom-right {
+ top: auto;
+ left: auto;
+ bottom: 20px;
+ right: 20px;
+}
+.gritter-item-wrapper {
+ position:relative;
+ margin:0 0 10px 0;
+}
+
+.gritter-top {
+ background:url(../../static/img/gritter.png) no-repeat left -30px;
+ height:10px;
+}
+.hover .gritter-top {
+ background-position:right -30px;
+}
+.gritter-bottom {
+ background:url(../../static/img/gritter.png) no-repeat left bottom;
+ height:8px;
+ margin:0;
+}
+.hover .gritter-bottom {
+ background-position: bottom right;
+}
+.gritter-item {
+ display:block;
+ background:url(../../static/img/gritter.png) no-repeat left -40px;
+ color:#eee;
+ padding:2px 11px 8px 11px;
+ font-size: 11px;
+ font-family:verdana;
+}
+.hover .gritter-item {
+ background-position:right -40px;
+}
+.gritter-item p {
+ padding:0;
+ margin:0;
+}
+.gritter-close {
+ display:none;
+ position:absolute;
+ top:5px;
+ left:3px;
+ background:url('../../static/img/gritter.png') no-repeat left top;
+ cursor:pointer;
+ width:30px;
+ height:30px;
+}
+.gritter-title {
+ font-size:14px;
+ font-weight:bold;
+ padding:0 0 7px 0;
+ display:block;
+ text-shadow:1px 1px 0 #000; /* Not supported by IE :( */
+}
+.gritter-image {
+ width:48px;
+ height:48px;
+ float:left;
+}
+.gritter-with-image,
+.gritter-without-image {
+ padding:0 0 5px 0;
+}
+.gritter-with-image {
+ width:220px;
+ float:right;
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-close {
+ color: #222;
+}
+.gritter-light .gritter-title {
+ text-shadow: none;
+}
+
+/* End of gritter stuff */
diff --git a/src/static/img/gritter.png b/src/static/img/gritter.png
new file mode 100644
index 000000000..0ca3bc0a0
Binary files /dev/null and b/src/static/img/gritter.png differ
diff --git a/src/static/js/chat.js b/src/static/js/chat.js
index 205294a85..f868d869a 100644
--- a/src/static/js/chat.js
+++ b/src/static/js/chat.js
@@ -22,7 +22,6 @@
var padutils = require('./pad_utils').padutils;
var padcookie = require('./pad_cookie').padcookie;
-
var Tinycon = require('tinycon/tinycon');
var chat = (function()
@@ -36,6 +35,7 @@ var chat = (function()
{
$("#chaticon").hide();
$("#chatbox").show();
+ $("#gritter-notice-wrapper").hide();
self.scrollDown();
chatMentions = 0;
Tinycon.setBubble(0);
@@ -62,6 +62,8 @@ var chat = (function()
$("#chatcounter").text("0");
$("#chaticon").show();
$("#chatbox").hide();
+ $.gritter.removeAll();
+ $("#gritter-notice-wrapper").show();
},
scrollDown: function()
{
@@ -130,17 +132,41 @@ var chat = (function()
// is the users focus already in the chatbox?
var alreadyFocused = $("#chatinput").is(":focus");
+ // does the user already have the chatbox open?
+ var chatOpen = $("#chatbox").is(":visible");
+
$("#chatcounter").text(count);
// chat throb stuff -- Just make it throw for twice as long
- if(wasMentioned && !alreadyFocused && !isHistoryAdd)
+ if(wasMentioned && !alreadyFocused && !isHistoryAdd && !chatOpen)
{ // If the user was mentioned show for twice as long and flash the browser window
- $('#chatthrob').html(""+authorName+"" + ": " + text).show().delay(4000).hide(400);
+ $.gritter.add({
+ // (string | mandatory) the heading of the notification
+ title: authorName,
+ // (string | mandatory) the text inside the notification
+ text: text,
+ // (bool | optional) if you want it to fade out on its own or just sit there
+ sticky: true,
+ // (int | optional) the time you want it to be alive for before fading out
+ time: '2000'
+ });
+
chatMentions++;
Tinycon.setBubble(chatMentions);
}
else
{
- $('#chatthrob').html(""+authorName+"" + ": " + text).show().delay(2000).hide(400);
+ if(!chatOpen){
+ $.gritter.add({
+ // (string | mandatory) the heading of the notification
+ title: authorName,
+ // (string | mandatory) the text inside the notification
+ text: text,
+ // (bool | optional) if you want it to fade out on its own or just sit there
+ sticky: false,
+ // (int | optional) the time you want it to be alive for before fading out
+ time: '4000'
+ });
+ }
}
}
// Clear the chat mentions when the user clicks on the chat input box
diff --git a/src/static/js/gritter.js b/src/static/js/gritter.js
index 35076f174..c32cc758e 100644
--- a/src/static/js/gritter.js
+++ b/src/static/js/gritter.js
@@ -10,7 +10,6 @@
*/
(function($){
-
/**
* Set it up as an object under the jQuery namespace
*/
diff --git a/src/static/js/pad.js b/src/static/js/pad.js
index 6a115868e..93e785cdd 100644
--- a/src/static/js/pad.js
+++ b/src/static/js/pad.js
@@ -364,6 +364,13 @@ function handshake()
});
}
+$.extend($.gritter.options, {
+ position: 'bottom-right', // defaults to 'top-right' but can be 'bottom-left', 'bottom-right', 'top-left', 'top-right' (added in 1.7.1)
+ fade_in_speed: 'medium', // how fast notifications fade in (string or int)
+ fade_out_speed: 2000, // how fast the notices fade out
+ time: 6000 // hang on the screen for...
+});
+
var pad = {
// don't access these directly from outside this file, except
// for debugging
diff --git a/src/templates/pad.html b/src/templates/pad.html
index cb88c1c1a..76df5133c 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -365,8 +365,6 @@
<% e.end_block(); %>
-
-