Changed notifications to use gritter

core/realtime/notification.py

@@ -12,9 +12,10 @@ HEADERS = {
 logger = logging.getLogger('spa')
 
 
-def post_notification(session_id, message):
+def post_notification(session_id, image, message):
     payload = {
         'sessionid': session_id,
+        'image': image,
         'message': message
     }
     data = json.dumps(payload)

dss/pipelinesettings.py

@@ -10,6 +10,7 @@ PIPELINE_CSS = {
             'css/dss.overrides.css',
 
             'css/ace/dropzone.css',
+            'css/ace/uncompressed/jquery.gritter.css',
             'css/ace/uncompressed/bootstrap.css',
             'css/ace/uncompressed/ace.css',
             'css/ace/uncompressed/ace-ie.css',
@@ -63,6 +64,7 @@ PIPELINE_JS = {
             'js/lib/ace/ace/elements.wizard.js',
             'js/lib/ace/uncompressed/bootstrap-wysiwyg.js',
             'js/lib/ace/uncompressed/fuelux/fuelux.wizard.js',
+            'js/lib/ace/uncompressed/jquery.gritter.js',
             'js/lib/ace/uncompressed/dropzone.js',
             'js/lib/ace/uncompressed/fullcalendar.js',
             'js/lib/ace/uncompressed/x-editable/bootstrap-editable.js',

spa/models/notification.py

@@ -10,20 +10,6 @@ from dss import localsettings
 from spa.models import BaseModel
 
 
-class NotificationThread(threading.Thread):
-    def __init__(self, instance, **kwargs):
-        self._instance = instance
-        super(NotificationThread, self).__init__(**kwargs)
-
-    def run(self):
-        #Check if target of notification has an active session
-        session = self._instance.last_known_session
-        if session:
-            post_notification(
-                session.session_key,
-                self._instance.notification_html)
-
-
 class Notification(BaseModel):
     to_user = models.ForeignKey('spa.UserProfile', related_name='to_notications')
     from_user = models.ForeignKey('spa.UserProfile', related_name='notifications', null=True, blank=True)
@@ -50,6 +36,7 @@ class Notification(BaseModel):
         for session in sessions:
             post_notification(
                 session.session_key,
+                self.to_user.get_avatar_image(),
                 self.notification_html)
 
         return super(Notification, self).save(force_insert, force_update, using, update_fields)

static/css/ace/uncompressed/jquery.gritter.css

@@ -0,0 +1,101 @@
+/* the norm */
+#gritter-notice-wrapper {
+	position:fixed;
+	top:20px;
+	right:20px;
+	width:301px;
+	z-index:9999;
+}
+#gritter-notice-wrapper.top-left {
+    left: 20px;
+    right: auto;
+}
+#gritter-notice-wrapper.bottom-right {
+    top: auto;
+    left: auto;
+    bottom: 20px;
+    right: 20px;
+}
+#gritter-notice-wrapper.bottom-left {
+    top: auto;
+    right: auto;
+    bottom: 20px;
+    left: 20px;
+}
+.gritter-item-wrapper {
+	position:relative;
+	margin:0 0 10px 0;
+	background:url('../images/ie-spacer.gif'); /* ie7/8 fix */
+}
+.gritter-top {
+	background:url(../images/gritter.png) no-repeat left -30px;
+	height:10px;
+}
+.hover .gritter-top {
+	background-position:right -30px;
+}
+.gritter-bottom {
+	background:url(../images/gritter.png) no-repeat left bottom;
+	height:8px;
+	margin:0;
+}
+.hover .gritter-bottom {
+	background-position: bottom right;
+}
+.gritter-item {
+	display:block;
+	background:url(../images/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;
+	word-wrap:break-word;
+}
+.gritter-close {
+	display:none;
+	position:absolute;
+	top:5px;
+	left:3px;
+	background:url(../images/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;
+}
+.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-light .gritter-close {
+    background-image: url(../images/gritter-light.png);
+    color: #222;
+}
+.gritter-light .gritter-title {
+    text-shadow: none;
+}

static/js/dss/lib/realtimeController.coffee

@@ -10,7 +10,7 @@
 
                 @socket.on "notification", (data) =>
                     console.log("RealtimeController: notification " + data['message'])
-                    utils.showMessage("New activity", data['message'])
+                    utils.showRichMessage("New activity", data['image'], data['message'])
                     App.vent.trigger("model:notification:new", data['message'])
             else
                 console.log("Realtime server unavailable")

static/js/dss/lib/utils.coffee

@@ -85,6 +85,15 @@
         @toastOptions()
         toastr.warning message, title
 
+    showRichMessage: (title, image, message) ->
+        $.gritter.add
+            title: title
+            text: message
+            image: image
+            time: ""
+            class_name: "gritter-light"
+
+
     showMessage: (title, message) ->
         @toastOptions()
         toastr.success message, title
@@ -150,6 +159,10 @@ $(document).ready ->
                 return k  if k of t and t[k] is searchElement
                 k++
             -1
+
+    $.extend $.gritter.options,
+      position: "bottom-left"
+
     return
 
 $(document).ajaxSend (event, xhr, settings) ->