feat: modify workspace modal style & add workspace setting entry to worksapce card (#1498)

2026-02-11 20:08:37 +00:00 · 2023-03-10 16:34:45 +08:00
parent 16cbf85bf4
commit d60120ddf1
28 changed files with 100 additions and 158 deletions
--- 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",
--- 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}
--- 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',
--- 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,
  };
 });

--- 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,
  };
 });

--- 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',
--- 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<FooterProps> = ({ user, onLogin, onLogout }) => {
          bold
          icon={
            <div className="circle">
-              <CloudWorkspaceIcon fontSize={16} />
+              <CloudWorkspaceIcon />
            </div>
          }
          onClick={async () => {
--- 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'),
--- 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',
--- 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',
--- 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<WorkspaceCardProps> = ({
  workspace,
  onClick,
+  onSettingClick,
  currentWorkspaceId,
 }) => {
  const { t } = useTranslation();
@@ -90,6 +97,15 @@ export const WorkspaceCard: React.FC<WorkspaceCardProps> = ({
            </p>
          )}
      </StyleWorkspaceInfo>
+      <StyledSettingLink
+        hoverBackground="#fff"
+        onClick={e => {
+          e.stopPropagation();
+          onSettingClick(workspace);
+        }}
+      >
+        <SettingsIcon />
+      </StyledSettingLink>
    </StyledCard>
  );
 };
--- 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,
    },
  };
 });
--- 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}
              />
            );
          })}
-          <StyledCard data-testid="new-workspace" onClick={onCreateWorkspace}>
+
+          <StyledCreateWorkspaceCard
+            data-testid="new-workspace"
+            onClick={onCreateWorkspace}
+          >
            <StyleWorkspaceAdd className="add-icon">
              <PlusIcon />
            </StyleWorkspaceAdd>
@@ -108,7 +115,7 @@ export const WorkspaceListModal = ({
              <StyleWorkspaceTitle>{t('New Workspace')}</StyleWorkspaceTitle>
              <p>{t('Create Or Import')}</p>
            </StyleWorkspaceInfo>
-          </StyledCard>
+          </StyledCreateWorkspaceCard>
        </StyledModalContent>

        <Footer user={user} onLogin={onClickLogin} onLogout={onClickLogout} />
--- a/apps/web/src/components/pure/workspace-list-modal/language-menu.tsx
+++ b/apps/web/src/components/pure/workspace-list-modal/language-menu.tsx
@@ -46,7 +46,7 @@ export const LanguageMenu: React.FC = () => {
        icon={<ArrowDownSmallIcon />}
        iconPosition="end"
        noBorder={true}
-        style={{ textTransform: 'capitalize' }}
+        style={{ textTransform: 'capitalize', padding: '0 12px' }}
        data-testid="language-menu-button"
      >
        {currentLanguage?.originalName}
@@ -57,7 +57,6 @@ export const LanguageMenu: React.FC = () => {

 const ListItem = styled(MenuItem)(({ theme }) => ({
  height: '38px',
-  color: theme.colors.popoverColor,
  fontSize: theme.font.base,
  textTransform: 'capitalize',
  padding: '0 24px',
--- a/apps/web/src/components/pure/workspace-list-modal/styles.ts
+++ b/apps/web/src/components/pure/workspace-list-modal/styles.ts
@@ -5,7 +5,7 @@ export const StyledSplitLine = styled('div')(({ theme }) => {
    width: '1px',
    height: '20px',
    background: theme.colors.borderColor,
-    marginRight: '24px',
+    marginRight: '12px',
  };
 });

@@ -14,7 +14,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'),
@@ -60,6 +59,25 @@ export const StyledCard = styled('div')<{
    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
    ':hover': {
      background: theme.colors.cardHoverBackground,
+    },
+  };
+});
+
+export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
+  return {
+    width: '310px',
+    height: '124px',
+    cursor: 'pointer',
+    padding: '16px',
+    boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)',
+    borderRadius: '12px',
+    transition: 'all .1s',
+    ...displayFlex('flex-start', 'flex-start'),
+    color: theme.colors.secondaryTextColor,
+
+    ':hover': {
+      background: theme.colors.cardHoverBackground,
+      color: theme.colors.textColor,
      '.add-icon': {
        borderColor: theme.colors.primaryColor,
        color: theme.colors.primaryColor,
@@ -110,6 +128,7 @@ export const StyleWorkspaceAdd = styled('div')(() => {
    background: '#f4f5fa',
    border: '1.5px dashed #f4f5fa',
    transition: 'background .2s',
+    fontSize: '24px',
    ...displayFlex('center', 'center'),
  };
 });
--- a/apps/web/src/components/pure/workspace-slider-bar/style.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts
@@ -105,7 +105,7 @@ export const StyledSubListItem = styled('button')<{
      ? theme.colors.disableColor
      : active
      ? theme.colors.primaryColor
-      : theme.colors.popoverColor,
+      : theme.colors.textColor,
    backgroundColor: active ? theme.colors.hoverBackground : 'unset',

    cursor: disable ? 'not-allowed' : 'pointer',
--- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
@@ -47,7 +47,6 @@ export const StyledBreadcrumbs = styled(Link)(({ theme }) => {
    ':hover': { color: theme.colors.primaryColor },
    transition: 'all .15s',
    ':visited': {
-      color: theme.colors.popoverColor,
      ':hover': { color: theme.colors.primaryColor },
    },
  };
--- a/apps/web/src/providers/ModalProvider.tsx
+++ b/apps/web/src/providers/ModalProvider.tsx
@@ -62,6 +62,14 @@ export function Modals() {
          },
          [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal]
        )}
+        onClickWorkspaceSetting={useCallback(
+          workspace => {
+            setOpenWorkspacesModal(false);
+            setCurrentWorkspace(workspace.id);
+            jumpToSubPath(workspace.id, WorkspaceSubPath.SETTING);
+          },
+          [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal]
+        )}
        onClickLogin={useCallback(() => {
          apis.signInWithGoogle().then(() => {
            router.reload();