Merge pull request geeeeeeeeek#494 from Rocket1184/trayicon-config

integrate tray icon color to AppConfig
PublicWorld · May 18, 2017 · 109e685 · 109e685
2 parents b41c7b4 + 918d473
commit 109e685
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 27 deletions.
diff --git a/src/common.js b/src/common.js
@@ -71,6 +71,8 @@ Common.instanceTitle = 'Allow Multiple Instance';
 Common.instanceDesc = 'Multiple instance can login with different accounts';
 Common.iconTitle = 'File Path (In Development)';
 Common.iconDesc = 'Set a default file path';
+Common.trayTitle = 'Tray Icon color (Black/White)';
+Common.trayDesc = 'Select a color to match your desktop theme';
 
 Common.UPGRADE = 'UPGRADE';
 Common.FEEDBACK = 'FEEDBACK';

diff --git a/src/windows/controllers/app_tray.js b/src/windows/controllers/app_tray.js
@@ -4,14 +4,15 @@
 
 'use strict';
 
-const fs = require('fs');
 const path = require('path');
-const { app, Menu, nativeImage, Tray } = require('electron');
+const { app, Menu, nativeImage, Tray, ipcMain } = require('electron');
 
 const AppConfig = require('../../configuration');
 
 const lan = AppConfig.readSettings('language');
 
