yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-09 08:39:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

onBlur and popover fix - replaced with position absolute Box

Browse Source
This commit is contained in:
ronronscelestes 2021-09-28 17:23:38 +02:00
parent 50ef981daf
commit 4163211d37
2 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
packages/core/admin/admin/src/components/LeftMenu/index.js
View File

@ -14,7 +14,8 @@ import {
NavUser, NavUser,
NavCondense, NavCondense,
} from '@strapi/parts/MainNav'; } from '@strapi/parts/MainNav';
import { Popover } from '@strapi/parts/Popover'; import { FocusTrap } from '@strapi/parts/FocusTrap';
import { Box } from '@strapi/parts/Box';
import { Text } from '@strapi/parts/Text'; import { Text } from '@strapi/parts/Text';
import { Stack } from '@strapi/parts/Stack'; import { Stack } from '@strapi/parts/Stack';
import ContentIcon from '@strapi/icons/ContentIcon'; import ContentIcon from '@strapi/icons/ContentIcon';
@ -29,18 +30,25 @@ const IconWrapper = styled.span`
} }
`; `;
const LinkUserWrapper = styled(Box)`
width: ${150 / 16}rem;
position: absolute;
bottom: ${({ theme }) => theme.spaces[9]};
left: ${({ theme }) => theme.spaces[5]};
`;
const LinkUser = styled(Link)` const LinkUser = styled(Link)`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
width: ${150 / 16}rem;
padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`}; padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};
border-radius: ${({ theme }) => theme.spaces[1]}; border-radius: ${({ theme }) => theme.spaces[1]};
&:hover { &:hover {
background: ${({ theme, logout }) => background: ${({ theme, logout }) =>
logout ? theme.colors.danger100 : theme.colors.primary100}; logout ? theme.colors.danger100 : theme.colors.primary100};
text-decoration: none;
} }
svg { svg {
@ -70,6 +78,15 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
handleToggleUserLinks(); handleToggleUserLinks();
}; };
const handleBlur = e => {
if (
!e.currentTarget.contains(e.relatedTarget) &&
e.relatedTarget?.parentElement?.id !== 'main-nav-user-button'
) {
setUserLinksVisible(false);
}
};
return ( return (
<MainNav condensed={condensed}> <MainNav condensed={condensed}>
<NavBrand <NavBrand
@ -121,21 +138,38 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
) : null} ) : null}
</NavSections> </NavSections>
<NavUser ref={buttonRef} onClick={handleToggleUserLinks} initials={initials}> <NavUser
id="main-nav-user-button"
ref={buttonRef}
onClick={handleToggleUserLinks}
initials={initials}
>
{userDisplayName} {userDisplayName}
</NavUser> </NavUser>
{userLinksVisible && ( {userLinksVisible && (
<Popover source={buttonRef}> <LinkUserWrapper onBlur={handleBlur} padding={1} shadow="tableShadow" background="neutral0">
<Stack size={0}> <FocusTrap onEscape={handleToggleUserLinks}>
<LinkUser onClick={handleToggleUserLinks} to="/me"> <Stack size={0}>
<Text>Profile</Text> <LinkUser onClick={handleToggleUserLinks} to="/me">
</LinkUser> <Text>
<LinkUser onClick={handleLogout} logout="logout" to="/auth/login"> {formatMessage({
<Text textColor="danger600">Logout</Text> id: 'app.components.LeftMenu.profile',
<Logout /> defaultMessage: 'Profile',
</LinkUser> })}
</Stack> </Text>
</Popover> </LinkUser>
<LinkUser onClick={handleLogout} logout="logout" to="/auth/login">
<Text textColor="danger600">
{formatMessage({
id: 'app.components.LeftMenu.logout',
defaultMessage: 'Logout',
})}
</Text>
<Logout />
</LinkUser>
</Stack>
</FocusTrap>
</LinkUserWrapper>
)} )}
<NavCondense onClick={() => setCondensed(s => !s)}> <NavCondense onClick={() => setCondensed(s => !s)}>

2
packages/core/admin/admin/src/translations/en.json
View File

@ -270,6 +270,8 @@
"app.components.LeftMenuLinkContainer.singleTypes": "Single Types", "app.components.LeftMenuLinkContainer.singleTypes": "Single Types",
"app.components.LeftMenu.expand": "Expand the navbar", "app.components.LeftMenu.expand": "Expand the navbar",
"app.components.LeftMenu.collapse": "Collapse the navbar", "app.components.LeftMenu.collapse": "Collapse the navbar",
"app.components.LeftMenu.profile": "Profile",
"app.components.LeftMenu.logout": "Logout",
"app.components.ListPluginsPage.deletePlugin.description": "It might take a few seconds to uninstall the plugin.", "app.components.ListPluginsPage.deletePlugin.description": "It might take a few seconds to uninstall the plugin.",
"app.components.ListPluginsPage.deletePlugin.title": "Uninstalling", "app.components.ListPluginsPage.deletePlugin.title": "Uninstalling",
"app.components.ListPluginsPage.description": "List of the installed plugins in the project.", "app.components.ListPluginsPage.description": "List of the installed plugins in the project.",