Show More
@@ -1,24 +1,30 b'' | |||||
1 | <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html"> |
|
1 | <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html"> | |
2 | <link rel="import" href="../../../../../../bower_components/paper-toast/paper-toast.html"> |
|
2 | <link rel="import" href="../../../../../../bower_components/paper-toast/paper-toast.html"> | |
3 | <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html"> |
|
3 | <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html"> | |
4 | <dom-module id="rhodecode-toast"> |
|
4 | <dom-module id="rhodecode-toast"> | |
5 | <template> |
|
5 | <template> | |
6 | <style include="shared-styles"></style> |
|
6 | <style include="shared-styles"></style> | |
7 | <link rel="stylesheet" href="rhodecode-toast.css"> |
|
7 | <link rel="stylesheet" href="rhodecode-toast.css"> | |
8 |
|
8 | |||
9 | <paper-toast id="p-toast" duration="0" horizontal-offset="100" horizontal-align="auto" vertical-align="top" always-on-top> |
|
9 | <paper-toast id="p-toast" | |
|
10 | duration="0" | |||
|
11 | horizontal-offset="100" | |||
|
12 | horizontal-align="auto" | |||
|
13 | vertical-align="top" | |||
|
14 | on-iron-overlay-closed="handleClosed" | |||
|
15 | always-on-top> | |||
10 | <div class="toast-message-holder"> |
|
16 | <div class="toast-message-holder"> | |
11 | <template is="dom-repeat" items="{{toasts}}"> |
|
17 | <template is="dom-repeat" items="{{toasts}}"> | |
12 | <div class$="alert alert-{{item.level}}"> |
|
18 | <div class$="alert alert-{{item.level}}"> | |
13 | <rhodecode-unsafe-html text="{{item.message}}"></rhodecode-unsafe-html> |
|
19 | <rhodecode-unsafe-html text="{{item.message}}"></rhodecode-unsafe-html> | |
14 | </div> |
|
20 | </div> | |
15 | </template> |
|
21 | </template> | |
16 | </div> |
|
22 | </div> | |
17 | <div class="toast-close"> |
|
23 | <div class="toast-close"> | |
18 |
< |
|
24 | <button on-tap="dismissNotifications" class="btn btn-default">{{_gettext('Close now')}}</button> | |
19 | </div> |
|
25 | </div> | |
20 | </paper-toast> |
|
26 | </paper-toast> | |
21 | </template> |
|
27 | </template> | |
22 |
|
28 | |||
23 | <script src="rhodecode-toast.js"></script> |
|
29 | <script src="rhodecode-toast.js"></script> | |
24 | </dom-module> |
|
30 | </dom-module> |
@@ -1,29 +1,31 b'' | |||||
1 | Polymer({ |
|
1 | Polymer({ | |
2 | is: 'rhodecode-toast', |
|
2 | is: 'rhodecode-toast', | |
3 | properties: { |
|
3 | properties: { | |
4 | toasts: { |
|
4 | toasts: { | |
5 | type: Array, |
|
5 | type: Array, | |
6 | value: function(){ |
|
6 | value: function(){ | |
7 | return [] |
|
7 | return [] | |
8 | } |
|
8 | } | |
9 | } |
|
9 | } | |
10 | }, |
|
10 | }, | |
11 | observers: [ |
|
11 | observers: [ | |
12 | '_changedToasts(toasts.splices)' |
|
12 | '_changedToasts(toasts.splices)' | |
13 | ], |
|
13 | ], | |
14 | ready: function(){ |
|
14 | ready: function(){ | |
15 |
|
15 | |||
16 | }, |
|
16 | }, | |
17 |
|
17 | |||
18 | _changedToasts: function(newValue, oldValue){ |
|
18 | _changedToasts: function(newValue, oldValue){ | |
19 | this.$['p-toast'].notifyResize(); |
|
19 | this.$['p-toast'].notifyResize(); | |
20 | }, |
|
20 | }, | |
21 | dismissNotifications: function(){ |
|
21 | dismissNotifications: function(){ | |
22 | this.$['p-toast'].close(); |
|
22 | this.$['p-toast'].close(); | |
|
23 | }, | |||
|
24 | handleClosed: function(){ | |||
23 | this.splice('toasts', 0); |
|
25 | this.splice('toasts', 0); | |
24 | }, |
|
26 | }, | |
25 | open: function(){ |
|
27 | open: function(){ | |
26 | this.$['p-toast'].open(); |
|
28 | this.$['p-toast'].open(); | |
27 | }, |
|
29 | }, | |
28 | _gettext: _gettext |
|
30 | _gettext: _gettext | |
29 | }); |
|
31 | }); |
General Comments 0
You need to be logged in to leave comments.
Login now