feat:workspaces list style

2024-12-28 11:53:24 +03:00 · 2023-01-18 01:27:31 +08:00 · 2023-01-18 01:27:31 +08:00 · de9248b784
commit de9248b784
parent c7c8ea7103
2 changed files with 138 additions and 96 deletions
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@ -3,12 +3,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useState } from 'react';
 import { CreateWorkspaceModal } from '../create-workspace';
-import {
-  CloudUnsyncedIcon,
-  CloudInsyncIcon,
-  UsersIcon,
-  AddIcon,
-} from '@blocksuite/icons';
+import { CloudUnsyncedIcon, UsersIcon, AddIcon } from '@blocksuite/icons';
 import { toast } from '@/ui/toast';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
@ -26,7 +21,7 @@ interface WorkspaceModalProps {
 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
  const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
  const { confirm } = useConfirm();
-  const { workspaceList, currentWorkspace, login, user, logout } =
+  const { workspaceList, currentWorkspace, login, user, logout, isOwner } =
    useAppState();
  const router = useRouter();
  const { t } = useTranslation();
@ -35,8 +30,12 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
    <div>
      <Modal open={open} onClose={onClose}>
        <ModalWrapper
-          width={820}
-          style={{ padding: '10px', display: 'flex', flexDirection: 'column' }}
+          width={720}
+          style={{
+            padding: '24px 40px',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
        >
          <Header>
            <ContentTitle>{t('My Workspaces')}</ContentTitle>
@ -61,77 +60,68 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                    active={item.id === currentWorkspace?.id}
                    key={index}
                  >
-                    <span style={{ width: '100px' }}>
-                      <div
-                        style={{
-                          float: 'left',
-                          marginTop: '6px',
-                          marginLeft: '10px',
-                          marginRight: '10px',
-                        }}
-                      >
-                        <WorkspaceUnitAvatar size={50} workspaceUnit={item} />
-                      </div>
+                    <div>
+                      <WorkspaceUnitAvatar size={58} workspaceUnit={item} />
+                    </div>

-                      <span
-                        style={{
-                          width: '235px',
-                          fontSize: '16px',
-                          display: 'inline-block',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                          overflow: 'hidden',
-                          position: 'relative',
-                          top: '20px',
-                        }}
-                      >
+                    <StyleWorkspaceInfo>
+                      <StyleWorkspaceTitle>
                        {item.name || 'AFFiNE'}
-                      </span>
-                    </span>
-                    <span
-                      style={{
-                        position: 'relative',
-                        top: '20px',
-                      }}
-                    >
-                      {(item.provider === 'local' || !item.provider) && (
-                        <CloudUnsyncedIcon fontSize={24} />
+                      </StyleWorkspaceTitle>
+                      {isOwner ? (
+                        item.provider === 'local' ? (
+                          <p>
+                            <CloudUnsyncedIcon fontSize={16} />
+                            Local Workspace
+                          </p>
+                        ) : (
+                          <p>
+                            <CloudUnsyncedIcon fontSize={16} />
+                            Cloud Workspace
+                          </p>
+                        )
+                      ) : (
+                        <p>
+                          <CloudUnsyncedIcon fontSize={16} />
+                          Joined Workspace
+                        </p>
                      )}
-                      {item.provider === 'affine' && (
-                        <CloudInsyncIcon fontSize={24} />
+                      {item.provider === 'local' && (
+                        <p>
+                          <UsersIcon fontSize={16} />
+                          All data can be accessed offline
+                        </p>
                      )}
-                      {item.published && <UsersIcon fontSize={24} />}
-                    </span>
-                    {/* {item.isLocal ? 'isLocal' : ''}/ */}
+                      {item.published && (
+                        <p>
+                          <UsersIcon fontSize={16} /> Published to Web
+                        </p>
+                      )}
+                    </StyleWorkspaceInfo>
                  </WorkspaceItem>
                );
              })}
-              <li>
-                <Button
-                  style={{
-                    marginTop: '20px',
-                  }}
-                  type="primary"
-                  onClick={() => {
-                    setCreateWorkspaceOpen(true);
-                  }}
-                >
-                  <AddIcon
-                    style={{
-                      fontSize: '20px',
-                      top: '5px',
-                      position: 'relative',
-                      marginRight: '10px',
-                    }}
-                  />
-                  {t('Create Or Import')}
-                </Button>
-              </li>
+              <WorkspaceItem
+                onClick={() => {
+                  setCreateWorkspaceOpen(true);
+                }}
+              >
+                <div>
+                  <StyleWorkspaceAdd className="add-icon">
+                    <AddIcon fontSize={18} />
+                  </StyleWorkspaceAdd>
+                </div>
+
+                <StyleWorkspaceInfo>
+                  <StyleWorkspaceTitle>New workspace</StyleWorkspaceTitle>
+                  <p>Crete or import</p>
+                </StyleWorkspaceInfo>
+              </WorkspaceItem>
            </WorkspaceList>
-            <p style={{ fontSize: '14px', color: '#ccc', margin: '12px 0' }}>
+            {/* <p style={{ fontSize: '14px', color: '#ccc', margin: '12px 0' }}>
              {t('Tips')}
              {t('Workspace description')}
-            </p>
+            </p> */}
          </Content>
          <Footer>
            {!user ? (
@ -178,24 +168,6 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
            open={createWorkspaceOpen}
            onClose={() => {
              setCreateWorkspaceOpen(false);
-              onClose();
-              // confirm({
-              //   title: 'Enable AFFiNE Cloud?',
-              //   content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
-              //   confirmText: user ? 'Enable' : 'Sign in and Enable',
-              //   cancelText: 'Skip',
-              // }).then(confirm => {
-              //   if (confirm) {
-              //     if (user) {
-              //       // workspaceId &&
-              //       //   updateWorkspaceMeta(workspaceId, { isPublish: true });
-              //     } else {
-              //       // login();
-              //       // workspaceId &&
-              //       //   updateWorkspaceMeta(workspaceId, { isPublish: true });
-              //     }
-              //   }
-              // });
            }}
          ></CreateWorkspaceModal>
        </ModalWrapper>
@ -210,7 +182,6 @@ const Header = styled('div')({
 });

 const Content = styled('div')({
-  padding: '0 20px',
  flexDirection: 'column',
  alignItems: 'center',
  gap: '16px',
@ -233,24 +204,71 @@ const Footer = styled('div')({
 });

 const WorkspaceList = styled('div')({
+  maxHeight: '514px',
+  overflow: 'auto',
  display: 'grid',
-  gridRowGap: '10px',
-  gridColumnGap: '10px',
+  gridRowGap: '24px',
+  gridColumnGap: '24px',
  fontSize: '16px',
+  marginTop: '36px',
  gridTemplateColumns: 'repeat(2, 1fr)',
 });

 export const WorkspaceItem = styled.div<{
-  active: boolean;
+  active?: boolean;
 }>(({ theme, active }) => {
-  const backgroundColor = active ? theme.colors.hoverBackground : 'transparent';
+  const borderColor = active ? theme.colors.primaryColor : 'transparent';
  return {
    cursor: 'pointer',
-    padding: '8px',
-    border: '1px solid #eee',
-    backgroundColor: backgroundColor,
+    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: 'sub',
+      marginRight: '10px',
+    },
+  };
+});
+
+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',
+  };
+});
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -2999,6 +2999,7 @@ packages:

  /@next/env/13.1.0:
    resolution: {integrity: sha512-6iNixFzCndH+Bl4FetQzOMjxCJqg8fs0LAlZviig1K6mIjOWH2m2oPcHcOg1Ta5VCe7Bx5KG1Hs+NrWDUkBt9A==}
+    dev: false

  /@next/eslint-plugin-next/12.3.1:
    resolution: {integrity: sha512-sw+lTf6r6P0j+g/n9y4qdWWI2syPqZx+uc0+B/fRENqfR3KpSid6MIKqc9gNwGhJASazEQ5b3w8h4cAET213jw==}
@ -3021,6 +3022,7 @@ packages:
    cpu: [arm]
    os: [android]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-android-arm64/12.3.1:
@ -3038,6 +3040,7 @@ packages:
    cpu: [arm64]
    os: [android]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-darwin-arm64/12.3.1:
@ -3055,6 +3058,7 @@ packages:
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-darwin-x64/12.3.1:
@ -3072,6 +3076,7 @@ packages:
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-freebsd-x64/12.3.1:
@ -3089,6 +3094,7 @@ packages:
    cpu: [x64]
    os: [freebsd]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-linux-arm-gnueabihf/12.3.1:
@ -3106,6 +3112,7 @@ packages:
    cpu: [arm]
    os: [linux]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-linux-arm64-gnu/12.3.1:
@ -3123,6 +3130,7 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-linux-arm64-musl/12.3.1:
@ -3140,6 +3148,7 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-linux-x64-gnu/12.3.1:
@ -3157,6 +3166,7 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-linux-x64-musl/12.3.1:
@ -3174,6 +3184,7 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-win32-arm64-msvc/12.3.1:
@ -3191,6 +3202,7 @@ packages:
    cpu: [arm64]
    os: [win32]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-win32-ia32-msvc/12.3.1:
@ -3208,6 +3220,7 @@ packages:
    cpu: [ia32]
    os: [win32]
    requiresBuild: true
+    dev: false
    optional: true

  /@next/swc-win32-x64-msvc/12.3.1:
@ -3225,6 +3238,7 @@ packages:
    cpu: [x64]
    os: [win32]
    requiresBuild: true
+    dev: false
    optional: true

  /@nodelib/fs.scandir/2.1.5:
@ -3587,6 +3601,7 @@ packages:
    resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
    dependencies:
      tslib: 2.4.0
+    dev: false

  /@szmarczak/http-timer/5.0.1:
    resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
@ -4579,6 +4594,7 @@ packages:

  /client-only/0.0.1:
    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    dev: false

  /cliui/6.0.0:
    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
@ -7520,6 +7536,7 @@ packages:
    resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true
+    dev: false

  /natural-compare-lite/1.4.0:
    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@ -7642,6 +7659,7 @@ packages:
    transitivePeerDependencies:
      - '@babel/core'
      - babel-plugin-macros
+    dev: false

  /node-domexception/1.0.0:
    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
@ -7992,6 +8010,7 @@ packages:
      nanoid: 3.3.4
      picocolors: 1.0.0
      source-map-js: 1.0.2
+    dev: false

  /preferred-pm/3.0.3:
    resolution: {integrity: sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==}
@ -8161,6 +8180,7 @@ packages:
      loose-envify: 1.4.0
      react: 18.2.0
      scheduler: 0.23.0
+    dev: false

  /react-i18next/11.18.6_i18next@21.10.0:
    resolution: {integrity: sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==}
@ -8257,6 +8277,7 @@ packages:
    engines: {node: '>=0.10.0'}
    dependencies:
      loose-envify: 1.4.0
+    dev: false

  /read-pkg-up/7.0.1:
    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@ -8534,6 +8555,7 @@ packages:
    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
    dependencies:
      loose-envify: 1.4.0
+    dev: false

  /schema-utils/2.7.1:
    resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==}
@ -8692,6 +8714,7 @@ packages:
  /source-map-js/1.0.2:
    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
    engines: {node: '>=0.10.0'}
+    dev: false

  /source-map-support/0.5.13:
    resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
@ -8940,6 +8963,7 @@ packages:
    dependencies:
      client-only: 0.0.1
      react: 18.2.0
+    dev: false

  /stylis/4.0.13:
    resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==}