ui: changed to fit Discord
This commit is contained in:
parent
f1c210edb3
commit
f759fc0b71
2 changed files with 39 additions and 9 deletions
|
@ -97,21 +97,49 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
|
||||||
<Modals.ModalCloseButton onClick={close} />
|
<Modals.ModalCloseButton onClick={close} />
|
||||||
</Modals.ModalHeader>
|
</Modals.ModalHeader>
|
||||||
<Modals.ModalContent className="vcd-custom-tray-modal">
|
<Modals.ModalContent className="vcd-custom-tray-modal">
|
||||||
{Object.entries(statusToSettingsKey).map(([status, { key, label }]) => (
|
{Object.entries(statusToSettingsKey).map(([iconName, { key, label }]) => (
|
||||||
<div key={status}>
|
<div key={iconName}>
|
||||||
|
<Forms.FormTitle tag="h3">{label}</Forms.FormTitle>
|
||||||
<Forms.FormSection className="vcd-custom-tray-icon-section">
|
<Forms.FormSection className="vcd-custom-tray-icon-section">
|
||||||
<div className="vcd-custom-tray-icon-label">
|
{trayEditButton(iconName)}
|
||||||
{trayEditButton(status)}
|
<Button
|
||||||
<Forms.FormText>{label}</Forms.FormText>
|
onClick={async () => {
|
||||||
</div>
|
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();
|
||||||
|
}}
|
||||||
|
look={Button.Looks.OUTLINED}
|
||||||
|
>
|
||||||
|
Choose icon
|
||||||
|
</Button>
|
||||||
{Settings[key] && (
|
{Settings[key] && (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
Settings[key] = false;
|
Settings.trayMainOverride = false;
|
||||||
setCurrentTrayIcon();
|
setCurrentTrayIcon();
|
||||||
}}
|
}}
|
||||||
|
look={Button.Looks.LINK}
|
||||||
>
|
>
|
||||||
Reset
|
Reset Icon
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</Forms.FormSection>
|
</Forms.FormSection>
|
||||||
|
|
|
@ -36,6 +36,8 @@
|
||||||
.vcd-tray-icon-wrap {
|
.vcd-tray-icon-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
align-self: end;
|
align-self: end;
|
||||||
|
background: var(--background-secondrary);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vcd-tray-icon-image {
|
.vcd-tray-icon-image {
|
||||||
|
@ -75,8 +77,8 @@
|
||||||
.vcd-custom-tray-icon-section {
|
.vcd-custom-tray-icon-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
column-gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vcd-custom-tray-icon-form-text {
|
.vcd-custom-tray-icon-form-text {
|
||||||
|
|
Loading…
Reference in a new issue