devproje/project-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: choose icon from .svg

Browse source
This commit is contained in:
Oleh Polisan 2024-06-22 14:09:47 +03:00
parent 79835b2f03
commit 183a388495
5 changed files with 61 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/main/ipc.ts
View file

@ -163,8 +163,8 @@ handle(IpcEvents.SET_TRAY_ICON, (_, iconURI) => setTrayIcon(iconURI));
handle(IpcEvents.GET_TRAY_ICON, (_, iconPath) => getTrayIconFile(iconPath));
handleSync(IpcEvents.GET_TRAY_ICON_SYNC, (_, iconPath) => getTrayIconFileSync(iconPath));
handle(IpcEvents.GET_SYSTEM_ACCENT_COLOR, () => getAccentColor());
handle(IpcEvents.CREATE_TRAY_ICON_RESPONSE, (_, iconName, dataURL, isCustomIcon) =>
createTrayIcon(iconName, dataURL, isCustomIcon)
handle(IpcEvents.CREATE_TRAY_ICON_RESPONSE, (_, iconName, dataURL, isCustomIcon, isSvg) =>
createTrayIcon(iconName, dataURL, isCustomIcon, isSvg)
);
handle(IpcEvents.GENERATE_TRAY_ICONS, () => generateTrayIcons());
handle(IpcEvents.SELECT_TRAY_ICON, async (_, iconName) => pickTrayIcon(iconName));

17
src/main/tray.ts
View file

@ -112,14 +112,19 @@ export function getTrayIconFileSync(iconName: string) {
}
}
export async function createTrayIcon(iconName: string, iconDataURL: string, isCustomIcon: boolean = false) {
export async function createTrayIcon(
iconName: string,
iconDataURL: string,
isCustomIcon: boolean = false,
isSvg: boolean = false
) {
// creates .png at config/TrayIcons/iconName.png from given iconDataURL
// primarily called from renderer using CREATE_TRAY_ICON_RESPONSE IPC call
iconDataURL = iconDataURL.replace(/^data:image\/png;base64,/, "");
if (isCustomIcon) {
const img = nativeImage.createFromDataURL(iconDataURL).resize({ width: 128, height: 128 });
// writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), img.toDataURL(), "base64");
writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), img.toPNG());
if (isSvg) writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), iconDataURL, "base64");
else writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), img.toPNG());
} else {
writeFileSync(join(ICONS_DIR, iconName + ".png"), iconDataURL, "base64");
}
@ -144,11 +149,15 @@ export async function pickTrayIcon(iconName: string) {
const res = await dialog.showOpenDialog(mainWin!, {
properties: ["openFile"],
filters: [{ name: "Image", extensions: ["png", "jpg"] }]
filters: [{ name: "Image", extensions: ["png", "jpg", "svg"] }]
});
if (!res.filePaths.length) return "cancelled";
const dir = res.filePaths[0];
// add .svg !!
if (dir.split(".").pop() === "svg") {
mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, iconName, readFileSync(dir, "utf-8"));
return "svg";
}
const image = nativeImage.createFromPath(dir);
if (image.isEmpty()) return "invalid";
const img = nativeImage.createFromPath(dir).resize({ width: 128, height: 128 });

14
src/preload/VesktopNative.ts
View file