+const assetsPath = path.join(__dirname, '../../../assets');
+
 let Common;
 if (lan === 'zh-CN') {
   Common = require('../../common_cn');
@@ -23,37 +24,35 @@ class AppTray {
   constructor(splashWindow, wechatWindow) {
     this.splashWindow = splashWindow;
     this.wechatWindow = wechatWindow;
-    this.TRAY_CONFIG_PATH = path.join(app.getPath('appData'), 'electronic-wechat/trayConfig.json');
     this.lastUnreadStat = 0;
-
-    fs.readFile(this.TRAY_CONFIG_PATH, (err, data) => {
-      if (err) {
-        this.trayColor = 'white';
-        fs.writeFile(this.TRAY_CONFIG_PATH, '{"color":"white"}');
-      } else {
-        this.trayColor = JSON.parse(data.toString()).color;
-      }
-      this.createTray();
-    });
+    const trayColor = AppConfig.readSettings('tray-color');
+    if (trayColor === 'white' || trayColor === 'black') {
+      this.trayColor = trayColor;
+    } else {
+      this.trayColor = 'white';
+      AppConfig.saveSettings('tray-color', this.trayColor);
+    }
+    this.createTray();
   }
 
   createTray() {
     let image;
     if (process.platform === 'linux' || process.platform === 'win32') {
-      image = nativeImage.createFromPath(path.join(__dirname, `../../../assets/tray_${this.trayColor}.png`));
+      image = nativeImage.createFromPath(path.join(assetsPath, `tray_${this.trayColor}.png`));
       this.trayIcon = image;
-      this.trayIconUnread = nativeImage.createFromPath(path.join(__dirname, `../../../assets/tray_unread_${this.trayColor}.png`));
+      this.trayIconUnread = nativeImage.createFromPath(path.join(assetsPath, `tray_unread_${this.trayColor}.png`));
     } else {
-      image = nativeImage.createFromPath(path.join(__dirname, '../../../assets/status_bar.png'));
+      image = nativeImage.createFromPath(path.join(assetsPath, 'status_bar.png'));
     }
     image.setTemplateImage(true);
 
     this.tray = new Tray(image);
     this.tray.setToolTip(Common.ELECTRONIC_WECHAT);
 
+    ipcMain.on('refreshIcon', () => this.refreshIcon());
+
     if (process.platform === 'linux' || process.platform === 'win32') {
       const contextMenu = Menu.buildFromTemplate([
-        { label: 'ChangeIconColor', click: () => this.changeIconColor() },
         { label: 'Show', click: () => this.hideSplashAndShowWeChat() },
         { label: 'Exit', click: () => app.exit(0) },
       ]);
@@ -71,20 +70,15 @@ class AppTray {
     this.wechatWindow.show();
   }
 
-  changeIconColor() {
-    if (this.trayColor === 'white') {
-      this.trayColor = 'black';
-    } else if (this.trayColor === 'black') {
-      this.trayColor = 'white';
-    }
-    this.trayIcon = nativeImage.createFromPath(path.join(__dirname, `../../../assets/tray_${this.trayColor}.png`));
-    this.trayIconUnread = nativeImage.createFromPath(path.join(__dirname, `../../../assets/tray_unread_${this.trayColor}.png`));
+  refreshIcon() {
+    this.trayColor = AppConfig.readSettings('tray-color');
+    this.trayIcon = nativeImage.createFromPath(path.join(assetsPath, `tray_${this.trayColor}.png`));
+    this.trayIconUnread = nativeImage.createFromPath(path.join(assetsPath, `tray_unread_${this.trayColor}.png`));
     if (this.lastUnreadStat === 0) {
       this.tray.setImage(this.trayIcon);
     } else {
       this.tray.setImage(this.trayIconUnread);
     }
-    fs.writeFile(this.TRAY_CONFIG_PATH, `{"color":"${this.trayColor}"}`);
   }
 
   setUnreadStat(stat) {

diff --git a/src/windows/views/settings.html b/src/windows/views/settings.html
@@ -87,6 +87,22 @@ <h4 id="app-icon-desc">默认路径</h4>
         </li>
       </ul>
     </section>
+    <section id="app-tray">
+      <ul>
+        <li class="menu-title">
+          <h3 id="app-tray-title">托盘图标颜色（黑/白）</h3>
+        </li>
+        <li class="menu-desc">
+          <h4 id="app-tray-desc">选择一个适合当前主题的颜色</h4>
+        </li>
+        <li class="menu-button">
+          <select id="app-tray-select">
+            <option value="black">◆</option>
+            <option value="white">◇</option>
+          </select>
+        </li>
+      </ul>
+    </section>
   </div>
 
   <script>
@@ -100,15 +116,20 @@ <h4 id="app-icon-desc">默认路径</h4>
     const lan = AppConfig.readSettings('language');
     const recall = AppConfig.readSettings('prevent-recall');
     const instance = AppConfig.readSettings('multi-instance');
-    const icon = AppConfig.readSettings('icon');
+    const trayColor = AppConfig.readSettings('tray-color');
 
     const lanSelect = $('app-language-select');
     const recallSelect = $('app-recall-select');
     const instanceSelect = $('app-instance-select');
+    const trayColorSelect = $('app-tray-select');
 
     function $(id) {
       return document.getElementById(id);
     }
+
+    if(process.platform === 'darwin') {
+      $('process.platform').style.display = 'none';
+    }
 
     $('top-title-electron-ver').innerText = process.versions.electron;
     setConfig();
@@ -132,12 +153,17 @@ <h4 id="app-icon-desc">默认路径</h4>
       instanceSelect.addEventListener('change', function() {
         AppConfig.saveSettings('multi-instance', instanceSelect.value)
       })
+      trayColorSelect.addEventListener('change', function() {
+        AppConfig.saveSettings('tray-color', trayColorSelect.value)
+        ipcRenderer.send('refreshIcon')
+      })
     }
 
     function setConfig() {
       $('app-language-select').value = lan;
       $('app-recall-select').value = recall;
       $('app-instance-select').value = instance;
+      $('app-tray-select').value = trayColor;
     }
 
     function setLocale() {
@@ -149,6 +175,8 @@ <h4 id="app-icon-desc">默认路径</h4>
       $('app-instance-desc').innerHTML = Common.instanceDesc;
       $('app-icon-title').innerHTML = Common.iconTitle;
       $('app-icon-desc').innerHTML = Common.iconDesc;
+      $('app-tray-title').innerHTML = Common.trayTitle;
+      $('app-tray-desc').innerHTML = Common.trayDesc;
       $('upgrade-btn').innerHTML = Common.UPGRADE;
       $('feedback-btn').innerHTML = Common.FEEDBACK;
     }