Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-27 10:52:40 +08: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
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 <Button
shape="circle" shape="circle"
type="primary" type="primary"
style={{ width: '364px', height: '38px', borderRadius: '40px' }}
onClick={async () => { onClick={async () => {
await inviteMember(email); await inviteMember(email);
onInviteSuccess(); onInviteSuccess();
@@ -143,10 +144,8 @@ const Header = styled('div')({
const Content = styled('div')({ const Content = styled('div')({
display: 'flex', display: 'flex',
padding: '0 48px',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
gap: '16px',
}); });
const ContentTitle = styled('h1')({ const ContentTitle = styled('h1')({
@@ -158,9 +157,8 @@ const ContentTitle = styled('h1')({
}); });
const Footer = styled('div')({ const Footer = styled('div')({
height: '70px', height: '102px',
paddingLeft: '24px', margin: '32px 0',
marginTop: '32px',
textAlign: 'center', 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 member.user
); );
return ( return (
<StyledMemberListItem key={index}> <>
<StyledMemberNameContainer> <StyledMemberListItem key={index}>
<StyledMemberAvatar <StyledMemberNameContainer>
alt="member avatar" <StyledMemberAvatar
src={user.avatar_url} alt="member avatar"
> src={user.avatar_url}
<EmailIcon /> >
</StyledMemberAvatar> <EmailIcon />
</StyledMemberAvatar>
<StyledMemberInfo> <StyledMemberInfo>
<StyledMemberName>{user.name}</StyledMemberName> <StyledMemberName>{user.name}</StyledMemberName>
<StyledMemberEmail> <StyledMemberEmail>
{member.user.email} {member.user.email}
</StyledMemberEmail> </StyledMemberEmail>
</StyledMemberInfo> </StyledMemberInfo>
</StyledMemberNameContainer> </StyledMemberNameContainer>
<StyledMemberRoleContainer> <StyledMemberRoleContainer>
{member.accepted {member.accepted
? member.type !== 99 ? member.type !== 99
? 'Member' ? 'Member'
: 'Workspace Owner' : 'Workspace Owner'
: 'Pending'} : 'Pending'}
</StyledMemberRoleContainer> </StyledMemberRoleContainer>
<StyledMoreVerticalButton> <StyledMoreVerticalButton>
<Menu <Menu
content={ content={
<> <>
<MenuItem <MenuItem
onClick={async () => { onClick={async () => {
const confirmRemove = await confirm({ const confirmRemove = await confirm({
title: 'Delete Member?', title: 'Delete Member?',
content: `will delete member`, content: `will delete member`,
confirmText: 'Delete', confirmText: 'Delete',
confirmType: 'danger', confirmType: 'danger',
}); });
if (!confirmRemove) { if (!confirmRemove) {
return; return;
} }
await removeMember(member.id); await removeMember(member.id);
toast(`${user.name} has been removed`); toast(`${user.name} has been removed`);
}} }}
icon={<TrashIcon />} icon={<TrashIcon />}
> >
Delete Delete
</MenuItem> </MenuItem>
</> </>
} }
placement="bottom-end" placement="bottom-end"
disablePortal={true} disablePortal={true}
> >
<IconButton> <IconButton>
<MoreVerticalIcon /> <MoreVerticalIcon />
</IconButton> </IconButton>
</Menu> </Menu>
</StyledMoreVerticalButton> </StyledMoreVerticalButton>
</StyledMemberListItem> </StyledMemberListItem>
</>
); );
})} })}
</> </>

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

@@ -19,6 +19,7 @@ export const StyledMemberNameContainer = styled('div')(() => {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
width: '402px', width: '402px',
flex: 2,
}; };
}); });
@@ -27,6 +28,7 @@ export const StyledMemberRoleContainer = styled('div')(() => {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
width: '222px', width: '222px',
flex: 1,
}; };
}); });
@@ -34,6 +36,8 @@ export const StyledMemberListContainer = styled('ul')(() => {
return { return {
marginTop: '15px', marginTop: '15px',
overflowY: 'scroll', overflowY: 'scroll',
width: '100%',
maxHeight: 'calc(100vh - 300px)',
}; };
}); });
@@ -42,6 +46,7 @@ export const StyledMemberListItem = styled('li')(() => {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
height: '72px', height: '72px',
width: '100%',
}; };
}); });
@@ -71,7 +76,9 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
export const StyledMemberButtonContainer = styled('div')(() => { export const StyledMemberButtonContainer = styled('div')(() => {
return { return {
marginTop: '14px', position: 'absolute',
bottom: '0',
marginBottom: '20px',
}; };
}); });
@@ -83,6 +90,7 @@ export const StyledMoreVerticalButton = styled('button')(() => {
width: '24px', width: '24px',
height: '24px', height: '24px',
cursor: 'pointer', 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.`, content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
confirmText: user ? 'Enable' : 'Sign in and Enable', confirmText: user ? 'Enable' : 'Sign in and Enable',
cancelText: 'Skip', cancelText: 'Skip',
confirmType: 'primary',
buttonDirection: 'column',
}).then(async confirm => { }).then(async confirm => {
if (confirm && currentWorkspace) { if (confirm && currentWorkspace) {
if (!user) { if (!user) {