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

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 { Settings } from "renderer/settings";
import { STATIC_DIR } from "shared/paths";
import { SettingsComponent } from "./Settings";
export const TrayIconImagePicker: SettingsComponent = ({ settings }) => {
return (
<>
<div id="tray-setting">
<div id="colLeft">
<div id="vcd-tray-setting">
<div className="vcd-tray-setting-switch">
<Switch
key="tray"
value={Settings.store.tray ?? false}
onChange={v => (Settings.store.tray = v)}
note={"Add a tray icon for Vesktop"}
>
{"Tray Icon"}
Tray Icon
</Switch>
</div>
<div id="colMiddle">
<div className="vcd-tray-setting-reset">
<Forms.FormText>
<a
href="about:blank"
@ -36,36 +36,36 @@ export const TrayIconImagePicker: SettingsComponent = ({ settings }) => {
</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 className="vcd-tray-icon-wrap">
<img
className="vcd-tray-icon-image"
src={VesktopNative.tray.getTrayIcon()}
alt="hello"
width="48"
height="48"
></img>
<input
className="vcd-edit-button"
type="image"
src="https://raw.githubusercontent.com/Vencord/Vesktop/main/static/pencil-edit-icon.svg"
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;
}
settings.trayIconPath = choice;
}}
/>
</div>
</div>
</>

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

@ -13,20 +13,40 @@
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;
top: 0;
right: 0;
margin-left: auto;
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%;
position: relative;
top: 0;
right: 0;
}
.edit-button {
.vcd-edit-button {
visibility: visible;
display: block;
opacity: 0;
@ -35,38 +55,13 @@
left: 4px;
}
.tray-icon-wrap:hover .tray-icon-image {
.vcd-tray-icon-wrap:hover .vcd-tray-icon-image {
transition: 0.3s ease;
background-color: rgb(0, 0, 0) no-repeat;
opacity: 0.25;
}
.tray-icon-wrap:hover .edit-button {
.vcd-tray-icon-wrap:hover .vcd-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-block;
position: relative;
left: 45%;
}
#colRight {
height: 48px;
display: inline;
float: right;
position: absolute;
top: -12px;
right: 0;
}