Make sticky message closeable

Don't show messages on userscript frame

couchpotato/core/notifications/core/static/notification.js

@@ -2,6 +2,7 @@ var NotificationBase = new Class({
 
 	Extends: BlockBase,
 	Implements: [Options, Events],
+	stopped: false,
 
 	initialize: function(options){
 		var self = this;
@@ -28,14 +29,12 @@ var NotificationBase = new Class({
 			$(App.block.notification).inject(App.getBlock('search'), 'after');
 			self.badge = new Element('div.badge').inject(App.block.notification, 'top').hide();
 
-		});
-
-		window.addEvent('load', function(){
 			requestTimeout(function(){
-				self.startInterval($(window).getSize().x <= 480 ? 2000 : 100);
-			}, 0);
-		});
+				self.startInterval();
+			}, $(window).getSize().x <= 480 ? 2000 : 100);
 
+			self.showMessage('Dit is een bericht', true, {});
+		});
 	},
 
 	notify: function(result){
@@ -192,7 +191,7 @@ var NotificationBase = new Class({
 
 		if(sticky)
 			new_message.grab(
-				new Element('a.close.icon2', {
+				new Element('a.icon-cancel', {
 					'events': {
 						'click': function(){
 							self.markAsRead([data._id]);

couchpotato/static/scripts/combined.plugins.min.js

@@ -2431,6 +2431,7 @@ new TraktAutomation();
 var NotificationBase = new Class({
     Extends: BlockBase,
     Implements: [ Options, Events ],
+    stopped: false,
     initialize: function(options) {
         var self = this;
         self.setOptions(options);
@@ -2448,11 +2449,10 @@ var NotificationBase = new Class({
             });
             $(App.block.notification).inject(App.getBlock("search"), "after");
             self.badge = new Element("div.badge").inject(App.block.notification, "top").hide();
-        });
-        window.addEvent("load", function() {
             requestTimeout(function() {
-                self.startInterval($(window).getSize().x <= 480 ? 2e3 : 100);
-            }, 0);
+                self.startInterval();
+            }, $(window).getSize().x <= 480 ? 2e3 : 100);
+            self.showMessage("Dit is een bericht", true, {});
         });
     },
     notify: function(result) {
@@ -2568,7 +2568,7 @@ var NotificationBase = new Class({
                 new_message.destroy();
             }, 1e3);
         };
-        if (sticky) new_message.grab(new Element("a.close.icon2", {
+        if (sticky) new_message.grab(new Element("a.icon-cancel", {
             events: {
                 click: function() {
                     self.markAsRead([ data._id ]);

couchpotato/static/style/combined.min.css

@@ -786,7 +786,6 @@ input[type=text],textarea{-webkit-appearance:none}
 .dark .more_menu .wrapper ul li{border-color:#353535}
 .more_menu .wrapper ul li:first-child{border-top:0}
 .more_menu .wrapper ul li a{display:block;color:#000;padding:5px 10px;font-size:1em;line-height:22px;width:100%}
-.question,.table .item{display:-webkit-flex;display:-ms-flexbox}
 .dark .more_menu .wrapper ul li a{color:#FFF}
 .more_menu .wrapper ul li a:hover{background:#ebebeb}
 .dark .more_menu .wrapper ul li a:hover{background:#353535}
@@ -798,8 +797,10 @@ input[type=text],textarea{-webkit-appearance:none}
 .dark .messages .message{background:#f85c22;box-shadow:0 5px 15px 2px rgba(0,0,0,.4)}
 .messages .message .inner{padding:15px 30px 15px 20px;background:#FFF;margin-bottom:4px;border-radius:3px}
 .dark .messages .message .inner{background:#2d2d2d}
-.messages .message.sticky{background-color:#ac0000}
-.dark .messages .message.sticky{background-color:#f85c22}
+.messages .message.sticky .inner{background-color:#ac0000}
+.dark .messages .message.sticky .inner{background-color:#f85c22}
+.messages .message.sticky .icon-cancel{position:absolute;display:block;height:30px;width:30px;line-height:30px;top:0;right:0;text-align:center}
+.question,.table .item{display:-webkit-flex;display:-ms-flexbox}
 .messages .message.show{max-height:130px;-webkit-transform:scale(1);transform:scale(1)}
 .messages .message.hide{max-height:0;padding:0 20px;margin:0;-webkit-transform:scale(0);transform:scale(0)}
 .messages .close{padding:10px 8px;color:#FFF}

couchpotato/static/style/main.scss

@@ -691,7 +691,20 @@ input[type=text], textarea {
 		}
 
 		&.sticky {
-			@include theme(background-color, primary);
+			.inner {
+				@include theme(background-color, primary);
+			}
+
+			.icon-cancel {
+				position: absolute;
+				display: block;
+				height: 30px;
+				width: 30px;
+				line-height: 30px;
+				top: 0;
+				right: 0;
+				text-align: center;
+			}
 		}
 
 		&.show {