Merge pull request #839 from shatyuka/big_sur_tray

fix: big sur tray color

src/main/ui/TrayManager.js

@@ -4,7 +4,7 @@ import { Tray, Menu, nativeImage } from 'electron'
 import is from 'electron-is'
 
 import { APP_THEME } from '@shared/constants'
-import { getInverseTheme } from '@shared/utils'
+import { getInverseTheme, getSystemMajorVersion } from '@shared/utils'
 import { getI18n } from './Locale'
 import {
   translateTemplate,
@@ -26,6 +26,7 @@ export default class TrayManager extends EventEmitter {
 
     this.systemTheme = options.systemTheme
     this.inverseSystemTheme = getInverseTheme(this.systemTheme)
+    this.bigSur = platform === 'darwin' && getSystemMajorVersion() >= 20
 
     this.speedometer = options.speedometer
 
@@ -76,18 +77,25 @@ export default class TrayManager extends EventEmitter {
   }
 
   loadImagesForMacOS () {
-    const { systemTheme, inverseSystemTheme } = this
+    if (this.bigSur) {
+      const {
+        systemTheme,
+        inverseSystemTheme
+      } = this
 
-    this.normalIcon = this.getFromCacheOrCreateImage(`mo-tray-${systemTheme}-normal.png`)
-    this.activeIcon = this.getFromCacheOrCreateImage(`mo-tray-${systemTheme}-active.png`)
+      this.normalIcon = this.getFromCacheOrCreateImage(`mo-tray-${systemTheme}-normal.png`)
+      this.activeIcon = this.getFromCacheOrCreateImage(`mo-tray-${systemTheme}-active.png`)
 
-    // if (systemTheme === APP_THEME.DARK) {
-    //   this.inverseNormalIcon = this.normalIcon
-    //   this.inverseActiveIcon = this.activeIcon
-    // } else {
-    this.inverseNormalIcon = this.getFromCacheOrCreateImage(`mo-tray-${inverseSystemTheme}-normal.png`)
-    this.inverseActiveIcon = this.getFromCacheOrCreateImage(`mo-tray-${inverseSystemTheme}-active.png`)
-    // }
+      // if (systemTheme === APP_THEME.DARK) {
+      //   this.inverseNormalIcon = this.normalIcon
+      //   this.inverseActiveIcon = this.activeIcon
+      // } else {
+      this.inverseNormalIcon = this.getFromCacheOrCreateImage(`mo-tray-${inverseSystemTheme}-normal.png`)
+      this.inverseActiveIcon = this.getFromCacheOrCreateImage(`mo-tray-${inverseSystemTheme}-active.png`)
+      // }
+    } else {
+      this.normalIcon = this.getFromCacheOrCreateImage('mo-tray-light-normal.png')
+    }
   }
 
   loadImagesForWindows () {
@@ -118,6 +126,7 @@ export default class TrayManager extends EventEmitter {
     }
 
     file = nativeImage.createFromPath(join(__static, `./${key}`))
+    file.setTemplateImage(this.bigSur)
     this.setCache(key, file)
     return file
   }
@@ -130,24 +139,6 @@ export default class TrayManager extends EventEmitter {
     this.cache[key] = value
   }
 
-  loadIcon (theme, scale) {
-    const status = this.status ? 'active' : 'normal'
-    const fileName = `mo-tray-${theme}-${status}@${scale}x.png`
-    const bufferKey = `buffer-${fileName}`
-    const buffer = this.getCache(bufferKey)
-
-    if (buffer) {
-      return buffer
-    }
-
-    const image = this.getFromCacheOrCreateImage(fileName)
-    const result = image.toPNG()
-
-    this.setCache(bufferKey, result)
-
-    return result
-  }
-
   buildMenu () {
     const keystrokesByCommand = {}
     for (const item in this.keymap) {
@@ -247,6 +238,10 @@ export default class TrayManager extends EventEmitter {
   }
 
   getIcons () {
+    if (this.bigSur) {
+      return { icon: this.normalIcon }
+    }
+
     const { focused, status, systemTheme } = this
 
     const icon = status ? this.activeIcon : this.normalIcon
@@ -296,16 +291,6 @@ export default class TrayManager extends EventEmitter {
     this.updateMenuStates(null, enabledStates, null)
   }
 
-  updateTrayFromDataURL (trayDataURL) {
-    const tempImage = nativeImage.createFromDataURL(trayDataURL)
-    const pngData = tempImage.toPNG()
-    const image = nativeImage.createFromBuffer(pngData, {
-      scaleFactor: 2
-    })
-
-    tray.setImage(image)
-  }
-
   handleLocaleChange (locale) {
     this.setupMenu()
   }
@@ -351,7 +336,7 @@ export default class TrayManager extends EventEmitter {
     const image = nativeImage.createFromBuffer(buffer, {
       scaleFactor: 2
     })
-
+    image.setTemplateImage(this.bigSur)
     tray.setImage(image)
   }
 

src/renderer/components/Native/DynamicTray.vue

@@ -42,6 +42,7 @@
     },
     computed: {
       ...mapState('app', {
+        bigSur: state => state.bigSur,
         iconStatus: state => state.stat.numActive > 0 ? 'active' : 'normal',
         theme: state => state.systemTheme,
         focused: state => state.trayFocused,
@@ -61,8 +62,8 @@
         return focused ? getInverseTheme(theme) : theme
       },
       iconKey () {
-        const { iconStatus, currentTheme } = this
-        return `tray-icon-${currentTheme}-${iconStatus}`
+        const { bigSur, iconStatus, currentTheme } = this
+        return bigSur ? 'tray-icon-light-normal' : `tray-icon-${currentTheme}-${iconStatus}`
       }
     },
     watch: {

src/renderer/store/modules/app.js

@@ -1,6 +1,6 @@
 import { ADD_TASK_TYPE } from '@shared/constants'
 import api from '@/api'
-import { getSystemTheme } from '@/utils/native'
+import { getSystemTheme, isBigSur } from '@/utils/native'
 
 const BASE_INTERVAL = 1000
 const PER_INTERVAL = 100
@@ -9,6 +9,7 @@ const MAX_INTERVAL = 6000
 
 const state = {
   systemTheme: getSystemTheme(),
+  bigSur: isBigSur(),
   trayFocused: false,
   aboutPanelVisible: false,
   engineInfo: {

src/renderer/utils/native.js

@@ -5,7 +5,8 @@ import { Message } from 'element-ui'
 
 import {
   getFileName,
-  isMagnetTask
+  isMagnetTask,
+  getSystemMajorVersion
 } from '@shared/utils'
 import { APP_THEME, TASK_STATUS } from '@shared/constants'
 
@@ -150,6 +151,10 @@ export function getSystemTheme () {
   return result
 }
 
+export function isBigSur () {
+  return is.macOS() && getSystemMajorVersion() >= 20
+}
+
 export const openExternal = (url, options) => {
   if (!url) {
     return

src/shared/utils/index.js

@@ -598,3 +598,8 @@ export const intersection = (array1 = [], array2 = []) => {
 export const getInverseTheme = (theme) => {
   return (theme === APP_THEME.LIGHT) ? APP_THEME.DARK : APP_THEME.LIGHT
 }
+
+export const getSystemMajorVersion = () => {
+  const version = require('os').release()
+  return parseInt(version.substr(0, version.indexOf('.')))
+}