electron#Tray TypeScript Examples

createTray = () => {
    let iconPath = path.join(FileSystem.resources, "macos", "icons", "tray-icon-dark.png");
    if (!nativeTheme.shouldUseDarkColors)
        iconPath = path.join(FileSystem.resources, "macos", "icons", "tray-icon-light.png");

    // If the tray is already created, just change the icon color
    if (tray) {
        tray.setImage(iconPath);
        return;
    }

    try {
        tray = new Tray(iconPath);
        tray.setToolTip("BlueBubbles");
        tray.setContextMenu(buildTray());

        // Rebuild the tray each time it's clicked
        tray.on("click", () => {
            tray.setContextMenu(buildTray());
        });
    } catch (ex: any) {
        Server().log('Failed to load macOS tray entry!', 'error');
        Server().log(ex?.message ?? String(ex), 'debug');
    }
}

constructor(private readonly window: BrowserWindow, isDevelopement: boolean) {
    this.tunnels = [];
    this.isQuitting = false;

    const iconName = "icon_tray";
    const iconActiveName = "icon_tray_active";
    const isWin32 = process.platform === "win32";

    this.icon = nativeImage.createFromPath(getIconsPath(`${iconName}.${isWin32 ? "ico" : "png"}`, isDevelopement));
    this.iconActive = nativeImage.createFromPath(getIconsPath(`${iconActiveName}.${isWin32 ? "ico" : "png"}`, isDevelopement));

    this.tray = new Tray(this.icon);
    this.tray.setToolTip("Wire GUI");
    this.contextMenu = Menu.buildFromTemplate(this.mountTrayMenuItems());
    this.tray.setContextMenu(this.contextMenu);

    ipcMain.on("WgConfigStateChange", (event, args: TunnelInfo[]) => {
      this.tunnels = args;

      this.contextMenu = Menu.buildFromTemplate(this.mountTrayMenuItems());
      this.tray.setContextMenu(this.contextMenu);

      // When calling setContextMenu alongside setImage
      // For some reason electron reloads the tray image
      // With this hack this doesn't happen
      setTimeout(() => {
        this.tray.setImage(this.tunnels.some(tunnel => tunnel.active) ? this.iconActive : this.icon);
      }, 100);
    });

    window.on("close", (event) => {
      if (!this.isQuitting) {
        event.preventDefault();
        window.hide();
      }
      return false;
    });
  }

function initTray() {
  tray = new Tray(path.join(__static, 'assets/iyuu.png'))
  const contextMenu = Menu.buildFromTemplate([
    {
      label: '退出', click: () => {
        app.quit()
      }
    }
  ])

  tray.on('click', () => {
    win && win.show();
  })

  // Call this again for Linux because we modified the context menu
  tray.setContextMenu(contextMenu)
}

private initializeTray(): void {
    // Initialize Tray
    if (isMac) {
      const img = nativeImage.createFromPath(this.iconPath).resize({
        width: 16,
        height: 16,
      })
      img.setTemplateImage(true)
      this.tray = new Tray(img)
    } else {
      this.tray = new Tray(this.iconPath)
    }
    this.tray.setToolTip('开黑啦')
    this.tray.setContextMenu(Menu.buildFromTemplate(this.trayMenuTemplate))
    this.tray.on('click', (): void => {
      this.mainWindow.show()
    })
  }

// 设置顶部APP图标的操作和图标
export function setUpTray() {
  const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
  const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')

  tray = new Tray(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)

  const contextMenu = Menu.buildFromTemplate([
    {
      label: '打开Playground',
      click: () => {
        restoreMainWindow()
      },
    },
    {
      label: '退出',
      click: () => {
        app.quit()
      },
    },
  ])
  tray.setToolTip('Electron-Playground')
  tray.setContextMenu(contextMenu)

  nativeTheme.on('updated', () => {
    tray.setImage(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)
  })

  // windows下双击托盘图标打开app
  tray.on('double-click', () => {
    restoreMainWindow()
  })
}

createTray () {
    return new Promise((resolve, reject) => {
      if (this.tray && !this.tray.isDestroyed()) return;

      this.tray = new Tray(this.trayIcon);
      this.setLocaleTrayMenu();

      if (platform !== "linux") {
        this.tray.on("click", e => {
          if (this.win?.isVisible()) {
            this.win.hide();
          } else {
            this.show();
          }
        });
        this.tray.on("right-click", () => {
          this.tray?.popUpContextMenu(this.trayMenu ?? undefined);
        });
      } else {
        this.tray?.setContextMenu(this.trayMenu);
      }

      resolve(this.tray);
    });
  }

