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

rhodecode/public/css/polymer.less

@@ -0,0 +1,33
+//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
+<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
+<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
+<dom-module id="shared-styles">
+    <template>
+        <style>

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

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

.hgignore

@@ -1,60 +1,63
 syntax: glob
 *.egg
 *.egg-info
 *.idea
 *.orig
 *.pyc
 *.sqlite-journal
 *.swp
 *.tox
 *.DS_Store*
 
 syntax: regexp
 
 #.filename
 ^\.settings$
 ^\.project$
 ^\.pydevproject$
 ^\.coverage$
 ^\.cache.*$
 ^\.rhodecode$
 
 ^rcextensions
 ^_dev
 ^._dev
 ^build/
 ^bower_components/
 ^coverage\.xml$
 ^data$
 ^\.eggs/
 ^configs/data$
 ^dev.ini$
 ^acceptance_tests/dev.*\.ini$
 ^dist/
 ^fabfile.py
 ^htmlcov
 ^junit\.xml$
 ^node_modules/
 ^pylint.log$
 ^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$
 ^test\.db$
 
 # ac-tests
 ^acceptance_tests/\.cache.*$
 ^acceptance_tests/externals
 ^acceptance_tests/ghostdriver.log$
 ^acceptance_tests/local(_.+)?\.ini$
 
 # docs
 ^docs/_build$
 ^docs/result$
 ^docs-internal/_build$
 
 # Cythonized things
 ^rhodecode/.*\.(c|so)$

Gruntfile.js

