mirror/Vesktop
1
0
Fork 1
mirror of https://github.com/Vencord/Vesktop.git synced 2025-02-24 14:15:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

improved tray icon setting UI

Browse source
This commit is contained in:
MrGarlic 2024-05-06 03:10:19 -04:00
parent 3e5783e18a
commit 7713a46394
7 changed files with 144 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/main/ipc.ts
View file

@ -12,6 +12,7 @@ import { mkdirSync, readFileSync, watch } from "fs";
import { open, readFile } from "fs/promises";
import { release } from "os";
import { join } from "path";
import { ICON_PATH } from "shared/paths";
import { debounce } from "shared/utils/debounce";
import { IpcEvents } from "../shared/IpcEvents";
@ -41,6 +42,19 @@ handleSync(
() => process.platform === "win32" && Number(release().split(".").pop()) >= 22621
);
handleSync(IpcEvents.GET_TRAY_ICON, () => {
try {
if (!Settings.store.trayIconPath) return nativeImage.createFromPath(ICON_PATH).toDataURL();
const img = nativeImage.createFromPath(Settings.store.trayIconPath).resize({ width: 64, height: 64 });
if (img.isEmpty()) return nativeImage.createFromPath(ICON_PATH).toDataURL();
return img.toDataURL();
} catch (error) {
return "no";
}
});
handleSync(IpcEvents.AUTOSTART_ENABLED, () => autoStart.isEnabled());
handle(IpcEvents.ENABLE_AUTOSTART, autoStart.enable);
handle(IpcEvents.DISABLE_AUTOSTART, autoStart.disable);
@ -124,13 +138,13 @@ handle(IpcEvents.SELECT_VENCORD_DIR, async () => {
handle(IpcEvents.SELECT_TRAY_ICON, async () => {
const res = await dialog.showOpenDialog(mainWin!, {
properties: ["openFile"],
filters: [{name: "Image", extensions: ["png", "jpg"]}]
filters: [{ name: "Image", extensions: ["png", "jpg"] }]
});
if (!res.filePaths.length) return "cancelled";
const dir = res.filePaths[0];
const image = nativeImage.createFromPath(dir);
if(image.isEmpty()) return "invalid";
if (image.isEmpty()) return "invalid";
return dir;
});

5
src/main/mainWindow.ts
View file

@ -11,8 +11,8 @@ import {
dialog,
Menu,
MenuItemConstructorOptions,
nativeTheme,
nativeImage,
nativeTheme,
Tray
} from "electron";
import { rm } from "fs/promises";
@ -21,6 +21,7 @@ import { IpcEvents } from "shared/IpcEvents";
import { isTruthy } from "shared/utils/guards";
import { once } from "shared/utils/once";
import type { SettingsStore } from "shared/utils/SettingsStore";
import { ICON_PATH } from "../shared/paths";
import { createAboutWindow } from "./about";
import { initArRPC } from "./arrpc";
@ -123,7 +124,7 @@ function initTray(win: BrowserWindow) {
tray = new Tray(ICON_PATH);
if (Settings.store.trayIconPath) {
const trayImage = nativeImage.createFromPath(Settings.store.trayIconPath);
if (!trayImage.isEmpty()) tray.setImage(trayImage.resize({width: 32, height: 32}));
if (!trayImage.isEmpty()) tray.setImage(trayImage.resize({ width: 32, height: 32 }));
}
tray.setToolTip("Vesktop");

3
src/preload/VesktopNative.ts
View file

@ -57,6 +57,9 @@ export const VesktopNative = {
minimize: () => invoke<void>(IpcEvents.MINIMIZE),
maximize: () => invoke<void>(IpcEvents.MAXIMIZE)
},
tray: {
getTrayIcon: () => sendSync<string>(IpcEvents.GET_TRAY_ICON)
},
capturer: {
getLargeThumbnail: (id: string) => invoke<string>(IpcEvents.CAPTURER_GET_LARGE_THUMBNAIL, id)
},

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

@ -14,8 +14,8 @@ import { isMac, isWindows } from "renderer/utils";
import { AutoStartToggle } from "./AutoStartToggle";
import { DiscordBranchPicker } from "./DiscordBranchPicker";
import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
import { VencordLocationPicker } from "./VencordLocationPicker";
import { TrayIconImagePicker } from "./TrayIconImagePicker";
import { VencordLocationPicker } from "./VencordLocationPicker";
import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
interface BooleanSetting {
@ -69,13 +69,6 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
WindowsTransparencyControls
],
Behaviour: [
{
key: "tray",
title: "Tray Icon",
description: "Add a tray icon for Vesktop",
defaultValue: true,
invisible: () => isMac
},
{
key: "minimizeToTray",
title: "Minimize to tray",
@ -128,7 +121,7 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
}
],
"Tray Icon Image": [TrayIconImagePicker],
"Vencord Location": [VencordLocationPicker],
"Vencord Location": [VencordLocationPicker]
};
function SettingsSections() {

101
src/renderer/components/settings/TrayIconImagePicker.tsx
View file

@ -4,58 +4,69 @@
* Copyright (c) 2023 Vendicated and Vencord contributors
*/
import { Button, Forms, Toasts } from "@vencord/types/webpack/common";
import { Forms, Switch, Toasts } from "@vencord/types/webpack/common";
import { Settings } from "renderer/settings";
import { SettingsComponent } from "./Settings";
export const TrayIconImagePicker: SettingsComponent = ({ settings }) => {
return (
<>
<Forms.FormText>
Tray icon is currently {" "}
{settings.trayIconPath ? (
<a
href="about:blank"
onClick={e => {
e.preventDefault();
VesktopNative.fileManager.showItemInFolder(settings.trayIconPath!);
}}
<div id="tray-setting">
<div id="colLeft">
<Switch
key="tray"
value={Settings.store.tray ?? false}
onChange={v => (Settings.store.tray = v)}
note={"Add a tray icon for Vesktop"}
>
{settings.trayIconPath}
</a>
) : (
"the default location"
)}
</Forms.FormText>
<div className="vcd-location-btns">
<Button
size={Button.Sizes.SMALL}
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;
}
settings.trayIconPath = choice;
}}
>
Change
</Button>
<Button
size={Button.Sizes.SMALL}
color={Button.Colors.RED}
onClick={() => (settings.trayIconPath = void 0)}
>
Reset
</Button>
{"Tray Icon"}
</Switch>
</div>
<div id="colMiddle">
<Forms.FormText>
<a
href="about:blank"
onClick={e => {
e.preventDefault();
settings.trayIconPath = void 0;
}}
>
Reset
</a>
</Forms.FormText>
</div>
<div id="colRight">
<div className="tray-icon-wrap">
<img
className="tray-icon-image"
src={VesktopNative.tray.getTrayIcon()}
alt="hello"
width="48"
height="48"
></img>
<input
className="edit-button"
type="image"
src="https://cdn.discordapp.com/attachments/895550066453012480/1236925384482619433/I1oxwE7.png?ex=6639c808&is=66387688&hm=5c5f47a0c06b2e0580fd5494386bfbeebc001c20e3fd64f26783f360b12162ed&"
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;
}
settings.trayIconPath = choice;
}}
/>
</div>
</div>
</div>
</>
);

