From de9248b78462ba2d0c6752e833f12d4ae45cca30 Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Wed, 18 Jan 2023 01:27:31 +0800 Subject: [PATCH 01/11] feat:workspaces list style --- .../src/components/workspace-modal/index.tsx | 210 ++++++++++-------- pnpm-lock.yaml | 24 ++ 2 files changed, 138 insertions(+), 96 deletions(-) diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 5c0424b772..24ceefc288 100644 --- 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) => {
{t('My Workspaces')} @@ -61,77 +60,68 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { active={item.id === currentWorkspace?.id} key={index} > - -
- -
+
+ +
- + + {item.name || 'AFFiNE'} - - - - {(item.provider === 'local' || !item.provider) && ( - + + {isOwner ? ( + item.provider === 'local' ? ( +

+ + Local Workspace +

+ ) : ( +

+ + Cloud Workspace +

+ ) + ) : ( +

+ + Joined Workspace +

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

+ + All data can be accessed offline +

)} - {item.published && } - - {/* {item.isLocal ? 'isLocal' : ''}/ */} + {item.published && ( +

+ Published to Web +

+ )} + ); })} -
  • - -
    • + { + setCreateWorkspaceOpen(true); + }} + > +
    + + + +
    + + + New workspace +

    Crete or import

    +     +     -

    + {/*

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

    +

    */}
    {!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 }); - // } - // } - // }); }} > @@ -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', + }; +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e3871e7978..c3ea50ad04 100644 --- 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==} From e8a5d9b784f5c802db82390e0fbbc96e1bad2e91 Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Wed, 18 Jan 2023 02:12:51 +0800 Subject: [PATCH 02/11] feat: login style --- .../src/components/workspace-modal/index.tsx | 135 +++++++++++++----- 1 file changed, 99 insertions(+), 36 deletions(-) diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 24ceefc288..e944e00d2c 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -1,11 +1,20 @@ import { styled } from '@/styles'; import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; -import { Button } from '@/ui/button'; +import { IconButton } from '@/ui/button'; import { useState } from 'react'; import { CreateWorkspaceModal } from '../create-workspace'; -import { CloudUnsyncedIcon, UsersIcon, AddIcon } from '@blocksuite/icons'; +import { + CloudUnsyncedIcon, + UsersIcon, + AddIcon, + LogOutIcon, + CloudInsyncIcon, +} from '@blocksuite/icons'; import { toast } from '@/ui/toast'; -import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; +import { + WorkspaceAvatar, + WorkspaceUnitAvatar, +} from '@/components/workspace-avatar'; import { useAppState } from '@/providers/app-state-provider'; import { useRouter } from 'next/router'; import { useConfirm } from '@/providers/ConfirmProvider'; @@ -82,7 +91,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { ) ) : (

    - + Joined Workspace

    )} @@ -125,7 +134,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
    {!user ? ( - + + + + Sign in to sync with AFFINE Cloud + ) : ( - +
    +
    + +
    + +

    {user.name}

    +

    {user.email}

    +     +
    + { + 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'); + } + } + }); + }} + > + + +
    +
    )} {!loaded && ( @@ -196,15 +223,8 @@ const ContentTitle = styled('span')({ paddingBottom: '16px', }); -const Footer = styled('div')({ - height: '70px', - paddingLeft: '24px', - marginTop: '32px', - textAlign: 'center', -}); - const WorkspaceList = styled('div')({ - maxHeight: '514px', + height: '500px', overflow: 'auto', display: 'grid', gridRowGap: '24px', @@ -270,5 +290,48 @@ const StyleWorkspaceAdd = styled.div(() => { 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, + 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, + }, + }, }; }); 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 03/11] 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 7b473afbfb..9a26b56863 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 58bedcb47a..d8f907663d 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 54cda81dcc..3e021c23dd 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 From e53119fc20b2856b87245e4187db439fc18459cb Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Sun, 22 Jan 2023 17:41:51 +0800 Subject: [PATCH 04/11] feat: logout style and finish logout process --- .../app/src/components/login-modal/index.tsx | 1 + .../app/src/components/logout-modal/icon.tsx | 48 +++++++ .../app/src/components/logout-modal/index.tsx | 118 ++++++++++++++++++ .../src/components/workspace-modal/index.tsx | 44 ++++--- 4 files changed, 194 insertions(+), 17 deletions(-) create mode 100644 packages/app/src/components/logout-modal/icon.tsx create mode 100644 packages/app/src/components/logout-modal/index.tsx diff --git a/packages/app/src/components/login-modal/index.tsx b/packages/app/src/components/login-modal/index.tsx index 306935056b..d572190ee9 100644 --- a/packages/app/src/components/login-modal/index.tsx +++ b/packages/app/src/components/login-modal/index.tsx @@ -27,6 +27,7 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => { { await login(); + onClose(); }} > diff --git a/packages/app/src/components/logout-modal/icon.tsx b/packages/app/src/components/logout-modal/icon.tsx new file mode 100644 index 0000000000..4fb10d74db --- /dev/null +++ b/packages/app/src/components/logout-modal/icon.tsx @@ -0,0 +1,48 @@ +export const Check = () => { + return ( + + + + + + + + + + + + + ); +}; + +export const UnCheck = () => { + return ( + + + + + + ); +}; diff --git a/packages/app/src/components/logout-modal/index.tsx b/packages/app/src/components/logout-modal/index.tsx new file mode 100644 index 0000000000..91a5641d5b --- /dev/null +++ b/packages/app/src/components/logout-modal/index.tsx @@ -0,0 +1,118 @@ +import { styled } from '@/styles'; +import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; +import { Button } from '@/ui/button'; +import { Check, UnCheck } from './icon'; +import { useState } from 'react'; +interface LoginModalProps { + open: boolean; + onClose: (wait: boolean) => void; +} + +export const LogoutModal = ({ open, onClose }: LoginModalProps) => { + const [localCache, setLocalCache] = useState(false); + return ( + + +
    + { + onClose(true); + }} + /> +
    + + {'Sign out?'} + Set up an AFFINE account to sync data + + {localCache ? ( + { + setLocalCache(false); + }} + > + + + ) : ( + { + setLocalCache(true); + }} + > + + + )} + Retain local cached data + +
    + + +
    +     +     +     + ); +}; + +const Header = styled('div')({ + position: 'relative', + height: '44px', +}); + +const Content = styled('div')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '16px', +}); + +const ContentTitle = styled('h1')({ + fontSize: '20px', + lineHeight: '28px', + fontWeight: 600, + textAlign: 'center', + paddingBottom: '16px', +}); + +const SignDes = styled('div')(({ theme }) => { + return { + fontWeight: 400, + color: theme.colors.textColor, + fontSize: '16px', + }; +}); + +const StyleCheck = styled('span')(() => { + return { + display: 'inline-block', + cursor: 'pointer', + + svg: { + verticalAlign: 'sub', + marginRight: '8px', + }, + }; +}); + +const StyleTips = styled('span')(() => { + return { + userSelect: 'none', + }; +}); diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 104cf5719b..c0dd2a8bd3 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -11,19 +11,18 @@ import { PublishIcon, CloseIcon, } from '@blocksuite/icons'; -import { toast } from '@/ui/toast'; import { WorkspaceAvatar, WorkspaceUnitAvatar, } from '@/components/workspace-avatar'; import { useAppState } from '@/providers/app-state-provider'; import { useRouter } from 'next/router'; -import { useConfirm } from '@/providers/ConfirmProvider'; import { useTranslation } from '@affine/i18n'; import { LanguageMenu } from './languageMenu'; import { CloudIcon, LineIcon, LocalIcon, OfflineIcon } from './icons'; import { LoginModal } from '../login-modal'; +import { LogoutModal } from '../logout-modal'; interface WorkspaceModalProps { open: boolean; onClose: () => void; @@ -31,12 +30,12 @@ interface WorkspaceModalProps { export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false); - const { confirm } = useConfirm(); const { workspaceList, currentWorkspace, user, logout, isOwner } = useAppState(); const router = useRouter(); const { t } = useTranslation(); const [loginOpen, setLoginOpen] = useState(false); + const [logoutOpen, setLogoutOpen] = useState(false); return (
    @@ -184,20 +183,21 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
    { - 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'); - } - } - }); + 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'); + // // } + // // } + // }); }} > @@ -212,6 +212,16 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { setCreateWorkspaceOpen(false); }} > + { + if (!wait) { + await logout(); + router.replace(`/workspace`); + } + setLogoutOpen(false); + }} + >
    From 7e23aa4618ca5364c36e5f761b6d6a0c52a4ca40 Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Mon, 23 Jan 2023 09:46:12 +0800 Subject: [PATCH 05/11] fix: rewrite workspacesetting layout --- .../src/components/header/PageListHeader.tsx | 4 +- packages/app/src/components/header/styles.ts | 32 ++--- .../workspace-setting/ExportPage.tsx | 2 +- .../workspace-setting/general/General.tsx | 118 +++++++++++------- .../workspace-setting/general/style.ts | 24 +++- .../workspace-setting/member/style.ts | 2 +- .../src/components/workspace-setting/style.ts | 38 +++--- 7 files changed, 119 insertions(+), 101 deletions(-) diff --git a/packages/app/src/components/header/PageListHeader.tsx b/packages/app/src/components/header/PageListHeader.tsx index 43a1c976b9..99efff25de 100644 --- a/packages/app/src/components/header/PageListHeader.tsx +++ b/packages/app/src/components/header/PageListHeader.tsx @@ -1,7 +1,7 @@ import { PropsWithChildren, ReactNode } from 'react'; import Header from './Header'; import { StyledPageListTittleWrapper } from './styles'; -import QuickSearchButton from './QuickSearchButton'; +// import QuickSearchButton from './QuickSearchButton'; export type PageListHeaderProps = PropsWithChildren<{ icon?: ReactNode; @@ -12,7 +12,7 @@ export const PageListHeader = ({ icon, children }: PageListHeaderProps) => { {icon} {children} - + {/* */} ); diff --git a/packages/app/src/components/header/styles.ts b/packages/app/src/components/header/styles.ts index 1deb826faa..146164eebd 100644 --- a/packages/app/src/components/header/styles.ts +++ b/packages/app/src/components/header/styles.ts @@ -3,35 +3,25 @@ import { displayFlex, styled } from '@/styles'; export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>( ({ hasWarning }) => { return { - position: 'relative', height: hasWarning ? '96px' : '60px', }; } ); -export const StyledHeader = styled.div<{ hasWarning: boolean }>( - ({ hasWarning }) => { - return { - height: '60px', - width: '100%', - ...displayFlex('flex-end', 'center'), - background: 'var(--affine-page-background)', - transition: 'background-color 0.5s', - position: 'absolute', - left: '0', - top: hasWarning ? '36px' : '0', - padding: '0 22px', - zIndex: 99, - }; - } -); +export const StyledHeader = styled.div<{ hasWarning: boolean }>(() => { + return { + height: '60px', + width: '100%', + ...displayFlex('flex-end', 'center'), + background: 'var(--affine-page-background)', + transition: 'background-color 0.5s', + zIndex: 99, + }; +}); export const StyledTitle = styled('div')(({ theme }) => ({ width: '720px', height: '100%', - position: 'absolute', - left: 0, - right: 0, - top: 0, + margin: 'auto', ...displayFlex('center', 'center'), diff --git a/packages/app/src/components/workspace-setting/ExportPage.tsx b/packages/app/src/components/workspace-setting/ExportPage.tsx index 83830f1777..e3cf6117f6 100644 --- a/packages/app/src/components/workspace-setting/ExportPage.tsx +++ b/packages/app/src/components/workspace-setting/ExportPage.tsx @@ -4,7 +4,7 @@ import { Trans } from '@affine/i18n'; export const ExportPageTitleContainer = styled('div')(() => { return { display: 'flex', - marginTop: '60px', + fontWeight: '500', flex: 1, }; diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx index 2ac37c53c3..c8919b30cc 100644 --- a/packages/app/src/components/workspace-setting/general/General.tsx +++ b/packages/app/src/components/workspace-setting/general/General.tsx @@ -5,6 +5,8 @@ import { StyledSettingInputContainer, StyledDoneButtonContainer, StyledInput, + StyledProviderInfo, + StyleGeneral, } from './style'; import { StyledSettingH2 } from '../style'; @@ -13,12 +15,13 @@ import { Button } from '@/ui/button'; import { useAppState } from '@/providers/app-state-provider'; import { WorkspaceDelete } from './delete'; import { WorkspaceLeave } from './leave'; -import { DoneIcon, CloudUnsyncedIcon } from '@blocksuite/icons'; +import { DoneIcon, UsersIcon } from '@blocksuite/icons'; // import { Upload } from '@/components/file-upload'; import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; import { WorkspaceUnit } from '@affine/datacenter'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { useTranslation } from '@affine/i18n'; +import { CloudIcon, LocalIcon } from '@/components/workspace-modal/icons'; export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const [showDelete, setShowDelete] = useState(false); const [showLeave, setShowLeave] = useState(false); @@ -45,57 +48,76 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { // }; return workspace ? ( -
    - Workspace Avatar - -
    - -
    - {/* TODO: Wait for image sync to complete */} - {/* +
    + Workspace Avatar + +
    + +
    + {/* TODO: Wait for image sync to complete */} + {/* */} - {/* TODO: add upload logic */} -     - {t('Workspace Name')} - - - {isOwner ? ( - { - handleUpdateWorkspaceName(); - }} - > - - - ) : null} - - {t('Workspace Type')} - - - Local workspace - + {/* TODO: add upload logic */} + + {t('Workspace Name')} + + + {isOwner ? ( + { + handleUpdateWorkspaceName(); + }} + > + + + ) : null} + + {t('Workspace Type')} + + {isOwner ? ( + currentWorkspace?.provider === 'local' ? ( + + + Local Workspace + + ) : ( + + + All data can be accessed offline + + ) + ) : ( + + + Joined Workspace + + )} + +
    + {isOwner ? ( <> @@ -137,6 +159,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { )} -
    + ) : null; }; diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts index c46f9706c9..9e76f13e0f 100644 --- a/packages/app/src/components/workspace-setting/general/style.ts +++ b/packages/app/src/components/workspace-setting/general/style.ts @@ -13,11 +13,14 @@ export const StyledSettingInputContainer = styled('div')(() => { export const StyledDeleteButtonContainer = styled('div')(() => { return { - position: 'absolute', - bottom: '0', - left: '50%', - marginBottom: '20px', - transform: 'translateX(-50%)', + textAlign: 'center', + }; +}); +export const StyleGeneral = styled('div')(() => { + return { + display: 'flex', + flexDirection: 'column', + height: '100%', }; }); export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => { @@ -53,3 +56,14 @@ export const StyledSettingAvatarContent = styled('div')(() => { export const StyledSettingAvatar = styled(MuiAvatar)(() => { return { height: '72px', width: '72px', marginRight: '24px' }; }); + +export const StyledProviderInfo = styled('p')(({ theme }) => { + return { + color: theme.colors.iconColor, + fontSize: theme.font.sm, + svg: { + verticalAlign: 'sub', + marginRight: '10px', + }, + }; +}); diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts index 2b259828c9..d861b192a1 100644 --- a/packages/app/src/components/workspace-setting/member/style.ts +++ b/packages/app/src/components/workspace-setting/member/style.ts @@ -109,7 +109,7 @@ export const StyledMemberWarp = styled('div')(() => { return { display: 'flex', flexDirection: 'column', - padding: '48px 0', + padding: '0 0 48px 0', fontWeight: '500', fontSize: '18px', }; diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts index 430c6780ef..c855b767d9 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -4,23 +4,27 @@ export const StyledSettingContainer = styled('div')(() => { return { display: 'flex', flexDirection: 'column', - marginTop: '24px', - marginLeft: '48px', - overflow: 'auto', + + padding: '0 34px 20px 48px', + height: '100vh', }; }); export const StyledSettingSidebar = styled('div')(() => { { return { - flexShrink: 0, - flexGrow: 0, + // height: '48px', + marginTop: '50px', }; } }); export const StyledSettingContent = styled('div')(() => { - return {}; + return { + overflow: 'hidden', + flex: 1, + paddingTop: '48px', + }; }); export const StyledSetting = styled('div')(({ theme }) => { @@ -48,7 +52,6 @@ export const StyledSettingTabContainer = styled('ul')(() => { { return { display: 'flex', - marginTop: '25px', }; } }); @@ -58,8 +61,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>( { return { display: 'flex', - position: 'relative', - margin: '0 48px 8px 0', + margin: '0 48px 0 0', height: '34px', color: isActive ? theme.colors.primaryColor : theme.colors.textColor, fontWeight: '500', @@ -67,16 +69,9 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>( lineHeight: theme.font.lineHeightBase, cursor: 'pointer', transition: 'all 0.15s ease', - '::after': { - content: '""', - width: '100%', - height: '2px', - background: isActive ? theme.colors.primaryColor : 'transparent', - transition: 'all 0.15s ease', - position: 'absolute', - left: '0', - bottom: '0', - }, + borderBottom: `2px solid ${ + isActive ? theme.colors.primaryColor : 'none' + }`, ':hover': { color: theme.colors.primaryColor }, }; } @@ -87,9 +82,6 @@ export const StyledSettingTagIconContainer = styled('div')(() => { return { display: 'flex', alignItems: 'center', - marginRight: '14.64px', - width: '14.47px', - fontSize: '14.47px', }; }); @@ -112,7 +104,7 @@ export const StyledPublishExplanation = styled('div')(() => { fontSize: '18px', lineHeight: '26px', flex: 1, - marginTop: '60px', + marginBottom: '22px', }; }); From ba7a4378ad357c758b741f7bccf658638830009b Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Mon, 23 Jan 2023 10:26:51 +0800 Subject: [PATCH 06/11] fix: rewrite member style --- .../workspace-setting/member/MembersPage.tsx | 8 ++++--- .../workspace-setting/member/style.ts | 22 +++++++++++-------- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx index e4b787854c..b72d607238 100644 --- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx +++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx @@ -12,6 +12,7 @@ import { StyledMoreVerticalButton, StyledPublishExplanation, StyledMemberWarp, + StyledMemberContainer, } from './style'; import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons'; import { useState } from 'react'; @@ -31,14 +32,14 @@ import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const [isInviteModalShow, setIsInviteModalShow] = useState(false); const { members, removeMember, loaded } = useMembers(); + const { t } = useTranslation(); - // FIXME: DELETE THIS const { enableWorkspace } = useWorkspaceHelper(); const { confirm } = useConfirm(); if (workspace.provider === 'affine') { return ( - <> + {!loaded && ( @@ -57,6 +58,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {t('Access level')} +
    {members.map((member, index) => { const user = Object.assign( @@ -153,7 +155,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { open={isInviteModalShow} > - +     ); } diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts index d861b192a1..46eeaa9bed 100644 --- a/packages/app/src/components/workspace-setting/member/style.ts +++ b/packages/app/src/components/workspace-setting/member/style.ts @@ -1,14 +1,21 @@ import { styled } from '@/styles'; import MuiAvatar from '@mui/material/Avatar'; -export const StyledMemberTitleContainer = styled('div')(() => { +export const StyledMemberTitleContainer = styled('li')(() => { return { display: 'flex', - marginTop: '60px', fontWeight: '500', + marginBottom: '32px', flex: 1, }; }); +export const StyledMemberContainer = styled('div')(() => { + return { + display: 'flex', + height: '100%', + flexDirection: 'column', + }; +}); export const StyledMemberAvatar = styled(MuiAvatar)(() => { return { height: '40px', width: '40px' }; @@ -18,8 +25,7 @@ export const StyledMemberNameContainer = styled('div')(() => { return { display: 'flex', alignItems: 'center', - width: '402px', - flex: 2, + flex: '2 0 402px', }; }); @@ -27,17 +33,15 @@ export const StyledMemberRoleContainer = styled('div')(() => { return { display: 'flex', alignItems: 'center', - width: '222px', - flex: 1, + flex: '1 0 222px', }; }); export const StyledMemberListContainer = styled('ul')(() => { return { - marginTop: '15px', overflowY: 'scroll', width: '100%', - maxHeight: 'calc(100vh - 300px)', + flex: 1, }; }); @@ -60,7 +64,7 @@ export const StyledMemberName = styled('div')(({ theme }) => { return { fontWeight: '400', fontSize: '18px', - lineHeight: '16px', + lineHeight: '26px', color: theme.colors.textColor, }; }); From 6d41090e2784b781e2e4c250057f955a5237e7bb Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Mon, 23 Jan 2023 10:38:05 +0800 Subject: [PATCH 07/11] feat: rewrite enable affile cloud --- .../src/components/enable-workspace/index.tsx | 24 +++++++++++++++++++ .../workspace-setting/PublishPage.tsx | 18 +++----------- .../components/workspace-setting/SyncPage.tsx | 14 ++--------- .../workspace-setting/member/MembersPage.tsx | 13 ++-------- 4 files changed, 31 insertions(+), 38 deletions(-) create mode 100644 packages/app/src/components/enable-workspace/index.tsx diff --git a/packages/app/src/components/enable-workspace/index.tsx b/packages/app/src/components/enable-workspace/index.tsx new file mode 100644 index 0000000000..3cc28b25d4 --- /dev/null +++ b/packages/app/src/components/enable-workspace/index.tsx @@ -0,0 +1,24 @@ +import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; +import { Button } from '@/ui/button'; +import { useTranslation } from '@affine/i18n'; +import { useState } from 'react'; + +export const EnableWorkspaceButton = () => { + const { t } = useTranslation(); + const { enableWorkspace } = useWorkspaceHelper(); + const [loading, setLoading] = useState(false); + return ( + + ); +}; diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx index 4ff35d776d..3d65ac8676 100644 --- a/packages/app/src/components/workspace-setting/PublishPage.tsx +++ b/packages/app/src/components/workspace-setting/PublishPage.tsx @@ -16,9 +16,10 @@ import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { useTranslation } from '@affine/i18n'; import Loading from '@/components/loading'; import { Wrapper } from '@/ui/layout'; +import { EnableWorkspaceButton } from '../enable-workspace'; export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const shareUrl = window.location.host + '/public-workspace/' + workspace.id; - const { publishWorkspace, enableWorkspace } = useWorkspaceHelper(); + const { publishWorkspace } = useWorkspaceHelper(); const { t } = useTranslation(); const [loaded, setLoaded] = useState(true); const togglePublic = async (flag: boolean) => { @@ -30,9 +31,6 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { toast('Copied url to clipboard'); }; - const enableAffineCloud = async () => { - await enableWorkspace(); - }; return ( <> {workspace.provider === 'affine' ? ( @@ -100,17 +98,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { - + diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx index f65a24ab7b..c9d0523f6e 100644 --- a/packages/app/src/components/workspace-setting/SyncPage.tsx +++ b/packages/app/src/components/workspace-setting/SyncPage.tsx @@ -9,11 +9,10 @@ import { DownloadIcon } from '@blocksuite/icons'; import { Button } from '@/ui/button'; import { Menu, MenuItem } from '@/ui/menu'; import { WorkspaceUnit } from '@affine/datacenter'; -import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { Trans, useTranslation } from '@affine/i18n'; import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; +import { EnableWorkspaceButton } from '../enable-workspace'; export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { - const { enableWorkspace } = useWorkspaceHelper(); const { t } = useTranslation(); return (
    @@ -36,16 +35,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { Cloud for this workspace to keep data in sync with the cloud. - + ) : ( diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx index b72d607238..b1b64ffa0e 100644 --- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx +++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx @@ -27,14 +27,13 @@ import useMembers from '@/hooks/use-members'; import Loading from '@/components/loading'; import { Wrapper } from '@/ui/layout'; import { useTranslation } from '@affine/i18n'; -import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; +import { EnableWorkspaceButton } from '@/components/enable-workspace'; export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const [isInviteModalShow, setIsInviteModalShow] = useState(false); const { members, removeMember, loaded } = useMembers(); const { t } = useTranslation(); - const { enableWorkspace } = useWorkspaceHelper(); const { confirm } = useConfirm(); if (workspace.provider === 'affine') { @@ -163,15 +162,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {t('Collaboration Description')} - + ); From 0fa44f82dd7671c26e67ffca5aebdfea6aaf2c9b Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Mon, 23 Jan 2023 11:23:41 +0800 Subject: [PATCH 08/11] feat: rewrite publish style --- .../workspace-setting/PublishPage.tsx | 66 ++++++++++--------- .../src/components/workspace-setting/style.ts | 38 +++++------ 2 files changed, 50 insertions(+), 54 deletions(-) diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx index 3d65ac8676..a30b72bdf7 100644 --- a/packages/app/src/components/workspace-setting/PublishPage.tsx +++ b/packages/app/src/components/workspace-setting/PublishPage.tsx @@ -14,16 +14,18 @@ import { toast } from '@/ui/toast'; import { WorkspaceUnit } from '@affine/datacenter'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { useTranslation } from '@affine/i18n'; -import Loading from '@/components/loading'; -import { Wrapper } from '@/ui/layout'; import { EnableWorkspaceButton } from '../enable-workspace'; export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const shareUrl = window.location.host + '/public-workspace/' + workspace.id; const { publishWorkspace } = useWorkspaceHelper(); const { t } = useTranslation(); - const [loaded, setLoaded] = useState(true); + const [loaded, setLoaded] = useState(false); const togglePublic = async (flag: boolean) => { - await publishWorkspace(workspace.id.toString(), flag); + try { + await publishWorkspace(workspace.id.toString(), flag); + } catch (e) { + toast('Failed to publish workspace'); + } }; const copyUrl = () => { @@ -34,17 +36,21 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { return ( <> {workspace.provider === 'affine' ? ( -
    +
    {workspace.published ? ( <> - {t('Publishing')} + The current workspace has been published to the web, everyone + can view the contents of this workspace through the link. - - {t('Share with link')} - + + + {t('Share with link')} + +
    )} @@ -64,10 +84,11 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { ) : ( - - - + <> )}
    ) : ( <> - {t('Publishing')} + Publishing to web requires AFFiNE Cloud service. - +
    - +
    )} - {!loaded && ( - - - - )} ); }; diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts index c855b767d9..2f95a29b89 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -1,4 +1,4 @@ -import { displayFlex, styled } from '@/styles'; +import { styled } from '@/styles'; export const StyledSettingContainer = styled('div')(() => { return { @@ -85,26 +85,25 @@ export const StyledSettingTagIconContainer = styled('div')(() => { }; }); -export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>( - ({ marginTop, theme }) => { - return { - fontWeight: '500', - fontSize: theme.font.base, - lineHeight: theme.font.lineHeightBase, - marginTop: marginTop ? `${marginTop}px` : '0px', - }; - } -); +export const StyledSettingH2 = styled('h2')<{ + marginTop?: number; + marginBottom?: number; +}>(({ marginTop, marginBottom, theme }) => { + return { + fontWeight: '500', + fontSize: theme.font.base, + lineHeight: theme.font.lineHeightBase, + marginTop: marginTop ? `${marginTop}px` : '0px', + marginBottom: marginBottom ? `${marginBottom}px` : '0px', + }; +}); export const StyledPublishExplanation = styled('div')(() => { return { - ...displayFlex('row', 'center', 'center'), paddingRight: '48px', fontWeight: '500', fontSize: '18px', lineHeight: '26px', - flex: 1, - marginBottom: '22px', }; }); @@ -126,21 +125,14 @@ export const StyledWorkspaceType = styled('div')(() => { export const StyledPublishCopyContainer = styled('div')(() => { return { marginTop: '12px', - display: 'flex', - flexDirection: 'column', - alignItems: 'start', - justifyContent: 'center', marginBottom: '20px', paddingTop: '20px', + flex: 1, }; }); export const StyledStopPublishContainer = styled('div')(() => { return { - position: 'absolute', - bottom: '0', - left: '50%', - transform: 'translateX(-50%)', - marginBottom: '20px', + textAlign: 'center', }; }); From 9a717f7ed2e7bfa64c7ec5878519ff03460cf0e0 Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Mon, 23 Jan 2023 11:36:04 +0800 Subject: [PATCH 09/11] feat: rewrite async style --- .../src/components/workspace-avatar/Avatar.tsx | 7 +++++++ .../workspace-avatar/WorkspaceUnitAvatar.tsx | 3 +++ .../src/components/workspace-setting/SyncPage.tsx | 15 +++++++-------- .../components/workspace-setting/member/style.ts | 2 +- .../app/src/components/workspace-setting/style.ts | 10 ++++++++-- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/packages/app/src/components/workspace-avatar/Avatar.tsx b/packages/app/src/components/workspace-avatar/Avatar.tsx index c01808e68f..e9bea0aadd 100644 --- a/packages/app/src/components/workspace-avatar/Avatar.tsx +++ b/packages/app/src/components/workspace-avatar/Avatar.tsx @@ -3,6 +3,7 @@ interface IWorkspaceAvatar { size: number; name: string; avatar: string; + style?: React.CSSProperties; } export const WorkspaceAvatar = (props: IWorkspaceAvatar) => { @@ -14,12 +15,15 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => { {props.avatar ? (
    @@ -33,6 +37,7 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => { ) : (
    { borderRadius: '50%', textAlign: 'center', lineHeight: size + 'px', + display: 'inline-block', + verticalAlign: 'middle', }} > {(props.name || 'AFFiNE').substring(0, 1)} diff --git a/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx b/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx index 4144d9645d..bdb8431e2c 100644 --- a/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx +++ b/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx @@ -24,10 +24,12 @@ export const WorkspaceUnitAvatar = ({ size = 20, name, workspaceUnit, + style, }: { size?: number; name?: string; workspaceUnit?: WorkspaceUnit | null; + style?: React.CSSProperties; }) => { const avatarUrl = useAvatar(workspaceUnit || undefined); return ( @@ -35,6 +37,7 @@ export const WorkspaceUnitAvatar = ({ size={size} name={name || workspaceUnit?.name || ''} avatar={avatarUrl} + style={style} /> ); }; diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx index c9d0523f6e..6969461a38 100644 --- a/packages/app/src/components/workspace-setting/SyncPage.tsx +++ b/packages/app/src/components/workspace-setting/SyncPage.tsx @@ -1,6 +1,6 @@ import { + StyleAsync, StyledPublishContent, - StyledPublishCopyContainer, StyledPublishExplanation, StyledWorkspaceName, StyledWorkspaceType, @@ -24,19 +24,18 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { size={32} name={workspace.name} workspaceUnit={workspace} + style={{ marginRight: '12px' }} /> - -  {workspace.name}  - + {workspace.name}; is a Local Workspace. All data is stored on the current device. You can enable AFFiNE Cloud for this workspace to keep data in sync with the cloud. - + - + ) : ( <> @@ -47,7 +46,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { the AFFiNE - + @@ -76,7 +75,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {t('Download data to device', { CoreOrAll: 'all' })} - + )} diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts index 46eeaa9bed..ce18dcb0ad 100644 --- a/packages/app/src/components/workspace-setting/member/style.ts +++ b/packages/app/src/components/workspace-setting/member/style.ts @@ -105,7 +105,7 @@ export const StyledPublishExplanation = styled('div')(() => { fontSize: '18px', lineHeight: '26px', flex: 1, - marginTop: '60px', + marginTop: '64px', }; }); diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts index 2f95a29b89..dcde665f31 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -107,14 +107,14 @@ export const StyledPublishExplanation = styled('div')(() => { marginBottom: '22px', }; }); -export const StyledWorkspaceName = styled('div')(() => { +export const StyledWorkspaceName = styled('span')(() => { return { fontWeight: '400', fontSize: '18px', lineHeight: '26px', }; }); -export const StyledWorkspaceType = styled('div')(() => { +export const StyledWorkspaceType = styled('span')(() => { return { fontWeight: '500', fontSize: '18px', @@ -148,3 +148,9 @@ export const StyledPublishContent = styled('div')(() => { flexDirection: 'column', }; }); + +export const StyleAsync = styled('div')(() => { + return { + marginTop: '64px', + }; +}); From 77b1dff68b6099a5c8f963a46eb537f334225d5c Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Mon, 23 Jan 2023 11:50:04 +0800 Subject: [PATCH 10/11] feat: avatar upload --- .../workspace-setting/general/General.tsx | 45 ++++++++++--------- .../workspace-setting/general/icons.tsx | 20 +++++++++ .../workspace-setting/general/style.ts | 25 +++++++++++ 3 files changed, 70 insertions(+), 20 deletions(-) create mode 100644 packages/app/src/components/workspace-setting/general/icons.tsx diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx index c8919b30cc..0207cb6a95 100644 --- a/packages/app/src/components/workspace-setting/general/General.tsx +++ b/packages/app/src/components/workspace-setting/general/General.tsx @@ -7,6 +7,7 @@ import { StyledInput, StyledProviderInfo, StyleGeneral, + StyledAvatar, } from './style'; import { StyledSettingH2 } from '../style'; @@ -22,10 +23,11 @@ import { WorkspaceUnit } from '@affine/datacenter'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { useTranslation } from '@affine/i18n'; import { CloudIcon, LocalIcon } from '@/components/workspace-modal/icons'; +import { CameraIcon } from './icons'; +import { Upload } from '@/components/file-upload'; export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const [showDelete, setShowDelete] = useState(false); const [showLeave, setShowLeave] = useState(false); - // const [uploading, setUploading] = useState(false); const [workspaceName, setWorkspaceName] = useState(workspace.name); const { currentWorkspace, isOwner } = useAppState(); const { updateWorkspace } = useWorkspaceHelper(); @@ -39,31 +41,34 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { updateWorkspace({ name: workspaceName }, currentWorkspace); }; - // const fileChange = async (file: File) => { - // setUploading(true); - // const blob = new Blob([file], { type: file.type }); - // currentWorkspace && - // (await updateWorkspace({ avatarBlob: blob }, currentWorkspace)); - // setUploading(false); - // }; + const fileChange = async (file: File) => { + const blob = new Blob([file], { type: file.type }); + currentWorkspace && + (await updateWorkspace({ avatarBlob: blob }, currentWorkspace)); + }; return workspace ? (
    Workspace Avatar -
    - -
    + + + <> +
    + +
    + + +     +     {/* TODO: Wait for image sync to complete */} {/* { + return ( + + + + + + ); +}; diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts index 9e76f13e0f..d2e8d7b4d2 100644 --- a/packages/app/src/components/workspace-setting/general/style.ts +++ b/packages/app/src/components/workspace-setting/general/style.ts @@ -67,3 +67,28 @@ export const StyledProviderInfo = styled('p')(({ theme }) => { }, }; }); + +export const StyledAvatar = styled('div')(() => { + return { + position: 'relative', + marginRight: '20px', + cursor: 'pointer', + ':hover': { + '.camera-icon': { + display: 'block', + }, + }, + '.camera-icon': { + position: 'absolute', + display: 'none', + width: '100%', + height: '100%', + borderRadius: '50%', + backgroundColor: 'rgba(60, 61, 63, 0.5)', + top: 0, + left: 0, + textAlign: 'center', + lineHeight: '72px', + }, + }; +}); From bccb0cc5ffa404a131d8d9f567a21237bb877b8a Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Mon, 23 Jan 2023 11:58:51 +0800 Subject: [PATCH 11/11] feat: svg lint --- .../src/components/edgeless-toolbar/reply.svg | 2 +- .../app/src/components/logout-modal/icon.tsx | 8 +++---- .../workspace-modal/icons/index.tsx | 22 +++++++++---------- .../workspace-setting/general/icons.tsx | 4 ++-- tests/local-first-workspace.spec.ts | 2 +- 5 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/app/src/components/edgeless-toolbar/reply.svg b/packages/app/src/components/edgeless-toolbar/reply.svg index bfe127a193..7b9f8f2a2e 100644 --- a/packages/app/src/components/edgeless-toolbar/reply.svg +++ b/packages/app/src/components/edgeless-toolbar/reply.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/app/src/components/logout-modal/icon.tsx b/packages/app/src/components/logout-modal/icon.tsx index 4fb10d74db..df23248b78 100644 --- a/packages/app/src/components/logout-modal/icon.tsx +++ b/packages/app/src/components/logout-modal/icon.tsx @@ -10,8 +10,8 @@ export const Check = () => { > @@ -37,8 +37,8 @@ export const UnCheck = () => { xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/app/src/components/workspace-modal/icons/index.tsx b/packages/app/src/components/workspace-modal/icons/index.tsx index 3697e6f6f2..773a8383f3 100644 --- a/packages/app/src/components/workspace-modal/icons/index.tsx +++ b/packages/app/src/components/workspace-modal/icons/index.tsx @@ -8,8 +8,8 @@ export const LocalIcon = () => { xmlns="http://www.w3.org/2000/svg" > @@ -27,8 +27,8 @@ export const OfflineIcon = () => { xmlns="http://www.w3.org/2000/svg" > @@ -45,8 +45,8 @@ export const PublishedIcon = () => { xmlns="http://www.w3.org/2000/svg" > @@ -71,12 +71,12 @@ export const CloudIcon = () => { d="M2.5 11.3744C2.5 13.837 4.51472 15.8333 7 15.8333L13.75 15.8333C15.8211 15.8333 17.5 14.1532 17.5 12.0807C17.5 10.5419 16.5744 9.12069 15.25 8.54163C15.1098 6.10205 13.07 4.16663 10.5744 4.16663C8.62616 4.16663 6.95578 5.40527 6.25 7.08329C4 7.44788 2.5 9.33336 2.5 11.3744Z" stroke="#60A5FA" stroke-width="1.25" - stroke-linecap="round" - stroke-linejoin="round" + strokeLinecap="round" + strokeLinejoin="round" /> @@ -93,7 +93,7 @@ export const LineIcon = () => { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); }; diff --git a/packages/app/src/components/workspace-setting/general/icons.tsx b/packages/app/src/components/workspace-setting/general/icons.tsx index 9487d8dc66..a126cafc0f 100644 --- a/packages/app/src/components/workspace-setting/general/icons.tsx +++ b/packages/app/src/components/workspace-setting/general/icons.tsx @@ -9,8 +9,8 @@ export const CameraIcon = () => { xmlns="http://www.w3.org/2000/svg" > diff --git a/tests/local-first-workspace.spec.ts b/tests/local-first-workspace.spec.ts index 39b10c6aea..014b839fc9 100644 --- a/tests/local-first-workspace.spec.ts +++ b/tests/local-first-workspace.spec.ts @@ -12,7 +12,7 @@ test.describe('Local first default workspace', () => { test.skip('Default workspace avatar', async ({ page }) => { const workspaceAvatar = page.getByTestId('workspace-avatar'); expect(await workspaceAvatar.innerHTML()).toBe( - '' + '' ); }); });