Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): render settingsmenu in portal, no zindex

Browse Source
This commit is contained in:
psychedelicious 2024-07-24 06:30:09 +10:00
parent 54aef4959c
commit 0279a27f66
1 changed files with 45 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
View File

@ -5,6 +5,7 @@ import {
MenuGroup, MenuGroup,
MenuItem, MenuItem,
MenuList, MenuList,
Portal,
useDisclosure, useDisclosure,
useGlobalMenuClose, useGlobalMenuClose,
} from '@invoke-ai/ui-library'; } from '@invoke-ai/ui-library';
@ -44,49 +45,51 @@ const SettingsMenu = () => {
icon={<RiSettings4Line fontSize={20} />} icon={<RiSettings4Line fontSize={20} />}
boxSize={8} boxSize={8}
/> />
<MenuList zIndex={1}> <Portal>
<MenuGroup title={t('upsell.professional')}> <MenuList>
<SettingsUpsellMenuItem menuText={t('upsell.inviteTeammates')} menuIcon={PiUsersBold} /> <MenuGroup title={t('upsell.professional')}>
<SettingsUpsellMenuItem menuText={t('upsell.shareAccess')} menuIcon={PiShareNetworkFill} /> <SettingsUpsellMenuItem menuText={t('upsell.inviteTeammates')} menuIcon={PiUsersBold} />
</MenuGroup> <SettingsUpsellMenuItem menuText={t('upsell.shareAccess')} menuIcon={PiShareNetworkFill} />
</MenuGroup>
<MenuGroup title={t('common.communityLabel')}> <MenuGroup title={t('common.communityLabel')}>
{isGithubLinkEnabled && ( {isGithubLinkEnabled && (
<MenuItem as="a" href={githubLink} target="_blank" icon={<RiGithubFill />}> <MenuItem as="a" href={githubLink} target="_blank" icon={<RiGithubFill />}>
{t('common.githubLabel')} {t('common.githubLabel')}
</MenuItem> </MenuItem>
)} )}
{isBugLinkEnabled && ( {isBugLinkEnabled && (
<MenuItem as="a" href={`${githubLink}/issues`} target="_blank" icon={<PiBugBeetleBold />}> <MenuItem as="a" href={`${githubLink}/issues`} target="_blank" icon={<PiBugBeetleBold />}>
{t('common.reportBugLabel')} {t('common.reportBugLabel')}
</MenuItem> </MenuItem>
)} )}
{isDiscordLinkEnabled && ( {isDiscordLinkEnabled && (
<MenuItem as="a" href={discordLink} target="_blank" icon={<RiDiscordFill />}> <MenuItem as="a" href={discordLink} target="_blank" icon={<RiDiscordFill />}>
{t('common.discordLabel')} {t('common.discordLabel')}
</MenuItem> </MenuItem>
)} )}
</MenuGroup> </MenuGroup>
<MenuGroup title={t('common.settingsLabel')}> <MenuGroup title={t('common.settingsLabel')}>
<HotkeysModal> <HotkeysModal>
<MenuItem as="button" icon={<PiKeyboardBold />}> <MenuItem as="button" icon={<PiKeyboardBold />}>
{t('common.hotkeysLabel')} {t('common.hotkeysLabel')}
</MenuItem> </MenuItem>
</HotkeysModal> </HotkeysModal>
<SettingsModal> <SettingsModal>
<MenuItem as="button" icon={<PiToggleRightFill />}> <MenuItem as="button" icon={<PiToggleRightFill />}>
{t('common.settingsLabel')} {t('common.settingsLabel')}
</MenuItem> </MenuItem>
</SettingsModal> </SettingsModal>
</MenuGroup> </MenuGroup>
<MenuGroup title={t('accessibility.about')}> <MenuGroup title={t('accessibility.about')}>
<AboutModal> <AboutModal>
<MenuItem as="button" icon={<PiInfoBold />}> <MenuItem as="button" icon={<PiInfoBold />}>
{t('accessibility.about')} {t('accessibility.about')}
</MenuItem> </MenuItem>
</AboutModal> </AboutModal>
</MenuGroup> </MenuGroup>
</MenuList> </MenuList>
</Portal>
</Menu> </Menu>
); );
}; };