##// 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 12 on-channelstream-subscribed="handleSubscribed">
13 13 </channelstream-connection>
14 14 <rhodecode-favicon></rhodecode-favicon>
15 <rhodecode-toast id="notifications"></rhodecode-toast>
16 15 </template>
17 16 <script src="rhodecode-app.js"></script>
18 17 </dom-module>
@@ -25,7 +25,11 b' var rhodeCodeApp = Polymer({'
25 25 },
26 26
27 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 35 faviconUpdate: function (data) {
@@ -5,25 +5,19 b''
5 5 <template>
6 6 <style include="shared-styles"></style>
7 7 <link rel="stylesheet" href="rhodecode-toast.css">
8
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>
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>
8 <template is="dom-if" if="[[hasToasts]]">
9 <div class$="container toast-message-holder [[conditionalClass(isFixed)]]" >
10 <template is="dom-repeat" items="[[toasts]]">
11 <div class$="alert alert-[[item.level]]">
12 <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
20 13 </div>
21 14 </template>
22 </div>
15
23 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 18 </div>
26 </paper-toast>
19 </div>
20 </template>
27 21 </template>
28 22
29 23 <script src="rhodecode-toast.js"></script>
@@ -6,25 +6,61 b' Polymer({'
6 6 value: function(){
7 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 19 observers: [
12 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 57 _changedToasts: function(newValue, oldValue){
15 this.$['p-toast'].notifyResize();
16 58 $.Topic('/favicon/update').publish({count: this.toasts.length});
17 59 },
18 60 dismissNotifications: function(){
19 this.$['p-toast'].close();
20 61 $.Topic('/favicon/update').publish({count: 0});
21 },
22 handleClosed: function(){
23 62 this.splice('toasts', 0);
24 63 },
25 open: function(){
26 this.$['p-toast'].open();
27 },
28 64 handleNotification: function(data){
29 65 if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
30 66 // do not act if notifications are disabled
@@ -34,7 +70,6 b' Polymer({'
34 70 level: data.message.level,
35 71 message: data.message.message
36 72 });
37 this.open();
38 73 },
39 74 _gettext: _gettext
40 75 });
@@ -1,29 +1,22 b''
1 1 @import '../../../../css/variables';
2 2 @import '../../../../css/mixins';
3 3
4 paper-toast{
5 width: 100%;
6 min-width: 400px;
7 padding: 0px;
8 --paper-toast-background-color: transparent;
9 --paper-toast-color: #000000;
10 .box-shadow(none);
4 .alert{
5 margin: 10px 0;
11 6 }
12 paper-toast a{
13 font-weight: bold
7
8 .toast-close{
9 text-align: right;
14 10 }
15 11
16 12 .toast-message-holder {
17 }
18 .toast-close {
19 right: -5px;
20 position: absolute;
21 bottom: -45px;
22 paper-button{
23 .box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.15));
13 background-color: #ffffff;
14
15 &.fixed{
16 position: fixed;
17 padding: 10px;
18 top: 0;
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 24 <!-- CONTENT -->
25 25 <div id="content" class="wrapper">
26
27 <rhodecode-toast id="notifications"></rhodecode-toast>
28
26 29 <div class="main">
27 30 ${next.main()}
28 31 </div>
General Comments 0
You need to be logged in to leave comments. Login now