diff --git a/packages/app/src/components/contact-modal/index.tsx b/packages/app/src/components/contact-modal/index.tsx index 6ec64fc144..d22b2ea6c4 100644 --- a/packages/app/src/components/contact-modal/index.tsx +++ b/packages/app/src/components/contact-modal/index.tsx @@ -91,8 +91,6 @@ export const ContactModal = ({ Alpha { onClose(); }} diff --git a/packages/app/src/components/delete-workspace/index.tsx b/packages/app/src/components/delete-workspace/index.tsx index 5cceb487a2..cead4b135e 100644 --- a/packages/app/src/components/delete-workspace/index.tsx +++ b/packages/app/src/components/delete-workspace/index.tsx @@ -29,8 +29,6 @@ export const DeleteModal = ({
{ onClose(); }} diff --git a/packages/app/src/components/edgeless-toolbar/index.tsx b/packages/app/src/components/edgeless-toolbar/index.tsx index 33784928b9..e261899860 100644 --- a/packages/app/src/components/edgeless-toolbar/index.tsx +++ b/packages/app/src/components/edgeless-toolbar/index.tsx @@ -14,8 +14,8 @@ import { UndoIcon, RedoIcon, } from './Icons'; +import { MuiSlide } from '@/ui/mui'; import { Tooltip } from '@/ui/tooltip'; -import Slide from '@mui/material/Slide'; import useCurrentPageMeta from '@/hooks/use-current-page-meta'; import { useAppState } from '@/providers/app-state-provider'; import useHistoryUpdated from '@/hooks/use-history-update'; @@ -127,7 +127,7 @@ export const EdgelessToolbar = () => { const { mode } = useCurrentPageMeta() || {}; return ( - { - + ); }; diff --git a/packages/app/src/components/header/Header.tsx b/packages/app/src/components/header/Header.tsx index a8a50bfefe..1226f91561 100644 --- a/packages/app/src/components/header/Header.tsx +++ b/packages/app/src/components/header/Header.tsx @@ -6,7 +6,7 @@ import { StyledBrowserWarning, StyledCloseButton, } from './styles'; -import CloseIcon from '@mui/icons-material/Close'; +import { CloseIcon } from '@blocksuite/icons'; import { useWarningMessage, shouldShowWarning } from './utils'; import EditorOptionMenu from './header-right-items/EditorOptionMenu'; import TrashButtonGroup from './header-right-items/TrashButtonGroup'; diff --git a/packages/app/src/components/help-island/index.tsx b/packages/app/src/components/help-island/index.tsx index d6aad0c891..9fb883481d 100644 --- a/packages/app/src/components/help-island/index.tsx +++ b/packages/app/src/components/help-island/index.tsx @@ -6,7 +6,7 @@ import { StyledTransformIcon, } from './style'; import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './Icons'; -import Grow from '@mui/material/Grow'; +import { MuiGrow } from '@/ui/mui'; import { Tooltip } from '@/ui/tooltip'; import { useTranslation } from '@affine/i18n'; import { useModal } from '@/providers/GlobalModalProvider'; @@ -35,7 +35,7 @@ export const HelpIsland = ({ setShowContent(false); }} > - + {showList.includes('contact') && ( @@ -66,7 +66,7 @@ export const HelpIsland = ({ )} - +
{
{ onClose(); }} diff --git a/packages/app/src/components/logout-modal/index.tsx b/packages/app/src/components/logout-modal/index.tsx index 91a5641d5b..0aaee3968e 100644 --- a/packages/app/src/components/logout-modal/index.tsx +++ b/packages/app/src/components/logout-modal/index.tsx @@ -15,8 +15,6 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
{ onClose(true); }} diff --git a/packages/app/src/components/shortcuts-modal/index.tsx b/packages/app/src/components/shortcuts-modal/index.tsx index 280adeb7e6..08416e3126 100644 --- a/packages/app/src/components/shortcuts-modal/index.tsx +++ b/packages/app/src/components/shortcuts-modal/index.tsx @@ -13,7 +13,7 @@ import { useWindowsKeyboardShortcuts, useWinMarkdownShortcuts, } from '@/components/shortcuts-modal/config'; -import Slide from '@mui/material/Slide'; +import { MuiSlide } from '@/ui/mui'; import { ModalCloseButton } from '@/ui/modal'; import { getUaHelper } from '@/utils'; import { useTranslation } from '@affine/i18n'; @@ -40,7 +40,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => { : windowsKeyboardShortcuts; return createPortal( - + <> @@ -81,7 +81,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => { })} - , + , document.body ); }; diff --git a/packages/app/src/components/workspace-modal/Footer.tsx b/packages/app/src/components/workspace-modal/Footer.tsx new file mode 100644 index 0000000000..ea38de2a9c --- /dev/null +++ b/packages/app/src/components/workspace-modal/Footer.tsx @@ -0,0 +1,56 @@ +import { CloudInsyncIcon, LogOutIcon } from '@blocksuite/icons'; +import { Wrapper } from '@/ui/layout'; +import { WorkspaceAvatar } from '@/components/workspace-avatar'; +import { IconButton } from '@/ui/button'; +import { useAppState } from '@/providers/app-state-provider'; +import { StyledFooter, StyleUserInfo, StyleSignIn } from './styles'; + +export const Footer = ({ + onLogin, + onLogout, +}: { + onLogin: () => void; + onLogout: () => void; +}) => { + const { user } = useAppState(); + + return ( + + {user && ( + <> + + + +

{user.name}

+

{user.email}

+ + + { + onLogout(); + }} + > + + + + )} + + {!user && ( + { + onLogin(); + }} + > + + + + Sign in to sync with AFFINE Cloud + + )} + + ); +}; diff --git a/packages/app/src/components/workspace-modal/LanguageMenu.tsx b/packages/app/src/components/workspace-modal/LanguageMenu.tsx new file mode 100644 index 0000000000..ad579e145b --- /dev/null +++ b/packages/app/src/components/workspace-modal/LanguageMenu.tsx @@ -0,0 +1,61 @@ +import { LOCALES } from '@affine/i18n'; +import { styled } from '@/styles'; +import { useTranslation } from '@affine/i18n'; +import { ArrowDownIcon } from '@blocksuite/icons'; +import { Button } from '@/ui/button'; +import { Menu, MenuItem } from '@/ui/menu'; + +const LanguageMenuContent = () => { + const { i18n } = useTranslation(); + const changeLanguage = (event: string) => { + i18n.changeLanguage(event); + }; + return ( + <> + {LOCALES.map(option => { + return ( + { + changeLanguage(option.tag); + }} + > + {option.originalName} + + ); + })} + + ); +}; +export const LanguageMenu = () => { + const { i18n } = useTranslation(); + + const currentLanguage = LOCALES.find(item => item.tag === i18n.language); + + return ( + } + placement="bottom" + trigger="click" + disablePortal={true} + > + + + ); +}; + +const ListItem = styled(MenuItem)(({ theme }) => ({ + height: '38px', + color: theme.colors.popoverColor, + fontSize: theme.font.sm, + textTransform: 'capitalize', + padding: '0 24px', +})); diff --git a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx new file mode 100644 index 0000000000..1a6032d65f --- /dev/null +++ b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx @@ -0,0 +1,69 @@ +import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; +import { + CloudIcon, + LocalIcon, + OfflineIcon, +} from '@/components/workspace-modal/icons'; +import { PublishIcon, UsersIcon } from '@blocksuite/icons'; +import { WorkspaceUnit } from '@affine/datacenter'; +import { useAppState } from '@/providers/app-state-provider'; +import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles'; +import { Wrapper } from '@/ui/layout'; + +export const WorkspaceCard = ({ + workspaceData, + onClick, +}: { + workspaceData: WorkspaceUnit; + onClick: (data: WorkspaceUnit) => void; +}) => { + const { currentWorkspace, isOwner } = useAppState(); + + return ( + { + onClick(workspaceData); + }} + active={workspaceData.id === currentWorkspace?.id} + > + + + + + + + {workspaceData.name || 'AFFiNE'} + + {isOwner ? ( + workspaceData.provider === 'local' ? ( +

