Merge pull request RocketChat#323 from alexbrazier/bugfix/windows

Windows notification issues

Author: engelgabriel

src/Toaster.js

@@ -12,13 +12,13 @@ export default class Toaster {
         const window = new BrowserWindow({
             width: msg.width,
             height: 75,
-            useContentSize: true,
             transparent: true,
             frame: false,
             show : false,
             alwaysOnTop: true,
             skipTaskbar: true,
-            resizeable: false
+            resizable: false,
+            focusable: false
         });
 
         if (this.debug) {
@@ -38,8 +38,8 @@ export default class Toaster {
             `title=${encodeURIComponent(msg.title || '')}&` +
             `message=${encodeURIComponent(msg.message || '')}&` +
             `timeout=${msg.timeout}&` +
-            `icon=${msg.icon}&` +
-            `tag=${msg.tag}`;
+            `icon=${encodeURIComponent(msg.icon)}&` +
+            `tag=${encodeURIComponent(msg.tag)}`;
 
         window.loadURL(htmlFile);
 
@@ -49,18 +49,18 @@ export default class Toaster {
     }
 
     _setPosition (window, index) {
-        const width = window.getSize()[0];
-        const height = window.getSize()[1];
-        const pos = this.mainWindow.getPosition();
-        const display = screen.getDisplayNearestPoint({x:pos[0], y:pos[1]});
-        const notificationDistance = height + 5;
-        const x = display.workAreaSize.width - width - 4;
-        const y = display.workAreaSize.height - (notificationDistance * index);
+        const [ notificationWidth, notificationHeight ] = window.getSize();
+        const [ appX, appY ] = this.mainWindow.getPosition();
+        const { x, y, width, height } = screen.getDisplayNearestPoint({x: appX, y: appY}).workArea;
+        const margin = 5;
+        const notificationX = x + width - notificationWidth - margin;
+        const notificationDistance = notificationHeight + margin;
+        const notificationY = y + height - (notificationDistance * index);
 
-        window.setPosition(x, y);
+        window.setPosition(notificationX, notificationY);
 
         if (index <= this.maxNotifications) {
-            window.show();
+            window.showInactive();
         }
     }
 }

src/public/notification.html

@@ -5,10 +5,11 @@
 	<style type="text/css">
 		*{margin: 0;padding:0;}
 		body, html{
-			font: 13px/1.4 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
+			font: 14px/1.4 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
 			width: 100%;
 			height: 100%;
 			overflow: hidden;
+			-webkit-user-select: none;
 		}
 
 		#frame {
@@ -72,21 +73,24 @@
 			line-height: 16px;
 			float: left;
 			color: white;
+			width: 285px;
 		}
 
 		.title {
 			font-weight: bold;
 			margin-top: 0.5em;
 			margin-bottom: 0;
-			padding-right: 2em;
 			-webkit-line-clamp: 1;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
 		.message {
 			margin-top: 0.33em;
-			padding-right: 4em;
 			-webkit-line-clamp: 2;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
@@ -179,11 +183,11 @@
 				frame.addEventListener('mouseout', startTimeout)
 
 				document.getElementById('close').addEventListener('click', closeClick);
+				document.getElementById('title').innerHTML = getQueryVariable('title');
+				document.getElementById('message').innerHTML = getQueryVariable('message');
+				document.getElementById('icon').setAttribute('src', getQueryVariable('icon'));
 			}
 
-			document.getElementById('title').innerHTML = getQueryVariable('title');
-			document.getElementById('message').innerHTML = getQueryVariable('message');
-			document.getElementById('icon').setAttribute('src', getQueryVariable('icon'));
 		</script>
 	</body>
 </html>