@@ -1,167 +1,178
 module.exports = function(grunt) {
   grunt.initConfig({
 
     dirs: {
       css: "rhodecode/public/css",
       js: {
         "src": "rhodecode/public/js/src",
         "dest": "rhodecode/public/js"
       }
     },
     copy: {
       main: {
         expand: true,
         cwd: 'bower_components',
         src: 'webcomponentsjs/**',
         dest: '<%= dirs.js.dest %>/vendors',
       },
     },
     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
           '<%= dirs.js.src %>/jquery-1.11.1.min.js',
           '<%= dirs.js.src %>/logging.js',
           '<%= dirs.js.src %>/bootstrap.js',
           '<%= dirs.js.src %>/mousetrap.js',
           '<%= dirs.js.src %>/moment.js',
           '<%= dirs.js.src %>/appenlight-client-0.4.1.min.js',
           '<%= dirs.js.src %>/i18n_utils.js',
           '<%= dirs.js.src %>/deform.js',
 
           // Plugins
           '<%= dirs.js.src %>/plugins/jquery.pjax.js',
           '<%= dirs.js.src %>/plugins/jquery.dataTables.js',
           '<%= dirs.js.src %>/plugins/flavoured_checkbox.js',
           '<%= dirs.js.src %>/plugins/jquery.auto-grow-input.js',
           '<%= dirs.js.src %>/plugins/jquery.autocomplete.js',
           '<%= dirs.js.src %>/plugins/jquery.debounce.js',
           '<%= 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',
 
           // Code-mirror
           '<%= dirs.js.src %>/codemirror/codemirror.js',
           '<%= dirs.js.src %>/codemirror/codemirror_loadmode.js',
           '<%= dirs.js.src %>/codemirror/codemirror_hint.js',
           '<%= dirs.js.src %>/codemirror/codemirror_overlay.js',
           '<%= dirs.js.src %>/codemirror/codemirror_placeholder.js',
           // TODO: mikhail: this is an exception. Since the code mirror modes
           // are loaded "on the fly", we need to keep them in a public folder
           '<%= dirs.js.dest %>/mode/meta.js',
           '<%= dirs.js.dest %>/mode/meta_ext.js',
           '<%= dirs.js.dest %>/rhodecode/i18n/select2/translations.js',
 
           // Rhodecode utilities
           '<%= dirs.js.src %>/rhodecode/utils/array.js',
           '<%= dirs.js.src %>/rhodecode/utils/string.js',
           '<%= dirs.js.src %>/rhodecode/utils/pyroutes.js',
           '<%= dirs.js.src %>/rhodecode/utils/ajax.js',
           '<%= dirs.js.src %>/rhodecode/utils/autocomplete.js',
           '<%= dirs.js.src %>/rhodecode/utils/colorgenerator.js',
           '<%= dirs.js.src %>/rhodecode/utils/ie.js',
           '<%= dirs.js.src %>/rhodecode/utils/os.js',
           '<%= dirs.js.src %>/rhodecode/utils/topics.js',
 
           // Rhodecode widgets
           '<%= dirs.js.src %>/rhodecode/widgets/multiselect.js',
 
           // Rhodecode components
           '<%= dirs.js.src %>/rhodecode/init.js',
           '<%= dirs.js.src %>/rhodecode/connection_controller.js',
           '<%= dirs.js.src %>/rhodecode/codemirror.js',
           '<%= dirs.js.src %>/rhodecode/comments.js',
           '<%= dirs.js.src %>/rhodecode/constants.js',
           '<%= dirs.js.src %>/rhodecode/files.js',
           '<%= dirs.js.src %>/rhodecode/followers.js',
           '<%= dirs.js.src %>/rhodecode/menus.js',
           '<%= dirs.js.src %>/rhodecode/notifications.js',
           '<%= dirs.js.src %>/rhodecode/permissions.js',
           '<%= dirs.js.src %>/rhodecode/pjax.js',
           '<%= dirs.js.src %>/rhodecode/pullrequests.js',
           '<%= dirs.js.src %>/rhodecode/settings.js',
           '<%= dirs.js.src %>/rhodecode/select2_widgets.js',
           '<%= dirs.js.src %>/rhodecode/tooltips.js',
           '<%= dirs.js.src %>/rhodecode/users.js',
           '<%= dirs.js.src %>/rhodecode/utils/notifications.js',
           '<%= dirs.js.src %>/rhodecode/appenlight.js',
 
           // Rhodecode main module
           '<%= dirs.js.src %>/rhodecode.js'
         ],
         dest: '<%= dirs.js.dest %>/scripts.js',
         nonull: true
       }
     },
 
     less: {
       development: {
         options: {
           compress: false,
           yuicompress: false,
           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: {
         options: {
           compress: true,
           yuicompress: true,
           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"
         }
       }
     },
 
     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"]
       }
     },
 
     jshint: {
       rhodecode: {
         src: '<%= dirs.js.src %>/rhodecode/**/*.js',
         options: {
           jshintrc: '.jshintrc'
         }
       }
     },
     vulcanize: {
       default: {
         options: {
           abspath: '',
           inlineScripts: true,
           inlineCss: true,
           stripComments: true
         },
         files: {
           '<%= dirs.js.dest %>/rhodecode-components.html': '<%= dirs.js.src %>/components/shared-components.html'
         }
       }
     }
   });
 
   grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-vulcanize');
   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

@@ -1,2105 +1,2109
 //Primary CSS
 
 //--- IMPORTS ------------------//
 
 @import 'helpers';
 @import 'mixins';
 @import 'rcicons';
 @import 'fonts';
 @import 'variables';
 @import 'bootstrap-variables';
 @import 'form-bootstrap';
 @import 'codemirror';
 @import 'legacy_code_styles';
 @import 'progress-bar';
 
 @import 'type';
 @import 'alerts';
 @import 'buttons';
 @import 'tags';
 @import 'code-block';
 @import 'examples';
 @import 'login';
 @import 'main-content';
 @import 'select2';
 @import 'comments';
 @import 'panels-bootstrap';
 @import 'panels';
