##// END OF EJS Templates
notifications: use rhodecode-toast for notifications instead of toastr jquery plugin
ergo -
r699:49c50282 default
parent child
Show More
@@ -0,0 +1,33
1 //Primary CSS
2 //--- IMPORTS ------------------//
3 @import 'helpers';
4 @import 'mixins';
5 @import 'rcicons';
6 @import 'fonts';
7 @import 'variables';
8 @import 'legacy_code_styles';
9 @import 'type';
10 @import 'alerts';
11 @import 'buttons';
12 @import 'tags';
13 @import 'examples';
14 @import 'login';
15 @import 'comments';
16
17
18 .toast-level {
19 display: inline-block;
20 min-width: 100px;
21 font-weight: bold;
22 text-transform: uppercase;
23 &.info, &.success {
24 color: #0ac878;
25 }
26 &.error, &.danger {
27 color: #e85e4d;
28 }
29 &.warning {
30 color: #ffc854;
31 }
32 }
33
@@ -0,0 +1,79
1 <link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
2 <link rel="import" href="rhodecode-unsafe-html.html">
3 <dom-module id="rhodecode-toast">
4 <template>
5 <style include="shared-styles"></style>
6
7 <style>
8 paper-toast{
9 width: 100%;
10 min-width: 400px;
11 --paper-toast-background-color: #ffffff;
12 --paper-toast-color: #000000;
13 }
14 paper-toast a{
15 font-weight: bold
16 }
17
18 .toast-message-holder {
19 width: calc(100% - 150px);
20 display: inline-block;
21 }
22 .toast-close {
23 display: inline-block;
24 width: 145px;
25 text-align: right;
26 float: right;
27 }
28 .toast-notification {
29 padding: 10px 0 10px 0;
30 }
31
32 </style>
33 <paper-toast id="p-toast" duration="0" horizontal-offset="100" horizontal-align="auto" vertical-align="top" always-on-top>
34 <div class="toast-message-holder">
35 <template is="dom-repeat" items="{{toasts}}">
36 <div class="toast-notification">
37 <span class$="toast-level {{item.level}}">{{item.level}}</span>
38 <rhodecode-unsafe-html text="{{item.message}}"></rhodecode-unsafe-html>
39 </div>
40 </template>
41 </div>
42 <div class="toast-close">
43 <paper-button on-tap="dismissNotifications" class="btn btn-info">{{_gettext('Close now')}}</paper-button>
44 </div>
45 </paper-toast>
46 </template>
47
48 <script>
49 Polymer({
50 is: 'rhodecode-toast',
51 properties: {
52 toasts: {
53 type: Array,
54 value: function(){
55 return []
56 }
57 }
58 },
59 observers: [
60 '_changedToasts(toasts.splices)'
61 ],
62 ready: function(){
63
64 },
65
66 _changedToasts: function(newValue, oldValue){
67 this.$['p-toast'].notifyResize();
68 },
69 dismissNotifications: function(){
70 this.$['p-toast'].close();
71 this.splice('toasts', 0);
72 },
73 open: function(){
74 this.$['p-toast'].open();
75 },
76 _gettext: _gettext
77 });
78 </script>
79 </dom-module>
@@ -0,0 +1,22
1 <link rel="import" href="../../../../../bower_components/polymer/polymer.html">
2
3 <dom-module id="rhodecode-unsafe-html">
4 <template>
5 <style include="shared-styles"></style>
6 <content></content>
7 </template>
8 <script>
9 Polymer({
10 is: 'rhodecode-unsafe-html',
11 properties: {
12 text: {
13 type: String,
14 observer: '_handleText'
15 }
16 },
17 _handleText: function(newVal, oldVal){
18 this.innerHTML = this.text;
19 }
20 })
21 </script>
22 </dom-module>
@@ -0,0 +1,3
1 <dom-module id="shared-styles">
2 <template>
3 <style>
@@ -0,0 +1,3
1 </style>
2 </template>
3 </dom-module>
@@ -39,7 +39,10 syntax: regexp
39 ^rcextensions/
39 ^rcextensions/
40 ^result$
40 ^result$
41 ^rhodecode/public/css/style.css$
41 ^rhodecode/public/css/style.css$
42 ^rhodecode/public/css/style-polymer.css$
42 ^rhodecode/public/js/scripts.js$
43 ^rhodecode/public/js/scripts.js$
44 ^rhodecode/public/js/rhodecode-components.html$
45 ^rhodecode/public/js/src/components/shared-styles.html$
43 ^rhodecode\.db$
46 ^rhodecode\.db$
44 ^rhodecode\.log$
47 ^rhodecode\.log$
45 ^rhodecode_dev\.log$
48 ^rhodecode_dev\.log$
@@ -17,6 +17,16 module.exports = function(grunt) {
17 },
17 },
18 },
18 },
19 concat: {
19 concat: {
20 polymercss:{
21 src: [
22 // Base libraries
23 '<%= dirs.js.src %>/components/shared-styles-prefix.html',
24 '<%= dirs.css %>/style-polymer.css',
25 '<%= dirs.js.src %>/components/shared-styles-suffix.html'
26 ],
27 dest: '<%= dirs.js.dest %>/src/components/shared-styles.html',
28 nonull: true
29 },
20 dist: {
30 dist: {
21 src: [
31 src: [
22 // Base libraries
32 // Base libraries
@@ -39,7 +49,6 module.exports = function(grunt) {
39 '<%= dirs.js.src %>/plugins/jquery.mark.js',
49 '<%= dirs.js.src %>/plugins/jquery.mark.js',
40 '<%= dirs.js.src %>/plugins/jquery.timeago.js',
50 '<%= dirs.js.src %>/plugins/jquery.timeago.js',
41 '<%= dirs.js.src %>/plugins/jquery.timeago-extension.js',
51 '<%= dirs.js.src %>/plugins/jquery.timeago-extension.js',
42 '<%= dirs.js.src %>/plugins/toastr.js',
43
52
44 // Select2
53 // Select2
45 '<%= dirs.js.src %>/select2/select2.js',
54 '<%= dirs.js.src %>/select2/select2.js',
@@ -106,7 +115,8 module.exports = function(grunt) {
106 optimization: 0
115 optimization: 0
107 },
116 },
108 files: {
117 files: {
109 "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less"
118 "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
119 "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
110 }
120 }
111 },
121 },
112 production: {
122 production: {
@@ -116,7 +126,8 module.exports = function(grunt) {
116 optimization: 2
126 optimization: 2
117 },
127 },
118 files: {
128 files: {
119 "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less"
129 "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
130 "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
120 }
131 }
121 }
132 }
122 },
133 },
@@ -124,11 +135,11 module.exports = function(grunt) {
124 watch: {
135 watch: {
125 less: {
136 less: {
126 files: ["<%= dirs.css %>/*.less"],
137 files: ["<%= dirs.css %>/*.less"],
127 tasks: ["less:production"]
138 tasks: ["less:development", 'concat:polymercss', "vulcanize"]
128 },
139 },
129 js: {
140 js: {
130 files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
141 files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
131 tasks: ["concat:dist"]
142 tasks: ["vulcanize", "concat:dist"]
132 }
143 }
133 },
144 },
134
145
@@ -163,5 +174,5 module.exports = function(grunt) {
163 grunt.loadNpmTasks('grunt-crisper');
174 grunt.loadNpmTasks('grunt-crisper');
164 grunt.loadNpmTasks('grunt-contrib-copy');
175 grunt.loadNpmTasks('grunt-contrib-copy');
165
176
166 grunt.registerTask('default', ['copy','vulcanize', 'less:production', 'concat:dist']);
177 grunt.registerTask('default', ['less:production', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
167 };
178 };
@@ -25,7 +25,6
25 @import 'comments';
25 @import 'comments';
26 @import 'panels-bootstrap';
26 @import 'panels-bootstrap';
27 @import 'panels';
27 @import 'panels';
28 @import 'toastr';
29 @import 'deform';
28 @import 'deform';
30
29
31
30
@@ -2103,3 +2102,8 input[type=radio] {
2103 padding: 0;
2102 padding: 0;
2104 border: none;
2103 border: none;
2105 }
2104 }
2105
2106 .toggle-ajax-spinner{
2107 height: 16px;
2108 width: 16px;
2109 }
@@ -4,3 +4,6
4 <link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
4 <link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
5 <link rel="import" href="../../../../../bower_components/paper-spinner/paper-spinner.html">
5 <link rel="import" href="../../../../../bower_components/paper-spinner/paper-spinner.html">
6 <link rel="import" href="../../../../../bower_components/iron-ajax/iron-ajax.html">
6 <link rel="import" href="../../../../../bower_components/iron-ajax/iron-ajax.html">
7 <link rel="import" href="shared-styles.html">
8 <link rel="import" href="rhodecode-toast.html">
9 <link rel="import" href="rhodecode-unsafe-html.html">
@@ -1,29 +1,17
1 "use strict";
1 "use strict";
2
2
3 toastr.options = {
4 "closeButton": true,
5 "debug": false,
6 "newestOnTop": false,
7 "progressBar": false,
8 "positionClass": "toast-top-center",
9 "preventDuplicates": false,
10 "onclick": null,
11 "showDuration": "300",
12 "hideDuration": "300",
13 "timeOut": "0",
14 "extendedTimeOut": "0",
15 "showEasing": "swing",
16 "hideEasing": "linear",
17 "showMethod": "fadeIn",
18 "hideMethod": "fadeOut"
19 };
20
3
21 function notifySystem(data) {
4 function notifySystem(data) {
22 var notification = new Notification(data.message.level + ': ' + data.message.message);
5 var notification = new Notification(data.message.level + ': ' + data.message.message);
23 };
6 };
24
7
25 function notifyToaster(data){
8 function notifyToaster(data){
26 toastr[data.message.level](data.message.message);
9 var notifications = document.getElementById('notifications');
10 notifications.push('toasts',
11 { level: data.message.level,
12 message: data.message.message
13 });
14 notifications.open();
27 }
15 }
28
16
29 function handleNotifications(data) {
17 function handleNotifications(data) {
@@ -1,5 +1,5
1 <template is="dom-bind" id="notificationsPage">
1 <template is="dom-bind" id="notificationsPage">
2
2 <style include="shared-styles"></style>
3 <iron-ajax id="toggleNotifications"
3 <iron-ajax id="toggleNotifications"
4 method="post"
4 method="post"
5 url="${url('my_account_notifications_toggle_visibility')}"
5 url="${url('my_account_notifications_toggle_visibility')}"
@@ -31,7 +31,7
31 <paper-tooltip>Toggle your notifications on/off globally.</paper-tooltip>
31 <paper-tooltip>Toggle your notifications on/off globally.</paper-tooltip>
32 </div>
32 </div>
33 <template is="dom-if" if="{{changeNotificationsLoading}}">
33 <template is="dom-if" if="{{changeNotificationsLoading}}">
34 <paper-spinner active style="height: 22px; width: 22px"></paper-spinner>
34 <paper-spinner active class="toggle-ajax-spinner"></paper-spinner>
35 </template>
35 </template>
36 </div>
36 </div>
37 </div>
37 </div>
@@ -154,5 +154,6 c.template_context['visual']['default_re
154 %if c.post_code:
154 %if c.post_code:
155 ${c.post_code|n}
155 ${c.post_code|n}
156 %endif
156 %endif
157 <rhodecode-toast id="notifications"></rhodecode-toast>
157 </body>
158 </body>
158 </html>
159 </html>
1 NO CONTENT: file was removed
NO CONTENT: file was removed
1 NO CONTENT: file was removed
NO CONTENT: file was removed
General Comments 0
You need to be logged in to leave comments. Login now