Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into task/constraint_card_adjustmnets

Browse Source
This commit is contained in:
andreas-unleash 2022-07-25 09:34:26 +03:00 committed by GitHub
commit 1f309fb35e
3 changed files with 121 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/.gitignore vendored
View File

@ -50,5 +50,6 @@ build
.DS_Store
cypress/videos/*
cypress/downloads/*
cypress/screenshots/*
.env.local

39
frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupCardAvatars.tsx
View File

@ -1,8 +1,9 @@
import { Avatar, Badge, styled } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { IGroupUser, Role } from 'interfaces/group';
import { useMemo } from 'react';
import React, { useMemo, useState } from 'react';
import StarIcon from '@mui/icons-material/Star';
import { GroupPopover } from './GroupPopover/GroupPopover';
const StyledAvatars = styled('div')(({ theme }) => ({
display: 'inline-flex',
@ -42,6 +43,20 @@ export const GroupCardAvatars = ({ users }: IGroupCardAvatarsProps) => {
() => users.sort((a, b) => (a.role < b.role ? 1 : -1)).slice(0, 9),
[users]
);
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
const [popupUser, setPopupUser] = useState<IGroupUser>();
const onPopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const onPopoverClose = () => {
setAnchorEl(null);
};
const avatarOpen = Boolean(anchorEl);
return (
<StyledAvatars>
{shownUsers.map(user => (
@ -53,9 +68,11 @@ export const GroupCardAvatars = ({ users }: IGroupCardAvatarsProps) => {
data-loading
alt="Gravatar"
src={user.imageUrl}
title={`${
user.name || user.email || user.username
} (id: ${user.id})`}
onMouseEnter={event => {
onPopoverOpen(event);
setPopupUser(user);
}}
onMouseLeave={onPopoverClose}
/>
}
elseShow={
@ -71,9 +88,11 @@ export const GroupCardAvatars = ({ users }: IGroupCardAvatarsProps) => {
data-loading
alt="Gravatar"
src={user.imageUrl}
title={`${
user.name || user.email || user.username
} (id: ${user.id})`}
onMouseEnter={event => {
onPopoverOpen(event);
setPopupUser(user);
}}
onMouseLeave={onPopoverClose}
/>
</Badge>
}
@ -87,6 +106,12 @@ export const GroupCardAvatars = ({ users }: IGroupCardAvatarsProps) => {
</StyledAvatarMore>
}
/>
<GroupPopover
open={avatarOpen}
user={popupUser}
anchorEl={anchorEl}
onPopoverClose={onPopoverClose}
/>
</StyledAvatars>
);
};

88
frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupPopover/GroupPopover.tsx Normal file
View File

@ -0,0 +1,88 @@
import { Popover, Badge, styled, Tooltip } from '@mui/material';
import { IGroup, IGroupUser, Role } from 'interfaces/group';
import { Link } from 'react-router-dom';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Badge as StyledBadge } from 'component/common/Badge/Badge';
import { RemoveGroup } from 'component/admin/groups/RemoveGroup/RemoveGroup';
import { useState } from 'react';
import StarIcon from '@mui/icons-material/Star';
import { IUser } from '../../../../../../../interfaces/user';
const StyledPopover = styled(Popover)(({ theme }) => ({
pointerEvents: 'none',
'.MuiPaper-root': {
padding: '12px',
},
}));
const StyledPopupStar = styled(StarIcon)(({ theme }) => ({
color: theme.palette.warning.main,
fontSize: theme.fontSizes.smallBody,
marginLeft: theme.spacing(0.1),
marginTop: theme.spacing(2),
}));
const StyledName = styled('div')(({ theme }) => ({
color: theme.palette.text.secondary,
fontSize: theme.fontSizes.smallBody,
marginTop: theme.spacing(1),
}));
interface IGroupPopoverProps {
user: IGroupUser | undefined;
open: boolean;
anchorEl: HTMLElement | null;
onPopoverClose(event: React.MouseEvent<HTMLElement>): void;
}
export const GroupPopover = ({
user,
open,
anchorEl,
onPopoverClose,
}: IGroupPopoverProps) => {
return (
<StyledPopover
open={open}
anchorEl={anchorEl}
onClose={onPopoverClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
>
<ConditionallyRender
condition={user?.role === Role.Member}
show={<StyledBadge color="success">{user?.role}</StyledBadge>}
elseShow={
<Badge
overlap="circular"
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
badgeContent={<StyledPopupStar />}
>
<StyledBadge
color="success"
sx={{ paddingLeft: '16px' }}
>
{user?.role}
</StyledBadge>
</Badge>
}
/>
<StyledName>{user?.name}</StyledName>
<div>{user?.email}</div>
</StyledPopover>
);
};