-@import 'toastr';
 @import 'deform';
 
 
 //--- BASE ------------------//
 .noscript-error {
     top: 0;
     left: 0;
     width: 100%;
     z-index: 101;
     text-align: center;
     font-family: @text-semibold;
     font-size: 120%;
     color: white;
     background-color: @alert2;
     padding: 5px 0 5px 0;
 }
 
 html {
     display: table;
     height: 100%;
     width: 100%;
 }
 
 body {
     display: table-cell;
     width: 100%;
 }
 
 //--- LAYOUT ------------------//
 
 .hidden{
 	display: none !important;
 }
 
 .box{
 	float: left;
 	width: 100%;
 }
 
 .browser-header {
     clear: both;
 }
 .main {
   clear: both;
   padding:0 0 @pagepadding;
   height: auto;
 
 	&:after { //clearfix
 		content:"";
 		clear:both;
 		width:100%;
 		display:block;
 	}
 }
 
 .action-link{
 	margin-left: @padding;
 	padding-left: @padding;
 	border-left: @border-thickness solid @border-default-color;
 }
 
 input + .action-link, .action-link.first{
 	border-left: none;
 }
 
 .action-link.last{
 	margin-right: @padding;
 	padding-right: @padding;
 }
 
 .action-link.active,
 .action-link.active a{
 	color: @grey4;
 }
 
 ul.simple-list{
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
 
 .main-content {
 	padding-bottom: @pagepadding;
 }
 
 .wrapper {
 	position: relative;
 	max-width: @wrapper-maxwidth;
 	margin: 0 auto;
 }
 
 #content {
     clear: both;
     padding: 0 @contentpadding;
 }
 
 .advanced-settings-fields{
 	input{
 		margin-left: @textmargin;
 		margin-right: @padding/2;
 	}
 }
 
 .cs_files_title {
     margin: @pagepadding 0 0;
 }
 
 input.inline[type="file"] {
 	display: inline;
 }
 
 .error_page {
     margin: 10% auto;
 
     h1 {
         color: @grey2;
     }
 
     .error-branding {
         font-family: @text-semibold;
         color: @grey4;
     }
 
     .error_message {
         font-family: @text-regular;
     }
 
     .sidebar {
         min-height: 275px;
         margin: 0;
         padding: 0 0 @sidebarpadding @sidebarpadding;
         border: none;
     }
 
     .main-content {
         position: relative;
         margin: 0 @sidebarpadding @sidebarpadding;
         padding: 0 0 0 @sidebarpadding;
         border-left: @border-thickness solid @grey5;
 
         @media (max-width:767px) {
             clear: both;
             width: 100%;
             margin: 0;
             border: none;
         }
     }
 
     .inner-column {
         float: left;
         width: 29.75%;
         min-height: 150px;
         margin: @sidebarpadding 2% 0 0;
         padding: 0 2% 0 0;
         border-right: @border-thickness solid @grey5;
 
         @media (max-width:767px) {
             clear: both;
             width: 100%;
             border: none;
         }
 
         ul {
             padding-left: 1.25em;
         }
 
         &:last-child {
             margin: @sidebarpadding 0 0;
             border: none;
         }
 
         h4 {
             margin: 0 0 @padding;
             font-family: @text-semibold;
         }
     }
 }
 .error-page-logo {
     width: 130px;
     height: 160px;
 }
 
 // HEADER
 .header {
 
     // TODO: johbo: Fix login pages, so that they work without a min-height
     // for the header and then remove the min-height. I chose a smaller value
     // intentionally here to avoid rendering issues in the main navigation.
     min-height: 49px;
 
 	position: relative;
 	vertical-align: bottom;
 	padding: 0 @header-padding;
 	background-color: @grey2;
 	color: @grey5;
 
 	.title {
 		overflow: visible;
 	}
 
 	&:before,
 	&:after {
 		content: "";
 		clear: both;
 		width: 100%;
 	}
 
 	// TODO: johbo: Avoids breaking "Repositories" chooser
 	.select2-container .select2-choice .select2-arrow {
 	    display: none;
 	}
 }
 
 #header-inner {
 	&.title {
 		margin: 0;
 	}
 	&:before,
 	&:after {
 		content: "";
 		clear: both;
 	}
 }
 
 // Gists
 #files_data {
     clear: both; //for firefox
 }
 #gistid {
     margin-right: @padding;
 }
 
 // Global Settings Editor
 .textarea.editor {
 	float: left;
 	position: relative;
 	max-width: @texteditor-width;
 
 	select {
 		position: absolute;
 		top:10px;
 		right:0;
 	}