mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-29 04:13:52 +03:00
feat: add workspace route
This commit is contained in:
DiamondThree
parent
030ec9fa88
commit
779463dada
@ -1 +1 @@
|
||||
export * from './Delete';
|
||||
export { WorkspaceDelete } from './Delete';
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './General';
|
||||
export { GeneralPage } from './General';
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './Leave';
|
||||
export { WorkspaceLeave } from './Leave';
|
||||
|
||||
@ -4,22 +4,15 @@ import MuiAvatar from '@mui/material/Avatar';
|
||||
|
||||
export const StyledSettingContainer = styled('div')(({ theme }) => {
|
||||
return {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
padding: '0px',
|
||||
width: '961px',
|
||||
background: theme.colors.popoverBackground,
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
padding: '50px',
|
||||
flexDirection: 'column',
|
||||
};
|
||||
});
|
||||
|
||||
export const StyledSettingSidebar = styled('div')(({ theme }) => {
|
||||
{
|
||||
return {
|
||||
width: '212px',
|
||||
height: '620px',
|
||||
background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
|
||||
flexShrink: 0,
|
||||
flexGrow: 0,
|
||||
};
|
||||
@ -59,7 +52,6 @@ export const StyledSettingTabContainer = styled('ul')(() => {
|
||||
{
|
||||
return {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
marginTop: '25px',
|
||||
};
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ import { IconButton } from '@/ui/button';
|
||||
import useLocalStorage from '@/hooks/use-local-storage';
|
||||
import usePageMetaList from '@/hooks/use-page-meta-list';
|
||||
import { usePageHelper } from '@/hooks/use-page-helper';
|
||||
import { WorkspaceSetting } from '@/components/workspace-setting';
|
||||
// import { WorkspaceSetting } from '@/components/workspace-setting';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { WorkspaceSelector } from './WorkspaceSelector/WorkspaceSelector';
|
||||
|
||||
@ -78,14 +78,15 @@ export const WorkSpaceSliderBar = () => {
|
||||
const [showTip, setShowTip] = useState(false);
|
||||
const [show, setShow] = useLocalStorage('AFFiNE_SLIDE_BAR', false, true);
|
||||
|
||||
const [showWorkspaceSetting, setShowWorkspaceSetting] = useState(false);
|
||||
|
||||
const paths = {
|
||||
all: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
|
||||
favorite: currentWorkspaceId
|
||||
? `/workspace/${currentWorkspaceId}/favorite`
|
||||
: '',
|
||||
trash: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '',
|
||||
setting: currentWorkspaceId
|
||||
? `/workspace/${currentWorkspaceId}/setting`
|
||||
: '',
|
||||
};
|
||||
|
||||
return (
|
||||
@ -154,18 +155,22 @@ export const WorkSpaceSliderBar = () => {
|
||||
<FavoriteList showList={showSubFavorite} />
|
||||
<StyledListItem
|
||||
onClick={() => {
|
||||
setShowWorkspaceSetting(true);
|
||||
// setShowWorkspaceSetting(true);
|
||||
}}
|
||||
>
|
||||
<SettingsIcon /> Setting
|
||||
<StyledLink href={{ pathname: paths.setting }}>
|
||||
<FavouritesIcon />
|
||||
{t('Setting')}
|
||||
</StyledLink>
|
||||
<SettingsIcon />
|
||||
</StyledListItem>
|
||||
|
||||
<WorkspaceSetting
|
||||
{/* <WorkspaceSetting
|
||||
isShow={showWorkspaceSetting}
|
||||
onClose={() => {
|
||||
setShowWorkspaceSetting(false);
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
|
||||
<StyledListItem
|
||||
onClick={() => {
|
||||
|
||||
159
packages/app/src/pages/workspace/[workspaceId]/setting.tsx
Normal file
159
packages/app/src/pages/workspace/[workspaceId]/setting.tsx
Normal file
@ -0,0 +1,159 @@
|
||||
import Modal, { ModalCloseButton } from '@/ui/modal';
|
||||
import {
|
||||
StyledSettingContainer,
|
||||
StyledSettingContent,
|
||||
StyledSettingSidebar,
|
||||
StyledSettingSidebarHeader,
|
||||
StyledSettingTabContainer,
|
||||
StyledSettingTagIconContainer,
|
||||
WorkspaceSettingTagItem,
|
||||
} from '../../../components/workspace-setting/style';
|
||||
import {
|
||||
EditIcon,
|
||||
UsersIcon,
|
||||
PublishIcon,
|
||||
CloudInsyncIcon,
|
||||
} from '@blocksuite/icons';
|
||||
import { ReactElement, useEffect, useState } from 'react';
|
||||
import { GeneralPage } from '../../../components/workspace-setting/general';
|
||||
import { MembersPage } from '../../../components/workspace-setting/MembersPage';
|
||||
import { PublishPage } from '../../../components/workspace-setting/PublishPage';
|
||||
import { ExportPage } from '../../../components/workspace-setting/ExportPage';
|
||||
import { SyncPage } from '../../../components/workspace-setting/SyncPage';
|
||||
import { useAppState } from '@/providers/app-state-provider';
|
||||
import WorkspaceLayout from '@/components/workspace-layout';
|
||||
|
||||
enum ActiveTab {
|
||||
'general' = 'general',
|
||||
'members' = 'members',
|
||||
'publish' = 'publish',
|
||||
'sync' = 'sync',
|
||||
'export' = 'export',
|
||||
}
|
||||
|
||||
type SettingTabProps = {
|
||||
activeTab: ActiveTab;
|
||||
onTabChange?: (tab: ActiveTab) => void;
|
||||
};
|
||||
|
||||
type WorkspaceSettingProps = {
|
||||
isShow: boolean;
|
||||
onClose?: () => void;
|
||||
};
|
||||
|
||||
const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
|
||||
return (
|
||||
<StyledSettingTabContainer>
|
||||
<WorkspaceSettingTagItem
|
||||
isActive={activeTab === ActiveTab.general}
|
||||
onClick={() => {
|
||||
onTabChange && onTabChange(ActiveTab.general);
|
||||
}}
|
||||
>
|
||||
<StyledSettingTagIconContainer>
|
||||
<EditIcon />
|
||||
</StyledSettingTagIconContainer>
|
||||
General
|
||||
</WorkspaceSettingTagItem>
|
||||
|
||||
<WorkspaceSettingTagItem
|
||||
isActive={activeTab === ActiveTab.sync}
|
||||
onClick={() => {
|
||||
onTabChange && onTabChange(ActiveTab.sync);
|
||||
}}
|
||||
>
|
||||
<StyledSettingTagIconContainer>
|
||||
<CloudInsyncIcon />
|
||||
</StyledSettingTagIconContainer>
|
||||
Sync
|
||||
</WorkspaceSettingTagItem>
|
||||
|
||||
<WorkspaceSettingTagItem
|
||||
isActive={activeTab === ActiveTab.members}
|
||||
onClick={() => {
|
||||
onTabChange && onTabChange(ActiveTab.members);
|
||||
}}
|
||||
>
|
||||
<StyledSettingTagIconContainer>
|
||||
<UsersIcon />
|
||||
</StyledSettingTagIconContainer>
|
||||
Collaboration
|
||||
</WorkspaceSettingTagItem>
|
||||
<WorkspaceSettingTagItem
|
||||
isActive={activeTab === ActiveTab.publish}
|
||||
onClick={() => {
|
||||
onTabChange && onTabChange(ActiveTab.publish);
|
||||
}}
|
||||
>
|
||||
<StyledSettingTagIconContainer>
|
||||
<PublishIcon />
|
||||
</StyledSettingTagIconContainer>
|
||||
Publish
|
||||
</WorkspaceSettingTagItem>
|
||||
|
||||
<WorkspaceSettingTagItem
|
||||
isActive={activeTab === ActiveTab.export}
|
||||
onClick={() => {
|
||||
onTabChange && onTabChange(ActiveTab.export);
|
||||
}}
|
||||
>
|
||||
<StyledSettingTagIconContainer>
|
||||
<PublishIcon />
|
||||
</StyledSettingTagIconContainer>
|
||||
Export
|
||||
</WorkspaceSettingTagItem>
|
||||
</StyledSettingTabContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const WorkspaceSetting = ({ isShow, onClose }: WorkspaceSettingProps) => {
|
||||
// const { workspaces } = useAppState();
|
||||
const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.general);
|
||||
const handleTabChange = (tab: ActiveTab) => {
|
||||
setActiveTab(tab);
|
||||
};
|
||||
|
||||
const { currentMetaWorkSpace } = useAppState();
|
||||
useEffect(() => {
|
||||
// reset tab when modal is closed
|
||||
if (!isShow) {
|
||||
setActiveTab(ActiveTab.general);
|
||||
}
|
||||
}, [isShow]);
|
||||
return (
|
||||
<StyledSettingContainer>
|
||||
<StyledSettingSidebar>
|
||||
<StyledSettingSidebarHeader>
|
||||
Workspace Settings
|
||||
</StyledSettingSidebarHeader>
|
||||
<WorkspaceSettingTab
|
||||
activeTab={activeTab}
|
||||
onTabChange={handleTabChange}
|
||||
/>
|
||||
</StyledSettingSidebar>
|
||||
|
||||
<StyledSettingContent>
|
||||
{activeTab === ActiveTab.general && currentMetaWorkSpace && (
|
||||
<GeneralPage workspace={currentMetaWorkSpace} />
|
||||
)}
|
||||
{activeTab === ActiveTab.sync && currentMetaWorkSpace && (
|
||||
<SyncPage workspace={currentMetaWorkSpace} />
|
||||
)}
|
||||
{activeTab === ActiveTab.members && currentMetaWorkSpace && (
|
||||
<MembersPage workspace={currentMetaWorkSpace} />
|
||||
)}
|
||||
{activeTab === ActiveTab.publish && currentMetaWorkSpace && (
|
||||
<PublishPage workspace={currentMetaWorkSpace} />
|
||||
)}
|
||||
{activeTab === ActiveTab.export && currentMetaWorkSpace && (
|
||||
<ExportPage workspace={currentMetaWorkSpace} />
|
||||
)}
|
||||
</StyledSettingContent>
|
||||
</StyledSettingContainer>
|
||||
);
|
||||
};
|
||||
WorkspaceSetting.getLayout = function getLayout(page: ReactElement) {
|
||||
return <WorkspaceLayout>{page}</WorkspaceLayout>;
|
||||
};
|
||||
|
||||
export default WorkspaceSetting;
|
||||
Loading…
Reference in New Issue
Block a user