Tray icon (#1005)

* Tray icon #833 -- part 1 Signed-off-by: Roman <ixrock@gmail.com> * Tray icon #833 -- part 2 Signed-off-by: Roman <ixrock@gmail.com> * Tray icon #833 -- part 3 Signed-off-by: Roman <ixrock@gmail.com> * Tray icon #833 -- part 4 Signed-off-by: Roman <ixrock@gmail.com> * fix: lint / linux build failed Signed-off-by: Roman <ixrock@gmail.com> * allow to disable tray from preferences Signed-off-by: Roman <ixrock@gmail.com> * allow to tweak svg-icon before applying as tray-icon Signed-off-by: Roman <ixrock@gmail.com> * add checkbox indication, setActive workspace on cluster select Signed-off-by: Roman <ixrock@gmail.com> * fix build version (cannon find module 'react') Signed-off-by: Roman <ixrock@gmail.com> * - switching dark/light icon depending on os-x theme settings - optimization: don't re-create tray icon on menu udpates (avoid blinking) Signed-off-by: Roman <ixrock@gmail.com> * fix: refresh icon after turning on/off + switching dark-mode Signed-off-by: Roman <ixrock@gmail.com> * allow to close main window and re-open from dock or tray icon Signed-off-by: Roman <ixrock@gmail.com> * small fix Signed-off-by: Roman <ixrock@gmail.com> * fix: ensure main-window from global menu Signed-off-by: Roman <ixrock@gmail.com> * chore Signed-off-by: Roman <ixrock@gmail.com> * fix: hide traffic-light buttons for tray window Signed-off-by: Roman <ixrock@gmail.com> * removed redundant tray window Signed-off-by: Roman <ixrock@gmail.com> * removed delay from base-store Signed-off-by: Roman <ixrock@gmail.com> * adding cluster fix (reverted changes from master) Signed-off-by: Roman <ixrock@gmail.com> * - hide icon in dock when main-window closed (mac-os only) - added preferences checkbox to open app at system start-up Signed-off-by: Roman <ixrock@gmail.com> * handle quit app action from tray menu Signed-off-by: Roman <ixrock@gmail.com> * moved generating tray icons to build step Signed-off-by: Roman <ixrock@gmail.com> * Fix integration tests (#1080) * Fix integration tests Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> * Update integration/helpers/utils.ts Co-authored-by: Sebastian Malton <sebastian@malton.name> Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> Co-authored-by: Sebastian Malton <sebastian@malton.name> * fix-build: invisible app icon when there are more files within "build/icons/*.png" Signed-off-by: Roman <ixrock@gmail.com> * chore Signed-off-by: Roman <ixrock@gmail.com> * yarn i18n.extract Signed-off-by: Roman <ixrock@gmail.com> * clean-up Signed-off-by: Roman <ixrock@gmail.com> * navigation refactoring, move out `buildUrl` to common/utils so `react` and `react-router` not required as package.json dependecies in runtime (main) Signed-off-by: Roman <ixrock@gmail.com> * Ignore namespace query param on integration tests (#1109) Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> * merge-conflicts fixes Signed-off-by: Roman <ixrock@gmail.com> * support page fixes Signed-off-by: Roman <ixrock@gmail.com> * make eslint happy again Signed-off-by: Roman <ixrock@gmail.com> Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com> Co-authored-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2020-10-27 15:25:29 +02:00
1 parent e2a1bac0ed
commit 334815f71a
@@ -0,0 +1,51 @@
+// Generate tray icons from SVG to PNG + different sizes and colors (B&W)
+// Command: `yarn build:tray-icons`
+import path from "path"
+import sharp from "sharp";
+import jsdom from "jsdom"
+import fs from "fs-extra"
+
+export async function generateTrayIcon(
+  {
+    outputFilename = "tray_icon", // e.g. output tray_icon_dark@2x.png
+    svgIconPath = path.resolve(__dirname, "../src/renderer/components/icon/logo-lens.svg"),
+    outputFolder = path.resolve(__dirname, "./tray"),
+    dpiSuffix = "2x",
+    pixelSize = 32,
+    shouldUseDarkColors = false, // managed by electron.nativeTheme.shouldUseDarkColors
+  } = {}) {
+  outputFilename += shouldUseDarkColors ? "_dark" : ""
+  dpiSuffix = dpiSuffix !== "1x" ? `@${dpiSuffix}` : ""
+  const pngIconDestPath = path.resolve(outputFolder, `${outputFilename}${dpiSuffix}.png`)
+  try {
+    // Modify .SVG colors
+    const trayIconColor = shouldUseDarkColors ? "white" : "black";
+    const svgDom = await jsdom.JSDOM.fromFile(svgIconPath);
+    const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
+    svgRoot.innerHTML += `<style>* {fill: ${trayIconColor} !important;}</style>`
+    const svgIconBuffer = Buffer.from(svgRoot.outerHTML);
+
+    // Resize and convert to .PNG
+    const pngIconBuffer: Buffer = await sharp(svgIconBuffer)
+      .resize({ width: pixelSize, height: pixelSize })
+      .png()
+      .toBuffer();
+
+    // Save icon
+    await fs.writeFile(pngIconDestPath, pngIconBuffer);
+    console.info(`[DONE]: Tray icon saved at "${pngIconDestPath}"`);
+  } catch (err) {
+    console.error(`[ERROR]: ${err}`);
+  }
+}
+
+// Run
+const iconSizes: Record<string, number> = {
+  "1x": 16,
+  "2x": 32,
+  "3x": 48,
+};
+Object.entries(iconSizes).forEach(([dpiSuffix, pixelSize]) => {
+  generateTrayIcon({ dpiSuffix, pixelSize, shouldUseDarkColors: false });
+  generateTrayIcon({ dpiSuffix, pixelSize, shouldUseDarkColors: true });
+});