##// END OF EJS Templates
notifications: different approach with fixed/standard container
ergo -
r1483:211476f5 default
parent child Browse files
Show More
@@ -12,7 +12,6 b''
12 on-channelstream-subscribed="handleSubscribed">
12 on-channelstream-subscribed="handleSubscribed">
13 </channelstream-connection>
13 </channelstream-connection>
14 <rhodecode-favicon></rhodecode-favicon>
14 <rhodecode-favicon></rhodecode-favicon>
15 <rhodecode-toast id="notifications"></rhodecode-toast>
16 </template>
15 </template>
17 <script src="rhodecode-app.js"></script>
16 <script src="rhodecode-app.js"></script>
18 </dom-module>
17 </dom-module>
@@ -25,7 +25,11 b' var rhodeCodeApp = Polymer({'
25 },
25 },
26
26
27 handleNotifications: function (data) {
27 handleNotifications: function (data) {
28 this.$['notifications'].handleNotification(data);
28 var elem = document.getElementById('notifications');
29 if(elem){
30 elem.handleNotification(data);
31 }
32
29 },
33 },
30
34
31 faviconUpdate: function (data) {
35 faviconUpdate: function (data) {
@@ -5,25 +5,19 b''
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 <template is="dom-if" if="[[hasToasts]]">
9 <paper-toast id="p-toast"
9 <div class$="container toast-message-holder [[conditionalClass(isFixed)]]" >
10 duration="0"
10 <template is="dom-repeat" items="[[toasts]]">
11 horizontal-offset="100"
11 <div class$="alert alert-[[item.level]]">
12 horizontal-align="auto"
12 <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
13 vertical-align="top"
14 on-iron-overlay-closed="handleClosed"
15 always-on-top>
16 <div class="toast-message-holder">
17 <template is="dom-repeat" items="{{toasts}}">
18 <div class$="alert alert-{{item.level}}">
19 <rhodecode-unsafe-html text="{{item.message}}"></rhodecode-unsafe-html>
20 </div>
13 </div>
21 </template>
14 </template>
22 </div>
15
23 <div class="toast-close">
16 <div class="toast-close">
24 <button on-tap="dismissNotifications" class="btn btn-default">{{_gettext('Close')}}</button>
17 <button on-tap="dismissNotifications" class="btn btn-default">[[_gettext('Close')]]</button>
25 </div>
18 </div>
26 </paper-toast>
19 </div>
20 </template>
27 </template>
21 </template>
28
22
29 <script src="rhodecode-toast.js"></script>
23 <script src="rhodecode-toast.js"></script>
@@ -6,25 +6,61 b' Polymer({'
6 value: function(){
6 value: function(){
7 return []
7 return []
8 }
8 }
9 },
10 isFixed: {
11 type: Boolean,
12 value: false
13 },
14 hasToasts: {
15 type: Boolean,
16 computed: '_computeHasToasts(toasts.*)'
9 }
17 }
10 },
18 },
11 observers: [
19 observers: [
12 '_changedToasts(toasts.splices)'
20 '_changedToasts(toasts.splices)'
13 ],
21 ],
22
23 _computeHasToasts: function(){
24 return this.toasts.length > 0;
25 },
26
27 _debouncedCalc: function(){
28 // calculate once in a while
29 this.debounce('debouncedCalc', this.toastInWindow, 25);
30 },
31
32 conditionalClass: function(){
33 return this.isFixed ? 'fixed': '';
34 },
35
36 toastInWindow: function() {
37 if (!this._headerNode){
38 return true
39 }
40 var headerHeight = this._headerNode.offsetHeight;
41 var scrollPosition = window.scrollY;
42
43 if (this.isFixed){
44 this.isFixed = 1 <= scrollPosition;
45 }
46 else{
47 this.isFixed = headerHeight <= scrollPosition;
48 }
49 },
50
51 attached: function(){
52 this._headerNode = document.querySelector('.header', document);
53 this.listen(window,'scroll', '_debouncedCalc');
54 this.listen(window,'resize', '_debouncedCalc');
55 this._debouncedCalc();
56 },
14 _changedToasts: function(newValue, oldValue){
57 _changedToasts: function(newValue, oldValue){
15 this.$['p-toast'].notifyResize();
16 $.Topic('/favicon/update').publish({count: this.toasts.length});
58 $.Topic('/favicon/update').publish({count: this.toasts.length});
17 },
59 },
18 dismissNotifications: function(){
60 dismissNotifications: function(){
19 this.$['p-toast'].close();
20 $.Topic('/favicon/update').publish({count: 0});
61 $.Topic('/favicon/update').publish({count: 0});
21 },
22 handleClosed: function(){
23 this.splice('toasts', 0);
62 this.splice('toasts', 0);
24 },
63 },
25 open: function(){
26 this.$['p-toast'].open();
27 },
28 handleNotification: function(data){
64 handleNotification: function(data){
29 if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
65 if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
30 // do not act if notifications are disabled
66 // do not act if notifications are disabled
@@ -34,7 +70,6 b' Polymer({'
34 level: data.message.level,
70 level: data.message.level,
35 message: data.message.message
71 message: data.message.message
36 });
72 });
37 this.open();
38 },
73 },
39 _gettext: _gettext
74 _gettext: _gettext
40 });
75 });
@@ -1,29 +1,22 b''
1 @import '../../../../css/variables';
1 @import '../../../../css/variables';
2 @import '../../../../css/mixins';
2 @import '../../../../css/mixins';
3
3
4 paper-toast{
4 .alert{
5 width: 100%;
5 margin: 10px 0;
6 min-width: 400px;
7 padding: 0px;
8 --paper-toast-background-color: transparent;
9 --paper-toast-color: #000000;
10 .box-shadow(none);
11 }
6 }
12 paper-toast a{
7
13 font-weight: bold
8 .toast-close{
9 text-align: right;
14 }
10 }
15
11
16 .toast-message-holder {
12 .toast-message-holder{
17 }
13 background-color: #ffffff;
18 .toast-close {
14
19 right: -5px;
15 &.fixed{
20 position: absolute;
16 position: fixed;
21 bottom: -45px;
17 padding: 10px;
22 paper-button{
18 top: 0;
23 .box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.15));
19 width: 1200px;
20 z-index: 1;
24 }
21 }
25 }
22 }
26 paper-toast .alert{
27 margin: @padding 0 0 0;
28 .box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.15));
29 }
@@ -23,6 +23,9 b''
23
23
24 <!-- CONTENT -->
24 <!-- CONTENT -->
25 <div id="content" class="wrapper">
25 <div id="content" class="wrapper">
26
27 <rhodecode-toast id="notifications"></rhodecode-toast>
28
26 <div class="main">
29 <div class="main">
27 ${next.main()}
30 ${next.main()}
28 </div>
31 </div>
General Comments 0
You need to be logged in to leave comments. Login now