Implement support for monochromatic tray icon

23 files changed, 46 insertions, 3 deletions

diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template.png
new file mode 100644
index 0000000000..d11893684c
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template@2x.png
new file mode 100644
index 0000000000..71a918649c
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template.png
new file mode 100644
index 0000000000..b20bc19515
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template@2x.png
new file mode 100644
index 0000000000..1c512d12bd
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template.png
new file mode 100644
index 0000000000..d98d05d951
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template@2x.png
new file mode 100644
index 0000000000..c92dec19ec
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template.png
new file mode 100644
index 0000000000..871f8402bf
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template@2x.png
new file mode 100644
index 0000000000..d961af45f3
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template.png
new file mode 100644
index 0000000000..6fcb60c663
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template@2x.png
new file mode 100644
index 0000000000..f67b4c0921
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template.png
new file mode 100644
index 0000000000..43d02ab1e0
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template@2x.png
new file mode 100644
index 0000000000..1f05adf802
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template.png
new file mode 100644
index 0000000000..e282ff8dad
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template@2x.png
new file mode 100644
index 0000000000..f76ab999f1
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template.png
new file mode 100644
index 0000000000..1299817a53
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template@2x.png
new file mode 100644
index 0000000000..f3a1428ad4
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template.png
new file mode 100644
index 0000000000..161e4f5e82
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template@2x.png
new file mode 100644
index 0000000000..5b12910e4a
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template.png
new file mode 100644
index 0000000000..c823aa87a1
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template@2x.png
new file mode 100644
index 0000000000..e4dc28a192
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template@2x.png
diff --git a/gui/packages/desktop/src/main/gui-settings.js b/gui/packages/desktop/src/main/gui-settings.js
index 41b7c8b720..3b05261ab9 100644
--- a/gui/packages/desktop/src/main/gui-settings.js
+++ b/gui/packages/desktop/src/main/gui-settings.js
@@ -15,6 +15,7 @@ export default class GuiSettings {
   };
 
   _notify: ?(GuiSettingsState) => void;
+  _monochromaticIconChangeListener: ?(boolean) => void;
 
   load() {
     try {
@@ -47,6 +48,10 @@ export default class GuiSettings {
     return this._state.monochromaticIcon;
   }
 
+  onChangeMonochromaticIcon(listener: (boolean) => void) {
+    this._monochromaticIconChangeListener = listener;
+  }
+
   get startMinimized(): boolean {
     return this._state.startMinimized;
   }
@@ -57,6 +62,10 @@ export default class GuiSettings {
     ipcEventChannel.guiSettings.handleMonochromaticIcon((monochromaticIcon: boolean) => {
       this._state.monochromaticIcon = monochromaticIcon;
       this._settingsChanged();
+
+      if (this._monochromaticIconChangeListener) {
+        this._monochromaticIconChangeListener(monochromaticIcon);
+      }
     });
     ipcEventChannel.guiSettings.handleStartMinimized((startMinimized: boolean) => {
       this._state.startMinimized = startMinimized;
diff --git a/gui/packages/desktop/src/main/index.js b/gui/packages/desktop/src/main/index.js
index 99505ac49a..114dc7c508 100644
--- a/gui/packages/desktop/src/main/index.js
+++ b/gui/packages/desktop/src/main/index.js
@@ -274,7 +274,11 @@ const ApplicationMain = {
     const tray = this._createTray();
 
     const windowController = new WindowController(window, tray);
-    const trayIconController = new TrayIconController(tray, 'unsecured');
+    const trayIconController = new TrayIconController(
+      tray,
+      'unsecured',
+      process.platform === 'darwin' && this._guiSettings.monochromaticIcon,
+    );
 
     this._registerWindowListener(windowController);
     this._registerIpcListeners();
@@ -298,6 +302,7 @@ const ApplicationMain = {
         break;
       case 'darwin':
         this._installMacOsMenubarAppWindowHandlers(tray, windowController);
+        this._installMonochromaticTrayIconHandler();
         break;
       case 'linux':
         this._installGenericMenubarAppWindowHandlers(tray, windowController);
@@ -994,6 +999,14 @@ const ApplicationMain = {
     });
   },
 
+  _installMonochromaticTrayIconHandler() {
+    this._guiSettings.onChangeMonochromaticIcon((monochromaticIcon) => {
+      if (this._trayIconController) {
+        this._trayIconController.useMonochromaticIcon = monochromaticIcon;
+      }
+    });
+  },
+
   _shouldShowWindowOnStart(): boolean {
     switch (process.platform) {
       case 'win32':
diff --git a/gui/packages/desktop/src/main/tray-icon-controller.js b/gui/packages/desktop/src/main/tray-icon-controller.js
index c6f1e4d321..dbabe6a9a9 100644
--- a/gui/packages/desktop/src/main/tray-icon-controller.js
+++ b/gui/packages/desktop/src/main/tray-icon-controller.js
@@ -11,15 +11,18 @@ export default class TrayIconController {
   _animation: ?KeyframeAnimation;
   _iconType: TrayIconType;
   _iconImages: Array<NativeImage>;
+  _monochromaticIconImages: Array<NativeImage>;
+  _useMonochromaticIcon: boolean;
 
-  constructor(tray: Tray, initialType: TrayIconType) {
+  constructor(tray: Tray, initialType: TrayIconType, useMonochromaticIcon: boolean) {
     this._loadImages();
     this._iconType = initialType;
+    this._useMonochromaticIcon = useMonochromaticIcon;
 
     const initialFrame = this._targetFrame();
     const animation = new KeyframeAnimation();
     animation.speed = 100;
-    animation.onFrame = (frameNumber) => tray.setImage(this._iconImages[frameNumber]);
+    animation.onFrame = (frameNumber) => tray.setImage(this._imageForFrame(frameNumber));
     animation.play({ start: initialFrame, end: initialFrame });
 
     this._animation = animation;
@@ -36,6 +39,14 @@ export default class TrayIconController {
     return this._iconType;
   }
 
+  set useMonochromaticIcon(useMonochromaticIcon: boolean) {
+    this._useMonochromaticIcon = useMonochromaticIcon;
+
+    if (this._animation && !this._animation.isRunning) {
+      this._animation.play({ end: this._targetFrame() });
+    }
+  }
+
   animateToIcon(type: TrayIconType) {
     if (this._iconType === type || !this._animation) {
       return;
@@ -56,6 +67,10 @@ export default class TrayIconController {
     this._iconImages = frames.map((frame) =>
       nativeImage.createFromPath(path.join(basePath, `lock-${frame}.png`)),
     );
+
+    this._monochromaticIconImages = frames.map((frame) =>
+      nativeImage.createFromPath(path.join(basePath, `lock-${frame}Template.png`)),
+    );
   }
 
   _targetFrame(): number {
@@ -70,4 +85,10 @@ export default class TrayIconController {
         throw new Error(`Unknown tray icon type: ${(this._iconType: empty)}`);
     }
   }
+
+  _imageForFrame(frame: number): NativeImage {
+    return this._useMonochromaticIcon
+      ? this._monochromaticIconImages[frame]
+      : this._iconImages[frame];
+  }
 }