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

ui: modal for picking custom tray icons

Browse source
This commit is contained in:
Oleh Polisan 2024-06-20 12:33:39 +03:00
parent 871054fd8e
commit 85f427fed3
9 changed files with 224 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/main/ipc.ts
View file

@ -28,8 +28,9 @@ import { IpcEvents } from "../shared/IpcEvents";
import { setBadgeCount } from "./appBadge";
import { autoStart } from "./autoStart";
import { VENCORD_FILES_DIR, VENCORD_QUICKCSS_FILE, VENCORD_THEMES_DIR } from "./constants";
import { createTrayIcon, generateTrayIcons, getTrayIconFile, mainWin, setTrayIcon } from "./mainWindow";
import { mainWin, setTrayIcon } from "./mainWindow";
import { Settings } from "./settings";
import { createTrayIcon, generateTrayIcons, getTrayIconFile, getTrayIconFileSync, pickTrayIcon } from "./tray";
import { handle, handleSync } from "./utils/ipcWrappers";
import { PopoutWindows } from "./utils/popout";
import { isDeckGameMode, showGamePage } from "./utils/steamOS";
@ -162,6 +163,8 @@ watch(
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, () => `#${systemPreferences.getAccentColor?.() || ""}`);
handle(IpcEvents.CREATE_TRAY_ICON_RESPONSE, (_, iconName, dataURL) => createTrayIcon(iconName, dataURL));
handle(IpcEvents.GENERATE_TRAY_ICONS, () => generateTrayIcons());
handle(IpcEvents.SELECT_TRAY_ICON, async (_, iconName) => pickTrayIcon(iconName));

35
src/main/mainWindow.ts
View file

@ -16,9 +16,8 @@ import {
session,
Tray
} from "electron";
import { mkdirSync, writeFileSync } from "fs";
import { readFile, rm } from "fs/promises";
import { join, parse } from "path";
import { rm } from "fs/promises";
import { join } from "path";
import { IpcEvents } from "shared/IpcEvents";
import { isTruthy } from "shared/utils/guards";
import { once } from "shared/utils/once";
@ -39,6 +38,7 @@ import {
} from "./constants";
import { Settings, State, VencordSettings } from "./settings";
import { createSplashWindow } from "./splash";
import { generateTrayIcons } from "./tray";
import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
import { applyDeckKeyboardFix, askToApplySteamLayout, isDeckGameMode } from "./utils/steamOS";
import { downloadVencordFiles, ensureVencordFiles } from "./utils/vencordLoader";
@ -516,32 +516,3 @@ export async function setTrayIcon(iconName: string) {
}
tray.setImage(join(STATIC_DIR, "icon.png"));
}
export async function getTrayIconFile(iconPath: string) {
const Icons = new Set(["speaking", "muted", "deafened", "idle"]);
if (!Icons.has(parse(iconPath).name)) {
iconPath = "icon";
return readFile(join(STATIC_DIR, "icon.png"));
}
return readFile(iconPath, "utf8");
}
export async function createTrayIcon(iconName: string, iconDataURL: string) {
// 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,/, "");
writeFileSync(join(DATA_DIR, "TrayIcons", iconName + ".png"), iconDataURL, "base64");
mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
}
export async function generateTrayIcons(force = false) {
// this function generates tray icons as .png's in Vesktop cache for future use
mkdirSync(join(DATA_DIR, "TrayIcons"), { recursive: true });
if (force || !Settings.store.trayCustom) {
const Icons = ["speaking", "muted", "deafened", "idle"];
for (const icon of Icons) {
mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, join(STATIC_DIR, icon + ".svg"));
}
}
mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
}

72
src/main/tray.ts Normal file
View file