+ + Local Workspace +

+ ) : ( +

+ + Cloud Workspace +

+ ) + ) : ( +

+ + Joined Workspace +

+ )} + {workspaceData.provider === 'local' && ( +

+ + All data can be accessed offline +

+ )} + {workspaceData.published && ( +

+ Published to Web +

+ )} + + + ); +}; diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index c0dd2a8bd3..93b1bb7279 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -1,28 +1,35 @@ -import { styled } from '@/styles'; -import { Modal, ModalWrapper } from '@/ui/modal'; -import { Button, IconButton } from '@/ui/button'; +import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; +import { Wrapper } from '@/ui/layout'; import { useState } from 'react'; import { CreateWorkspaceModal } from '../create-workspace'; -import { - UsersIcon, - AddIcon, - LogOutIcon, - CloudInsyncIcon, - PublishIcon, - CloseIcon, -} from '@blocksuite/icons'; -import { - WorkspaceAvatar, - WorkspaceUnitAvatar, -} from '@/components/workspace-avatar'; +import { Tooltip } from '@/ui/tooltip'; +import { toast } from '@/ui/toast'; + +import { AddIcon, HelpCenterIcon } from '@blocksuite/icons'; + import { useAppState } from '@/providers/app-state-provider'; import { useRouter } from 'next/router'; import { useTranslation } from '@affine/i18n'; -import { LanguageMenu } from './languageMenu'; +import { LanguageMenu } from './LanguageMenu'; -import { CloudIcon, LineIcon, LocalIcon, OfflineIcon } from './icons'; import { LoginModal } from '../login-modal'; import { LogoutModal } from '../logout-modal'; +import { + StyledCard, + StyledSplitLine, + StyleWorkspaceInfo, + StyleWorkspaceTitle, + StyledModalHeaderLeft, + StyledModalTitle, + StyledHelperContainer, + StyledModalContent, + StyledOperationWrapper, + StyleWorkspaceAdd, + StyledModalHeader, +} from './styles'; +import { WorkspaceCard } from './WorkspaceCard'; +import { Footer } from './Footer'; +import { useConfirm } from '@/providers/ConfirmProvider'; interface WorkspaceModalProps { open: boolean; onClose: () => void; @@ -30,337 +37,128 @@ interface WorkspaceModalProps { export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false); - const { workspaceList, currentWorkspace, user, logout, isOwner } = - useAppState(); + const { workspaceList, logout } = useAppState(); const router = useRouter(); const { t } = useTranslation(); const [loginOpen, setLoginOpen] = useState(false); const [logoutOpen, setLogoutOpen] = useState(false); + const { confirm } = useConfirm(); + return ( -
+ <> -
- {t('My Workspaces')} - - -
+ + {t('My Workspaces')} + - -
+ + + + + - - -
- - - {workspaceList.map((item, index) => { - return ( - { - router.replace(`/workspace/${item.id}`); - onClose(); - }} - active={item.id === currentWorkspace?.id} - key={index} - > -
- -
+ absolute={false} + /> + + - - - {item.name || 'AFFiNE'} - - {isOwner ? ( - item.provider === 'local' ? ( -

- - Local Workspace -

- ) : ( -

- - Cloud Workspace -

- ) - ) : ( -

- - Joined Workspace -

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

- - All data can be accessed offline -

- )} - {item.published && ( -

- Published to Web -

- )} - - - ); - })} - { - setCreateWorkspaceOpen(true); - }} - > -
- - - -
+ + {workspaceList.map((item, index) => { + return ( + { + router.replace(`/workspace/${workspaceData.id}`); + onClose(); + }} + key={index} + > + ); + })} + { + setCreateWorkspaceOpen(true); + }} + > + + + + + - - New workspace -

