gritter now implemented

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 */

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("<b>"+authorName+"</b>" + ": " + 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("<b>"+authorName+"</b>" + ": " + 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

src/static/js/gritter.js

@@ -10,7 +10,6 @@
  */
 
 (function($){
- 	
 	/**
 	* Set it up as an object under the jQuery namespace
 	*/

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

src/templates/pad.html

@@ -365,8 +365,6 @@
             <% e.end_block(); %>
         </div>
 
-        <div id="chatthrob"></div>
-
         <div id="chaticon" onclick="chat.show();return false;">
             <span id="chatlabel" data-l10n-id="pad.chat"></span>
             <span class="buttonicon buttonicon-chat"></span>