@ -86,10 +86,16 @@ export const VesktopNative = {
setIcon: (iconURI: string) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),
getIcon: (iconName: string) => invoke<string>(IpcEvents.GET_TRAY_ICON, iconName),
getIconSync: (iconName: string) => sendSync<string>(IpcEvents.GET_TRAY_ICON_SYNC, iconName),
createIconResponse: (iconName: string, iconDataURL: string, isCustomIcon: boolean = true) =>
invoke<void>(IpcEvents.CREATE_TRAY_ICON_RESPONSE, iconName, iconDataURL, isCustomIcon),
createIconRequest: (listener: (iconName: string) => void) => {
ipcRenderer.on(IpcEvents.CREATE_TRAY_ICON_REQUEST, (_, iconPath: string) => listener(iconPath));
createIconResponse: (
iconName: string,
iconDataURL: string,
isCustomIcon: boolean = true,
isSvg: boolean = true
) => invoke<void>(IpcEvents.CREATE_TRAY_ICON_RESPONSE, iconName, iconDataURL, isCustomIcon, isSvg),
createIconRequest: (listener: (iconName: string, svg: string) => void) => {
ipcRenderer.on(IpcEvents.CREATE_TRAY_ICON_REQUEST, (_, iconPath: string, svg: string) =>
listener(iconPath, svg)
);
},
generateTrayIcons: () => invoke<void>(IpcEvents.GENERATE_TRAY_ICONS),
setCurrentVoiceIcon: (listener: (...args: any[]) => void) => {

73
src/renderer/components/settings/TraySettings.tsx
View file

@ -41,6 +41,36 @@ const statusToSettingsKey = {
deafened: { key: "trayDeafenedOverride", label: "Deafened Icon" }
};
async function changeIcon(iconName, settings) {
const choice = await VesktopNative.fileManager.selectTrayIcon(iconName);
switch (choice) {
case "cancelled":
return;
case "invalid":
Toasts.show({
message: "Please select a valid .png or .jpg image!",
id: Toasts.genId(),
type: Toasts.Type.FAILURE
});
return;
}
const updateIcon = () => {
const iconKey = statusToSettingsKey[iconName as keyof typeof statusToSettingsKey].key;
settings[iconKey] = true;
const iconDataURL = VesktopNative.tray.getIconSync(iconName);
const img = document.getElementById(iconName) as HTMLImageElement;
if (img) {
img.src = iconDataURL;
}
setCurrentTrayIcon();
};
// sometimes new icon may not be generated in time and will be used old icon :c
if (choice === "svg") setTimeout(updateIcon, 50);
else updateIcon();
}
function trayEditButton(iconName: string) {
const Settings = useSettings();
return (
@ -58,27 +88,7 @@ function trayEditButton(iconName: string) {
width="40"
height="40"
onClick={async () => {
const choice = await VesktopNative.fileManager.selectTrayIcon(iconName);
switch (choice) {
case "cancelled":
return;
case "invalid":
Toasts.show({
message: "Please select a valid .png or .jpg image!",
id: Toasts.genId(),
type: Toasts.Type.FAILURE
});
return;
}
const iconKey = statusToSettingsKey[iconName as keyof typeof statusToSettingsKey].key;
Settings[iconKey] = true;
const iconDataURL = VesktopNative.tray.getIconSync(iconName);
const img = document.getElementById(iconName) as HTMLImageElement;
if (img) {
img.src = iconDataURL;
}
setCurrentTrayIcon();
changeIcon(iconName, Settings);
}}
/>
</div>
@ -102,26 +112,7 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
{trayEditButton(iconName)}
<Button
onClick={async () => {
const choice = await VesktopNative.fileManager.selectTrayIcon(iconName);
switch (choice) {
case "cancelled":
return;
case "invalid":
Toasts.show({
message: "Please select a valid .png or .jpg image!",
id: Toasts.genId(),
type: Toasts.Type.FAILURE
});
return;
}
Settings[key] = true;
const iconDataURL = VesktopNative.tray.getIconSync(iconName);
const img = document.getElementById(iconName) as HTMLImageElement;
if (img) {
img.src = iconDataURL;
}
setCurrentTrayIcon();
changeIcon(iconName, Settings);
}}
look={Button.Looks.OUTLINED}
>

7
src/renderer/patches/tray.ts
View file

@ -39,9 +39,9 @@ function changeColorsInSvg(svg: string, stockColor: string) {
return svg;
}
VesktopNative.tray.createIconRequest(async (iconName: string) => {
VesktopNative.tray.createIconRequest(async (iconName: string, svgIcon: string = "") => {
try {
var svg = await VesktopNative.tray.getIcon(iconName);
var svg = svgIcon || (await VesktopNative.tray.getIcon(iconName));
svg = changeColorsInSvg(svg, "#f6bfac");
const canvas = document.createElement("canvas");
canvas.width = 128;
@ -54,7 +54,8 @@ VesktopNative.tray.createIconRequest(async (iconName: string) => {
if (ctx) {
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL("image/png");
VesktopNative.tray.createIconResponse(iconName, dataURL, false);
const isSvg = svgIcon !== "";
VesktopNative.tray.createIconResponse(iconName, dataURL, isSvg, isSvg); // custom if svgIcon is provided
}
};
img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;