notifications: use rhodecode-toast for notifications instead of toastr jquery plugin

rhodecode/public/css/polymer.less

@@ -0,0 +1,33 b''
+//Primary CSS
+//--- IMPORTS ------------------//
+@import 'helpers';
+@import 'mixins';
+@import 'rcicons';
+@import 'fonts';
+@import 'variables';
+@import 'legacy_code_styles';
+@import 'type';
+@import 'alerts';
+@import 'buttons';
+@import 'tags';
+@import 'examples';
+@import 'login';
+@import 'comments';
+
+
+.toast-level {
+  display: inline-block;
+  min-width: 100px;
+  font-weight: bold;
+  text-transform: uppercase;
+  &.info, &.success {
+    color: #0ac878;
+  }
+  &.error, &.danger {
+    color: #e85e4d;
+  }
+  &.warning {
+    color: #ffc854;
+  }
+}
+

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

@@ -0,0 +1,79 b''
+<link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="rhodecode-unsafe-html.html">
+<dom-module id="rhodecode-toast">
+    <template>
+        <style include="shared-styles"></style>
+
+        <style>
+            paper-toast{
+                width: 100%;
+                min-width: 400px;
+                --paper-toast-background-color: #ffffff;
+                --paper-toast-color: #000000;
+            }
+            paper-toast a{
+                font-weight: bold
+            }
+
+            .toast-message-holder {
+                width: calc(100% - 150px);
+                display: inline-block;
+            }
+            .toast-close {
+                display: inline-block;
+                width: 145px;
+                text-align: right;
+                float: right;
+            }
+            .toast-notification {
+                padding: 10px 0 10px 0;
+            }
+
+        </style>
+        <paper-toast id="p-toast" duration="0"  horizontal-offset="100" horizontal-align="auto" vertical-align="top" always-on-top>
+            <div class="toast-message-holder">
+                <template is="dom-repeat" items="{{toasts}}">
+                    <div class="toast-notification">
+                    <span class$="toast-level {{item.level}}">{{item.level}}</span>
+                    <rhodecode-unsafe-html text="{{item.message}}"></rhodecode-unsafe-html>
+                    </div>
+                </template>
+            </div>
+            <div class="toast-close">
+                <paper-button on-tap="dismissNotifications" class="btn btn-info">{{_gettext('Close now')}}</paper-button>
+            </div>
+        </paper-toast>
+    </template>
+
+    <script>
+        Polymer({
+            is: 'rhodecode-toast',
+            properties: {
+                toasts: {
+                    type: Array,
+                    value: function(){
+                        return []
+                    }
+                }
+            },
+            observers: [
+                '_changedToasts(toasts.splices)'
+            ],
+            ready: function(){
+
+            },
+
+            _changedToasts: function(newValue, oldValue){
+                this.$['p-toast'].notifyResize();
+            },
+            dismissNotifications: function(){
+                this.$['p-toast'].close();
+                this.splice('toasts', 0);
+            },
+            open: function(){
+                this.$['p-toast'].open();
+            },
+            _gettext: _gettext
+        });
+    </script>
+</dom-module>

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

@@ -0,0 +1,22 b''
+<link rel="import" href="../../../../../bower_components/polymer/polymer.html">
+
+<dom-module id="rhodecode-unsafe-html">
+    <template>
+        <style include="shared-styles"></style>
+        <content></content>
+    </template>
+    <script>
+        Polymer({
+            is: 'rhodecode-unsafe-html',
+            properties: {
+              text: {
+                  type: String,
+                  observer: '_handleText'
+              }
+            },
+            _handleText: function(newVal, oldVal){
+                this.innerHTML = this.text;
+            }
+        })
+    </script>
+</dom-module>

rhodecode/public/js/src/components/shared-styles-prefix.html

@@ -0,0 +1,3 b''
+<dom-module id="shared-styles">
+    <template>
+        <style>

rhodecode/public/js/src/components/shared-styles-suffix.html

@@ -0,0 +1,3 b''
+        </style>
+    </template>
+</dom-module>

.hgignore

@@ -39,7 +39,10 b' syntax: regexp'
 ^rcextensions/
 ^result$
 ^rhodecode/public/css/style.css$
+^rhodecode/public/css/style-polymer.css$
 ^rhodecode/public/js/scripts.js$
+^rhodecode/public/js/rhodecode-components.html$
+^rhodecode/public/js/src/components/shared-styles.html$
 ^rhodecode\.db$
 ^rhodecode\.log$
 ^rhodecode_dev\.log$

Gruntfile.js