Crete or import

- - - - {/*

- {t('Tips')} - {t('Workspace description')} -

*/} - - { - setLoginOpen(false); + + New workspace +

Crete or import

+ + + + +
{ + setLoginOpen(true); }} - > -
- {!user ? ( - { - setLoginOpen(true); - }} - > - - - - Sign in to sync with AFFINE Cloud - - ) : ( -
-
- -
- -

{user.name}

-

{user.email}

- -
- { - setLogoutOpen(true); - // confirm({ - // title: 'Sign out?', - // content: `All data has been stored in the cloud. `, - // confirmText: 'Sign out', - // cancelText: 'Cancel', - // }).then(async confirm => { - // // if (confirm) { - // // if (user) { - // // await logout(); - // // router.replace(`/workspace`); - // // toast('Enabled success'); - // // } - // // } - // }); - }} - > - - -
-
- )} -
- { - setCreateWorkspaceOpen(false); + onLogout={() => { + setLoginOpen(true); + confirm({ + title: 'Sign out?', + content: `All data has been stored in the cloud. `, + confirmText: 'Sign out', + cancelText: 'Cancel', + }).then(async confirm => { + if (confirm) { + await logout(); + await router.replace(`/workspace`); + toast('Enabled success'); + } + }); }} - > - { - if (!wait) { - await logout(); - router.replace(`/workspace`); - } - setLogoutOpen(false); - }} - > + /> -
+ + { + setLoginOpen(false); + }} + /> + { + if (!wait) { + await logout(); + router.replace(`/workspace`); + } + setLogoutOpen(false); + }} + /> + { + setCreateWorkspaceOpen(false); + }} + /> + ); }; - -const Header = styled('div')({ - display: 'flex', -}); - -const Content = styled('div')({ - flexDirection: 'column', - alignItems: 'center', - gap: '16px', - flex: 1, -}); -const HeaderOption = styled.div(() => { - return { - marginLeft: '16px', - }; -}); -const ContentTitle = styled('div')({ - fontSize: '20px', - lineHeight: '24px', - fontWeight: 600, - textAlign: 'left', - flex: 1, -}); - -const WorkspaceList = styled('div')({ - maxHeight: '500px', - overflow: 'auto', - display: 'grid', - gridRowGap: '24px', - gridColumnGap: '24px', - fontSize: '16px', - marginTop: '36px', - gridTemplateColumns: 'repeat(2, 1fr)', -}); - -export const WorkspaceItem = styled.div<{ - active?: boolean; -}>(({ theme, active }) => { - const borderColor = active ? theme.colors.primaryColor : 'transparent'; - return { - cursor: 'pointer', - padding: '16px', - height: '124px', - boxShadow: theme.shadow.modal, - display: 'flex', - borderRadius: '12px', - border: `1px solid ${borderColor}`, - ':hover': { - background: theme.colors.hoverBackground, - '.add-icon': { - border: `1.5px dashed ${theme.colors.primaryColor}`, - svg: { - fill: theme.colors.primaryColor, - }, - }, - }, - }; -}); - -const StyleWorkspaceInfo = styled.div(({ theme }) => { - return { - marginLeft: '16px', - p: { - fontSize: theme.font.xs, - lineHeight: '16px', - }, - svg: { - verticalAlign: 'text-bottom', - marginRight: '8px', - }, - }; -}); - -const StyleWorkspaceTitle = styled.div(({ theme }) => { - return { - fontSize: theme.font.base, - fontWeight: 600, - lineHeight: '24px', - marginBottom: '8px', - }; -}); - -const StyleWorkspaceAdd = styled.div(() => { - return { - width: '58px', - height: '58px', - borderRadius: '100%', - textAlign: 'center', - background: '#f4f5fa', - border: '1.5px dashed #f4f5fa', - lineHeight: '58px', - marginTop: '2px', - }; -}); - -const Footer = styled('div')({ - paddingTop: '16px', -}); - -const StyleUserInfo = styled.div(({ theme }) => { - return { - textAlign: 'left', - marginLeft: '16px', - marginTop: '16px', - flex: 1, - p: { - lineHeight: '24px', - color: theme.colors.iconColor, - }, - 'p:nth-child(1)': { - color: theme.colors.textColor, - fontWeight: 600, - }, - }; -}); - -const StyleSignIn = styled.div(({ theme }) => { - return { - cursor: 'pointer', - fontSize: '16px', - fontWeight: 700, - color: theme.colors.iconColor, - span: { - display: 'inline-block', - width: '40px', - height: '40px', - borderRadius: '40px', - backgroundColor: theme.colors.innerHoverBackground, - textAlign: 'center', - lineHeight: '44px', - marginRight: '16px', - svg: { - fill: theme.colors.primaryColor, - }, - }, - }; -}); diff --git a/packages/app/src/components/workspace-modal/languageMenu.tsx b/packages/app/src/components/workspace-modal/languageMenu.tsx index d8f907663d..ad579e145b 100644 --- a/packages/app/src/components/workspace-modal/languageMenu.tsx +++ b/packages/app/src/components/workspace-modal/languageMenu.tsx @@ -1,93 +1,61 @@ import { LOCALES } from '@affine/i18n'; -import { TooltipProps } from '@mui/material'; import { styled } from '@/styles'; -import { Tooltip } from '@mui/material'; -import { useState } from 'react'; import { useTranslation } from '@affine/i18n'; import { ArrowDownIcon } from '@blocksuite/icons'; import { Button } from '@/ui/button'; +import { Menu, MenuItem } from '@/ui/menu'; -export const LanguageMenu = () => { +const LanguageMenuContent = () => { const { i18n } = useTranslation(); const changeLanguage = (event: string) => { i18n.changeLanguage(event); }; - const [show, setShow] = useState(false); - const currentLanguage = LOCALES.find(item => item.tag === i18n.language); - const [languageName, setLanguageName] = useState( - currentLanguage?.originalName - ); return ( - - {LOCALES.map(option => { - return ( - { - changeLanguage(option.tag); - setShow(false); - setLanguageName(option.originalName); - }} - > - {option.originalName} - - ); - })} - - } - open={show} + <> + {LOCALES.map(option => { + return ( + { + changeLanguage(option.tag); + }} + > + {option.originalName} + + ); + })} + + ); +}; +export const LanguageMenu = () => { + const { i18n } = useTranslation(); + + const currentLanguage = LOCALES.find(item => item.tag === i18n.language); + + return ( + } + placement="bottom" + trigger="click" + disablePortal={true} > - { - setShow(!show); - }} + + ); }; -const StyledContainer = styled('div')(() => ({ - display: 'flex', - alignItems: 'center', -})); - -const StyledText = styled('span')(({ theme }) => ({ - marginRight: '4px', - marginLeft: '16px', - fontSize: theme.font.sm, - fontWeight: '500', - textTransform: 'capitalize', -})); -const StyledTooltip = styled(({ className, ...props }: TooltipProps) => ( - -))(({ theme }) => ({ - zIndex: theme.zIndex.modal, - '& .MuiTooltip-tooltip': { - backgroundColor: theme.colors.popoverBackground, - boxShadow: theme.shadow.modal, - color: theme.colors.popoverColor, - }, -})); - -const ListItem = styled(Button)(({ theme }) => ({ - display: 'block', - width: '100%', +const ListItem = styled(MenuItem)(({ theme }) => ({ + height: '38px', color: theme.colors.popoverColor, fontSize: theme.font.sm, textTransform: 'capitalize', -})); - -const StyledTitleButton = styled(Button)(({ theme }) => ({ - color: theme.colors.popoverColor, - fontSize: theme.font.sm, + padding: '0 24px', })); diff --git a/packages/app/src/components/workspace-modal/styles.ts b/packages/app/src/components/workspace-modal/styles.ts index 40a8bcc375..57146afbdf 100644 --- a/packages/app/src/components/workspace-modal/styles.ts +++ b/packages/app/src/components/workspace-modal/styles.ts @@ -1,38 +1,161 @@ import { displayFlex, styled } from '@/styles'; -export const StyledTitle = styled.div(() => { +export const StyledSplitLine = styled.div(({ theme }) => { return { - ...displayFlex('center', 'center'), - fontSize: '20px', - fontWeight: 500, - marginTop: '60px', - lineHeight: 1, + width: '1px', + height: '20px', + background: theme.colors.iconColor, + marginRight: '24px', }; }); -export const StyledContent = styled.div(() => { +export const StyleWorkspaceInfo = styled.div(({ theme }) => { return { - padding: '0 40px', - marginTop: '32px', - fontSize: '18px', - lineHeight: '25px', - 'p:not(last-of-type)': { - marginBottom: '10px', + marginLeft: '15px', + p: { + height: '20px', + fontSize: theme.font.xs, + ...displayFlex('flex-start', 'center'), + }, + svg: { + marginRight: '10px', }, }; }); -export const StyledButton = styled.div(({ theme }) => { +export const StyleWorkspaceTitle = styled.div(({ theme }) => { return { - width: '146px', - height: '42px', - background: theme.colors.primaryColor, - color: '#FFFFFF', - fontSize: '18px', - fontWeight: 500, - borderRadius: '21px', - margin: '52px auto 0', + fontSize: theme.font.base, + fontWeight: 600, + lineHeight: '24px', + marginBottom: '10px', + }; +}); + +export const StyledCard = styled.div<{ + active?: boolean; +}>(({ theme, active }) => { + const borderColor = active ? theme.colors.primaryColor : 'transparent'; + return { + width: '310px', + height: '124px', cursor: 'pointer', + padding: '16px', + boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)', + borderRadius: '12px', + border: `1px solid ${borderColor}`, + ...displayFlex('flex-start', 'flex-start'), + ':hover': { + background: theme.colors.hoverBackground, + '.add-icon': { + border: `1.5px dashed ${theme.colors.primaryColor}`, + svg: { + fill: theme.colors.primaryColor, + }, + }, + }, + }; +}); + +export const StyledFooter = styled('div')({ + height: '84px', + padding: '0 40px', + ...displayFlex('space-between', 'center'), +}); + +export const StyleUserInfo = styled.div(({ theme }) => { + return { + textAlign: 'left', + marginLeft: '16px', + flex: 1, + p: { + lineHeight: '24px', + color: theme.colors.iconColor, + }, + 'p:nth-child(1)': { + color: theme.colors.textColor, + fontWeight: 600, + }, + }; +}); + +export const StyleSignIn = styled.div(({ theme }) => { + return { + cursor: 'pointer', + fontSize: '16px', + fontWeight: 700, + color: theme.colors.iconColor, + span: { + display: 'inline-block', + width: '40px', + height: '40px', + borderRadius: '40px', + backgroundColor: theme.colors.innerHoverBackground, + textAlign: 'center', + lineHeight: '44px', + marginRight: '16px', + svg: { + fill: theme.colors.primaryColor, + }, + }, + }; +}); + +export const StyledModalHeaderLeft = styled.div(() => { + return { ...displayFlex('flex-start', 'center') }; +}); +export const StyledModalTitle = styled.div(({ theme }) => { + return { + fontWeight: 600, + fontSize: theme.font.h6, + }; +}); + +export const StyledHelperContainer = styled.div(({ theme }) => { + return { + color: theme.colors.iconColor, + marginLeft: '15px', + fontWeight: 400, ...displayFlex('center', 'center'), }; }); + +export const StyledModalContent = styled('div')({ + height: '534px', + padding: '8px 40px', + marginTop: '72px', + overflow: 'auto', + ...displayFlex('space-between', 'flex-start', 'column'), + flexWrap: 'wrap', +}); +export const StyledOperationWrapper = styled.div(() => { + return { + ...displayFlex('flex-end', 'center'), + }; +}); + +export const StyleWorkspaceAdd = styled.div(() => { + return { + width: '58px', + height: '58px', + borderRadius: '100%', + textAlign: 'center', + background: '#f4f5fa', + border: '1.5px dashed #f4f5fa', + lineHeight: '58px', + marginTop: '2px', + }; +}); +export const StyledModalHeader = styled('div')(({ theme }) => { + return { + width: '100%', + height: '72px', + position: 'absolute', + left: 0, + top: 0, + background: theme.colors.pageBackground, + borderRadius: '24px 24px 0 0', + padding: '0 40px', + ...displayFlex('space-between', 'center'), + }; +}); diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts index d2e8d7b4d2..e52519ad5d 100644 --- a/packages/app/src/components/workspace-setting/general/style.ts +++ b/packages/app/src/components/workspace-setting/general/style.ts @@ -1,5 +1,5 @@ import { displayFlex, styled } from '@/styles'; -import MuiAvatar from '@mui/material/Avatar'; +import { MuiAvatar } from '@/ui/mui'; import IconButton from '@/ui/button/IconButton'; import Input from '@/ui/input'; diff --git a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx index 7bd542efb6..dc32718dd7 100644 --- a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx +++ b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx @@ -4,7 +4,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; import { Button } from '@/ui/button'; import Input from '@/ui/input'; import { useState } from 'react'; -import { Avatar } from '@mui/material'; +import { MuiAvatar } from '@/ui/mui'; import useMembers from '@/hooks/use-members'; import { User } from '@affine/datacenter'; import { useTranslation } from '@affine/i18n'; @@ -76,8 +76,6 @@ export const InviteMemberModal = ({
{ onClose(); }} @@ -102,7 +100,7 @@ export const InviteMemberModal = ({ ) : ( {userData?.avatar ? ( - + ) : ( diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts index ce18dcb0ad..b7b67fe144 100644 --- a/packages/app/src/components/workspace-setting/member/style.ts +++ b/packages/app/src/components/workspace-setting/member/style.ts @@ -1,5 +1,5 @@ import { styled } from '@/styles'; -import MuiAvatar from '@mui/material/Avatar'; +import { MuiAvatar } from '@/ui/mui'; export const StyledMemberTitleContainer = styled('li')(() => { return { diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts index add82c90c7..d56661de3a 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts @@ -1,4 +1,4 @@ -import MuiAvatar from '@mui/material/Avatar'; +import { MuiAvatar } from '@/ui/mui'; import { styled } from '@/styles'; export const WorkspaceItemWrapper = styled('div')(({ theme }) => ({ diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts index e9c231c69e..e700d8cd81 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts @@ -1,4 +1,4 @@ -import MuiAvatar from '@mui/material/Avatar'; +import { MuiAvatar } from '@/ui/mui'; import { styled } from '@/styles'; import { StyledPopperContainer } from '@/ui/shared/Container'; diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index ce6f8d43d3..b0f24c7ada 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -11,7 +11,6 @@ import { StyledSubListItem, } from './style'; import { Arrow } from './icons'; -import Collapse from '@mui/material/Collapse'; import { ArrowDownIcon, SearchIcon, @@ -23,6 +22,7 @@ import { SettingsIcon, } from '@blocksuite/icons'; import Link from 'next/link'; +import { MuiCollapse } from '@/ui/mui'; import { Tooltip } from '@/ui/tooltip'; import { useModal } from '@/providers/GlobalModalProvider'; import { useAppState } from '@/providers/app-state-provider'; @@ -39,7 +39,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => { const { t } = useTranslation(); const favoriteList = pageList.filter(p => p.favorite && !p.trash); return ( - + {favoriteList.map((pageMeta, index) => { const active = router.query.pageId === pageMeta.id; return ( @@ -61,7 +61,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => { {favoriteList.length === 0 && ( {t('No item')} )} - + ); }; export const WorkSpaceSliderBar = () => { diff --git a/packages/app/src/pages/invite/[invite_code].tsx b/packages/app/src/pages/invite/[invite_code].tsx index 872b3f927a..ff86784661 100644 --- a/packages/app/src/pages/invite/[invite_code].tsx +++ b/packages/app/src/pages/invite/[invite_code].tsx @@ -1,7 +1,6 @@ import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { styled } from '@/styles'; import { Empty } from '@/ui/empty'; -// import { Avatar } from '@mui/material'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; diff --git a/packages/app/src/styles/helper.ts b/packages/app/src/styles/helper.ts index da70c3cd4b..3e5949ae3e 100644 --- a/packages/app/src/styles/helper.ts +++ b/packages/app/src/styles/helper.ts @@ -117,3 +117,29 @@ export const textEllipsis = (lineNum = 1): CSSProperties => { whiteSpace: 'nowrap', }; }; + +export const positionAbsolute = ({ + left, + top, + right, + bottom, +}: { + left?: CSSProperties['left']; + top?: CSSProperties['top']; + right?: CSSProperties['right']; + bottom?: CSSProperties['bottom']; +}): { + position: CSSProperties['position']; + left: CSSProperties['left']; + top: CSSProperties['top']; + right: CSSProperties['right']; + bottom: CSSProperties['bottom']; +} => { + return { + position: 'absolute', + left, + top, + right, + bottom, + }; +}; diff --git a/packages/app/src/ui/button/Button.tsx b/packages/app/src/ui/button/Button.tsx index 2af171b1f8..1e77b58f5a 100644 --- a/packages/app/src/ui/button/Button.tsx +++ b/packages/app/src/ui/button/Button.tsx @@ -15,16 +15,26 @@ export const Button = forwardRef( hoverStyle, shape = 'default', icon, + iconPosition = 'start', type = 'default', children, bold = false, loading = false, + noBorder = false, ...props }, ref ) => { const { iconSize } = getSize(size); + const iconElement = + icon && + cloneElement(Children.only(icon), { + width: iconSize, + height: iconSize, + className: `affine-button-icon ${icon.props.className ?? ''}`, + }); + return ( ( // @ts-ignore type={type} bold={bold} + noBorder={noBorder} {...props} > {loading ? ( ) : ( <> - {icon && - cloneElement(Children.only(icon), { - width: iconSize, - height: iconSize, - className: `affine-button-icon ${icon.props.className ?? ''}`, - })} + {iconPosition === 'start' && iconElement} {children && {children}} + {iconPosition === 'end' && iconElement} )} diff --git a/packages/app/src/ui/button/interface.ts b/packages/app/src/ui/button/interface.ts index 6b5a55996b..150afa648b 100644 --- a/packages/app/src/ui/button/interface.ts +++ b/packages/app/src/ui/button/interface.ts @@ -17,8 +17,10 @@ export type ButtonProps = PropsWithChildren & hoverColor?: CSSProperties['color']; hoverStyle?: CSSProperties; icon?: ReactElement; + iconPosition?: 'start' | 'end'; shape?: 'default' | 'round' | 'circle'; type?: 'primary' | 'warning' | 'danger' | 'default'; bold?: boolean; loading?: boolean; + noBorder?: boolean; }; diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts index aceb22fddd..8310f3cfaa 100644 --- a/packages/app/src/ui/button/styles.ts +++ b/packages/app/src/ui/button/styles.ts @@ -149,6 +149,7 @@ export const StyledButton = styled('button', { 'hoverStyle', 'type', 'bold', + 'noBorder', ].includes(prop); }, })< @@ -162,6 +163,7 @@ export const StyledButton = styled('button', { | 'shape' | 'type' | 'bold' + | 'noBorder' > >( ({ @@ -174,6 +176,7 @@ export const StyledButton = styled('button', { bold = false, shape = 'default', type = 'default', + noBorder = false, }) => { const { fontSize, borderRadius, padding, height } = getSize(size); @@ -181,7 +184,7 @@ export const StyledButton = styled('button', { height, paddingLeft: padding, paddingRight: padding, - border: '1px solid', + border: noBorder ? 'none' : '1px solid', ...displayInlineFlex('center', 'center'), position: 'relative', // TODO: disabled color is not decided diff --git a/packages/app/src/ui/modal/ModalCloseButton.tsx b/packages/app/src/ui/modal/ModalCloseButton.tsx index ee1dd2747b..b42d687ca7 100644 --- a/packages/app/src/ui/modal/ModalCloseButton.tsx +++ b/packages/app/src/ui/modal/ModalCloseButton.tsx @@ -5,6 +5,7 @@ import { styled } from '@/styles'; export type ModalCloseButtonProps = { top?: number; right?: number; + absolute?: boolean; } & Omit & HTMLAttributes; @@ -13,16 +14,23 @@ const StyledIconButton = styled(IconButton)< >(({ top, right }) => { return { position: 'absolute', - top: top ?? 6, - right: right ?? 6, + top: top ?? 24, + right: right ?? 40, }; }); -export const ModalCloseButton = ({ ...props }: ModalCloseButtonProps) => { - return ( +export const ModalCloseButton = ({ + absolute = true, + ...props +}: ModalCloseButtonProps) => { + return absolute ? ( + ) : ( + + + ); }; diff --git a/packages/app/src/ui/modal/ModalWrapper.tsx b/packages/app/src/ui/modal/ModalWrapper.tsx index f924b58966..79a4d0dbd4 100644 --- a/packages/app/src/ui/modal/ModalWrapper.tsx +++ b/packages/app/src/ui/modal/ModalWrapper.tsx @@ -11,7 +11,7 @@ export const ModalWrapper = styled.div<{ height, minHeight, backgroundColor: theme.colors.popoverBackground, - borderRadius: '12px', + borderRadius: '24px', position: 'relative', }; }); diff --git a/packages/app/src/ui/mui.ts b/packages/app/src/ui/mui.ts new file mode 100644 index 0000000000..1d0a7f0b57 --- /dev/null +++ b/packages/app/src/ui/mui.ts @@ -0,0 +1,7 @@ +import MuiBreadcrumbs from '@mui/material/Breadcrumbs'; +import MuiCollapse from '@mui/material/Collapse'; +import MuiSlide from '@mui/material/Slide'; +import MuiAvatar from '@mui/material/Avatar'; +import MuiGrow from '@mui/material/Grow'; + +export { MuiBreadcrumbs, MuiCollapse, MuiSlide, MuiAvatar, MuiGrow }; diff --git a/packages/app/src/ui/tooltip/Tooltip.tsx b/packages/app/src/ui/tooltip/Tooltip.tsx index 5182612f74..ff533fedf3 100644 --- a/packages/app/src/ui/tooltip/Tooltip.tsx +++ b/packages/app/src/ui/tooltip/Tooltip.tsx @@ -5,6 +5,7 @@ import type { TooltipProps } from '@mui/material'; const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => { return { + maxWidth: '320px', boxShadow: theme.shadow.tooltip, padding: '4px 12px', backgroundColor: theme.colors.tooltipBackground, diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json index 97766c8050..9b543416dd 100644 --- a/packages/i18n/src/resources/en.json +++ b/packages/i18n/src/resources/en.json @@ -148,5 +148,6 @@ "Sync Description2": "<1>{{workspaceName}} is a Cloud Workspace. All data will be synchronised and saved to AFFiNE Cloud.", "Delete Workspace Description": "Deleting (<1>{{workspace}}) cannot be undone, please proceed with caution. All contents will be lost.", "core": "core", - "all": "all" + "all": "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." } diff --git a/packages/i18n/src/resources/zh-Hans.json b/packages/i18n/src/resources/zh-Hans.json index 2a2e17c660..c2b70cba98 100644 --- a/packages/i18n/src/resources/zh-Hans.json +++ b/packages/i18n/src/resources/zh-Hans.json @@ -144,5 +144,6 @@ "Publish": "发布", "Workspace Settings": "工作区设置", "core": "核心", - "all": "全部" + "all": "全部", + "A workspace is your virtual space to capture, create and plan as just one person or together as a team.": "工作空间是一个人或一个团队创建和计划的虚拟空间。" }