@ -0,0 +1,72 @@
/*
* SPDX-License-Identifier: GPL-3.0
* Vesktop, a desktop app aiming to give you a snappier Discord Experience
* Copyright (c) 2023 Vendicated and Vencord contributors
*/
import { dialog, nativeImage } from "electron";
import { copyFileSync, mkdirSync, writeFileSync } from "fs";
import { readFile } from "fs/promises";
import { join } from "path";
import { IpcEvents } from "shared/IpcEvents";
import { STATIC_DIR } from "shared/paths";
import { DATA_DIR } from "./constants";
import { mainWin } from "./mainWindow";
import { Settings } from "./settings";
export async function getTrayIconFile(iconName: string) {
const Icons = new Set(["speaking", "muted", "deafened", "idle"]);
if (!Icons.has(iconName)) {
iconName = "icon";
return readFile(join(STATIC_DIR, "icon.png"));
}
return readFile(join(STATIC_DIR, iconName + ".svg"), "utf8");
}
export function getTrayIconFileSync(iconName: string) {
// returns dataURL of image from TrayIcons folder
const Icons = new Set(["speaking", "muted", "deafened", "idle", "icon"]);
if (Icons.has(iconName)) {
const img = nativeImage
.createFromPath(join(DATA_DIR, "TrayIcons", iconName + ".png"))
.resize({ width: 128, height: 128 });
if (img.isEmpty())
return nativeImage.createFromPath(join(DATA_DIR, "TrayIcons", iconName + ".png")).toDataURL();
return img.toDataURL();
}
}
export async function createTrayIcon(iconName: string, iconDataURL: string) {
// 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,/, "");
writeFileSync(join(DATA_DIR, "TrayIcons", iconName + ".png"), iconDataURL, "base64");
mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
}
export async function generateTrayIcons(force = false) {
// this function generates tray icons as .png's in Vesktop cache for future use
mkdirSync(join(DATA_DIR, "TrayIcons"), { recursive: true });
if (force || !Settings.store.trayCustom) {
const Icons = ["speaking", "muted", "deafened", "idle"];
for (const icon of Icons) {
mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, icon);
}
}
mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
}
export async function pickTrayIcon(iconName: string) {
const res = await dialog.showOpenDialog(mainWin!, {
properties: ["openFile"],
filters: [{ name: "Image", extensions: ["png", "jpg"] }]
});
if (!res.filePaths.length) return "cancelled";
const dir = res.filePaths[0];
// add .svg !!
const image = nativeImage.createFromPath(dir);
if (image.isEmpty()) return "invalid";
copyFileSync(dir, join(DATA_DIR, "TrayIcons", iconName + ".png"));
return dir;
}

6
src/preload/VesktopNative.ts
View file

