Notifications for the speech bubble

- Flashes for new notifications.
- Notification number is counted in the bubble.

h/css/sidebar.scss

@@ -108,6 +108,15 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
       cursor: ew-resize;
     }
   }
+
+  .notification-counter {
+    position: absolute;
+    margin-left: 1em;
+    float: left;
+    margin-top: 0.37em;
+    z-index: 2;
+    font-size: 12px;
+  }
 }
 
 .bottombar {

h/js/controllers.coffee

@@ -465,6 +465,11 @@ class App
         $scope.notifications.unshift notification
         $scope.has_update = true
 
+        $element.find('.tri').toggle('fg_highlight',{color:'lightblue'})
+        $timeout ->
+          $element.find('.tri').toggle('fg_highlight',{color:'lightblue'})
+        ,500
+
     $scope.initUpdater = ->
       $scope.has_update = false
       path = window.location.protocol + '//' + window.location.hostname + ':' +

h/lib/jquery.ui.effect-forecolor-highlight.js

+/*!
+ * jQuery UI Effects Forecolor Highlight 1.10.3
+ * http://jqueryui.com
+ *
+ * Copyright 2013 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/highlight-effect/
+ *
+ * Depends:
+ *	jquery.ui.effect.js
+ */
+(function( $, undefined ) {
+
+$.effects.effect.fg_highlight = function( o, done ) {
+	var elem = $( this ),
+		props = ["color", "opacity" ],
+		mode = $.effects.setMode( elem, o.mode || "show" ),
+		animation = {
+			color: elem.css("color" )
+		};
+
+	if (mode === "hide") {
+		animation.opacity = 0;
+	}
+
+	$.effects.save( elem, props );
+
+	elem
+		.show()
+		.css({
+			color: o.color || "#ffff99"
+		})
+		.animate( animation, {
+			queue: false,
+			duration: o.duration,
+			easing: o.easing,
+			complete: function() {
+				if ( mode === "hide" ) {
+					elem.hide();
+				}
+				$.effects.restore( elem, props );
+				done();
+			}
+		});
+};
+
+})(jQuery);
\ No newline at end of file