getBestWindowPosition = (win: BrowserWindow, tray: Tray) => {
  const winBounds = win.getBounds();
  const trayBounds = tray.getBounds();

  const trayScreen = screen.getDisplayNearestPoint({
    x: trayBounds.x,
    y: trayBounds.y
  });

  const workArea = trayScreen.workArea;
  const screenBounds = trayScreen.bounds;

  if (workArea.x > 0) {
    return {
      x: workArea.x,
      y: workArea.height - winBounds.height
    };
  }

  if (workArea.y > 0) {
    return {
      x: Math.round(trayBounds.x + trayBounds.width / 2 - winBounds.width / 2),
      y: workArea.y
    };
  }

  if (workArea.width < screenBounds.width) {
    return {
      x: workArea.width - winBounds.width,
      y: screenBounds.height - winBounds.height
    };
  }

  return {
    x: Math.round(trayBounds.x + trayBounds.width / 2 - winBounds.width / 2),
    y: workArea.height - winBounds.height
  };
}

private TrayIcon: Tray | null = null;

private tray: Electron.Tray;

private tray: Tray

tray: Tray | null

refreshTrayIcon = (tray: Tray, status: ConnectionStatus): void => {
    tray.setImage(trayIconPath(status))
}

createTray = (app: App, win: BrowserWindow): Tray => {
    const tray = new Tray(trayIconPath(ConnectionStatus.NOT_CONNECTED))
    tray.setContextMenu(
        Menu.buildFromTemplate([
            {
                label: "Show window",
                click: (): void => {
                    win.show()
                },
            },
            {
                type: "separator",
            },
            {
                label: "Check for updates",
                click: async (): Promise<void> => {
                    await autoUpdater.checkForUpdatesAndNotify()
                },
            },
            {
                label: "Repair supervisor",
                click: async (): Promise<void> => {
                    ipcWebDisconnect()
                    await supervisor.install()
                },
            },
            {
                type: "separator",
            },
            {
                role: "quit",
                label: `Quit ${packageJson.productName}`,
                accelerator: "CommandOrControl+Q",
                click: (): void => {
                    app.quit()
                },
            },
        ]),
    )
    tray.on("double-click", () => {
        if (platform() == "win32") {
            win.show()
        }
    })
    return tray
}

tray: Tray | null

function createTray(): void {
  // Put the app in system tray
  const iconPath = 'stratis/icon-16.png';
  let trayIcon;
  if (serve) {
    trayIcon = nativeImage.createFromPath('./src/assets/images/' + iconPath);
  } else {
    trayIcon = nativeImage.createFromPath(path.resolve(__dirname, '../../resources/src/assets/images/' + iconPath));
  }

  const systemTray = new Tray(trayIcon);
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Hide/Show',
      click: function (): void {
        mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
      }
    },
    {
      label: 'Exit',
      click: function (): void {
        app.quit();
      }
    }
  ]);
  systemTray.setToolTip(applicationName);
  systemTray.setContextMenu(contextMenu);
  systemTray.on('click', function () {
    if (!mainWindow.isVisible()) {
      mainWindow.show();
    }

    if (!mainWindow.isFocused()) {
      mainWindow.focus();
    }
  });

  app.on('window-all-closed', function () {
    if (systemTray) {
      systemTray.destroy();
    }
  });
}

tray: Tray

public async create() {
        
        if (!this.tray) {
            this.tray = new Tray(this.trayIcon);
            this.tray.setTitle('TUXEDO Control Center');
            this.tray.setToolTip('TUXEDO Control Center');
        }
    
        const profilesSubmenu: Object[] = this.state.profiles.map(profile => {
            // Creation of each profile selection submenu item
            return {
                label: profile.name,
                click: () => this.events.profileClick(profile.name),
                type: 'radio',
                checked: profile.name === this.state.activeProfile.name
            };
        });

        // Add profiles submenu "header"
        profilesSubmenu.unshift(
            { label: 'Activate profile temporarily', enabled: false },
            { type: 'separator' }
        );
    
        const contextMenu = Menu.buildFromTemplate([
            { label: 'TUXEDO Control Center', type: 'normal', click: () => this.events.startTCCClick() },
            {
                label: 'Profiles',
                submenu: profilesSubmenu,
                visible: this.state.profiles.length > 0
            },
            {
                    label: 'Tray autostart', type: 'checkbox', checked: this.state.isAutostartTrayInstalled,
                    click: () => this.events.autostartTrayToggle()
            },
            {
                label: 'Power save blocker',
                type: 'checkbox',
                click: () => { this.events.powersaveBlockerClick(); },
                checked: this.state.powersaveBlockerActive
            },
            { type: 'separator', visible: this.state.isPrimeSupported },
            {
                label: 'Graphics',
                visible: this.state.isPrimeSupported,
                submenu: [
                    {
                        label: 'Select NVIDIA',
                        type: 'normal',
                        click: () => this.events.selectNvidiaClick(),
                        visible: this.state.primeQuery !== 'on'
                    },
                    {
                        label: 'Select built-in',
                        type: 'normal',
                        click: () => this.events.selectBuiltInClick(),
                        visible: this.state.primeQuery !== 'off'
                    }
                ]
            },
            { type: 'separator' },
            { label: this.state.tccGUIVersion, type: 'normal', enabled: false },
            { type: 'separator' },
            { label: 'Exit', type: 'normal', click: () => this.events.exitClick() }
        ]);
        this.tray.setContextMenu(contextMenu);
    }