@ -35,7 +35,8 @@ export const VesktopNative = {
},
fileManager: {
showItemInFolder: (path: string) => invoke<void>(IpcEvents.SHOW_ITEM_IN_FOLDER, path),
selectVencordDir: () => invoke<LiteralUnion<"cancelled" | "invalid", string>>(IpcEvents.SELECT_VENCORD_DIR)
selectVencordDir: () => invoke<LiteralUnion<"cancelled" | "invalid", string>>(IpcEvents.SELECT_VENCORD_DIR),
selectTrayIcon: () => invoke<LiteralUnion<"cancelled" | "invalid", string>>(IpcEvents.SELECT_TRAY_ICON)
},
settings: {
get: () => sendSync<Settings>(IpcEvents.GET_SETTINGS),
@ -82,7 +83,8 @@ export const VesktopNative = {
},
tray: {
setIcon: (iconURI: string) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),
getIcon: (iconPath: string) => invoke<string>(IpcEvents.GET_TRAY_ICON, iconPath),
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) =>
invoke<void>(IpcEvents.CREATE_TRAY_ICON_RESPONSE, iconName, iconDataURL),
createIconRequest: (listener: (iconName: string) => void) => {

2
src/renderer/components/settings/Settings.tsx
View file

@ -14,7 +14,7 @@ import { isMac, isWindows } from "renderer/utils";
import { AutoStartToggle } from "./AutoStartToggle";
import { DiscordBranchPicker } from "./DiscordBranchPicker";
import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
import { TrayFillColorSwitch, TrayIconPicker, TraySwitch, CustomizeTraySwitch } from "./TraySettings";
import { CustomizeTraySwitch, TrayFillColorSwitch, TrayIconPicker, TraySwitch } from "./TraySettings";
import { VencordLocationPicker } from "./VencordLocationPicker";
import { WindowsTransparencyControls } from "./WindowsTransparencyControls";

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

@ -6,15 +6,17 @@
import "./traySetting.css";
import { Margins } from "@vencord/types/utils";
import { findByCodeLazy } from "@vencord/types/webpack";
import { Forms, Select, Switch } from "@vencord/types/webpack/common";
import { Margins, Modals, ModalSize, openModal } from "@vencord/types/utils";
import { findByCodeLazy, findByPropsLazy } from "@vencord/types/webpack";
import { Forms, Select, Switch, Toasts } from "@vencord/types/webpack/common";
import { setCurrentTrayIcon } from "renderer/patches/tray";
import { useSettings } from "renderer/settings";
import { isLinux, isMac } from "renderer/utils";
import { SettingsComponent } from "./Settings";
const ColorPicker = findByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");
const { PencilIcon } = findByPropsLazy("PencilIcon");
const presets = [
"#3DB77F", // discord default ~
@ -33,6 +35,110 @@ if (!isLinux)
if (color) presets.unshift(color);
});
function trayEditButton(iconName: string) {
return (
<div className="vcd-tray-icon-wrap">
<img
className="vcd-tray-icon-image"
src={VesktopNative.tray.getIconSync(iconName)}
alt="read if cute :3"
width="48"
height="48"
></img>
<PencilIcon
className="vcd-edit-button"
width="40"
height="40"
onClick={async () => {
const choice = await VesktopNative.fileManager.selectTrayIcon();
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;
}
console.log("choice:", choice);
// copy image and reload
// settings.trayIconPath = choice;
}}
/>
</div>
);
}
function TrayModalComponent({ modalProps, close }: { modalProps: any; close: () => void }) {
const Settings = useSettings();
return (
<Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
<Modals.ModalHeader className="vcd-custom-tray-header">
<Forms.FormTitle tag="h2">Custom Tray Icons</Forms.FormTitle>
<Modals.ModalCloseButton onClick={close} />
</Modals.ModalHeader>
<Modals.ModalContent className="vcd-custom-tray-modal">
<Switch
hideBorder
value={Settings.trayCustom ?? false}
onChange={async v => {
Settings.trayCustom = v;
}}
note="Whether to use custom tray icons"
>
Custom Tray Icons
</Switch>
<Forms.FormDivider className={Margins.top8} />
<Forms.FormSection className="vcd-custom-tray-icon-section">
<Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
Main icon
</Forms.FormText>
{trayEditButton("icon")}
</Forms.FormSection>
<Forms.FormDivider className={(Margins.top8, Margins.bottom8)} />
<Forms.FormSection className="vcd-custom-tray-icon-section">
<Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
Idle icon
</Forms.FormText>
{trayEditButton("idle")}
</Forms.FormSection>
<Forms.FormDivider className={(Margins.top8, Margins.bottom8)} />
<Forms.FormSection className="vcd-custom-tray-icon-section">
<Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
Speaking icon
</Forms.FormText>
{trayEditButton("speaking")}
</Forms.FormSection>
<Forms.FormDivider className={(Margins.top8, Margins.bottom8)} />
<Forms.FormSection className="vcd-custom-tray-icon-section">
<Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
Muted icon
</Forms.FormText>
{trayEditButton("muted")}
</Forms.FormSection>
<Forms.FormDivider className={(Margins.top8, Margins.bottom8)} />
<Forms.FormSection className="vcd-custom-tray-icon-section">
<Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
Deafened icon
</Forms.FormText>
{trayEditButton("deafened")}
</Forms.FormSection>
</Modals.ModalContent>
<Modals.ModalFooter></Modals.ModalFooter>
</Modals.ModalRoot>
);
}
const openTrayModal = () => {
const key = openModal(props => <TrayModalComponent modalProps={props} close={() => props.onClose()} />);
};
export const TraySwitch: SettingsComponent = ({ settings }) => {
if (isMac) return null;
return (
@ -71,7 +177,7 @@ export const CustomizeTraySwitch: SettingsComponent = ({ settings }) => {
href="about:blank"
onClick={e => {
e.preventDefault();
// Bring up modal here
openTrayModal();
}}
>
Configure

29
src/renderer/components/settings/traySetting.css
View file

@ -35,8 +35,7 @@
.vcd-tray-icon-wrap {
position: relative;
align-self: right;
bottom: 24px;
align-self: end;
}
.vcd-tray-icon-image {
@ -48,11 +47,10 @@
.vcd-edit-button {
visibility: visible;
display: block;
opacity: 0;
position: absolute;
top: 3px;
left: 4px;
top: 0.5em;
left: 0.7em;
}
.vcd-tray-icon-wrap:hover .vcd-tray-icon-image {
@ -65,3 +63,24 @@
visibility: visible;
opacity: 1;
}
.vcd-custom-tray-header h1 {
margin: 0;
}
.vcd-custom-tray-modal {
padding: 1em;
}
.vcd-custom-tray-icon-section {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.vcd-custom-tray-icon-form-text {
font-size: medium;
}

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

@ -25,12 +25,12 @@ export function setCurrentTrayIcon() {
}
}
VesktopNative.tray.createIconRequest(async (iconPath: string) => {
VesktopNative.tray.createIconRequest(async (iconName: string) => {
const pickedColor = VesktopNative.settings.get().trayColor;
const fillColor = VesktopNative.settings.get().trayAutoFill ?? "auto";
try {
var svg = await VesktopNative.tray.getIcon(iconPath);
var svg = await VesktopNative.tray.getIcon(iconName);
svg = svg.replace(/#f6bfac/gim, "#" + (pickedColor ?? "3DB77F"));
if (fillColor !== "auto") {
svg = svg.replace(/black/gim, fillColor);
@ -47,9 +47,7 @@ VesktopNative.tray.createIconRequest(async (iconPath: string) => {
if (ctx) {
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL("image/png");
const fileNameExt = iconPath.replace(/^.*[\\/]/, "");
const fileName = fileNameExt.substring(0, fileNameExt.lastIndexOf("."));
VesktopNative.tray.createIconResponse(fileName, dataURL);
VesktopNative.tray.createIconResponse(iconName, dataURL);
}
};
img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;

4
src/shared/IpcEvents.ts
View file

@ -53,9 +53,11 @@ export const enum IpcEvents {
SET_TRAY_ICON = "VCD_SET_TRAY_ICON",
GET_TRAY_ICON = "VCD_GET_TRAY_ICON",
GET_TRAY_ICON_SYNC = "VCD_GET_TRAY_ICON_SYNC",
CREATE_TRAY_ICON_REQUEST = "VCD_CREATE_TRAY_ICON_REQUEST",
CREATE_TRAY_ICON_RESPONSE = "VCD_CREATE_TRAY_ICON_RESPONSE",
GENERATE_TRAY_ICONS = "VCD_GENERATE_TRAY_ICONS",
SET_CURRENT_VOICE_TRAY_ICON = "VCD_SET_CURRENT_VOICE_ICON",
GET_SYSTEM_ACCENT_COLOR = "VCD_GET_ACCENT_COLOR"
GET_SYSTEM_ACCENT_COLOR = "VCD_GET_ACCENT_COLOR",
SELECT_TRAY_ICON = "VCD_SELECT_TRAY_ICON"
}