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

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

@@ -1,25 +1,24 b''
 <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../../../../bower_components/paper-toast/paper-toast.html">
 <link rel="import" href="../../../../../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
 <dom-module id="rhodecode-toast">
     <template>
         <style include="shared-styles"></style>
         <link rel="stylesheet" href="rhodecode-toast.css">
         <template is="dom-if" if="[[hasToasts]]">
             <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>
 
     <script src="rhodecode-toast.js"></script>
 </dom-module>

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

@@ -1,92 +1,98 b''
 Polymer({
     is: 'rhodecode-toast',
     properties: {
         toasts: {
             type: Array,
             value: function(){
                 return []
             }
         },
         isFixed: {
             type: Boolean,
             value: false
         },
         hasToasts: {
             type: Boolean,
             computed: '_computeHasToasts(toasts.*)'
         },
         keyEventTarget: {
             type: Object,
             value: function() {
               return document.body;
             }
         }
     },
     behaviors: [
         Polymer.IronA11yKeysBehavior
     ],
     observers: [
         '_changedToasts(toasts.splices)'
     ],
 
     keyBindings: {
       'esc:keyup': '_hideOnEsc'
     },
 
     _hideOnEsc: function (event) {
         return this.dismissNotifications();
     },
 
     _computeHasToasts: function(){
         return this.toasts.length > 0;
     },
 
     _debouncedCalc: function(){
         // calculate once in a while
         this.debounce('debouncedCalc', this.toastInWindow, 25);
     },
 
     conditionalClass: function(){
       return this.isFixed ? 'fixed': '';
     },
 
     toastInWindow: function() {
         if (!this._headerNode){
             return true
         }
         var headerHeight = this._headerNode.offsetHeight;
         var scrollPosition = window.scrollY;
 
         if (this.isFixed){
             this.isFixed = 1 <= scrollPosition;
         }
         else{
             this.isFixed = headerHeight <= scrollPosition;
         }
     },
 
     attached: function(){
         this._headerNode = document.querySelector('.header', document);
         this.listen(window,'scroll', '_debouncedCalc');
         this.listen(window,'resize', '_debouncedCalc');
         this._debouncedCalc();
     },
     _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);
     },
     handleNotification: function(data){
         if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
             // do not act if notifications are disabled
             return
         }
         this.push('toasts',{
             level: data.message.level,
             message: data.message.message
         });
     },
     _gettext: _gettext
 });

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

@@ -1,28 +1,27 b''
 @import '../../../../css/variables';
 @import '../../../../css/mixins';
 
 .alert{
     margin: 10px 0;
 }
 
 .toast-close{
-    text-align: right;
-    .btn {
         margin: 0;
-    }
+    float: right;
+    cursor: pointer;
 }
 
 .toast-message-holder{
     background: fade(#fff, 25%);
 
     &.fixed{
         position: fixed;
         padding: 10px 0;
         margin-left: 10px;
         margin-right: 10px;
         top: 0;
         left: 0;
         right:0;
         z-index: 100;
     }
 }

rhodecode/templates/admin/my_account/my_account_notifications.mako

@@ -1,106 +1,130 b''
 <template is="dom-bind" id="notificationsPage">
 <iron-ajax id="toggleNotifications"
            method="post"
            url="${url('my_account_notifications_toggle_visibility')}"
            content-type="application/json"
            loading="{{changeNotificationsLoading}}"
            on-response="handleNotifications"
            handle-as="json">
 </iron-ajax>
 
 <iron-ajax id="sendTestNotification"
            method="post"
            url="${url('my_account_notifications_test_channelstream')}"
            content-type="application/json"
            on-response="handleTestNotification"
            handle-as="json">
 </iron-ajax>
 
 <div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">${_('Your Live Notification Settings')}</h3>
   </div>
   <div class="panel-body">
 
         <p><strong>IMPORTANT:</strong> This feature requires enabled channelstream websocket server to function correctly.</p>
 
         <p class="hidden">Status of browser notifications permission: <strong id="browser-notification-status"></strong></p>
 
         <div class="form">
             <div class="fields">
                 <div class="field">
                     <div class="label">
                         <label for="new_email">${_('Notifications Status')}:</label>
                     </div>
                     <div class="checkboxes">
                         <rhodecode-toggle id="live-notifications" active="[[changeNotificationsLoading]]" on-change="toggleNotifications" ${'checked' if c.rhodecode_user.get_instance().user_data.get('notification_status') else ''}></rhodecode-toggle>
                     </div>
                 </div>
             </div>
         </div>
   </div>
 </div>
 
 <div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">${_('Test Notifications')}</h3>
   </div>
   <div class="panel-body">
 
 
         <div style="padding: 0px 0px 20px 0px">
             <button class="btn" id="test-notification" on-tap="testNotifications">Test flash message</button>
             <button class="btn" id="test-notification-live" on-tap="testNotificationsLive">Test live notification</button>
         </div>
             <h4 id="test-response"></h4>
 
   </div>
 
 
 
 </div>
 
 <script type="text/javascript">
     /** because im not creating a custom element for this page
      * we need to push the function onto the dom-template
      * ideally we turn this into notification-settings elements
      * then it will be cleaner
      */
     var ctrlr = $('#notificationsPage')[0];
     ctrlr.toggleNotifications = function(event){
         var ajax = $('#toggleNotifications')[0];
         ajax.headers = {"X-CSRF-Token": CSRF_TOKEN};
         ajax.body = {notification_status:event.target.active};
         ajax.generateRequest();
     };
     ctrlr.handleNotifications = function(event){
         $('#live-notifications')[0].checked = event.detail.response;
     };
 
     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
             }
         };
         $.Topic('/notifications').publish(payload);
     };
     ctrlr.testNotificationsLive = function(event){
         var ajax = $('#sendTestNotification')[0];
         ajax.headers = {"X-CSRF-Token": CSRF_TOKEN};
         ajax.body = {test_msg: 'Hello !'};
         ajax.generateRequest();
     };
     ctrlr.handleTestNotification = function(event){
         var reply = event.detail.response.response;
         reply = reply || 'no reply form server';
         $('#test-response').html(reply);
     };
 
 </script>
 
 </template>