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

feat: create workspace

Browse Source
This commit is contained in:
DiamondThree
2023-01-18 16:11:51 +08:00
parent e8a5d9b784
commit b39acf42e6
8 changed files with 243 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/app/src/components/create-workspace/index.tsx
View File

@@ -16,11 +16,15 @@ interface ModalProps {
export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
const [workspaceName, setWorkspaceName] = useState('');
const [loading, setLoading] = useState(false);
const { createWorkspace } = useWorkspaceHelper();
const router = useRouter();
const handleCreateWorkspace = async () => {
setLoading(true);
const workspace = await createWorkspace(workspaceName);
if (workspace && workspace.id) {
setLoading(false);
router.replace(`/workspace/${workspace.id}`);
onClose();
} else {
@@ -37,9 +41,8 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
return (
<div>
<Modal open={open} onClose={onClose}>
<ModalWrapper width={620} height={334} style={{ padding: '10px' }}>
<ModalWrapper width={560} height={342} style={{ padding: '10px' }}>
<Header>
<ContentTitle>{t('New Workspace')}</ContentTitle>
<ModalCloseButton
top={6}
right={6}
@@ -49,14 +52,28 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
/>
</Header>
<Content>
<p>{t('Workspace description')}</p>
<ContentTitle>{t('New Workspace')}</ContentTitle>
<p>
Workspace is your virtual space to capture, create and plan as
just one person or together as a team.
</p>
<Input
onKeyDown={handleKeyDown}
placeholder={'Set a Workspace name'}
onChange={value => {
setWorkspaceName(value);
}}
></Input>
<Button
disabled={!workspaceName}
style={{
width: '260px',
textAlign: 'center',
marginTop: '16px',
opacity: !workspaceName ? 0.5 : 1,
}}
loading={loading}
type="primary"
onClick={() => {
handleCreateWorkspace();
}}
@@ -75,20 +92,28 @@ const Header = styled('div')({
height: '44px',
});
const Content = styled('div')({
display: 'flex',
padding: '0 48px',
flexDirection: 'column',
alignItems: 'center',
gap: '16px',
const Content = styled('div')(({ theme }) => {
return {
padding: '0 84px',
textAlign: 'center',
fontSize: '18px',
lineHeight: '26px',
color: theme.colors.inputColor,
p: {
marginTop: '12px',
marginBottom: '16px',
},
};
});
const ContentTitle = styled('span')({
fontSize: '20px',
lineHeight: '28px',
fontWeight: 600,
textAlign: 'left',
paddingBottom: '16px',
const ContentTitle = styled('div')(() => {
return {
fontSize: '20px',
lineHeight: '28px',
fontWeight: 600,
textAlign: 'center',
paddingBottom: '16px',
};
});
// const Footer = styled('div')({

2
packages/app/src/components/login-modal/Icons.tsx
View File

@@ -13,8 +13,6 @@ export const GoogleIcon = () => {
};
const GoogleIconWrapper = styled('div')(({ theme }) => ({
width: '48px',
height: '48px',
background: theme.colors.pageBackground,
display: 'flex',
alignItems: 'center',

58
packages/app/src/components/login-modal/LoginOptionButton.tsx
View File

@@ -1,35 +1,17 @@
// import { getDataCenter } from '@affine/datacenter';
import { styled } from '@/styles';
import { Button } from '@/ui/button';
// import { useModal } from '@/providers/GlobalModalProvider';
import { GoogleIcon, StayLogOutIcon } from './Icons';
import { useTranslation } from '@affine/i18n';
export const GoogleLoginButton = () => {
// const { triggerLoginModal } = useModal();
const { t } = useTranslation();
return (
<StyledGoogleButton
onClick={() => {
// getDataCenter()
// .then(dc => dc.apis.signInWithGoogle?.())
// .then(() => {
// triggerLoginModal();
// })
// .catch(error => {
// console.log('sign google error', error);
// });
}}
>
<StyledGoogleButton>
<ButtonWrapper>
<IconWrapper>
<GoogleIcon />
</IconWrapper>
<TextWrapper>
<Title>{t('Continue with Google')}</Title>
<Description>
{t('Set up an AFFiNE account to sync data')}
</Description>
</TextWrapper>
<TextWrapper>{t('Continue with Google')}</TextWrapper>
</ButtonWrapper>
</StyledGoogleButton>
);
@@ -52,21 +34,18 @@ export const StayLogOutButton = () => {
);
};
const StyledGoogleButton = styled(Button)(() => {
const StyledGoogleButton = styled('div')(({ theme }) => {
return {
width: '361px',
height: '56px',
padding: '4px',
background: '#6880FF',
color: '#fff',
'& > span': {
marginLeft: 0,
},
width: '284px',
height: '40px',
marginTop: '30px',
fontSize: '16px',
cursor: 'pointer',
borderRadius: '40px',
border: `1px solid ${theme.colors.iconColor}`,
overflow: 'hidden',
':hover': {
background: '#516BF4',
color: '#fff',
border: `1px solid ${theme.colors.primaryColor}`,
},
};
});
@@ -76,11 +55,6 @@ const StyledStayLogOutButton = styled(Button)(() => {
width: '361px',
height: '56px',
padding: '4px',
'& > span': {
marginLeft: 0,
},
':hover': {
borderColor: '#6880FF',
},
@@ -90,20 +64,22 @@ const StyledStayLogOutButton = styled(Button)(() => {
const ButtonWrapper = styled('div')({
display: 'flex',
flexDirection: 'row',
width: '100%',
});
const IconWrapper = styled('div')({
width: '48px',
height: '48px',
flex: '0 48px',
borderRadius: '5px',
overflow: 'hidden',
marginRight: '12px',
marginTop: '8px',
});
const TextWrapper = styled('div')({
flex: 1,
textAlign: 'left',
height: '40px',
lineHeight: '40px',
});
const Title = styled('h1')(() => {

41
packages/app/src/components/login-modal/index.tsx
View File

@@ -1,19 +1,17 @@
import { ResetIcon } from '@blocksuite/icons';
import { styled } from '@/styles';
import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
import { TextButton } from '@/ui/button';
import { GoogleLoginButton, StayLogOutButton } from './LoginOptionButton';
import { useTranslation } from '@affine/i18n';
import { GoogleLoginButton } from './LoginOptionButton';
import { useAppState } from '@/providers/app-state-provider';
interface LoginModalProps {
open: boolean;
onClose: () => void;
}
export const LoginModal = ({ open, onClose }: LoginModalProps) => {
const { t } = useTranslation();
const { login } = useAppState();
return (
<Modal open={open} onClose={onClose} data-testid="login-modal">
<ModalWrapper width={620} height={334}>
<ModalWrapper width={560} height={292}>
<Header>
<ModalCloseButton
top={6}
@@ -24,13 +22,16 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => {
/>
</Header>
<Content>
<ContentTitle>{t('NotLoggedIn')}</ContentTitle>
<GoogleLoginButton />
<StayLogOutButton />
<ContentTitle>{'Sign in'}</ContentTitle>
<SignDes>Set up an AFFINE account to sync data</SignDes>
<span
onClick={async () => {
await login();
}}
>
<GoogleLoginButton />
</span>
</Content>
<Footer>
<TextButton icon={<StyledResetIcon />}>{t('ClearData')}</TextButton>
</Footer>
</ModalWrapper>
</Modal>
);
@@ -56,14 +57,10 @@ const ContentTitle = styled('h1')({
paddingBottom: '16px',
});
const Footer = styled('div')({
height: '70px',
paddingLeft: '24px',
marginTop: '32px',
});
const StyledResetIcon = styled(ResetIcon)({
marginRight: '12px',
width: '20px',
height: '20px',
const SignDes = styled('div')(({ theme }) => {
return {
fontWeight: 400,
color: theme.colors.textColor,
fontSize: '16px',
};
});

99
packages/app/src/components/workspace-modal/icons/index.tsx Normal file
View File

@@ -0,0 +1,99 @@
export const LocalIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.86315 3.54163H13.1382C13.738 3.54162 14.2261 3.54161 14.6222 3.57398C15.0314 3.60741 15.3972 3.67848 15.7377 3.85196C16.2734 4.12493 16.709 4.5605 16.982 5.09624C17.1555 5.43671 17.2265 5.80252 17.26 6.21174C17.2923 6.60785 17.2923 7.09591 17.2923 7.69577V10.9153C17.2923 11.5151 17.2923 12.0032 17.26 12.3993C17.2265 12.8085 17.1555 13.1743 16.982 13.5148C16.709 14.0505 16.2734 14.4861 15.7377 14.7591C15.3972 14.9326 15.0314 15.0036 14.6222 15.0371C14.2261 15.0694 13.738 15.0694 13.1382 15.0694H12.8479V16.0416H13.7044C14.0495 16.0416 14.3294 16.3214 14.3294 16.6666C14.3294 17.0118 14.0495 17.2916 13.7044 17.2916H6.29695C5.95177 17.2916 5.67195 17.0118 5.67195 16.6666C5.67195 16.3214 5.95177 16.0416 6.29695 16.0416H7.15343V15.0694H6.86313C6.26327 15.0694 5.77521 15.0694 5.37909 15.0371C4.96988 15.0036 4.60407 14.9326 4.2636 14.7591C3.72786 14.4861 3.29229 14.0505 3.01931 13.5148C2.84583 13.1743 2.77477 12.8085 2.74134 12.3993C2.70897 12.0032 2.70898 11.5151 2.70898 10.9152V7.69579C2.70898 7.09592 2.70897 6.60786 2.74134 6.21174C2.77477 5.80252 2.84583 5.43671 3.01931 5.09624C3.29229 4.5605 3.72786 4.12493 4.2636 3.85196C4.60407 3.67848 4.96988 3.60741 5.37909 3.57398C5.77521 3.54161 6.26328 3.54162 6.86315 3.54163ZM3.96013 11.4583C3.96232 11.801 3.96868 12.071 3.98719 12.2975C4.0143 12.6294 4.06434 12.8124 4.13307 12.9473C4.2862 13.2478 4.53055 13.4922 4.83108 13.6453C4.96597 13.714 5.14897 13.7641 5.48088 13.7912C5.82009 13.8189 6.25695 13.8194 6.88954 13.8194H13.1118C13.7444 13.8194 14.1812 13.8189 14.5204 13.7912C14.8523 13.7641 15.0353 13.714 15.1702 13.6453C15.4708 13.4922 15.7151 13.2478 15.8682 12.9473C15.937 12.8124 15.987 12.6294 16.0141 12.2975C16.0326 12.071 16.039 11.801 16.0412 11.4583H3.96013ZM16.0423 10.2083H3.95898V7.72218C3.95898 7.08959 3.95947 6.65273 3.98719 6.31353C4.0143 5.98162 4.06434 5.79861 4.13307 5.66372C4.2862 5.36319 4.53055 5.11884 4.83108 4.96571C4.96597 4.89698 5.14897 4.84694 5.48088 4.81983C5.82009 4.79211 6.25695 4.79163 6.88954 4.79163H13.1118C13.7444 4.79163 14.1812 4.79211 14.5204 4.81983C14.8523 4.84694 15.0353 4.89698 15.1702 4.96571C15.4708 5.11884 15.7151 5.36319 15.8682 5.66372C15.937 5.79861 15.987 5.98162 16.0141 6.31353C16.0418 6.65273 16.0423 7.08959 16.0423 7.72218V10.2083ZM11.5979 15.0694H8.40343V16.0416H11.5979V15.0694ZM10.0007 11.9583C10.3458 11.9583 10.6257 12.2381 10.6257 12.5833V12.5916C10.6257 12.9368 10.3458 13.2166 10.0007 13.2166C9.65547 13.2166 9.37565 12.9368 9.37565 12.5916V12.5833C9.37565 12.2381 9.65547 11.9583 10.0007 11.9583Z"
fill="#FDBD32"
/>
</svg>
);
};
export const OfflineIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.12249 3.54165C8.47134 3.54145 8.74594 3.54129 9.01129 3.60499C9.24512 3.66113 9.46866 3.75372 9.6737 3.87937C9.90638 4.02195 10.1004 4.21624 10.347 4.46306L10.4942 4.61035C10.8035 4.91964 10.889 4.99941 10.9794 5.05484C11.0726 5.11195 11.1742 5.15404 11.2805 5.17956C11.3837 5.20432 11.5005 5.20834 11.9379 5.20834L14.8587 5.20834C15.3038 5.20833 15.6754 5.20832 15.9789 5.23312C16.2955 5.25899 16.5927 5.31491 16.8737 5.45812C17.3049 5.67783 17.6555 6.02841 17.8752 6.45961C18.0184 6.74066 18.0744 7.03788 18.1002 7.35445C18.125 7.65797 18.125 8.02951 18.125 8.47463V13.192C18.125 13.6372 18.125 14.0087 18.1002 14.3122C18.0744 14.6288 18.0184 14.926 17.8752 15.2071C17.6555 15.6383 17.3049 15.9889 16.8737 16.2086C16.5927 16.3518 16.2955 16.4077 15.9789 16.4336C15.6754 16.4584 15.3039 16.4583 14.8587 16.4583H5.14129C4.69618 16.4583 4.32463 16.4584 4.02111 16.4336C3.70454 16.4077 3.40732 16.3518 3.12627 16.2086C2.69507 15.9889 2.34449 15.6383 2.12478 15.2071C1.98157 14.926 1.92565 14.6288 1.89978 14.3122C1.87498 14.0087 1.87499 13.6372 1.875 13.192V6.80798C1.87499 6.36285 1.87498 5.99131 1.89978 5.68778C1.92565 5.37121 1.98157 5.074 2.12478 4.79294C2.34449 4.36174 2.69507 4.01116 3.12627 3.79145C3.40732 3.64825 3.70454 3.59232 4.02111 3.56645C4.32464 3.54166 4.69618 3.54166 5.14131 3.54167L8.12249 3.54165ZM3.125 13.1667V6.83334C3.125 6.69601 3.12504 6.57168 3.12558 6.45836L14.8333 6.45834C15.3104 6.45834 15.6305 6.45882 15.8771 6.47897C16.1164 6.49852 16.2308 6.53342 16.3062 6.57187C16.5022 6.67174 16.6616 6.8311 16.7615 7.0271C16.7999 7.10257 16.8348 7.21697 16.8544 7.45624C16.8745 7.7028 16.875 8.02298 16.875 8.50001V13.1667C16.875 13.6437 16.8745 13.9639 16.8544 14.2104C16.8348 14.4497 16.7999 14.5641 16.7615 14.6396C16.6616 14.8356 16.5022 14.9949 16.3062 15.0948C16.2308 15.1333 16.1164 15.1682 15.8771 15.1877C15.6305 15.2079 15.3104 15.2083 14.8333 15.2083H5.16667C4.68964 15.2083 4.36946 15.2079 4.1229 15.1877C3.88363 15.1682 3.76923 15.1333 3.69376 15.0948C3.49776 14.9949 3.3384 14.8356 3.23854 14.6396C3.20008 14.5641 3.16518 14.4497 3.14563 14.2104C3.12549 13.9639 3.125 13.6437 3.125 13.1667ZM9.20211 7.49996C9.01802 7.49996 8.86878 7.6492 8.86878 7.83329V10.867H7.47722C7.17943 10.867 7.03108 11.2277 7.24271 11.4372L10 14.1666L12.7573 11.4372C12.9689 11.2277 12.8206 10.867 12.5228 10.867H11.1312V7.83329C11.1312 7.6492 10.982 7.49996 10.7979 7.49996H9.20211Z"
fill="#62CD80"
/>
</svg>
);
};
export const PublishedIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM9.99992 16.523C13.6024 16.523 16.5228 13.6026 16.5228 10.0001C16.5228 6.39761 13.6024 3.47722 9.99992 3.47722C6.39742 3.47722 3.47703 6.39761 3.47703 10.0001C3.47703 13.6026 6.39742 16.523 9.99992 16.523Z"
fill="#8699FF"
/>
<path
d="M7.13957 8.05468C8.34659 8.05468 9.33537 7.12035 9.42212 5.93548C9.57023 5.97414 9.72565 5.99472 9.88588 5.99472H10.8014C11.8126 5.99472 12.6324 5.17496 12.6324 4.16374C12.6324 3.15251 11.8126 2.33275 10.8014 2.33275H9.88588C9.03665 2.33275 8.32245 2.91091 8.11542 3.69509C7.81941 3.55535 7.48862 3.47722 7.13957 3.47722C5.8756 3.47722 4.85094 4.50182 4.85084 5.76577H3.70524V8.39782L7.59609 12.2887V12.9753C7.59609 13.8601 8.31338 14.5774 9.1982 14.5774V16.4084L10.457 17.4383L14.6912 15.264C14.6912 14.1264 13.7689 13.2042 12.6313 13.2042H12.288C12.288 11.3713 10.8022 9.88549 8.96932 9.88549H6.79503V8.02892C6.90741 8.04589 7.02246 8.05468 7.13957 8.05468Z"
fill="#8699FF"
/>
</svg>
);
};
export const CloudIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.5 11.3744C2.5 13.837 4.51472 15.8333 7 15.8333L13.75 15.8333C15.8211 15.8333 17.5 14.1532 17.5 12.0807C17.5 10.5419 16.5744 9.12069 15.25 8.54163C15.1098 6.10205 13.07 4.16663 10.5744 4.16663C8.62616 4.16663 6.95578 5.40527 6.25 7.08329C4 7.44788 2.5 9.33336 2.5 11.3744Z"
stroke="#60A5FA"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.54757 7.5L7.5 13.3333H8.6993L10.0017 9.29884L11.3048 13.3333H12.5L10.4521 7.5H9.54757Z"
fill="#60A5FA"
/>
</svg>
);
};
export const LineIcon = () => {
return (
<svg
width="2"
height="20"
viewBox="0 0 2 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1 0V20" stroke="black" stroke-opacity="0.15" />
</svg>
);
};

101
packages/app/src/components/workspace-modal/index.tsx
View File

@@ -1,14 +1,15 @@
import { styled } from '@/styles';
import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
import { IconButton } from '@/ui/button';
import { Modal, ModalWrapper } from '@/ui/modal';
import { Button, IconButton } from '@/ui/button';
import { useState } from 'react';
import { CreateWorkspaceModal } from '../create-workspace';
import {
CloudUnsyncedIcon,
UsersIcon,
AddIcon,
LogOutIcon,
CloudInsyncIcon,
PublishIcon,
CloseIcon,
} from '@blocksuite/icons';
import { toast } from '@/ui/toast';
import {
@@ -20,8 +21,9 @@ import { useRouter } from 'next/router';
import { useConfirm } from '@/providers/ConfirmProvider';
import { useTranslation } from '@affine/i18n';
import { LanguageMenu } from './languageMenu';
import Loading from '@/components/loading';
import { Wrapper } from '@/ui/layout';
import { CloudIcon, LineIcon, LocalIcon, OfflineIcon } from './icons';
import { LoginModal } from '../login-modal';
interface WorkspaceModalProps {
open: boolean;
onClose: () => void;
@@ -30,11 +32,11 @@ interface WorkspaceModalProps {
export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
const { confirm } = useConfirm();
const { workspaceList, currentWorkspace, login, user, logout, isOwner } =
const { workspaceList, currentWorkspace, user, logout, isOwner } =
useAppState();
const router = useRouter();
const { t } = useTranslation();
const [loaded, setLoaded] = useState(true);
const [loginOpen, setLoginOpen] = useState(false);
return (
<div>
<Modal open={open} onClose={onClose}>
@@ -48,14 +50,30 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
>
<Header>
<ContentTitle>{t('My Workspaces')}</ContentTitle>
<LanguageMenu />
<ModalCloseButton
top={6}
right={6}
onClick={() => {
onClose();
}}
/>
<HeaderOption>
<LanguageMenu />
<div
style={{
display: 'inline-block',
border: 'none',
margin: '2px 16px',
height: '24px',
position: 'relative',
top: '4px',
}}
>
<LineIcon></LineIcon>
</div>
<Button
style={{ border: 'none', padding: 0 }}
onClick={() => {
onClose();
}}
>
<CloseIcon></CloseIcon>
</Button>
</HeaderOption>
</Header>
<Content>
<WorkspaceList>
@@ -80,30 +98,30 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
{isOwner ? (
item.provider === 'local' ? (
<p>
<CloudUnsyncedIcon fontSize={16} />
<LocalIcon />
Local Workspace
</p>
) : (
<p>
<CloudUnsyncedIcon fontSize={16} />
<CloudIcon />
Cloud Workspace
</p>
)
) : (
<p>
<UsersIcon fontSize={16} color={'#FF646B'} />
<UsersIcon fontSize={20} color={'#FF646B'} />
Joined Workspace
</p>
)}
{item.provider === 'local' && (
<p>
<UsersIcon fontSize={16} />
<OfflineIcon />
All data can be accessed offline
</p>
)}
{item.published && (
<p>
<UsersIcon fontSize={16} /> Published to Web
<PublishIcon fontSize={16} /> Published to Web
</p>
)}
</StyleWorkspaceInfo>
@@ -132,14 +150,17 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
{t('Workspace description')}
</p> */}
</Content>
<LoginModal
open={loginOpen}
onClose={() => {
setLoginOpen(false);
}}
></LoginModal>
<Footer>
{!user ? (
<StyleSignIn
onClick={async () => {
setLoaded(false);
await login();
toast(t('login success'));
setLoaded(true);
setLoginOpen(true);
}}
>
<span>
@@ -149,7 +170,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
</StyleSignIn>
) : (
<div style={{ display: 'flex' }}>
<div>
<div style={{ paddingTop: '20px' }}>
<WorkspaceAvatar
size={40}
name={user.name}
@@ -160,12 +181,11 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
<p>{user.name}</p>
<p>{user.email}</p>
</StyleUserInfo>
<div>
<div style={{ paddingTop: '25px' }}>
<IconButton
onClick={() => {
confirm({
title: 'Sign out?',
content: `All data has been stored in the cloud. `,
confirmText: 'Sign out',
cancelText: 'Cancel',
@@ -185,11 +205,6 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
</div>
</div>
)}
{!loaded && (
<Wrapper justifyContent="center">
<Loading size={25} />
</Wrapper>
)}
</Footer>
<CreateWorkspaceModal
open={createWorkspaceOpen}
@@ -204,8 +219,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
};
const Header = styled('div')({
position: 'relative',
height: '44px',
display: 'flex',
});
const Content = styled('div')({
@@ -214,17 +228,21 @@ const Content = styled('div')({
gap: '16px',
flex: 1,
});
const ContentTitle = styled('span')({
const HeaderOption = styled.div(() => {
return {
marginLeft: '16px',
};
});
const ContentTitle = styled('div')({
fontSize: '20px',
lineHeight: '28px',
lineHeight: '24px',
fontWeight: 600,
textAlign: 'left',
paddingBottom: '16px',
flex: 1,
});
const WorkspaceList = styled('div')({
height: '500px',
maxHeight: '500px',
overflow: 'auto',
display: 'grid',
gridRowGap: '24px',
@@ -266,8 +284,8 @@ const StyleWorkspaceInfo = styled.div(({ theme }) => {
lineHeight: '16px',
},
svg: {
verticalAlign: 'sub',
marginRight: '10px',
verticalAlign: 'text-bottom',
marginRight: '8px',
},
};
});
@@ -320,6 +338,7 @@ const StyleSignIn = styled.div(({ theme }) => {
cursor: 'pointer',
fontSize: '16px',
fontWeight: 700,
color: theme.colors.iconColor,
span: {
display: 'inline-block',
width: '40px',

16
packages/app/src/components/workspace-modal/languageMenu.tsx
View File

@@ -1,10 +1,11 @@
import { LOCALES } from '@affine/i18n';
import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
import type { TooltipProps } from '@mui/material';
import { TooltipProps } from '@mui/material';
import { styled } from '@/styles';
import { Button, Tooltip } from '@mui/material';
import { Tooltip } from '@mui/material';
import { useState } from 'react';
import { useTranslation } from '@affine/i18n';
import { ArrowDownIcon } from '@blocksuite/icons';
import { Button } from '@/ui/button';
export const LanguageMenu = () => {
const { i18n } = useTranslation();
@@ -23,6 +24,7 @@ export const LanguageMenu = () => {
{LOCALES.map(option => {
return (
<ListItem
style={{ border: 'none' }}
key={option.name}
title={option.name}
onClick={() => {
@@ -40,14 +42,14 @@ export const LanguageMenu = () => {
open={show}
>
<StyledTitleButton
variant="text"
style={{ border: 'none', padding: '0px' }}
onClick={() => {
setShow(!show);
}}
>
<StyledContainer>
<StyledText>{languageName}</StyledText>
<UnfoldMoreIcon />
<ArrowDownIcon fontSize={18} />
</StyledContainer>
</StyledTitleButton>
</StyledTooltip>
@@ -56,8 +58,6 @@ export const LanguageMenu = () => {
const StyledContainer = styled('div')(() => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}));
@@ -88,8 +88,6 @@ const ListItem = styled(Button)(({ theme }) => ({
}));
const StyledTitleButton = styled(Button)(({ theme }) => ({
position: 'absolute',
right: '50px',
color: theme.colors.popoverColor,
fontSize: theme.font.sm,
}));

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

@@ -202,6 +202,7 @@ export const StyledButton = styled('button', {
},
'>span': {
marginLeft: '5px',
width: '100%',
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore