From bc55897f488cae4d31aa89ecc66b589c6e565b21 Mon Sep 17 00:00:00 2001 From: Fergal Moran Date: Sun, 24 Aug 2014 21:39:16 +0100 Subject: [PATCH] Changed notifications to use gritter --- core/realtime/notification.py | 3 +- dss/pipelinesettings.py | 2 + spa/models/notification.py | 15 +-- .../css/ace/uncompressed/jquery.gritter.css | 101 ++++++++++++++++++ static/js/dss/lib/realtimeController.coffee | 2 +- static/js/dss/lib/utils.coffee | 13 +++ 6 files changed, 120 insertions(+), 16 deletions(-) create mode 100644 static/css/ace/uncompressed/jquery.gritter.css diff --git a/core/realtime/notification.py b/core/realtime/notification.py index 709bb18..0fb6e50 100644 --- a/core/realtime/notification.py +++ b/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) diff --git a/dss/pipelinesettings.py b/dss/pipelinesettings.py index 08e4bbd..5346463 100644 --- a/dss/pipelinesettings.py +++ b/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', diff --git a/spa/models/notification.py b/spa/models/notification.py index 70eb289..1b5b7df 100644 --- a/spa/models/notification.py +++ b/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) diff --git a/static/css/ace/uncompressed/jquery.gritter.css b/static/css/ace/uncompressed/jquery.gritter.css new file mode 100644 index 0000000..4102a99 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/js/dss/lib/realtimeController.coffee b/static/js/dss/lib/realtimeController.coffee index 336ac79..eae071a 100644 --- a/static/js/dss/lib/realtimeController.coffee +++ b/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") diff --git a/static/js/dss/lib/utils.coffee b/static/js/dss/lib/utils.coffee index 98d0c46..a848e87 100644 --- a/static/js/dss/lib/utils.coffee +++ b/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) ->