tray: Tray

_trayRef: Tray

private tray: Tray;

tray: Tray | null

function onReady() {
  createWindow();
  registerKeyboardShortcuts();
  app.whenReady().then(() => {
    tray = new Tray(
      nativeImage.createFromPath(iconPath).resize({width: 16, height: 16}),
    );

    const contextMenu = Menu.buildFromTemplate([
      {
        label: 'Show/Hide',
        type: 'normal',
        click: () => {
          toggleWindowVisibility();
        },
      },
      {
        label: 'Quit',
        type: 'normal',
        click: () => {
          isQuitting = true;
          app.quit();
        },
      },
    ]);

    tray.on('click', () => {
      if (process.platform !== 'darwin') {
        toggleWindowVisibility();
      }
    });

    tray.setToolTip('Ditto++');
    tray.setContextMenu(contextMenu);

    if (process.env.IS_Packaged) {
      app.setLoginItemSettings({
        openAtLogin: true,
        openAsHidden: true,
        args: [
          '--processStart',
          `"${exeName}"`,
          '--process-start-args',
          `"--hidden"`,
        ],
      });
    }

    ipcMain.on(GlobalEvents.ShowWindow, () => {
      showWindow();
    });

    ipcMain.on(GlobalEvents.HideWindow, () => {
      hideWindow();
    });
  });
}

export function createTray () {
  tray = new Tray(
    nativeImage.createFromPath(path.join(__dirname, process.env.STATIC!, process.platform === 'win32' ? 'icon.ico' : 'icon.png'))
  )

  tray.setToolTip('Awakened PoE Trade')
  rebuildTrayMenu()
}

tray: Tray

export function createTray(window: BrowserWindow, config: SystemTrayConfig): boolean {
  _trayRef?.destroy();

  console.log("Creating tray");
  const trayIconFile = platform.isMac ? WOWUP_LOGO_MAC_SYSTEM_TRAY : WOWUP_LOGO_FILENAME;
  const trayIconPath = path.join(__dirname, "..", "assets", trayIconFile);

  _trayRef = new Tray(trayIconPath);
  const contextMenu = Menu.buildFromTemplate([
    {
      label: app.name,
      type: "normal",
      enabled: false,
    },
    {
      label: config.showLabel || "Show",
      click: () => {
        restoreWindow(window);
      },
    },
    // Removing this for now per discussion with zak
    // {
    //   label: config.showLabel || "Check for Updates...",
    //   click: () => {
    //     checkForUpdates(window);
    //   },
    // },
    {
      label: config.quitLabel || "Quit",
      role: "quit",
    },
  ]);

  if (platform.isWin) {
    _trayRef.on("click", () => {
      restoreWindow(window);
    });
  }

  _trayRef.setToolTip("WowUp");
  _trayRef.setContextMenu(contextMenu);

  return true;
}

private TrayIcon: Tray | null = null;

tray: Tray | undefined

app.whenReady().then(function () {
	console.log('App ready')

	tryConnect()

	tray = new Tray(
		process.platform == 'darwin'
			? path.join(__dirname, '../assets', 'trayTemplate.png')
			: path.join(__dirname, '../assets', 'icon.png')
	)

	const menu = new Menu()
	menu.append(
		new MenuItem({
			label: 'Change Host',
			click: changeHost,
		})
	)
	menu.append(
		new MenuItem({
			label: 'Change Port',
			click: changePort,
		})
	)
	menu.append(
		new MenuItem({
			label: 'Scan devices',
			click: trayScanDevices,
		})
	)
	menu.append(
		new MenuItem({
			label: 'About',
			click: trayAbout,
		})
	)
	menu.append(
		new MenuItem({
			label: 'Quit',
			click: trayQuit,
		})
	)
	console.log('set tray')
	tray.setContextMenu(menu)
})

function createTray() {
    // Put the app in system tray
    let trayIcon;
    if (serve) {
        // During development, we can read the icon directly from src folder.
        trayIcon = nativeImage.createFromPath('./app.ico');
    } else {
        // This icon is manually included using "extraResources" on electron-builder.json.
        trayIcon = nativeImage.createFromPath(path.resolve(__dirname, '../../resources/app.ico'));
    }

    const systemTray = new Tray(trayIcon);

    const contextMenu = Menu.buildFromTemplate([
        {
            label: 'Hide/Show',
            click: () => {
                mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
            }
        },
        {
            label: 'Exit',
            click: () => {
                mainWindow.close();
            }
        }
    ]);

    systemTray.setToolTip(coin.tooltip);
    systemTray.setContextMenu(contextMenu);

    systemTray.on('click', () => {
        if (!mainWindow.isVisible()) {
            mainWindow.show();
        }

        if (!mainWindow.isFocused()) {
            mainWindow.focus();
        }
    });

    app.on('window-all-closed', () => {
        if (systemTray) {
            systemTray.destroy();
        }
    });
}