devproje/project-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: icon namings at right side

Browse source
This commit is contained in:
Oleh Polisan 2024-06-21 14:12:02 +03:00
parent f759fc0b71
commit 1ddd93342e
2 changed files with 53 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/renderer/components/settings/TraySettings.tsx
View file

@ -37,10 +37,10 @@ if (!isLinux)
const statusToSettingsKey = { const statusToSettingsKey = {
icon: { key: "trayMainOverride", label: "Main Icon" }, icon: { key: "trayMainOverride", label: "Main Icon" },
idle: { key: "trayIdleOverride", label: "Idle icon" }, idle: { key: "trayIdleOverride", label: "Idle Icon" },
speaking: { key: "traySpeakingOverride", label: "Speaking icon" }, speaking: { key: "traySpeakingOverride", label: "Speaking Icon" },
muted: { key: "trayMutedOverride", label: "Muted icon" }, muted: { key: "trayMutedOverride", label: "Muted Icon" },
deafened: { key: "trayDeafenedOverride", label: "Deafened icon" } deafened: { key: "trayDeafenedOverride", label: "Deafened Icon" }
}; };
function trayEditButton(iconName: string) { function trayEditButton(iconName: string) {
@ -99,8 +99,8 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
<Modals.ModalContent className="vcd-custom-tray-modal"> <Modals.ModalContent className="vcd-custom-tray-modal">
{Object.entries(statusToSettingsKey).map(([iconName, { key, label }]) => ( {Object.entries(statusToSettingsKey).map(([iconName, { key, label }]) => (
<div key={iconName}> <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-buttons">
{trayEditButton(iconName)} {trayEditButton(iconName)}
<Button <Button
onClick={async () => { onClick={async () => {
@ -129,7 +129,7 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
}} }}
look={Button.Looks.OUTLINED} look={Button.Looks.OUTLINED}
> >
Choose icon Choose Icon
</Button> </Button>
{Settings[key] && ( {Settings[key] && (
<Button <Button
@ -142,6 +142,10 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
Reset Icon Reset Icon
</Button> </Button>
)} )}
</div>
<div>
<Forms.FormText>{label}</Forms.FormText>
</div>
</Forms.FormSection> </Forms.FormSection>
<Forms.FormDivider className={`${Margins.top8} ${Margins.bottom8}`} /> <Forms.FormDivider className={`${Margins.top8} ${Margins.bottom8}`} />
</div> </div>

9
src/renderer/components/settings/traySetting.css
View file

@ -78,7 +78,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
column-gap: 1em; justify-content: space-between;
} }
.vcd-custom-tray-icon-form-text { .vcd-custom-tray-icon-form-text {
@ -90,3 +90,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.vcd-custom-tray-buttons {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1em;
}