From b39acf42e65669a04375f4bd42b8ac900ab3bcdb Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Wed, 18 Jan 2023 16:11:51 +0800 Subject: [PATCH] feat: create workspace --- .../src/components/create-workspace/index.tsx | 55 +++++++--- .../app/src/components/login-modal/Icons.tsx | 2 - .../login-modal/LoginOptionButton.tsx | 58 +++------- .../app/src/components/login-modal/index.tsx | 41 ++++--- .../workspace-modal/icons/index.tsx | 99 +++++++++++++++++ .../src/components/workspace-modal/index.tsx | 101 +++++++++++------- .../workspace-modal/languageMenu.tsx | 16 ++- packages/app/src/ui/button/styles.ts | 1 + 8 files changed, 243 insertions(+), 130 deletions(-) create mode 100644 packages/app/src/components/workspace-modal/icons/index.tsx diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx index 7b473afbf..9a26b5686 100644 --- a/packages/app/src/components/create-workspace/index.tsx +++ b/packages/app/src/components/create-workspace/index.tsx @@ -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 (
- +
- {t('New Workspace')} { />
-

{t('Workspace description')}

+ {t('New Workspace')} +

+ Workspace is your virtual space to capture, create and plan as + just one person or together as a team. +

{ setWorkspaceName(value); }} > + @@ -80,30 +98,30 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { {isOwner ? ( item.provider === 'local' ? (

- + Local Workspace

) : (

- + Cloud Workspace

) ) : (

- + Joined Workspace

)} {item.provider === 'local' && (

- + All data can be accessed offline

)} {item.published && (

- Published to Web + Published to Web

)} @@ -132,14 +150,17 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { {t('Workspace description')}

*/} + { + setLoginOpen(false); + }} + >
{!user ? ( { - setLoaded(false); - await login(); - toast(t('login success')); - setLoaded(true); + setLoginOpen(true); }} > @@ -149,7 +170,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { ) : (
-
+
{

{user.name}

{user.email}

-
+
{ 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) => {
)} - {!loaded && ( - - - - )}
{ }; 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', diff --git a/packages/app/src/components/workspace-modal/languageMenu.tsx b/packages/app/src/components/workspace-modal/languageMenu.tsx index 58bedcb47..d8f907663 100644 --- a/packages/app/src/components/workspace-modal/languageMenu.tsx +++ b/packages/app/src/components/workspace-modal/languageMenu.tsx @@ -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 ( { @@ -40,14 +42,14 @@ export const LanguageMenu = () => { open={show} > { setShow(!show); }} > {languageName} - + @@ -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, })); diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts index 54cda81dc..3e021c23d 100644 --- a/packages/app/src/ui/button/styles.ts +++ b/packages/app/src/ui/button/styles.ts @@ -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