Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-20 11:36:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add setting workspace UI

Browse Source
This commit is contained in:
MingLiang Wang
2022-12-20 12:22:38 +08:00
parent e9ee7efdf5
commit d5832b1093
3 changed files with 208 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/workspace-setting/workspace-setting.tsx
+83 -1
View File
@@ -1,7 +1,22 @@
import Modal from '@/ui/modal';
import {
StyledAvatarUploadBtn,
StyledCopyButtonContainer,
StyledDeleteButtonContainer,
StyledMemberAvatar,
StyledMemberButtonContainer,
StyledMemberEmail,
StyledMemberInfo,
StyledMemberListContainer,
StyledMemberListItem,
StyledMemberName,
StyledMemberNameContainer,
StyledMemberRoleContainer,
StyledMemberTitleContainer,
StyledMoreVerticalButton,
StyledPublishContent,
StyledPublishCopyContainer,
StyledPublishExplanation,
StyledSettingAvatar,
StyledSettingAvatarContent,
StyledSettingContainer,
@@ -14,7 +29,12 @@ import {
StyledSettingTagIconContainer,
WorkspaceSettingTagItem,
} from './style';
import { EditIcon, UsersIcon, PublishIcon } from '@blocksuite/icons';
import {
EditIcon,
UsersIcon,
PublishIcon,
MoreVerticalIcon,
} from '@blocksuite/icons';
import { useState } from 'react';
import { Button } from '@/ui/button';
import Input from '@/ui/input';
@@ -89,6 +109,8 @@ export const WorkspaceSetting = () => {
</StyledSettingSidebar>
<StyledSettingContent>
{activeTab === ActiveTab.general && <GeneralPage />}
{activeTab === ActiveTab.members && <MembersPage />}
{activeTab === ActiveTab.publish && <PublishPage />}
</StyledSettingContent>
</StyledSettingContainer>
</Modal>
@@ -120,3 +142,63 @@ const GeneralPage = () => {
</div>
);
};
const MembersPage = () => {
return (
<div>
<StyledMemberTitleContainer>
<StyledMemberNameContainer>Users(88) </StyledMemberNameContainer>
<StyledMemberRoleContainer>Access level</StyledMemberRoleContainer>
</StyledMemberTitleContainer>
<StyledMemberListContainer>
<StyledMemberListItem>
<StyledMemberNameContainer>
<StyledMemberAvatar alt="member avatar">S</StyledMemberAvatar>
<StyledMemberInfo>
<StyledMemberName>Svaney</StyledMemberName>
<StyledMemberEmail>svaneyshen@gmail.com</StyledMemberEmail>
</StyledMemberInfo>
</StyledMemberNameContainer>
<StyledMemberRoleContainer>Workspace Owner</StyledMemberRoleContainer>
<StyledMoreVerticalButton>
<MoreVerticalIcon></MoreVerticalIcon>
</StyledMoreVerticalButton>
</StyledMemberListItem>
</StyledMemberListContainer>
<StyledMemberButtonContainer>
<Button type="primary" shape="circle">
Invite Members
</Button>
</StyledMemberButtonContainer>
</div>
);
};
const PublishPage = () => {
return (
<div>
<StyledPublishContent>
<StyledPublishExplanation>
After publishing to the web, everyone can view the content of this
workspace through the link.
</StyledPublishExplanation>
<StyledSettingH2 marginTop={48}>Share with link</StyledSettingH2>
<StyledPublishCopyContainer>
<Input
width={500}
value={'www.baidu.com/asdsadas/asdsadasd'}
disabled
></Input>
<StyledCopyButtonContainer>
<Button type="primary" shape="circle">
Copy Link
</Button>
</StyledCopyButtonContainer>
</StyledPublishCopyContainer>
</StyledPublishContent>
<Button type="primary" shape="circle">
Publish to web
</Button>
</div>
);
};