diff --git a/apps/web/package.json b/apps/web/package.json index 051e9c8801..c2238d630e 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -16,7 +16,7 @@ "@affine/i18n": "workspace:*", "@blocksuite/blocks": "0.5.0-20230310062711-a86b71f", "@blocksuite/editor": "0.5.0-20230310062711-a86b71f", - "@blocksuite/icons": "2.0.17", + "@blocksuite/icons": "2.0.22", "@blocksuite/react": "0.5.0-20230310062711-a86b71f", "@blocksuite/store": "0.5.0-20230310062711-a86b71f", "@emotion/cache": "^11.10.5", diff --git a/apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx b/apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx index 546b40e307..e63025d6fd 100644 --- a/apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx +++ b/apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx @@ -7,9 +7,8 @@ import { assertExists } from '@blocksuite/store'; import { render, renderHook } from '@testing-library/react'; import { createStore, getDefaultStore, Provider } from 'jotai'; import { useRouter } from 'next/router'; -import React, { useCallback, useState } from 'react'; +import React, { useCallback } from 'react'; import { beforeEach, describe, expect, test, vi } from 'vitest'; -import createFetchMock from 'vitest-fetch-mock'; import { workspacesAtom } from '../../atoms'; import { useCurrentPageId } from '../../hooks/current/use-current-page-id'; @@ -26,8 +25,6 @@ vi.mock('react-lottie', () => ({ default: (props: React.PropsWithChildren) => <>{props.children}, })); -const fetchMocker = createFetchMock(vi); - // fetchMocker.enableMocks(); let store = getDefaultStore(); beforeEach(async () => { @@ -58,7 +55,6 @@ describe('WorkSpaceSliderBar', () => { }); let i = 0; const Component = () => { - const [show, setShow] = useState(false); const [currentWorkspace] = useCurrentWorkspace(); const [currentPageId] = useCurrentPageId(); assertExists(currentWorkspace); @@ -76,8 +72,6 @@ describe('WorkSpaceSliderBar', () => { i++; return helper.createPage('page-test-' + i); }} - show={show} - setShow={setShow} currentPath={useRouter().asPath} paths={pathGenerator} isPublicWorkspace={false} diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx index fddb323852..33116636e0 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx +++ b/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx @@ -199,10 +199,9 @@ const MemberIcon = styled('div')(({ theme }) => { }; }); -const Email = styled('div')(({ theme }) => { +const Email = styled('div')(() => { return { flex: '1', - color: theme.colors.popoverColor, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts b/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts index 6f1c61cc1a..8714d6078f 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts +++ b/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts @@ -11,14 +11,13 @@ export const StyledModalWrapper = styled('div')(({ theme }) => { }; }); -export const StyledModalHeader = styled('div')(({ theme }) => { +export const StyledModalHeader = styled('div')(() => { return { margin: '44px 0px 12px 0px', width: '560px', fontWeight: '600', fontSize: '20px;', textAlign: 'center', - color: theme.colors.popoverColor, }; }); diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts b/apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts index bbbf7e1c90..2db6911433 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts +++ b/apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts @@ -10,14 +10,13 @@ export const StyledModalWrapper = styled('div')(({ theme }) => { }; }); -export const StyledModalHeader = styled('div')(({ theme }) => { +export const StyledModalHeader = styled('div')(() => { return { margin: '44px 0px 12px 0px', width: '460px', fontWeight: '600', fontSize: '20px;', textAlign: 'center', - color: theme.colors.popoverColor, }; }); diff --git a/apps/web/src/components/pure/create-workspace-modal/index.tsx b/apps/web/src/components/pure/create-workspace-modal/index.tsx index 6d44927e0d..949710d4f0 100644 --- a/apps/web/src/components/pure/create-workspace-modal/index.tsx +++ b/apps/web/src/components/pure/create-workspace-modal/index.tsx @@ -91,13 +91,12 @@ const Header = styled('div')({ height: '44px', }); -const Content = styled('div')(({ theme }) => { +const Content = styled('div')(() => { return { padding: '0 84px', textAlign: 'center', fontSize: '18px', lineHeight: '26px', - color: theme.colors.inputColor, p: { marginTop: '12px', marginBottom: '16px', diff --git a/apps/web/src/components/pure/footer/index.tsx b/apps/web/src/components/pure/footer/index.tsx index d39d11b1b9..29c30b6668 100644 --- a/apps/web/src/components/pure/footer/index.tsx +++ b/apps/web/src/components/pure/footer/index.tsx @@ -51,7 +51,7 @@ export const Footer: React.FC = ({ user, onLogin, onLogout }) => { bold icon={
- +
} onClick={async () => { diff --git a/apps/web/src/components/pure/footer/styles.ts b/apps/web/src/components/pure/footer/styles.ts index e10ed4c3fa..e46d94e5ef 100644 --- a/apps/web/src/components/pure/footer/styles.ts +++ b/apps/web/src/components/pure/footer/styles.ts @@ -20,7 +20,6 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => { marginLeft: '15px', width: '202px', p: { - color: theme.colors.popoverColor, height: '20px', fontSize: theme.font.sm, ...displayFlex('flex-start', 'center'), @@ -157,13 +156,15 @@ export const StyledModalHeader = styled('div')(() => { export const StyledSignInButton = styled(Button)(({ theme }) => { return { - fontWeight: 700, + fontWeight: 600, paddingLeft: 0, '.circle': { width: '40px', height: '40px', borderRadius: '20px', - backgroundColor: theme.colors.innerHoverBackground, + backgroundColor: theme.colors.hoverBackground, + color: theme.colors.primaryColor, + fontSize: '24px', flexShrink: 0, marginRight: '16px', ...displayInlineFlex('center', 'center'), diff --git a/apps/web/src/components/pure/quick-search-modal/style.ts b/apps/web/src/components/pure/quick-search-modal/style.ts index 3466a00d9a..4440b05cf1 100644 --- a/apps/web/src/components/pure/quick-search-modal/style.ts +++ b/apps/web/src/components/pure/quick-search-modal/style.ts @@ -67,7 +67,6 @@ export const StyledInputContent = styled('div')(({ theme }) => { fontSize: theme.font.base, ...displayFlex('space-between', 'center'), letterSpacing: '0.06em', - color: theme.colors.popoverColor, '::placeholder': { color: theme.colors.placeHolderColor, @@ -91,12 +90,11 @@ export const StyledLabel = styled('label')(({ theme }) => { }; }); -export const StyledModalHeader = styled('div')(({ theme }) => { +export const StyledModalHeader = styled('div')(() => { return { height: '48px', margin: '12px 24px 0px 24px', ...displayFlex('space-between', 'center'), - color: theme.colors.popoverColor, }; }); export const StyledModalDivider = styled('div')(({ theme }) => { @@ -117,7 +115,6 @@ export const StyledModalFooter = styled('div')(({ theme }) => { marginBottom: '8px', textAlign: 'center', ...displayFlex('center', 'center'), - color: theme.colors.popoverColor, '[aria-selected="true"]': { transition: 'background .15s, color .15s', borderRadius: '5px', diff --git a/apps/web/src/components/pure/shortcuts-modal/style.ts b/apps/web/src/components/pure/shortcuts-modal/style.ts index 0a63020be2..297589f4b7 100644 --- a/apps/web/src/components/pure/shortcuts-modal/style.ts +++ b/apps/web/src/components/pure/shortcuts-modal/style.ts @@ -7,7 +7,6 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({ backgroundColor: theme.colors.popoverBackground, boxShadow: theme.shadow.popover, borderRadius: `${theme.radius.popover} 0 ${theme.radius.popover} ${theme.radius.popover}`, - color: theme.colors.popoverColor, overflow: 'auto', boxRadius: '10px', position: 'fixed', @@ -30,7 +29,6 @@ export const StyledTitle = styled('div')(({ theme }) => ({ }, })); export const StyledSubTitle = styled('div')(({ theme }) => ({ - color: theme.colors.popoverColor, fontWeight: '500', fontSize: theme.font.sm, height: '34px', diff --git a/apps/web/src/components/pure/workspace-card/index.tsx b/apps/web/src/components/pure/workspace-card/index.tsx index 641c7a8bad..d11f8eb32d 100644 --- a/apps/web/src/components/pure/workspace-card/index.tsx +++ b/apps/web/src/components/pure/workspace-card/index.tsx @@ -1,5 +1,6 @@ import { PermissionType } from '@affine/datacenter'; import { useTranslation } from '@affine/i18n'; +import { SettingsIcon } from '@blocksuite/icons'; import React, { useCallback } from 'react'; import { useBlockSuiteWorkspaceName } from '../../../hooks/use-blocksuite-workspace-name'; @@ -12,8 +13,12 @@ import { PublishIcon, } from '../icons'; import { WorkspaceAvatar } from '../workspace-avatar'; -import { StyledCard, StyleWorkspaceInfo, StyleWorkspaceTitle } from './styles'; - +import { + StyledCard, + StyledSettingLink, + StyleWorkspaceInfo, + StyleWorkspaceTitle, +} from './styles'; export type WorkspaceTypeProps = { workspace: RemWorkspace; }; @@ -53,11 +58,13 @@ export type WorkspaceCardProps = { currentWorkspaceId: string | null; workspace: RemWorkspace; onClick: (workspace: RemWorkspace) => void; + onSettingClick: (workspace: RemWorkspace) => void; }; export const WorkspaceCard: React.FC = ({ workspace, onClick, + onSettingClick, currentWorkspaceId, }) => { const { t } = useTranslation(); @@ -90,6 +97,15 @@ export const WorkspaceCard: React.FC = ({

)} + { + e.stopPropagation(); + onSettingClick(workspace); + }} + > + + ); }; diff --git a/apps/web/src/components/pure/workspace-card/styles.ts b/apps/web/src/components/pure/workspace-card/styles.ts index e10ed4c3fa..861ba4dc54 100644 --- a/apps/web/src/components/pure/workspace-card/styles.ts +++ b/apps/web/src/components/pure/workspace-card/styles.ts @@ -1,26 +1,11 @@ -import { - displayFlex, - displayInlineFlex, - styled, - textEllipsis, -} from '@affine/component'; -import { Button } from '@affine/component'; - -export const StyledSplitLine = styled('div')(({ theme }) => { - return { - width: '1px', - height: '20px', - background: theme.colors.borderColor, - marginRight: '24px', - }; -}); +import { displayFlex, styled, textEllipsis } from '@affine/component'; +import { IconButton } from '@affine/component'; export const StyleWorkspaceInfo = styled('div')(({ theme }) => { return { marginLeft: '15px', width: '202px', p: { - color: theme.colors.popoverColor, height: '20px', fontSize: theme.font.sm, ...displayFlex('flex-start', 'center'), @@ -64,6 +49,7 @@ export const StyledCard = styled('div')<{ marginBottom: '24px', transition: 'background .2s', background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C', + position: 'relative', ':hover': { background: theme.colors.cardHoverBackground, '.add-icon': { @@ -74,74 +60,6 @@ export const StyledCard = styled('div')<{ }; }); -export const StyledFooter = styled('div')({ - height: '84px', - padding: '0 40px', - flexShrink: 0, - ...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:first-of-type': { - color: theme.colors.textColor, - fontWeight: 600, - }, - }; -}); - -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, - fontSize: theme.font.h6, - ...displayFlex('center', 'center'), - }; -}); - -export const StyledModalContent = styled('div')({ - height: '534px', - padding: '8px 40px', - marginTop: '72px', - overflow: 'auto', - ...displayFlex('space-between', 'flex-start', 'flex-start'), - flexWrap: 'wrap', -}); -export const StyledOperationWrapper = styled('div')(() => { - return { - ...displayFlex('flex-end', 'center'), - }; -}); - -export const StyleWorkspaceAdd = styled('div')(() => { - return { - width: '58px', - height: '58px', - borderRadius: '100%', - background: '#f4f5fa', - border: '1.5px dashed #f4f5fa', - transition: 'background .2s', - ...displayFlex('center', 'center'), - }; -}); export const StyledModalHeader = styled('div')(() => { return { width: '100%', @@ -155,18 +73,13 @@ export const StyledModalHeader = styled('div')(() => { }; }); -export const StyledSignInButton = styled(Button)(({ theme }) => { +export const StyledSettingLink = styled(IconButton)(({ theme }) => { return { - fontWeight: 700, - paddingLeft: 0, - '.circle': { - width: '40px', - height: '40px', - borderRadius: '20px', - backgroundColor: theme.colors.innerHoverBackground, - flexShrink: 0, - marginRight: '16px', - ...displayInlineFlex('center', 'center'), + position: 'absolute', + right: '6px', + bottom: '6px', + ':hover': { + background: theme.colors.pageBackground, }, }; }); diff --git a/apps/web/src/components/pure/workspace-list-modal/index.tsx b/apps/web/src/components/pure/workspace-list-modal/index.tsx index dc67eb3f6b..b0d508950f 100644 --- a/apps/web/src/components/pure/workspace-list-modal/index.tsx +++ b/apps/web/src/components/pure/workspace-list-modal/index.tsx @@ -13,7 +13,7 @@ import { Footer } from '../footer'; import { WorkspaceCard } from '../workspace-card'; import { LanguageMenu } from './language-menu'; import { - StyledCard, + StyledCreateWorkspaceCard, StyledHelperContainer, StyledModalContent, StyledModalHeader, @@ -33,6 +33,7 @@ interface WorkspaceModalProps { open: boolean; onClose: () => void; onClickWorkspace: (workspace: RemWorkspace) => void; + onClickWorkspaceSetting: (workspace: RemWorkspace) => void; onClickLogin: () => void; onClickLogout: () => void; onCreateWorkspace: () => void; @@ -46,6 +47,7 @@ export const WorkspaceListModal = ({ onClickLogin, onClickLogout, onClickWorkspace, + onClickWorkspaceSetting, onCreateWorkspace, currentWorkspaceId, }: WorkspaceModalProps) => { @@ -95,11 +97,16 @@ export const WorkspaceListModal = ({ workspace={workspace} currentWorkspaceId={currentWorkspaceId} onClick={onClickWorkspace} + onSettingClick={onClickWorkspaceSetting} key={workspace.id} /> ); })} - + + @@ -108,7 +115,7 @@ export const WorkspaceListModal = ({ {t('New Workspace')}

{t('Create Or Import')}

- +