Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 05:14:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: support remove user & workspace avatar (#4302)

Browse Source
This commit is contained in:
Qi
2023-09-14 22:35:05 +08:00
committed by GitHub
parent e1a330a0a6
commit 465098cc9a
40 changed files with 504 additions and 808 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/core/src/components/pure/file-upload/index.tsx
View File

@@ -8,12 +8,14 @@ export interface UploadProps {
uploadType?: string;
accept?: string;
fileChange: (file: File) => void;
disabled?: boolean;
}
export const Upload = ({
fileChange,
accept,
children,
disabled,
...props
}: PropsWithChildren<UploadProps>) => {
const t = useAFFiNEI18N();
@@ -35,6 +37,10 @@ export const Upload = ({
}
};
if (disabled) {
return children ?? <Button>{t['Upload']()}</Button>;
}
return (
<UploadStyle onClick={_chooseFile}>
{children ?? <Button>{t['Upload']()}</Button>}

1
apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/index.ts
View File

@@ -1 +0,0 @@
export * from './workspace-selector';

197
apps/core/src/components/pure/workspace-list-modal/index.tsx → apps/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx
View File

@@ -3,9 +3,10 @@ import type {
AffineCloudWorkspace,
LocalWorkspace,
} from '@affine/env/workspace';
import { WorkspaceFlavour } from '@affine/env/workspace';
import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
import {
AccountIcon,
ImportIcon,
@@ -15,23 +16,28 @@ import {
SignOutIcon,
} from '@blocksuite/icons';
import type { DragEndEvent } from '@dnd-kit/core';
import { Popover } from '@mui/material';
import { arrayMove } from '@dnd-kit/sortable';
import { IconButton } from '@toeverything/components/button';
import { Divider } from '@toeverything/components/divider';
import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu';
import { useSetAtom } from 'jotai';
import {
currentPageIdAtom,
currentWorkspaceIdAtom,
} from '@toeverything/infra/atom';
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
import { useSession } from 'next-auth/react';
import { useCallback } from 'react';
import { startTransition, useCallback, useMemo, useTransition } from 'react';
import {
authAtom,
openCreateWorkspaceModalAtom,
openDisableCloudAlertModalAtom,
openSettingModalAtom,
} from '../../../atoms';
import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
import type { AllWorkspace } from '../../../shared';
import { signOutCloud } from '../../../utils/cloud-utils';
} from '../../../../atoms';
import type { AllWorkspace } from '../../../../shared';
import { signOutCloud } from '../../../../utils/cloud-utils';
import { useNavigateHelper } from '../.././../../hooks/use-navigate-helper';
import {
StyledCreateWorkspaceCardPill,
StyledCreateWorkspaceCardPillContent,
@@ -57,8 +63,6 @@ interface WorkspaceModalProps {
disabled?: boolean;
workspaces: RootWorkspaceMetadata[];
currentWorkspaceId: AllWorkspace['id'] | null;
open: boolean;
onClose: () => void;
onClickWorkspace: (workspace: RootWorkspaceMetadata['id']) => void;
onClickWorkspaceSetting: (workspace: RootWorkspaceMetadata['id']) => void;
onNewWorkspace: () => void;
@@ -66,10 +70,15 @@ interface WorkspaceModalProps {
onMoveWorkspace: (activeId: string, overId: string) => void;
}
const AccountMenu = () => {
const AccountMenu = ({
onOpenAccountSetting,
onSignOut,
}: {
onOpenAccountSetting: () => void;
onSignOut: () => void;
}) => {
const t = useAFFiNEI18N();
const setOpen = useSetAtom(openSettingModalAtom);
const { jumpToIndex } = useNavigateHelper();
return (
<div>
<MenuItem
@@ -79,9 +88,7 @@ const AccountMenu = () => {
</MenuIcon>
}
data-testid="editor-option-menu-import"
onClick={useCallback(() => {
setOpen(prev => ({ ...prev, open: true, activeTab: 'account' }));
}, [setOpen])}
onClick={onOpenAccountSetting}
>
{t['com.affine.workspace.cloud.account.settings']()}
</MenuItem>
@@ -93,13 +100,7 @@ const AccountMenu = () => {
</MenuIcon>
}
data-testid="editor-option-menu-import"
onClick={useCallback(() => {
signOutCloud()
.then(() => {
jumpToIndex();
})
.catch(console.error);
}, [jumpToIndex])}
onClick={onSignOut}
>
{t['com.affine.workspace.cloud.account.logout']()}
</MenuItem>
@@ -152,52 +153,108 @@ const CloudWorkSpaceList = ({
);
};
export const WorkspaceListModal = ({
disabled,
open,
onClose,
workspaces,
onClickWorkspace,
onClickWorkspaceSetting,
onNewWorkspace,
onAddWorkspace,
currentWorkspaceId,
onMoveWorkspace,
}: WorkspaceModalProps) => {
export const UserWithWorkspaceList = ({
onEventEnd,
}: {
onEventEnd?: () => void;
}) => {
const setOpenCreateWorkspaceModal = useSetAtom(openCreateWorkspaceModalAtom);
const { jumpToSubPath, jumpToIndex } = useNavigateHelper();
const workspaces = useAtomValue(rootWorkspacesMetadataAtom, {
delay: 0,
});
const setWorkspaces = useSetAtom(rootWorkspacesMetadataAtom);
const [currentWorkspaceId, setCurrentWorkspaceId] = useAtom(
currentWorkspaceIdAtom
);
const setCurrentPageId = useSetAtom(currentPageIdAtom);
const [, startCloseTransition] = useTransition();
const setOpenSettingModalAtom = useSetAtom(openSettingModalAtom);
const setSettingModalAtom = useSetAtom(openSettingModalAtom);
const t = useAFFiNEI18N();
const setOpen = useSetAtom(authAtom);
const setDisableCloudOpen = useSetAtom(openDisableCloudAlertModalAtom);
// TODO: AFFiNE Cloud support
const { data: session, status } = useSession();
const isLoggedIn = status === 'authenticated' ? true : false;
const anchorEl = document.getElementById('current-workspace');
const cloudWorkspaces = workspaces.filter(
({ flavour }) => flavour === WorkspaceFlavour.AFFINE_CLOUD
) as (AffineCloudWorkspace | LocalWorkspace)[];
const localWorkspaces = workspaces.filter(
({ flavour }) => flavour === WorkspaceFlavour.LOCAL
) as (AffineCloudWorkspace | LocalWorkspace)[];
// FIXME: replace mui popover
const isLoggedIn = useMemo(() => status === 'authenticated', [status]);
const cloudWorkspaces = useMemo(
() =>
workspaces.filter(
({ flavour }) => flavour === WorkspaceFlavour.AFFINE_CLOUD
) as (AffineCloudWorkspace | LocalWorkspace)[],
[workspaces]
);
const localWorkspaces = useMemo(
() =>
workspaces.filter(
({ flavour }) => flavour === WorkspaceFlavour.LOCAL
) as (AffineCloudWorkspace | LocalWorkspace)[],
[workspaces]
);
const onClickWorkspaceSetting = useCallback(
(workspaceId: string) => {
setOpenSettingModalAtom({
open: true,
activeTab: 'workspace',
workspaceId,
});
onEventEnd?.();
},
[onEventEnd, setOpenSettingModalAtom]
);
const onMoveWorkspace = useCallback(
(activeId: string, overId: string) => {
const oldIndex = workspaces.findIndex(w => w.id === activeId);
const newIndex = workspaces.findIndex(w => w.id === overId);
startTransition(() => {
setWorkspaces(workspaces => arrayMove(workspaces, oldIndex, newIndex));
});
},
[setWorkspaces, workspaces]
);
const onClickWorkspace = useCallback(
(workspaceId: string) => {
startCloseTransition(() => {
setCurrentWorkspaceId(workspaceId);
setCurrentPageId(null);
jumpToSubPath(workspaceId, WorkspaceSubPath.ALL);
});
onEventEnd?.();
},
[jumpToSubPath, onEventEnd, setCurrentPageId, setCurrentWorkspaceId]
);
const onNewWorkspace = useCallback(() => {
setOpenCreateWorkspaceModal('new');
onEventEnd?.();
}, [onEventEnd, setOpenCreateWorkspaceModal]);
const onAddWorkspace = useCallback(async () => {
setOpenCreateWorkspaceModal('add');
onEventEnd?.();
}, [onEventEnd, setOpenCreateWorkspaceModal]);
const onOpenAccountSetting = useCallback(() => {
setSettingModalAtom(prev => ({
...prev,
open: true,
activeTab: 'account',
}));
onEventEnd?.();
}, [onEventEnd, setSettingModalAtom]);
const onSignOut = useCallback(async () => {
signOutCloud()
.then(() => {
jumpToIndex();
})
.catch(console.error);
onEventEnd?.();
}, [onEventEnd, jumpToIndex]);
return (
<Popover
sx={{
color: 'success.main',
zIndex: 999,
'& .MuiPopover-paper': {
borderRadius: '8px',
display: 'flex',
flexDirection: 'column',
boxShadow: 'var(--affine-shadow-2)',
backgroundColor: 'var(--affine-background-overlay-panel-color)',
padding: '16px 12px',
},
maxHeight: '90vh',
}}
open={open}
anchorEl={anchorEl}
onClose={onClose}
disableEnforceFocus
>
<>
{!isLoggedIn ? (
<StyledModalHeaderContent>
<StyledSignInCardPill>
@@ -211,7 +268,6 @@ export const WorkspaceListModal = ({
openModal: true,
}));
}
onClose();
}}
data-testid="cloud-signin-button"
>
@@ -242,7 +298,12 @@ export const WorkspaceListModal = ({
<StyledModalTitle>{session?.user.email}</StyledModalTitle>
<StyledOperationWrapper>
<Menu
items={<AccountMenu />}
items={
<AccountMenu
onOpenAccountSetting={onOpenAccountSetting}
onSignOut={onSignOut}
/>
}
contentOptions={{
side: 'right',
sideOffset: 30,
@@ -263,9 +324,6 @@ export const WorkspaceListModal = ({
{isLoggedIn && cloudWorkspaces.length !== 0 ? (
<>
<CloudWorkSpaceList
disabled={disabled}
open={open}
onClose={onClose}
workspaces={workspaces}
onClickWorkspace={onClickWorkspace}
onClickWorkspaceSetting={onClickWorkspaceSetting}
@@ -288,7 +346,6 @@ export const WorkspaceListModal = ({
</StyledModalHeader>
<StyledModalContent>
<WorkspaceList
disabled={disabled}
items={localWorkspaces}
currentWorkspaceId={currentWorkspaceId}
onClick={onClickWorkspace}
@@ -335,6 +392,6 @@ export const WorkspaceListModal = ({
</StyledItem>
</StyledCreateWorkspaceCardPill>
</StyledModalFooterContent>
</Popover>
</>
);
};

0
apps/core/src/components/pure/workspace-list-modal/styles.ts → apps/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/styles.ts
View File

3
apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/index.css.ts → apps/core/src/components/pure/workspace-slider-bar/workspace-card/index.css.ts
View File

@@ -1,7 +1,4 @@
import { createVar, keyframes, style } from '@vanilla-extract/css';
export const workspaceAvatarStyle = style({
flexShrink: 0,
});
export const speedVar = createVar('speedVar');

66
apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx → apps/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
View File

@@ -1,4 +1,3 @@
import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
import { WorkspaceFlavour } from '@affine/env/workspace';
import {
CloudWorkspaceIcon,
@@ -6,11 +5,14 @@ import {
NoNetworkIcon,
UnsyncIcon,
} from '@blocksuite/icons';
import { Avatar } from '@toeverything/components/avatar';
import { Tooltip } from '@toeverything/components/tooltip';
import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
import { atom, useAtomValue, useSetAtom } from 'jotai';
import { atom, useSetAtom } from 'jotai';
import {
type KeyboardEvent,
forwardRef,
type HTMLAttributes,
type MouseEvent,
useCallback,
useMemo,
@@ -20,7 +22,6 @@ import {
import { useDatasourceSync } from '../../../../hooks/use-datasource-sync';
import { useSystemOnline } from '../../../../hooks/use-system-online';
import type { AllWorkspace } from '../../../../shared';
import { workspaceAvatarStyle } from './index.css';
import { Loading } from './loading-icon';
import {
StyledSelectorContainer,
@@ -29,13 +30,10 @@ import {
StyledWorkspaceStatus,
} from './styles';
export interface WorkspaceSelectorProps {
currentWorkspace: AllWorkspace;
onClick: () => void;
}
const hoverAtom = atom(false);
// FIXME:
// 1. Remove mui style
// 2. Refactor the code to improve readability
const CloudWorkspaceStatus = () => {
return (
<>
@@ -161,47 +159,37 @@ const WorkspaceStatus = ({
);
};
/**
* @todo-Doma Co-locate WorkspaceListModal with {@link WorkspaceSelector},
* because it's never used elsewhere.
*/
export const WorkspaceSelector = ({
currentWorkspace,
onClick,
}: WorkspaceSelectorProps) => {
export const WorkspaceCard = forwardRef<
HTMLDivElement,
{
currentWorkspace: AllWorkspace;
} & HTMLAttributes<HTMLDivElement>
>(({ currentWorkspace, ...props }, ref) => {
const [name] = useBlockSuiteWorkspaceName(
currentWorkspace.blockSuiteWorkspace
);
// Open dialog when `Enter` or `Space` pressed
// TODO-Doma Refactor with `@radix-ui/react-dialog` or other libraries that handle these out of the box and be accessible by default
// TODO: Delete this?
const handleKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
// TODO-Doma Rename this callback to `onOpenDialog` or something to reduce ambiguity.
onClick();
}
},
[onClick]
const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(
currentWorkspace.blockSuiteWorkspace
);
const isHovered = useAtomValue(hoverAtom);
return (
<StyledSelectorContainer
role="button"
tabIndex={0}
onClick={onClick}
onKeyDown={handleKeyDown}
disableHoverBackground={isHovered}
data-testid="current-workspace"
id="current-workspace"
ref={ref}
{...props}
>
<WorkspaceAvatar
<Avatar
data-testid="workspace-avatar"
className={workspaceAvatarStyle}
size={40}
workspace={currentWorkspace.blockSuiteWorkspace}
url={workspaceAvatar}
name={name}
colorfulFallback
style={{
marginRight: '10px',
}}
/>
<StyledSelectorWrapper>
<StyledWorkspaceName data-testid="workspace-name">
@@ -211,4 +199,6 @@ export const WorkspaceSelector = ({
</StyledSelectorWrapper>
</StyledSelectorContainer>
);
};
});
WorkspaceCard.displayName = 'WorkspaceCard';

0
apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/loading-icon.tsx → apps/core/src/components/pure/workspace-slider-bar/workspace-card/loading-icon.tsx
View File

28
apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts → apps/core/src/components/pure/workspace-slider-bar/workspace-card/styles.ts
View File

@@ -1,22 +1,16 @@
import { displayFlex, textEllipsis } from '@affine/component';
import { styled } from '@affine/component';
export const StyledSelectorContainer = styled('div')(({
disableHoverBackground,
}: {
disableHoverBackground: boolean;
}) => {
return {
height: '58px',
display: 'flex',
alignItems: 'center',
padding: '0 6px',
borderRadius: '8px',
color: 'var(--affine-text-primary-color)',
':hover': {
cursor: 'pointer',
background: disableHoverBackground ? '' : 'var(--affine-hover-color)',
},
};
export const StyledSelectorContainer = styled('div')({
height: '58px',
display: 'flex',
alignItems: 'center',
padding: '0 6px',
borderRadius: '8px',
color: 'var(--affine-text-primary-color)',
':hover': {
cursor: 'pointer',
background: 'var(--affine-hover-color)',
},
});
export const StyledSelectorWrapper = styled('div')(() => {