58
src/renderer/components/settings/settings.css
View file

@ -12,3 +12,61 @@
.vcd-settings-title {
margin-bottom: 0.5rem;
}
.tray-icon-wrap {
position: relative;
top: 0;
right: 0;
}
.tray-icon-image {
border-radius: 50%;
position: relative;
top: 0;
right: 0;
}
.edit-button {
visibility: visible;
display: block;
opacity: 0;
position: absolute;
top: 4px;
left: 4px;
}
.tray-icon-wrap:hover .tray-icon-image {
transition: 0.3s ease;
background-color: rgb(0, 0, 0) no-repeat;
opacity: 0.25;
}
.tray-icon-wrap:hover .edit-button {
transition: 0.3s ease;
visibility: visible;
opacity: 1;
}
#tray-setting {
height: 48px;
position: relative;
}
#colLeft {
height: 48px;
display: inline-block;
width: 40%;
}
#colMiddle {
height: 48px;
float: center;
display: inline;
position: relative;
left: 45%;
}
#colRight {
height: 48px;
display: inline;
float: right;
position: absolute;
top: -12px;
right: 0;
}

2
src/shared/IpcEvents.ts
View file

@ -24,7 +24,9 @@ export const enum IpcEvents {
SET_SETTINGS = "VCD_SET_SETTINGS",
SELECT_VENCORD_DIR = "VCD_SELECT_VENCORD_DIR",
SELECT_TRAY_ICON = "VCD_SELECT_TRAY_ICON",
GET_TRAY_ICON = "VCD_GET_TRAY_ICON",
UPDATER_GET_DATA = "VCD_UPDATER_GET_DATA",
UPDATER_DOWNLOAD = "VCD_UPDATER_DOWNLOAD",