ui: icon namings at right side
This commit is contained in:
parent
f759fc0b71
commit
1ddd93342e
2 changed files with 53 additions and 42 deletions
|
@ -37,10 +37,10 @@ if (!isLinux)
|
|||
|
||||
const statusToSettingsKey = {
|
||||
icon: { key: "trayMainOverride", label: "Main Icon" },
|
||||
idle: { key: "trayIdleOverride", label: "Idle icon" },
|
||||
speaking: { key: "traySpeakingOverride", label: "Speaking icon" },
|
||||
muted: { key: "trayMutedOverride", label: "Muted icon" },
|
||||
deafened: { key: "trayDeafenedOverride", label: "Deafened icon" }
|
||||
idle: { key: "trayIdleOverride", label: "Idle Icon" },
|
||||
speaking: { key: "traySpeakingOverride", label: "Speaking Icon" },
|
||||
muted: { key: "trayMutedOverride", label: "Muted Icon" },
|
||||
deafened: { key: "trayDeafenedOverride", label: "Deafened Icon" }
|
||||
};
|
||||
|
||||
function trayEditButton(iconName: string) {
|
||||
|
@ -99,8 +99,8 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
|
|||
<Modals.ModalContent className="vcd-custom-tray-modal">
|
||||
{Object.entries(statusToSettingsKey).map(([iconName, { key, label }]) => (
|
||||
<div key={iconName}>
|
||||
<Forms.FormTitle tag="h3">{label}</Forms.FormTitle>
|
||||
<Forms.FormSection className="vcd-custom-tray-icon-section">
|
||||
<div className="vcd-custom-tray-buttons">
|
||||
{trayEditButton(iconName)}
|
||||
<Button
|
||||
onClick={async () => {
|
||||
|
@ -129,7 +129,7 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
|
|||
}}
|
||||
look={Button.Looks.OUTLINED}
|
||||
>
|
||||
Choose icon
|
||||
Choose Icon
|
||||
</Button>
|
||||
{Settings[key] && (
|
||||
<Button
|
||||
|
@ -142,6 +142,10 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
|
|||
Reset Icon
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Forms.FormText>{label}</Forms.FormText>
|
||||
</div>
|
||||
</Forms.FormSection>
|
||||
<Forms.FormDivider className={`${Margins.top8} ${Margins.bottom8}`} />
|
||||
</div>
|
||||
|
|
|
@ -78,7 +78,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
column-gap: 1em;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.vcd-custom-tray-icon-form-text {
|
||||
|
@ -90,3 +90,10 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vcd-custom-tray-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
column-gap: 1em;
|
||||
}
|
Loading…
Reference in a new issue