toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-28 11:53:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update membersPage style

Browse Source
This commit is contained in:
JimmFly 2023-01-18 16:01:39 +08:00
parent 9702e9e380
commit e352dc7f61
4 changed files with 71 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
View File

@ -122,6 +122,7 @@ export const InviteMemberModal = ({
<Button
shape="circle"
type="primary"
style={{ width: '364px', height: '38px', borderRadius: '40px' }}
onClick={async () => {
await inviteMember(email);
onInviteSuccess();
@ -143,10 +144,8 @@ const Header = styled('div')({
const Content = styled('div')({
display: 'flex',
padding: '0 48px',
flexDirection: 'column',
alignItems: 'center',
gap: '16px',
});
const ContentTitle = styled('h1')({
@ -158,9 +157,8 @@ const ContentTitle = styled('h1')({
});
const Footer = styled('div')({
height: '70px',
paddingLeft: '24px',
marginTop: '32px',
height: '102px',
margin: '32px 0',
textAlign: 'center',
});

112
packages/app/src/components/workspace-setting/member/MembersPage.tsx
View File

@ -69,63 +69,65 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
member.user
);
return (
<StyledMemberListItem key={index}>
<StyledMemberNameContainer>
<StyledMemberAvatar
alt="member avatar"
src={user.avatar_url}
>
<EmailIcon />
</StyledMemberAvatar>
<>
<StyledMemberListItem key={index}>
<StyledMemberNameContainer>
<StyledMemberAvatar
alt="member avatar"
src={user.avatar_url}
>
<EmailIcon />
</StyledMemberAvatar>
<StyledMemberInfo>
<StyledMemberName>{user.name}</StyledMemberName>
<StyledMemberEmail>
{member.user.email}
</StyledMemberEmail>
</StyledMemberInfo>
</StyledMemberNameContainer>
<StyledMemberRoleContainer>
{member.accepted
? member.type !== 99
? 'Member'
: 'Workspace Owner'
: 'Pending'}
</StyledMemberRoleContainer>
<StyledMoreVerticalButton>
<Menu
content={
<>
<MenuItem
onClick={async () => {
const confirmRemove = await confirm({
title: 'Delete Member?',
content: `will delete member`,
confirmText: 'Delete',
confirmType: 'danger',
});
<StyledMemberInfo>
<StyledMemberName>{user.name}</StyledMemberName>
<StyledMemberEmail>
{member.user.email}
</StyledMemberEmail>
</StyledMemberInfo>
</StyledMemberNameContainer>
<StyledMemberRoleContainer>
{member.accepted
? member.type !== 99
? 'Member'
: 'Workspace Owner'
: 'Pending'}
</StyledMemberRoleContainer>
<StyledMoreVerticalButton>
<Menu
content={
<>
<MenuItem
onClick={async () => {
const confirmRemove = await confirm({
title: 'Delete Member?',
content: `will delete member`,
confirmText: 'Delete',
confirmType: 'danger',
});
if (!confirmRemove) {
return;
}
await removeMember(member.id);
toast(`${user.name} has been removed`);
}}
icon={<TrashIcon />}
>
Delete
</MenuItem>
</>
}
placement="bottom-end"
disablePortal={true}
>
<IconButton>
<MoreVerticalIcon />
</IconButton>
</Menu>
</StyledMoreVerticalButton>
</StyledMemberListItem>
if (!confirmRemove) {
return;
}
await removeMember(member.id);
toast(`${user.name} has been removed`);
}}
icon={<TrashIcon />}
>
Delete
</MenuItem>
</>
}
placement="bottom-end"
disablePortal={true}
>
<IconButton>
<MoreVerticalIcon />
</IconButton>
</Menu>
</StyledMoreVerticalButton>
</StyledMemberListItem>
</>
);
})}
</>

10
packages/app/src/components/workspace-setting/member/style.ts
View File

@ -19,6 +19,7 @@ export const StyledMemberNameContainer = styled('div')(() => {
display: 'flex',
alignItems: 'center',
width: '402px',
flex: 2,
};
});
@ -27,6 +28,7 @@ export const StyledMemberRoleContainer = styled('div')(() => {
display: 'flex',
alignItems: 'center',
width: '222px',
flex: 1,
};
});
@ -34,6 +36,8 @@ export const StyledMemberListContainer = styled('ul')(() => {
return {
marginTop: '15px',
overflowY: 'scroll',
width: '100%',
maxHeight: 'calc(100vh - 300px)',
};
});
@ -42,6 +46,7 @@ export const StyledMemberListItem = styled('li')(() => {
display: 'flex',
alignItems: 'center',
height: '72px',
width: '100%',
};
});
@ -71,7 +76,9 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
export const StyledMemberButtonContainer = styled('div')(() => {
return {
marginTop: '14px',
position: 'absolute',
bottom: '0',
marginBottom: '20px',
};
});
@ -83,6 +90,7 @@ export const StyledMoreVerticalButton = styled('button')(() => {
width: '24px',
height: '24px',
cursor: 'pointer',
paddingRight: '48px',
};
});

2
packages/app/src/hooks/use-workspace-helper.ts
View File

@ -42,6 +42,8 @@ export const useWorkspaceHelper = () => {
content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
confirmText: user ? 'Enable' : 'Sign in and Enable',
cancelText: 'Skip',
confirmType: 'primary',
buttonDirection: 'column',
}).then(async confirm => {
if (confirm && currentWorkspace) {
if (!user) {