Baltrust/Vesktop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added static icon link, improved tray settings css

Browse source
This commit is contained in:
MrGarlic 2024-05-06 22:41:22 -04:00
parent 921e15b5a6
commit d664a483bb
2 changed files with 62 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,24 +6,24 @@
import { Forms, Switch, Toasts } from "@vencord/types/webpack/common"; import { Forms, Switch, Toasts } from "@vencord/types/webpack/common";
import { Settings } from "renderer/settings"; import { Settings } from "renderer/settings";
import { STATIC_DIR } from "shared/paths";
import { SettingsComponent } from "./Settings"; import { SettingsComponent } from "./Settings";
export const TrayIconImagePicker: SettingsComponent = ({ settings }) => { export const TrayIconImagePicker: SettingsComponent = ({ settings }) => {
return ( return (
<> <>
<div id="tray-setting"> <div id="vcd-tray-setting">
<div id="colLeft"> <div className="vcd-tray-setting-switch">
<Switch <Switch
key="tray" key="tray"
value={Settings.store.tray ?? false} value={Settings.store.tray ?? false}
onChange={v => (Settings.store.tray = v)} onChange={v => (Settings.store.tray = v)}
note={"Add a tray icon for Vesktop"} note={"Add a tray icon for Vesktop"}
> >
{"Tray Icon"} Tray Icon
</Switch> </Switch>
</div> </div>
<div id="colMiddle"> <div className="vcd-tray-setting-reset">
<Forms.FormText> <Forms.FormText>
<a <a
href="about:blank" href="about:blank"
@ -36,36 +36,36 @@ export const TrayIconImagePicker: SettingsComponent = ({ settings }) => {
</a> </a>
</Forms.FormText> </Forms.FormText>
</div> </div>
<div id="colRight"> <div className="vcd-tray-icon-wrap">
<div className="tray-icon-wrap"> <img
<img className="vcd-tray-icon-image"
className="tray-icon-image" src={VesktopNative.tray.getTrayIcon()}
src={VesktopNative.tray.getTrayIcon()} alt="hello"
alt="hello" width="48"
width="48" height="48"
height="48" ></img>
></img> <input
<input className="vcd-edit-button"
className="edit-button" type="image"
type="image" src="https://raw.githubusercontent.com/Vencord/Vesktop/main/static/pencil-edit-icon.svg"
src="https://cdn.discordapp.com/attachments/895550066453012480/1236925384482619433/I1oxwE7.png?ex=6639c808&is=66387688&hm=5c5f47a0c06b2e0580fd5494386bfbeebc001c20e3fd64f26783f360b12162ed&" width="40"
onClick={async () => { height="40"
const choice = await VesktopNative.fileManager.selectTrayIcon(); onClick={async () => {
switch (choice) { const choice = await VesktopNative.fileManager.selectTrayIcon();
case "cancelled": switch (choice) {
return; case "cancelled":
case "invalid": return;
Toasts.show({ case "invalid":
message: "Please select a valid .png or .jpg image!", Toasts.show({
id: Toasts.genId(), message: "Please select a valid .png or .jpg image!",
type: Toasts.Type.FAILURE id: Toasts.genId(),
}); type: Toasts.Type.FAILURE
return; });
} return;
settings.trayIconPath = choice; }
}} settings.trayIconPath = choice;
/> }}
</div> />
</div> </div>
</div> </div>
</> </>

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

@ -13,20 +13,40 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.tray-icon-wrap { #vcd-tray-setting {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.vcd-tray-setting-switch {
flex-grow: 1;
align-self: flex-start;
margin-right: 20rem;
}
.vcd-tray-setting-reset {
align-self: right;
position: relative; position: relative;
top: 0; margin-left: auto;
right: 0; margin-right: 1em;
bottom: 24px;
} }
.tray-icon-image { .vcd-tray-icon-wrap {
position: relative;
align-self: right;
bottom: 24px;
}
.vcd-tray-icon-image {
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
top: 0; top: 0;
right: 0; right: 0;
} }
.edit-button { .vcd-edit-button {
visibility: visible; visibility: visible;
display: block; display: block;
opacity: 0; opacity: 0;
@ -35,38 +55,13 @@
left: 4px; left: 4px;
} }
.tray-icon-wrap:hover .tray-icon-image { .vcd-tray-icon-wrap:hover .vcd-tray-icon-image {
transition: 0.3s ease; transition: 0.3s ease;
background-color: rgb(0, 0, 0) no-repeat; background-color: rgb(0, 0, 0) no-repeat;
opacity: 0.25; opacity: 0.25;
} }
.tray-icon-wrap:hover .edit-button { .vcd-tray-icon-wrap:hover .vcd-edit-button {
transition: 0.3s ease; transition: 0.3s ease;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
#tray-setting {
height: 48px;
position: relative;
}
#colLeft {
height: 48px;
display: inline-block;
width: 40%;
}
#colMiddle {
height: 48px;
float: center;
display: inline-block;
position: relative;
left: 45%;
}
#colRight {
height: 48px;
display: inline;
float: right;
position: absolute;
top: -12px;
right: 0;
}