Monochrome Logos

[albakhtari]

These are the monochrome versions of the logo, I did this due to #214

[albakhtari]

Maybe we could add an option like this :point_down: in the WALC dashboard?

[albakhtari]

Okay, I'm working making that happen:

But there's a small issue, when I start WALC, the icon changes to the correct one, but after the "Whatsapp Client is ready message is displayed, it changes back to the normal coloured logo.

I can't seem to figure out why that happens, if you have time @Zzombiee2361 to drop a hint, I'd be very grateful.

[Zzombiee2361]

There's already a monochrome icon, instead of copying it, I think it's better to just link it. You should make dashboard.png and .svg a link to mono_logo.png and .svg respectively.

Also, you don't need multiple sizes of the icon, those are only required for manifests and .desktop file. You won't need to list the monochrome icon there. Just make one 512x512 png image for each light and dark icon

[Zzombiee2361]

As for the icon change, it's because actually after initializing the tray with that image, the tray icon is actually rendered from the BrowserWindow to overlay the icon with badge number, and it get it's icon by invoking getIcon ipc

https://github.com/WAClient/WALC/blob/05fc7d96136c8b12e580231066fbc116e7d61747/src/Renderer/App.js#L49 https://github.com/WAClient/WALC/blob/05fc7d96136c8b12e580231066fbc116e7d61747/src/main.js#L154-L156

I strongly recommend you just left the handler in main.js there and instead make a new getTrayIcon ipc in TrayManager.js to make the logic stay in one place.

[albakhtari]

Thanks for the tips @Zzombiee2361

There's already a monochrome icon

The dashboard icon is slightly different

[Zzombiee2361]

Why is the file so big? 1 MB of monochrome logo compared to 67 KB current colorful 512px logo.

Also, you can make the setting not require a restart. Just trigger a rerender when the settings change like so

settings.onDidChange('trayIcon.iconType', () => {
    this.win.webContents.send('renderTray');
});

[albakhtari]

I didn't realise it was that big, I'll look at it now.

[albakhtari]

I added that to TrayManager.js:

module.exports = class TrayManager {
    constructor() {
        this.tray = null;

        ipcMain.on('renderTray', (event, data) => {
            if(settings.get('trayIcon.enabled.value')) {
                const img = nativeImage.createFromDataURL(data);
                this.tray.setImage(img);
            }
        });

        settings.onDidChange('trayIcon.enabled', (value) => {
            if(value && !this.tray) {
                this.init();
            } else if(!value && this.tray) {
                this.setVisibility(true, false);
                this.destroy();
            }
        });

        settings.onDidChange('trayIcon.countMuted', () => {
            this.win.webContents.send('renderTray');
        });

        settings.onDidChange('trayIcon.iconType', () => {
            this.win.webContents.send('renderTray');
        });
    }
....

But that makes no difference, I still have to restart WALC for the icon to change....

Just to clarify, I have NO experience in electron+nodejs development - apart from the few lines that I added to WALC. I just thought that it would be nice to implement these ideas. I hope I'm not causing you a headache :grin:

[Zzombiee2361]

No, it's ok. I hope you can learn something out of these cursed codes I wrote.

Anyway, my mistake. You need to re-fetch the updated icon in the renderer first, then re-render the tray. So I guess you need to listen for the change from renderer.

// src/Renderer/App.js
async init() {
    ....

    Settings.onDidChange('trayIcon.iconType', async () => {
        this.icon = await ipcRenderer.invoke('getTrayIcon');
        this.renderTray();
    });

    console.log('WALC Initialized');
}

[albakhtari]

Thank you for the encouragement @Zzombiee2361!

I added that code, but that still didn't change. However, I was able to apply the icon change by disabling then enabling it again... But I guess that's just re-rendering the tray icon... I'll commit what I did so you can have a better look, in case I made a mistake.

[Zzombiee2361]

Hmm that's weird. I'll merge this and take a look for myself. Thank you for your contribution

[Zzombiee2361]

I fixed it but I noticed that the monochrome icons have different sizes. The light is larger and the dark is smaller.

Please adjust the sizes to follow the colorful icon and open a new pull request. Don't forget to pull the master branch first. Thank you