ui: changed to fit Discord

This commit is contained in:
Oleh Polisan 2024-06-21 00:03:24 +03:00
parent f1c210edb3
commit f759fc0b71
2 changed files with 39 additions and 9 deletions

View file

@ -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>

View file

@ -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 {