Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 12:28:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #878 from toeverything/feat/new-setting-page

Browse Source 
feat: setting page with new design
This commit is contained in:
Qi
2023-02-08 18:47:46 +08:00
committed by GitHub
parent 6d28081afa f8995e8a87
commit 23ff52b93d
23 changed files with 405 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx
View File

@@ -89,7 +89,6 @@ const ContentTitle = styled('h1')({
lineHeight: '28px',
fontWeight: 600,
textAlign: 'center',
paddingBottom: '16px',
});
const StyleTips = styled('div')(() => {
@@ -97,8 +96,8 @@ const StyleTips = styled('div')(() => {
userSelect: 'none',
width: '400px',
margin: 'auto',
marginBottom: '24px',
marginTop: '16px',
marginBottom: '32px',
marginTop: '12px',
};
});

2
packages/app/src/components/enable-workspace/index.tsx
View File

@@ -9,7 +9,7 @@ export const EnableWorkspaceButton = () => {
return (
<>
<Button
type="primary"
type="light"
shape="circle"
onClick={async () => {
setEnableModalOpen(true);

2
packages/app/src/components/header/styles.ts
View File

@@ -103,7 +103,7 @@ export const StyledSearchArrowWrapper = styled.div(() => {
export const StyledPageListTittleWrapper = styled(StyledTitle)(({ theme }) => {
return {
fontSize: theme.font.sm,
fontSize: theme.font.base,
color: theme.colors.textColor,
'>svg': {
fontSize: '20px',

6
packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx
View File

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
import type { WorkspaceUnit } from '@affine/datacenter';
import { WorkspaceAvatar as Avatar } from './Avatar';
const useAvatar = (workspaceUnit?: WorkspaceUnit) => {
const useAvatar = (workspaceUnit: WorkspaceUnit | null) => {
const [avatarUrl, setAvatarUrl] = useState('');
const avatarId =
workspaceUnit?.avatar || workspaceUnit?.blocksuiteWorkspace?.meta.avatar;
@@ -23,7 +23,7 @@ const useAvatar = (workspaceUnit?: WorkspaceUnit) => {
export const WorkspaceUnitAvatar = ({
size = 20,
name,
workspaceUnit,
workspaceUnit = null,
style,
}: {
size?: number;
@@ -31,7 +31,7 @@ export const WorkspaceUnitAvatar = ({
workspaceUnit?: WorkspaceUnit | null;
style?: React.CSSProperties;
}) => {
const avatarUrl = useAvatar(workspaceUnit || undefined);
const avatarUrl = useAvatar(workspaceUnit);
return (
<Avatar
size={size}

30
packages/app/src/components/workspace-setting/ExportPage.tsx
View File

@@ -1,24 +1,16 @@
import { styled } from '@/styles';
import { WorkspaceUnit } from '@affine/datacenter';
import { Trans } from '@affine/i18n';
export const ExportPageTitleContainer = styled('div')(() => {
return {
display: 'flex',
fontWeight: '500',
flex: 1,
};
});
import { useTranslation } from '@affine/i18n';
import { Wrapper } from '@/ui/layout';
import { Button } from '@/ui/button';
export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
const { t } = useTranslation();
console.log(workspace);
return (
<ExportPageTitleContainer>
<Trans i18nKey="Export Workspace">
Export Workspace
<code style={{ margin: '0 10px' }}>
{{ workspace: workspace.name }}
</code>
Is Comming
</Trans>
</ExportPageTitleContainer>
<>
<Wrapper marginBottom="32px"> {t('Export Description')}</Wrapper>
<Button type="light" shape="circle" disabled>
{t('Export AFFINE backup file')}
</Button>
</>
);
};

139
packages/app/src/components/workspace-setting/PublishPage.tsx
View File

@@ -1,11 +1,3 @@
import {
StyledButtonContainer,
StyledPublishContent,
StyledPublishCopyContainer,
StyledPublishExplanation,
StyledSettingH2,
StyledStopPublishContainer,
} from './style';
import { useState } from 'react';
import { Button } from '@/ui/button';
import Input from '@/ui/input';
@@ -14,6 +6,7 @@ import { WorkspaceUnit } from '@affine/datacenter';
import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
import { useTranslation } from '@affine/i18n';
import { EnableWorkspaceButton } from '../enable-workspace';
import { Wrapper, Content, FlexWrapper } from '@/ui/layout';
export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
const shareUrl = window.location.host + '/public-workspace/' + workspace.id;
const { publishWorkspace } = useWorkspaceHelper();
@@ -33,82 +26,64 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
toast(t('Copied link to clipboard'));
};
if (workspace.provider === 'affine') {
if (workspace.published) {
return (
<>
<Wrapper marginBottom="32px">{t('Published Description')}</Wrapper>
<Wrapper marginBottom="12px">
<Content weight="500">{t('Share with link')}</Content>
</Wrapper>
<FlexWrapper>
<Input width={582} value={shareUrl} disabled={true}></Input>
<Button
onClick={copyUrl}
type="light"
shape="circle"
style={{ marginLeft: '24px' }}
>
{t('Copy Link')}
</Button>
</FlexWrapper>
<Button
onClick={async () => {
setLoaded(true);
await togglePublic(false);
}}
loading={false}
type="danger"
shape="circle"
style={{ marginTop: '38px' }}
>
{t('Stop publishing')}
</Button>
</>
);
}
return (
<>
<Wrapper marginBottom="32px">{t('Publishing Description')}</Wrapper>
<Button
onClick={async () => {
setLoaded(true);
await togglePublic(true);
}}
loading={loaded}
type="light"
shape="circle"
>
{t('Publish to web')}
</Button>
</>
);
}
return (
<>
{workspace.provider === 'affine' ? (
<div
style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
>
<StyledPublishContent>
{workspace.published ? (
<>
<StyledPublishExplanation>
{t('Published Description')}
</StyledPublishExplanation>
<StyledPublishCopyContainer>
<StyledSettingH2 marginBottom={16}>
{t('Share with link')}
</StyledSettingH2>
<Input width={500} value={shareUrl} disabled={true}></Input>
<StyledButtonContainer>
<Button onClick={copyUrl} type="primary" shape="circle">
{t('Copy Link')}
</Button>
</StyledButtonContainer>
</StyledPublishCopyContainer>
</>
) : (
<StyledPublishExplanation>
{t('Publishing Description')}
<div style={{ marginTop: '64px' }}>
<Button
onClick={async () => {
setLoaded(true);
await togglePublic(true);
}}
loading={loaded}
type="primary"
shape="circle"
>
{t('Publish to web')}
</Button>
</div>
</StyledPublishExplanation>
)}
</StyledPublishContent>
{workspace.published ? (
<StyledStopPublishContainer>
<Button
onClick={async () => {
setLoaded(true);
await togglePublic(false);
}}
loading={false}
type="danger"
shape="circle"
>
{t('Stop publishing')}
</Button>
</StyledStopPublishContainer>
) : (
<></>
)}
</div>
) : (
<StyledPublishContent>
<>
<StyledPublishExplanation>
{t('Publishing')}
</StyledPublishExplanation>
<div style={{ marginTop: '72px' }}>
<EnableWorkspaceButton></EnableWorkspaceButton>
</div>
</>
</StyledPublishContent>
)}
<Wrapper marginBottom="32px">{t('Publishing')}</Wrapper>
<EnableWorkspaceButton />
</>
);
};

173
packages/app/src/components/workspace-setting/SyncPage.tsx
View File

@@ -1,97 +1,106 @@
import {
StyledButtonContainer,
StyledPublishContent,
StyledPublishExplanation,
StyledWorkspaceName,
StyledEmail,
// StyledDownloadCard,
// StyledDownloadCardDes,
} from './style';
// import { DownloadIcon } from '@blocksuite/icons';
// import { Button } from '@/ui/button';
// import { Menu, MenuItem } from '@/ui/menu';
import { WorkspaceUnit } from '@affine/datacenter';
import { useTranslation, Trans } from '@affine/i18n';
import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
import { EnableWorkspaceButton } from '../enable-workspace';
import { useAppState } from '@/providers/app-state-provider';
import { FlexWrapper, Content, Wrapper } from '@/ui/layout';
// // FIXME: Temporary solution, since the @blocksuite/icons is broken
// const ActiveIcon = () => {
// return (
// <svg
// width="24"
// height="24"
// viewBox="0 0 24 24"
// fill="none"
// xmlns="http://www.w3.org/2000/svg"
// >
// <path
// fillRule="evenodd"
// clipRule="evenodd"
// d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12Z"
// fill="#6880FF"
// />
// <path
// fillRule="evenodd"
// clipRule="evenodd"
// d="M16.5068 8.44714C16.8121 8.72703 16.8328 9.20146 16.5529 9.5068L11.0529 15.5068C10.9146 15.6576 10.7208 15.7454 10.5163 15.7498C10.3118 15.7543 10.1143 15.675 9.96967 15.5303L7.46967 13.0303C7.17678 12.7374 7.17678 12.2626 7.46967 11.9697C7.76256 11.6768 8.23744 11.6768 8.53033 11.9697L10.4764 13.9158L15.4471 8.49321C15.727 8.18787 16.2015 8.16724 16.5068 8.44714Z"
// fill="white"
// />
// </svg>
// );
// };
export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
const { t } = useTranslation();
const { user } = useAppState();
if (workspace.provider === 'local') {
return (
<>
<FlexWrapper alignItems="center" style={{ marginBottom: '12px' }}>
<WorkspaceUnitAvatar
size={32}
name={workspace.name}
workspaceUnit={workspace}
style={{ marginRight: '12px' }}
/>
<StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
<Content weight={500}>{t('is a Local Workspace')}</Content>
</FlexWrapper>
<p>{t('Local Workspace Description')}</p>
<Wrapper marginTop="32px">
<EnableWorkspaceButton />
</Wrapper>
</>
);
}
return (
<div>
<StyledPublishContent>
{workspace.provider === 'local' ? (
<>
<StyledPublishExplanation>
<WorkspaceUnitAvatar
size={32}
name={workspace.name}
workspaceUnit={workspace}
style={{ marginRight: '12px' }}
/>
<StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
<span>{t('is a Local Workspace')}</span>
</StyledPublishExplanation>
<div>{t('Local Workspace Description')}</div>
<StyledButtonContainer>
<EnableWorkspaceButton></EnableWorkspaceButton>
</StyledButtonContainer>
</>
) : (
<>
<StyledPublishExplanation>
<WorkspaceUnitAvatar
size={32}
name={workspace.name}
workspaceUnit={workspace}
style={{ marginRight: '12px' }}
/>
<StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
<span>{t('is a Cloud Workspace')}</span>
</StyledPublishExplanation>
<div>
<Trans i18nKey="Cloud Workspace Description">
All data will be synchronised and saved to the AFFiNE account
<StyledEmail>
{{
email: '{' + user?.email + '}.',
}}
</StyledEmail>
</Trans>
</div>
{/* TODO: will finish the feature next version */}
{/* <StyledButtonContainer>
<Menu
content={
<>
<MenuItem
onClick={() => {
// deleteMember(workspace.id, 0);
}}
icon={<DownloadIcon />}
>
{t('Download data', { CoreOrAll: t('core') })}
</MenuItem>
<MenuItem
onClick={() => {
// deleteMember(workspace.id, 0);
}}
icon={<DownloadIcon />}
>
{t('Download data', { CoreOrAll: t('all') })}
</MenuItem>
</>
}
placement="bottom-end"
disablePortal={true}
>
<Button type="primary">
{t('Download data', { CoreOrAll: '' })}
</Button>
</Menu>
</StyledButtonContainer> */}
</>
)}
</StyledPublishContent>
</div>
<>
<FlexWrapper alignItems="center" style={{ marginBottom: '12px' }}>
<WorkspaceUnitAvatar
size={32}
name={workspace.name}
workspaceUnit={workspace}
style={{ marginRight: '12px' }}
/>
<StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
<Content weight={500}>{t('is a Cloud Workspace')}</Content>
</FlexWrapper>
<Trans i18nKey="Cloud Workspace Description">
All data will be synchronised and saved to the AFFiNE account
<StyledEmail>
{{
email: '{' + user?.email + '}.',
}}
</StyledEmail>
</Trans>
{/*<Wrapper marginBottom="12px" marginTop="32px">*/}
{/* <Content weight="500">{t('Data sync mode')}</Content>*/}
{/*</Wrapper>*/}
{/*<FlexWrapper>*/}
{/* <StyledDownloadCard>*/}
{/* <ActiveIcon />*/}
{/* <Wrapper>{t('Download all data')}</Wrapper>*/}
{/* <StyledDownloadCardDes>*/}
{/* {t('It takes up more space on your device.')}*/}
{/* </StyledDownloadCardDes>*/}
{/* </StyledDownloadCard>*/}
{/* <StyledDownloadCard active>*/}
{/* <ActiveIcon />*/}
{/* <Wrapper>{t('Download core data')}</Wrapper>*/}
{/* <StyledDownloadCardDes>*/}
{/* {t('It takes up little space on your device.')}*/}
{/* </StyledDownloadCardDes>*/}
{/* </StyledDownloadCard>*/}
{/*</FlexWrapper>*/}
</>
);
};

161
packages/app/src/components/workspace-setting/general/General.tsx
View File

@@ -1,23 +1,13 @@
import {
StyledDeleteButtonContainer,
// StyledSettingAvatar,
StyledSettingAvatarContent,
StyledSettingInputContainer,
StyledDoneButtonContainer,
StyledInput,
StyledProviderInfo,
StyleGeneral,
StyledAvatar,
} from './style';
import { StyledSettingH2 } from '../style';
import { StyledInput, StyledProviderInfo, StyledAvatar } from './style';
import { StyledSettingKey, StyledRow } from '../style';
import { FlexWrapper, Content } from '@/ui/layout';
import { useState } from 'react';
import { Button } from '@/ui/button';
import { useAppState } from '@/providers/app-state-provider';
import { WorkspaceDelete } from './delete';
import { WorkspaceLeave } from './leave';
import { DoneIcon, UsersIcon } from '@blocksuite/icons';
// import { Upload } from '@/components/file-upload';
import { UsersIcon } from '@blocksuite/icons';
import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
import { WorkspaceUnit } from '@affine/datacenter';
import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
@@ -33,9 +23,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
const { updateWorkspace } = useWorkspaceHelper();
const { t } = useTranslation();
const handleChangeWorkSpaceName = (newName: string) => {
setWorkspaceName(newName);
};
const handleUpdateWorkspaceName = () => {
currentWorkspace &&
updateWorkspace({ name: workspaceName }, currentWorkspace);
@@ -47,72 +34,93 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
(await updateWorkspace({ avatarBlob: blob }, currentWorkspace));
};
return workspace ? (
<StyleGeneral>
<div style={{ flex: 1, overflow: 'auto' }}>
<StyledSettingH2>{t('Workspace Avatar')}</StyledSettingH2>
<StyledSettingAvatarContent>
<StyledAvatar>
<Upload
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
fileChange={fileChange}
>
<>
<div className="camera-icon">
<CameraIcon></CameraIcon>
</div>
<WorkspaceUnitAvatar
size={60}
name={workspace.name}
workspaceUnit={workspace}
/>
</>
</Upload>
</StyledAvatar>
{/* TODO: Wait for image sync to complete */}
{/* <Upload
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
fileChange={fileChange}
>
<Button loading={uploading}>{t('Upload')}</Button>
</Upload> */}
{/* TODO: add upload logic */}
</StyledSettingAvatarContent>
<StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
<StyledSettingInputContainer>
if (!workspace) {
return null;
}
return (
<>
<StyledRow>
<StyledSettingKey>{t('Workspace Avatar')}</StyledSettingKey>
<StyledAvatar>
<Upload
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
fileChange={fileChange}
>
<>
<div className="camera-icon">
<CameraIcon></CameraIcon>
</div>
<WorkspaceUnitAvatar
size={72}
name={workspace.name}
workspaceUnit={workspace}
/>
</>
</Upload>
</StyledAvatar>
</StyledRow>
<StyledRow>
<StyledSettingKey>{t('Workspace Name')}</StyledSettingKey>
<FlexWrapper>
<StyledInput
width={284}
height={32}
height={38}
value={workspaceName}
placeholder={t('Workspace Name')}
maxLength={15}
minLength={0}
disabled={!isOwner}
onChange={handleChangeWorkSpaceName}
onChange={newName => {
setWorkspaceName(newName);
}}
></StyledInput>
{isOwner ? (
<StyledDoneButtonContainer
onClick={() => {
handleUpdateWorkspaceName();
}}
>
<DoneIcon />
</StyledDoneButtonContainer>
) : null}
</StyledSettingInputContainer>
<StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
<StyledSettingInputContainer>
{isOwner && (
<>
<Button
type="default"
shape="circle"
style={{ marginLeft: '24px' }}
onClick={() => {
setWorkspaceName(workspace.name);
}}
>
{t('Cancel')}
</Button>
<Button
type="light"
shape="circle"
style={{ marginLeft: '24px' }}
onClick={() => {
handleUpdateWorkspaceName();
}}
>
{t('Confirm')}
</Button>
</>
)}
</FlexWrapper>
</StyledRow>
<StyledRow>
<StyledSettingKey>{t('Workspace Type')}</StyledSettingKey>
<FlexWrapper>
{isOwner ? (
currentWorkspace?.provider === 'local' ? (
<StyledProviderInfo>
<FlexWrapper alignItems="center">
<LocalIcon />
{t('Local Workspace')}
</StyledProviderInfo>
<Content style={{ marginLeft: '15px' }}>
{t('Local Workspace')}
</Content>
</FlexWrapper>
) : (
<StyledProviderInfo>
<FlexWrapper alignItems="center">
<CloudIcon />
{t('Available Offline')}
</StyledProviderInfo>
<Content style={{ marginLeft: '15px' }}>
{t('Available Offline')}
</Content>
</FlexWrapper>
)
) : (
<StyledProviderInfo>
@@ -120,10 +128,11 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
{t('Joined Workspace')}
</StyledProviderInfo>
)}
</StyledSettingInputContainer>
</div>
</FlexWrapper>
</StyledRow>
<StyledDeleteButtonContainer>
<StyledRow>
<StyledSettingKey> {t('Delete Workspace')}</StyledSettingKey>
{isOwner ? (
<>
<Button
@@ -163,7 +172,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
/>
</>
)}
</StyledDeleteButtonContainer>
</StyleGeneral>
) : null;
</StyledRow>
</>
);
};

52
packages/app/src/components/workspace-setting/general/style.ts
View File

@@ -1,40 +1,6 @@
import { displayFlex, styled } from '@/styles';
import { MuiAvatar } from '@/ui/mui';
import IconButton from '@/ui/button/IconButton';
import { styled } from '@/styles';
import Input from '@/ui/input';
export const StyledSettingInputContainer = styled('div')(() => {
return {
marginTop: '12px',
width: '100%',
...displayFlex('flex-start', 'center'),
};
});
export const StyledDeleteButtonContainer = styled('div')(() => {
return {
textAlign: 'center',
};
});
export const StyleGeneral = styled('div')(() => {
return {
display: 'flex',
flexDirection: 'column',
height: '100%',
};
});
export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => {
return {
border: `1px solid ${theme.colors.borderColor}`,
borderRadius: '10px',
height: '32px',
overflow: 'hidden',
marginLeft: '20px',
':hover': {
borderColor: theme.colors.primaryColor,
},
};
});
export const StyledInput = styled(Input)(({ theme }) => {
return {
border: `1px solid ${theme.colors.borderColor}`,
@@ -43,24 +9,9 @@ export const StyledInput = styled(Input)(({ theme }) => {
};
});
export const StyledSettingAvatarContent = styled('div')(() => {
return {
marginTop: '12px',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: '72px',
};
});
export const StyledSettingAvatar = styled(MuiAvatar)(() => {
return { height: '72px', width: '72px', marginRight: '24px' };
});
export const StyledProviderInfo = styled('p')(({ theme }) => {
return {
color: theme.colors.iconColor,
fontSize: theme.font.sm,
svg: {
verticalAlign: 'sub',
marginRight: '10px',
@@ -71,7 +22,6 @@ export const StyledProviderInfo = styled('p')(({ theme }) => {
export const StyledAvatar = styled('div')(() => {
return {
position: 'relative',
marginRight: '20px',
cursor: 'pointer',
':hover': {
'.camera-icon': {

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

@@ -10,10 +10,9 @@ import {
StyledMemberRoleContainer,
StyledMemberTitleContainer,
StyledMoreVerticalButton,
StyledPublishExplanation,
StyledMemberWarp,
StyledMemberContainer,
} from './style';
import { Wrapper } from '@/ui/layout';
import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
import { useState } from 'react';
import { Button, IconButton } from '@/ui/button';
@@ -166,11 +165,14 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
}
return (
<StyledMemberWarp>
{t('Collaboration Description')}
<StyledPublishExplanation>
<EnableWorkspaceButton></EnableWorkspaceButton>
</StyledPublishExplanation>
</StyledMemberWarp>
<Wrapper
style={{
fontWeight: '500',
fontSize: '18px',
}}
>
<Wrapper marginBottom="32px">{t('Collaboration Description')}</Wrapper>
<EnableWorkspaceButton />
</Wrapper>
);
};

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

@@ -97,24 +97,3 @@ export const StyledMoreVerticalButton = styled('button')(() => {
paddingRight: '48px',
};
});
export const StyledPublishExplanation = styled('div')(() => {
return {
paddingRight: '48px',
fontWeight: '500',
fontSize: '18px',
lineHeight: '26px',
flex: 1,
marginTop: '64px',
};
});
export const StyledMemberWarp = styled('div')(() => {
return {
display: 'flex',
flexDirection: 'column',
padding: '0 0 48px 0',
fontWeight: '500',
fontSize: '18px',
};
});

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

@@ -1,5 +1,5 @@
import { styled } from '@/styles';
import { FlexWrapper } from '@/ui/layout';
export const StyledSettingContainer = styled('div')(() => {
return {
display: 'flex',
@@ -13,41 +13,19 @@ export const StyledSettingContainer = styled('div')(() => {
export const StyledSettingSidebar = styled('div')(() => {
{
return {
// height: '48px',
marginTop: '50px',
marginTop: '48px',
};
}
});
export const StyledSettingContent = styled('div')(() => {
return {
overflow: 'hidden',
overflow: 'auto',
flex: 1,
paddingTop: '48px',
};
});
export const StyledSetting = styled('div')(({ theme }) => {
{
return {
width: '236px',
background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
};
}
});
export const StyledSettingSidebarHeader = styled('div')(() => {
{
return {
fontWeight: '500',
fontSize: '18px',
lineHeight: '26px',
textAlign: 'left',
marginTop: '37px',
};
}
});
export const StyledSettingTabContainer = styled('ul')(() => {
{
return {
@@ -65,7 +43,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
height: '34px',
color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
fontWeight: '500',
fontSize: theme.font.base,
fontSize: theme.font.h6,
lineHeight: theme.font.lineHeight,
cursor: 'pointer',
transition: 'all 0.15s ease',
@@ -78,76 +56,60 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
}
);
export const StyledSettingTagIconContainer = styled('div')(() => {
export const StyledSettingKey = styled.div(({ theme }) => {
return {
display: 'flex',
alignItems: 'center',
};
});
export const StyledSettingH2 = styled('h2')<{
marginTop?: number;
marginBottom?: number;
}>(({ marginTop, marginBottom, theme }) => {
return {
// fontWeight: '500',
width: '140px',
textAlign: 'right',
fontSize: theme.font.base,
lineHeight: theme.font.lineHeight,
marginTop: marginTop ? `${marginTop}px` : '0px',
marginBottom: marginBottom ? `${marginBottom}px` : '0px',
fontWeight: 500,
marginRight: '56px',
flexShrink: 0,
};
});
export const StyledRow = styled(FlexWrapper)(() => {
return {
marginBottom: '32px',
};
});
export const StyledPublishExplanation = styled('div')(() => {
return {
paddingRight: '48px',
// fontWeight: '500',
marginBottom: '22px',
};
});
export const StyledWorkspaceName = styled('span')(() => {
export const StyledWorkspaceName = styled('span')(({ theme }) => {
return {
fontWeight: '400',
};
});
export const StyledWorkspaceType = styled('span')(() => {
return {
// fontWeight: '500',
fontSize: theme.font.h6,
};
});
export const StyledPublishCopyContainer = styled('div')(() => {
return {
marginTop: '12px',
marginBottom: '20px',
paddingTop: '20px',
flex: 1,
};
});
export const StyledStopPublishContainer = styled('div')(() => {
return {
textAlign: 'center',
};
});
export const StyledButtonContainer = styled('div')(() => {
return {
marginTop: '64px',
};
});
export const StyledEmail = styled('span')(() => {
return {
color: '#E8178A',
};
});
export const StyledPublishContent = styled('div')(({ theme }) => {
return {
display: 'flex',
fontWeight: '500',
flexDirection: 'column',
fontSize: theme.font.base,
lineHeight: theme.font.lineHeight,
flex: 1,
};
});
// export const StyledDownloadCard = styled.div<{ active?: boolean }>(
// ({ theme, active }) => {
// return {
// width: '240px',
// height: '86px',
// border: '1px solid',
// borderColor: active
// ? theme.colors.primaryColor
// : theme.colors.borderColor,
// borderRadius: '10px',
// padding: '8px 12px',
// position: 'relative',
// ':not(:last-of-type)': {
// marginRight: '24px',
// },
// svg: {
// display: active ? 'block' : 'none',
// ...positionAbsolute({ top: '-12px', right: '-12px' }),
// },
// };
// }
// );
// export const StyledDownloadCardDes = styled.div(({ theme }) => {
// return {
// fontSize: theme.font.sm,
// color: theme.colors.iconColor,
// };
// });

4
packages/app/src/components/workspace-slider-bar/style.ts
View File

@@ -58,7 +58,6 @@ export const StyledListItem = styled.div<{
width: '296px',
height: '32px',
marginTop: '12px',
fontSize: theme.font.sm,
color: active ? theme.colors.primaryColor : theme.colors.popoverColor,
paddingLeft: '12px',
borderRadius: '5px',
@@ -122,9 +121,8 @@ export const StyledSubListItem = styled.button<{
width: '296px',
height: '32px',
marginTop: '4px',
fontSize: theme.font.sm,
color: disable
? theme.colors.iconColor
? theme.colors.disableColor
: active
? theme.colors.primaryColor
: theme.colors.popoverColor,

5
packages/app/src/pages/affine.tsx
View File

@@ -36,7 +36,6 @@ const Affine = () => {
<div>hi</div>
</Modal>
<Loading />
<Button
icon={<FavouritedIcon />}
onClick={() => {
@@ -48,13 +47,15 @@ const Affine = () => {
<Button icon={<FavouritedIcon />} type={'primary'}>
click me!
</Button>
<Button icon={<FavouritedIcon />} type={'light'}>
click me!
</Button>
<Button icon={<FavouritedIcon />} type={'warning'}>
click me!
</Button>
<Button icon={<FavouritedIcon />} type={'danger'}>
click me!
</Button>
<Button icon={<FavouritedIcon />}></Button>
<Button icon={<FavouritedIcon />} shape="round"></Button>
<Button loading={true}></Button>

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

@@ -11,6 +11,7 @@ import {
MembersPage,
PublishPage,
SyncPage,
ExportPage,
} from '@/components/workspace-setting';
import { SettingsIcon } from '@blocksuite/icons';
import { useAppState } from '@/providers/app-state-provider';
@@ -43,10 +44,10 @@ const useTabMap = () => {
panelRender: workspace => <PublishPage workspace={workspace} />,
},
// TODO: next version will finish this feature
// {
// name: t('Export'),
// panelRender: workspace => <ExportPage workspace={workspace} />,
// },
{
name: t('Export'),
panelRender: workspace => <ExportPage workspace={workspace} />,
},
];
const [activeTab, setActiveTab] = useState<string>(tabMap[0].name);
const handleTabChange = (tab: string) => {

8
packages/app/src/styles/theme.ts
View File

@@ -15,7 +15,7 @@ export const getLightTheme = (
primaryColor: '#6880FF',
pageBackground: '#fff',
hoverBackground: '#F1F1F4',
hoverBackground: '#F1F3FF',
innerHoverBackground: '#E9E9EC',
popoverBackground: '#fff',
tooltipBackground: '#6880FF',
@@ -38,9 +38,9 @@ export const getLightTheme = (
tooltipColor: '#fff',
codeColor: '#517ea6',
quoteColor: '#4C6275',
placeHolderColor: '#555770',
placeHolderColor: '#888A9E',
selectedColor: 'rgba(104, 128, 255, 0.1)',
borderColor: '#555770',
borderColor: '#E3E2E4',
disableColor: '#555770',
warningColor: '#906616',
errorColor: '#EB4335',
@@ -56,7 +56,7 @@ export const getLightTheme = (
h6: '18px',
base: '16px',
xs: '14px',
sm: '14px',
sm: '12px',
family: `Avenir Next, Poppins, ${basicFontFamily}`,
numberFamily: `Roboto Mono, ${basicFontFamily}`,

2
packages/app/src/ui/button/Loading.tsx
View File

@@ -4,7 +4,7 @@ import { getButtonColors } from './utils';
export const LoadingContainer = styled('div')<Pick<ButtonProps, 'type'>>(
({ theme, type = 'default' }) => {
const { color } = getButtonColors(theme, type);
const { color } = getButtonColors(theme, type, false);
return `
margin: 0px auto;
width: 38px;

2
packages/app/src/ui/button/interface.ts
View File

@@ -19,7 +19,7 @@ export type ButtonProps = PropsWithChildren &
icon?: ReactElement;
iconPosition?: 'start' | 'end';
shape?: 'default' | 'round' | 'circle';
type?: 'primary' | 'warning' | 'danger' | 'default';
type?: 'primary' | 'light' | 'warning' | 'danger' | 'default';
bold?: boolean;
loading?: boolean;
noBorder?: boolean;

2
packages/app/src/ui/button/styles.ts
View File

@@ -213,7 +213,7 @@ export const StyledButton = styled('button', {
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
...getButtonColors(theme, type, {
...getButtonColors(theme, type, disabled, {
hoverBackground,
hoverColor,
hoverStyle,

13
packages/app/src/ui/button/utils.ts
View File

@@ -40,6 +40,7 @@ export const getSize = (
export const getButtonColors = (
theme: AffineTheme,
type: ButtonProps['type'],
disabled: boolean,
extend?: {
hoverBackground: ButtonProps['hoverBackground'];
hoverColor: ButtonProps['hoverColor'];
@@ -56,6 +57,18 @@ export const getButtonColors = (
color: '#fff',
},
};
case 'light':
return {
background: theme.colors.hoverBackground,
color: disabled ? theme.colors.disableColor : theme.colors.primaryColor,
borderColor: theme.colors.hoverBackground,
'.affine-button-icon': {
borderColor: theme.colors.primaryColor,
},
':hover': {
borderColor: theme.colors.primaryColor,
},
};
case 'warning':
return {
background: theme.colors.warningBackground,

56
packages/app/src/ui/layout/Wrapper.tsx
View File

@@ -6,7 +6,15 @@ export type WrapperProps = {
width?: CSSProperties['width'];
height?: CSSProperties['height'];
padding?: CSSProperties['padding'];
paddingTop?: CSSProperties['paddingTop'];
paddingRight?: CSSProperties['paddingRight'];
paddingLeft?: CSSProperties['paddingLeft'];
paddingBottom?: CSSProperties['paddingBottom'];
margin?: CSSProperties['margin'];
marginTop?: CSSProperties['marginTop'];
marginLeft?: CSSProperties['marginLeft'];
marginRight?: CSSProperties['marginRight'];
marginBottom?: CSSProperties['marginBottom'];
};
export type FlexWrapperProps = {
@@ -22,17 +30,55 @@ export type FlexWrapperProps = {
// Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
export const Wrapper = styled('div', {
shouldForwardProp: prop => {
return !['display', 'width', 'height', 'padding', 'margin'].includes(prop);
return ![
'display',
'width',
'height',
'padding',
'margin',
'paddingTop',
'paddingRight',
'paddingLeft',
'paddingBottom',
'marginTop',
'marginLeft',
'marginRight',
'marginBottom',
].includes(prop);
},
})<WrapperProps>(({ display, width, height, padding, margin }) => {
return {
})<WrapperProps>(
({
display,
width,
height,
padding,
margin,
};
});
paddingTop,
paddingRight,
paddingLeft,
paddingBottom,
marginTop,
marginLeft,
marginRight,
marginBottom,
}) => {
return {
display,
width,
height,
padding,
margin,
paddingTop,
paddingRight,
paddingLeft,
paddingBottom,
marginTop,
marginLeft,
marginRight,
marginBottom,
};
}
);
export const FlexWrapper = styled(Wrapper, {
shouldForwardProp: prop => {

10
packages/i18n/src/resources/en.json
View File

@@ -35,6 +35,7 @@
"Permanently deleted": "Permanently deleted",
"restored": "{{title}} restored",
"Cancel": "Cancel",
"Confirm": "Confirm",
"Keyboard Shortcuts": "Keyboard Shortcuts",
"Contact Us": "Contact Us",
"Official Website": "Official Website",
@@ -133,6 +134,7 @@
"Share with link": "Share with link",
"Copy Link": "Copy Link",
"Publishing Description": "After publishing to the web, everyone can view the content of this workspace through the link.",
"Export Description": "You can export the entire Workspace data for backup, and the exported data can be re-impored.",
"Stop publishing": "Stop publishing",
"Publish to web": "Publish to web",
"Download data": "Download {{CoreOrAll}} data",
@@ -174,5 +176,11 @@
"Cloud Workspace Description": "All data will be synchronized and saved to the AFFiNE account <1>{{email}}</1>",
"Download data Description1": "It takes up more space on your device.",
"Download data Description2": "It takes up little space on your device.",
"Enabled success": "Enabled success"
"Enabled success": "Enabled success",
"Export AFFINE backup file": "Export AFFINE backup file (coming soon)",
"Data sync mode": "Data sync mode",
"Download all data": "Download all data",
"It takes up more space on your device.": "It takes up more space on your device.",
"Download core data": "Download core data",
"It takes up little space on your device.": "It takes up little space on your device."
}

10
packages/i18n/src/resources/zh-Hans.json
View File

@@ -39,6 +39,7 @@
"Permanently deleted": "已永久删除",
"restored": "{{title}} 已恢复",
"Cancel": "取消",
"Confirm": "确定",
"Keyboard Shortcuts": "键盘快捷键",
"Contact Us": "联系我们",
"Official Website": "官网",
@@ -133,6 +134,7 @@
"Share with link": "通过链接分享",
"Copy Link": "复制链接",
"Publishing Description": "发布到web后，所有人都可以通过链接查看此工作区的内容。",
"Export Description": "您可以导出整个Workspace数据进行备份，并且可以重新导入导出的数据。",
"Stop publishing": "中止发布",
"Publish to web": "发布到web",
"Sync Description": "{{workspaceName}}是本地工作区，所有数据都存储在当前设备上。您可以为此工作区启用AFFiNE Cloud，以使数据与云端保持同步。",
@@ -145,5 +147,11 @@
"Workspace Settings": "工作区设置",
"core": "核心",
"all": "全部",
"A workspace is your virtual space to capture, create and plan as just one person or together as a team.": "工作空间是一个人或一个团队创建和计划的虚拟空间。"
"A workspace is your virtual space to capture, create and plan as just one person or together as a team.": "工作空间是一个人或一个团队创建和计划的虚拟空间。",
"Export AFFINE backup file (coming soon)": "导出 AFFiNE 备份文件（即将上线）",
"Data sync mode": "数据同步模式",
"Download all data": "下载全部数据",
"It takes up more space on your device.": "占用设备更多空间。",
"Download core data": "下载核心数据",
"It takes up little space on your device.": "占用设备较少空间。"
}