@@ -17,6 +17,16 b' module.exports = function(grunt) {'
       },
     },
     concat: {
+      polymercss:{
+        src: [
+          // Base libraries
+          '<%= dirs.js.src %>/components/shared-styles-prefix.html',
+          '<%= dirs.css %>/style-polymer.css',
+          '<%= dirs.js.src %>/components/shared-styles-suffix.html'
+        ],
+        dest: '<%= dirs.js.dest %>/src/components/shared-styles.html',
+        nonull: true
+      },
       dist: {
         src: [
           // Base libraries
@@ -39,7 +49,6 b' module.exports = function(grunt) {'
           '<%= dirs.js.src %>/plugins/jquery.mark.js',
           '<%= dirs.js.src %>/plugins/jquery.timeago.js',
           '<%= dirs.js.src %>/plugins/jquery.timeago-extension.js',
-          '<%= dirs.js.src %>/plugins/toastr.js',
 
           // Select2
           '<%= dirs.js.src %>/select2/select2.js',
@@ -106,7 +115,8 b' module.exports = function(grunt) {'
           optimization: 0
         },
         files: {
-          "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less"
+          "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
+          "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
         }
       },
       production: {
@@ -116,7 +126,8 b' module.exports = function(grunt) {'
           optimization: 2
         },
         files: {
-          "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less"
+          "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
+          "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
         }
       }
     },
@@ -124,11 +135,11 b' module.exports = function(grunt) {'
     watch: {
       less: {
         files: ["<%= dirs.css %>/*.less"],
-        tasks: ["less:production"]
+        tasks: ["less:development", 'concat:polymercss', "vulcanize"]
       },
       js: {
         files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
-        tasks: ["concat:dist"]
+        tasks: ["vulcanize", "concat:dist"]
       }
     },
 
@@ -163,5 +174,5 b' module.exports = function(grunt) {'
   grunt.loadNpmTasks('grunt-crisper');
   grunt.loadNpmTasks('grunt-contrib-copy');
 
-  grunt.registerTask('default', ['copy','vulcanize', 'less:production', 'concat:dist']);
+  grunt.registerTask('default', ['less:production', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
 };

rhodecode/public/css/main.less

@@ -25,7 +25,6 b''
 @import 'comments';
 @import 'panels-bootstrap';
 @import 'panels';
-@import 'toastr';
 @import 'deform';
 
 
@@ -2103,3 +2102,8 b' input[type=radio] {'
     padding: 0;
     border: none;
 }
+
+.toggle-ajax-spinner{
+  height: 16px;
+  width: 16px;
+}

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

@@ -4,3 +4,6 b''
 <link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../../../bower_components/paper-spinner/paper-spinner.html">
 <link rel="import" href="../../../../../bower_components/iron-ajax/iron-ajax.html">
+<link rel="import" href="shared-styles.html">
+<link rel="import" href="rhodecode-toast.html">
+<link rel="import" href="rhodecode-unsafe-html.html">

rhodecode/public/js/src/rhodecode/utils/notifications.js

@@ -1,29 +1,17 b''
 "use strict";
 
-toastr.options = {
-    "closeButton": true,
-    "debug": false,
-    "newestOnTop": false,
-    "progressBar": false,
-    "positionClass": "toast-top-center",
-    "preventDuplicates": false,
-    "onclick": null,
-    "showDuration": "300",
-    "hideDuration": "300",
-    "timeOut": "0",
-    "extendedTimeOut": "0",
-    "showEasing": "swing",
-    "hideEasing": "linear",
-    "showMethod": "fadeIn",
-    "hideMethod": "fadeOut"
-};
 
 function notifySystem(data) {
     var notification = new Notification(data.message.level + ': ' + data.message.message);
 };
 
 function notifyToaster(data){
-    toastr[data.message.level](data.message.message);
+    var notifications = document.getElementById('notifications');
+    notifications.push('toasts',
+        {   level: data.message.level,
+            message: data.message.message
+        });
+    notifications.open();
 }
 
 function handleNotifications(data) {

rhodecode/templates/admin/my_account/my_account_notifications.html

@@ -1,5 +1,5 b''
 <template is="dom-bind" id="notificationsPage">
-
+<style include="shared-styles"></style>
 <iron-ajax id="toggleNotifications"
            method="post"
            url="${url('my_account_notifications_toggle_visibility')}"
@@ -31,7 +31,7 b''
                         <paper-tooltip>Toggle your notifications on/off globally.</paper-tooltip>
                         </div>
                         <template is="dom-if" if="{{changeNotificationsLoading}}">
-                        <paper-spinner active style="height: 22px; width: 22px"></paper-spinner>
+                        <paper-spinner active class="toggle-ajax-spinner"></paper-spinner>
                         </template>
                     </div>
                 </div>

rhodecode/templates/base/root.html

@@ -154,5 +154,6 b" c.template_context['visual']['default_re"
       %if c.post_code:
         ${c.post_code|n}
       %endif
+    <rhodecode-toast id="notifications"></rhodecode-toast>
     </body>
 </html>