luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: update settings page style

Browse Source
This commit is contained in:
JimmFly
2023-01-18 16:01:11 +08:00
parent 09fb0f8dfc
commit 9702e9e380
1 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/app/src/pages/workspace/[workspaceId]/setting.tsx
View File

@@ -2,7 +2,6 @@ import {
StyledSettingContainer, StyledSettingContainer,
StyledSettingContent, StyledSettingContent,
StyledSettingSidebar, StyledSettingSidebar,
StyledSettingSidebarHeader,
StyledSettingTabContainer, StyledSettingTabContainer,
WorkspaceSettingTagItem, WorkspaceSettingTagItem,
} from '@/components/workspace-setting/style'; } from '@/components/workspace-setting/style';
@@ -14,35 +13,38 @@ import {
ExportPage, ExportPage,
SyncPage, SyncPage,
} from '@/components/workspace-setting'; } from '@/components/workspace-setting';
import { SettingsIcon } from '@blocksuite/icons';
import { useAppState } from '@/providers/app-state-provider'; import { useAppState } from '@/providers/app-state-provider';
import WorkspaceLayout from '@/components/workspace-layout'; import WorkspaceLayout from '@/components/workspace-layout';
import { WorkspaceUnit } from '@affine/datacenter'; import { WorkspaceUnit } from '@affine/datacenter';
import { useTranslation } from '@affine/i18n'; import { useTranslation } from '@affine/i18n';
import { PageListHeader } from '@/components/header';
type TabNames = 'general' | 'members' | 'publish' | 'sync' | 'export'; type TabNames = 'General' | 'Sync' | 'Collaboration' | 'Publish' | 'Export';
const tabMap: { const tabMap: {
name: TabNames; name: TabNames;
panelRender: (workspace: WorkspaceUnit) => ReactNode; panelRender: (workspace: WorkspaceUnit) => ReactNode;
}[] = [ }[] = [
{ {
name: 'general', name: 'General',
panelRender: workspace => <GeneralPage workspace={workspace} />, panelRender: workspace => <GeneralPage workspace={workspace} />,
}, },
{ {
name: 'members', name: 'Sync',
panelRender: workspace => <MembersPage workspace={workspace} />,
},
{
name: 'publish',
panelRender: workspace => <PublishPage workspace={workspace} />,
},
{
name: 'sync',
panelRender: workspace => <SyncPage workspace={workspace} />, panelRender: workspace => <SyncPage workspace={workspace} />,
}, },
{ {
name: 'export', name: 'Collaboration',
panelRender: workspace => <MembersPage workspace={workspace} />,
},
{
name: 'Publish',
panelRender: workspace => <PublishPage workspace={workspace} />,
},
{
name: 'Export',
panelRender: workspace => <ExportPage workspace={workspace} />, panelRender: workspace => <ExportPage workspace={workspace} />,
}, },
]; ];
@@ -66,38 +68,38 @@ const WorkspaceSetting = () => {
if (!isOwner) { if (!isOwner) {
tableArr = [ tableArr = [
{ {
name: 'general', name: 'General',
panelRender: workspace => <GeneralPage workspace={workspace} />, panelRender: workspace => <GeneralPage workspace={workspace} />,
}, },
]; ];
} }
return ( return (
<StyledSettingContainer> <>
<StyledSettingSidebar> <StyledSettingContainer>
<StyledSettingSidebarHeader> <PageListHeader icon={<SettingsIcon />}>{t('Settings')}</PageListHeader>
{t('Workspace Settings')} <StyledSettingSidebar>
</StyledSettingSidebarHeader> <StyledSettingTabContainer>
<StyledSettingTabContainer> {tableArr.map(({ name }) => {
{tableArr.map(({ name }) => { return (
return ( <WorkspaceSettingTagItem
<WorkspaceSettingTagItem key={name}
key={name} isActive={activeTab === name}
isActive={activeTab === name} onClick={() => {
onClick={() => { handleTabChange(name);
handleTabChange(name); }}
}} >
> {name}
{name} </WorkspaceSettingTagItem>
</WorkspaceSettingTagItem> );
); })}
})} </StyledSettingTabContainer>
</StyledSettingTabContainer> </StyledSettingSidebar>
</StyledSettingSidebar>
<StyledSettingContent> <StyledSettingContent>
{currentWorkspace && activeTabPanelRender?.(currentWorkspace)} {currentWorkspace && activeTabPanelRender?.(currentWorkspace)}
</StyledSettingContent> </StyledSettingContent>
</StyledSettingContainer> </StyledSettingContainer>
</>
); );
}; };
WorkspaceSetting.getLayout = function getLayout(page: ReactElement) { WorkspaceSetting.getLayout = function getLayout(page: ReactElement) {