rhodecode-toasts: allow removing single elements from toast queue.

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html

@@ -10,13 +10,12 b''
             <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
                 <template is="dom-repeat" items="[[toasts]]">
                     <div class$="alert alert-[[item.level]]">
+                        <div on-tap="dismissNotification" class="toast-close"  index-pos="[[index]]">
+                            <span>[[_gettext('Close')]]</span>
+                        </div>
                         <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
                     </div>
                 </template>
-
-                <div class="toast-close">
-                    <button on-tap="dismissNotifications" class="btn btn-default">[[_gettext('Close')]]</button>
-                </div>
             </div>
         </template>
     </template>

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js

@@ -74,6 +74,12 b' Polymer({'
     _changedToasts: function(newValue, oldValue){
         $.Topic('/favicon/update').publish({count: this.toasts.length});
     },
+    dismissNotification: function(e) {
+        $.Topic('/favicon/update').publish({count: this.toasts.length-1});
+        var idx = e.target.parentNode.indexPos
+        this.splice('toasts', idx, 1);
+
+    },
     dismissNotifications: function(){
         $.Topic('/favicon/update').publish({count: 0});
         this.splice('toasts', 0);

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less

@@ -5,11 +5,10 b''
     margin: 10px 0;
 }
 
-.toast-close{
-    text-align: right;
-    .btn {
-        margin: 0;
-    }
+.toast-close {
+    margin: 0;
+    float: right;
+    cursor: pointer;
 }
 
 .toast-message-holder{

rhodecode/templates/admin/my_account/my_account_notifications.mako

@@ -80,9 +80,33 b''
     ctrlr.testNotifications = function(event){
         var levels = ['info', 'error', 'warning', 'success'];
         var level = levels[Math.floor(Math.random()*levels.length)];
+        function getRandomArbitrary(min, max) {
+          return parseInt(Math.random() * (max - min) + min);
+        }
+        function shuffle(a) {
+            var j, x, i;
+            for (i = a.length; i; i--) {
+                j = Math.floor(Math.random() * i);
+                x = a[i - 1];
+                a[i - 1] = a[j];
+                a[j] = x;
+            }
+        }
+        var wordDb = [
+            "Leela,", "Bender,", "we are", "going", "grave", "robbing.",
+            "Oh,", "I", "think", "we", "should", "just", "stay", "friends.",
+            "got", "to", "find", "a", "way", "to", "escape", "the", "horrible",
+            "ravages", "of", "youth.", "Suddenly,", "going", "to",
+            "the", "bathroom", "like", "clockwork,", "every", "three",
+            "hours.", "And", "those", "jerks", "at", "Social", "Security",
+            "stopped", "sending", "me", "checks.", "Now", "have", "to", "pay"
+        ];
+        shuffle(wordDb);
+        wordDb = wordDb.slice(0, getRandomArbitrary(3, wordDb.length));
+        var randomMessage = wordDb.join(" ");
         var payload = {
             message: {
-                message: 'This is a test notification. ' + new Date(),
+                message: randomMessage + " " + new Date(),
                 level: level,
                 force: true
             }