notifications: different approach with fixed/standard container

rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.html

@@ -12,7 +12,6 @@
                 on-channelstream-subscribed="handleSubscribed">
         </channelstream-connection>
         <rhodecode-favicon></rhodecode-favicon>
-        <rhodecode-toast id="notifications"></rhodecode-toast>
     </template>
     <script src="rhodecode-app.js"></script>
 </dom-module>

rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js

@@ -25,7 +25,11 @@ var rhodeCodeApp = Polymer({
     },
 
     handleNotifications: function (data) {
-        this.$['notifications'].handleNotification(data);
+        var elem = document.getElementById('notifications');
+        if(elem){
+            elem.handleNotification(data);
+        }
+
     },
 
     faviconUpdate: function (data) {

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html

@@ -5,25 +5,19 @@
     <template>
         <style include="shared-styles"></style>
         <link rel="stylesheet" href="rhodecode-toast.css">
-
-        <paper-toast id="p-toast"
-                     duration="0"
-                     horizontal-offset="100"
-                     horizontal-align="auto"
-                     vertical-align="top"
-                     on-iron-overlay-closed="handleClosed"
-                     always-on-top>
-            <div class="toast-message-holder">
-                <template is="dom-repeat" items="{{toasts}}">
-                    <div class$="alert alert-{{item.level}}">
-                    <rhodecode-unsafe-html text="{{item.message}}"></rhodecode-unsafe-html>
+        <template is="dom-if" if="[[hasToasts]]">
+            <div class$="container toast-message-holder [[conditionalClass(isFixed)]]" >
+                <template is="dom-repeat" items="[[toasts]]">
+                    <div class$="alert alert-[[item.level]]">
+                        <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
                     </div>
                 </template>
+
+                <div class="toast-close">
+                    <button on-tap="dismissNotifications" class="btn btn-default">[[_gettext('Close')]]</button>
+                </div>
             </div>
-            <div class="toast-close">
-                <button on-tap="dismissNotifications" class="btn btn-default">{{_gettext('Close')}}</button>
-            </div>
-        </paper-toast>
+        </template>
     </template>
 
     <script src="rhodecode-toast.js"></script>

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js

@@ -6,25 +6,61 @@ Polymer({
             value: function(){
                 return []
             }
+        },
+        isFixed: {
+            type: Boolean,
+            value: false
+        },
+        hasToasts: {
+            type: Boolean,
+            computed: '_computeHasToasts(toasts.*)'
         }
     },
     observers: [
         '_changedToasts(toasts.splices)'
     ],
+
+    _computeHasToasts: function(){
+        return this.toasts.length > 0;
+    },
+
+    _debouncedCalc: function(){
+        // calculate once in a while
+        this.debounce('debouncedCalc', this.toastInWindow, 25);
+    },
+
+    conditionalClass: function(){
+      return this.isFixed ? 'fixed': '';
+    },
+
+    toastInWindow: function() {
+        if (!this._headerNode){
+            return true
+        }
+        var headerHeight = this._headerNode.offsetHeight;
+        var scrollPosition = window.scrollY;
+
+        if (this.isFixed){
+            this.isFixed = 1 <= scrollPosition;
+        }
+        else{
+            this.isFixed = headerHeight <= scrollPosition;
+        }
+    },
+
+    attached: function(){
+        this._headerNode = document.querySelector('.header', document);
+        this.listen(window,'scroll', '_debouncedCalc');
+        this.listen(window,'resize', '_debouncedCalc');
+        this._debouncedCalc();
+    },
     _changedToasts: function(newValue, oldValue){
-        this.$['p-toast'].notifyResize();
         $.Topic('/favicon/update').publish({count: this.toasts.length});
     },
     dismissNotifications: function(){
-        this.$['p-toast'].close();
         $.Topic('/favicon/update').publish({count: 0});
-    },
-    handleClosed: function(){
         this.splice('toasts', 0);
     },
-    open: function(){
-        this.$['p-toast'].open();
-    },
     handleNotification: function(data){
         if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
             // do not act if notifications are disabled
@@ -34,7 +70,6 @@ Polymer({
             level: data.message.level,
             message: data.message.message
         });
-        this.open();
     },
     _gettext: _gettext
 });

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less

@@ -1,29 +1,22 @@
 @import '../../../../css/variables';
 @import '../../../../css/mixins';
 
-paper-toast{
-    width: 100%;
-    min-width: 400px;
-    padding: 0px;
-    --paper-toast-background-color: transparent;
-    --paper-toast-color: #000000;
-    .box-shadow(none);
-}
-paper-toast a{
-    font-weight: bold
+.alert{
+    margin: 10px 0;
 }
 
-.toast-message-holder {
+.toast-close{
+    text-align: right;
 }
-.toast-close {
-    right: -5px;
-    position: absolute;
-    bottom: -45px;
-    paper-button{
-        .box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.15));
+
+.toast-message-holder{
+    background-color: #ffffff;
+
+    &.fixed{
+        position: fixed;
+        padding: 10px;
+        top: 0;
+        width: 1200px;
+        z-index: 1;
     }
 }
-paper-toast .alert{
-    margin: @padding 0 0 0;
-    .box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.15));
-}

rhodecode/templates/base/base.mako

@@ -23,6 +23,9 @@
 
   <!-- CONTENT -->
   <div id="content" class="wrapper">
+
+      <rhodecode-toast id="notifications"></rhodecode-toast>
+
       <div class="main">
           ${next.main()}
       </div>