New Noification Implementation

package.json

@@ -38,7 +38,8 @@
     "pinyin": "^2.8.0",
     "emojione": "^2.2.7",
     "electron-localshortcut": "1.1.0",
-    "is-xfce": "^1.0.2"
+    "is-xfce": "^1.0.2",
+    "async": "^2.5.0"
   },
   "devDependencies": {
     "babel-eslint": "^7.1.1",

src/inject/preload.js

@@ -6,6 +6,7 @@ const ShareMenu = require('./share_menu');
 const MentionMenu = require('./mention_menu');
 const BadgeCount = require('./badge_count');
 const Common = require('../common');
+const NotificationInjector = require("../notify/notification_injector");
 // const EmojiParser = require('./emoji_parser');
 // const emojione = require('emojione');
 
@@ -63,6 +64,7 @@ class Injector {
 
       MentionMenu.init();
       BadgeCount.init();
+      NotificationInjector.init();
     };
 
     window.onload = () => {
@@ -137,12 +139,12 @@ class Injector {
     // clear currentUser to receive reddot of new messages from the current chat user
     ipcRenderer.on('hide-wechat-window', () => {
       this.lastUser = angular.element('#chatArea').scope().currentUser;
-      angular.element('.chat_list').scope().itemClick("");
+      angular.element('.chat_list').scope().itemClick(null);
     });
     // recover to the last chat user
-    ipcRenderer.on('show-wechat-window', () => {
-      if (this.lastUser != null) {
-        angular.element('.chat_list').scope().itemClick(this.lastUser);
+    ipcRenderer.on('show-wechat-window', (event, selectedUser) => {
+      if (selectedUser != null || this.lastUser != null) {
+        angular.element('.chat_list').scope().itemClick(selectedUser || this.lastUser);
       }
     });
   }

src/main.js

@@ -9,8 +9,9 @@ const AppConfig = require('./configuration');
 
 const SplashWindow = require('./windows/controllers/splash');
 const WeChatWindow = require('./windows/controllers/wechat');
-const SettingsWindow = require('./windows/controllers/settings')
+const SettingsWindow = require('./windows/controllers/settings');
 const AppTray = require('./windows/controllers/app_tray');
+const notify = require('./notify/notify');
 
 class ElectronicWeChat {
   constructor() {
@@ -45,6 +46,14 @@ class ElectronicWeChat {
 
   }
   initApp() {
+    if(process.platform === 'linux') {
+      /* allow notification to be transparent on linux platform, which is 
+       * equivalent for appending '--enable-transparent-visuals --disable-gpu'
+       * on the command line. */
+      app.commandLine.appendSwitch('enable-transparent-visuals');
+      app.disableHardwareAcceleration();
+    }
+
     app.on('ready', ()=> {
       this.createSplashWindow();
       this.createWeChatWindow();
@@ -120,7 +129,14 @@ class ElectronicWeChat {
     ipcMain.on('close-settings-window', (event, messgae) => {
       this.settingsWindow.close();
       this.settingsWindow = null;
-    })
+    });
+
+    ipcMain.on('notify-click', (event, winId, notifyObj) => {
+      notify.closeAll();
+      this.wechatWindow.show(notifyObj.options.username);
+    });
+
+    notify.init();
   };
 
   createTray() {

src/notify/notification.css

@@ -0,0 +1,68 @@
+body {
+  margin: 0;
+  padding: 10px;
+  background: rgba(0, 0, 0, 0);
+}
+
+#filter-bg {
+  filter: blur(5px);
+  background: #c0c0c0;
+  position: absolute;
+  width: 320px;
+  height: 80px;
+  top: 10px;
+  left: 10px;
+}
+
+#container {
+  box-sizing: border-box;
+  width: 320px;
+  height: 80px;
+  padding: 10px;
+  background: white;
+  overflow: hidden;
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  position: relative;
+  line-height: 15px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+#icon, #image {
+  border-radius: 2px;
+  overflow: hidden;
+  float: left;
+  height: 60px;
+  width: 60px;
+  margin-right: 10px;
+}
+
+#image {
+  float: right;
+  margin-right: 15px;
+}
+
+#text {
+  margin: 0;
+  overflow: hidden;
+  cursor: default;
+  height: 60px;
+}
+
+#title {
+
+}
+
+#message {
+  margin: 5px 0 0 0;
+  color: #333;
+}
+
+#close {
+  position: absolute;
+  cursor: pointer;
+  top: 8px;
+  right: 8px;
+  font-size: 24px;
+  color: #CCC;
+}

src/notify/notification.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link href="notification.css" rel="stylesheet">
+  <meta charset="UTF-8">
+  <title>Notification</title>
+</head>
+<body style='overflow: hidden; -webkit-user-select: none;'>
+<div id="filter-bg"></div>
+<div id="container">
+  <img src="" id="icon"/>
+  <img src="" id="image"/>
+  <div id="text">
+    <b id="title">title</b>
+    <p id="message">message</p>
+  </div>
+  <div id="close">&times;</div>
+</div>
+</body>
+</html>

src/notify/notification_injector.js

@@ -0,0 +1,28 @@
+'use strict';
+const {ipcRenderer}= require('electron');
+const notify = require('./notify');
+
+class NotificationInjector {
+  static init() {
+    const NativeNotification = window.Notification;
+    const _Notification = function (title, options) {
+      options.icon = location.origin + options.icon;
+      options.username = new URL(options.icon).searchParams.get("username");
+      ipcRenderer.send('notify-show', {
+        title: title,
+        options: options
+      });
+      return this;
+    };
+    _Notification.prototype = {
+      close: function () {
+      }
+    };
+    _Notification.permission = NativeNotification.permission;
+    _Notification.requestPermission = NativeNotification.requestPermission.bind(_Notification);
+    window.Notification = _Notification;
+  }
+}
+
+
+module.exports = NotificationInjector;