Merge branch 'monochrome-icons-on-windows-linux'

4 files changed, 31 insertions, 45 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index 6663a5574e..4df3b4c7a2 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -319,7 +319,7 @@ class ApplicationMain {
     const trayIconController = new TrayIconController(
       tray,
       'unsecured',
-      process.platform === 'darwin' && this.guiSettings.monochromaticIcon,
+      this.guiSettings.monochromaticIcon,
     );
 
     this.registerWindowListener(windowController);
@@ -330,10 +330,7 @@ class ApplicationMain {
     this.trayIconController = trayIconController;
 
     this.guiSettings.onChange = (newState, oldState) => {
-      if (
-        process.platform === 'darwin' &&
-        oldState.monochromaticIcon !== newState.monochromaticIcon
-      ) {
+      if (oldState.monochromaticIcon !== newState.monochromaticIcon) {
         if (this.trayIconController) {
           this.trayIconController.useMonochromaticIcon = newState.monochromaticIcon;
         }
diff --git a/gui/src/main/tray-icon-controller.ts b/gui/src/main/tray-icon-controller.ts
index f3333a2636..bb1d4f5868 100644
--- a/gui/src/main/tray-icon-controller.ts
+++ b/gui/src/main/tray-icon-controller.ts
@@ -7,7 +7,6 @@ export type TrayIconType = 'unsecured' | 'securing' | 'secured';
 export default class TrayIconController {
   private animation?: KeyframeAnimation;
   private iconImages: NativeImage[] = [];
-  private monochromaticIconImages: NativeImage[] = [];
 
   constructor(
     tray: Tray,
@@ -19,7 +18,7 @@ export default class TrayIconController {
     const initialFrame = this.targetFrame();
     const animation = new KeyframeAnimation();
     animation.speed = 100;
-    animation.onFrame = (frameNumber) => tray.setImage(this.imageForFrame(frameNumber));
+    animation.onFrame = (frameNumber) => tray.setImage(this.iconImages[frameNumber]);
     animation.play({ start: initialFrame, end: initialFrame });
 
     this.animation = animation;
@@ -38,6 +37,7 @@ export default class TrayIconController {
 
   set useMonochromaticIcon(useMonochromaticIcon: boolean) {
     this.useMonochromaticIconValue = useMonochromaticIcon;
+    this.loadImages();
 
     if (this.animation && !this.animation.isRunning) {
       this.animation.play({ end: this.targetFrame() });
@@ -58,16 +58,19 @@ export default class TrayIconController {
   }
 
   private loadImages() {
-    const basePath = path.resolve(path.join(__dirname, '../../assets/images/menubar icons'));
     const frames = Array.from({ length: 10 }, (_, i) => i + 1);
+    this.iconImages = frames.map((frame) => nativeImage.createFromPath(this.getImagePath(frame)));
+  }
 
-    this.iconImages = frames.map((frame) =>
-      nativeImage.createFromPath(path.join(basePath, `lock-${frame}.png`)),
-    );
+  private getImagePath(frame: number) {
+    const basePath = path.resolve(path.join(__dirname, '../../assets/images/menubar icons'));
+    const extension = process.platform === 'win32' ? 'ico' : 'png';
+    let suffix = '';
+    if (this.useMonochromaticIconValue) {
+      suffix = process.platform === 'darwin' ? 'Template' : '_white';
+    }
 
-    this.monochromaticIconImages = frames.map((frame) =>
-      nativeImage.createFromPath(path.join(basePath, `lock-${frame}Template.png`)),
-    );
+    return path.join(basePath, process.platform, `lock-${frame}${suffix}.${extension}`);
   }
 
   private targetFrame(): number {
@@ -80,10 +83,4 @@ export default class TrayIconController {
         return 8;
     }
   }
-
-  private imageForFrame(frame: number): NativeImage {
-    return this.useMonochromaticIconValue
-      ? this.monochromaticIconImages[frame]
-      : this.iconImages[frame];
-  }
 }
diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index 715d51e40f..d2d1709abc 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -21,7 +21,6 @@ export interface IProps {
   enableSystemNotifications: boolean;
   monochromaticIcon: boolean;
   startMinimized: boolean;
-  enableMonochromaticIconToggle: boolean;
   enableStartMinimizedToggle: boolean;
   setAutoStart: (autoStart: boolean) => void;
   setEnableSystemNotifications: (flag: boolean) => void;
@@ -120,29 +119,23 @@ export default class Preferences extends Component<IProps> {
                       </Cell.FooterText>
                     </Cell.Footer>
 
-                    {this.props.enableMonochromaticIconToggle ? (
-                      <React.Fragment>
-                        <Cell.Container>
-                          <Cell.Label>
-                            {messages.pgettext('preferences-view', 'Monochromatic tray icon')}
-                          </Cell.Label>
-                          <Cell.Switch
-                            isOn={this.props.monochromaticIcon}
-                            onChange={this.props.setMonochromaticIcon}
-                          />
-                        </Cell.Container>
-                        <Cell.Footer>
-                          <Cell.FooterText>
-                            {messages.pgettext(
-                              'preferences-view',
-                              'Use a monochromatic tray icon instead of a colored one.',
-                            )}
-                          </Cell.FooterText>
-                        </Cell.Footer>
-                      </React.Fragment>
-                    ) : (
-                      undefined
-                    )}
+                    <Cell.Container>
+                      <Cell.Label>
+                        {messages.pgettext('preferences-view', 'Monochromatic tray icon')}
+                      </Cell.Label>
+                      <Cell.Switch
+                        isOn={this.props.monochromaticIcon}
+                        onChange={this.props.setMonochromaticIcon}
+                      />
+                    </Cell.Container>
+                    <Cell.Footer>
+                      <Cell.FooterText>
+                        {messages.pgettext(
+                          'preferences-view',
+                          'Use a monochromatic tray icon instead of a colored one.',
+                        )}
+                      </Cell.FooterText>
+                    </Cell.Footer>
 
                     {this.props.enableStartMinimizedToggle ? (
                       <React.Fragment>
diff --git a/gui/src/renderer/containers/PreferencesPage.tsx b/gui/src/renderer/containers/PreferencesPage.tsx
index 497da2166c..e1b674e0dd 100644
--- a/gui/src/renderer/containers/PreferencesPage.tsx
+++ b/gui/src/renderer/containers/PreferencesPage.tsx
@@ -44,7 +44,6 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
     setMonochromaticIcon: (monochromaticIcon: boolean) => {
       props.app.setMonochromaticIcon(monochromaticIcon);
     },
-    enableMonochromaticIconToggle: process.platform === 'darwin',
   };
 };