opensource/AppFlowy-Web
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy-Web.git synced 2025-12-12 02:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: support upload page icon (#59)

Browse Source
This commit is contained in:
Kilu.He
2025-03-05 14:46:22 +08:00
committed by GitHub
parent 2c322d1dcc
commit 8ac85ebab5
10 changed files with 149 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/application/types.ts
View File

@@ -996,6 +996,7 @@ export interface ViewMetaProps {
extra?: ViewExtra | null;
readOnly?: boolean;
updatePage?: (viewId: string, data: UpdatePagePayload) => Promise<void>;
uploadFile?: (file: File) => Promise<string>;
onEnter?: (text: string) => void;
maxWidth?: number;
}

26
src/components/_shared/LoadingDots.tsx Normal file
View File

@@ -0,0 +1,26 @@
export default function LoadingDots({
className,
colors = ['#00b5ff', '#e3006d', '#f7931e'],
}: {
className?: string;
colors?: [string, string, string];
}) {
return (
<div className={className}>
<div
style={{
width: `30px`,
aspectRatio: '2',
background: `
radial-gradient(circle closest-side, ${colors[0]} 90%, transparent) 0% 50%,
radial-gradient(circle closest-side, ${colors[1]} 90%, transparent) 50% 50%,
radial-gradient(circle closest-side, ${colors[2]} 90%, transparent) 100% 50%
`,
backgroundSize: 'calc(100%/3) 50%',
backgroundRepeat: 'no-repeat',
animation: 'dots-loading 1s infinite linear',
}}
/>
</div>
);
}

17
src/components/_shared/image-upload/UploadImage.tsx
View File

@@ -1,4 +1,5 @@
import FileDropzone from '@/components/_shared/file-dropzone/FileDropzone';
import LoadingDots from '@/components/_shared/LoadingDots';
import { notify } from '@/components/_shared/notify';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@@ -10,24 +11,28 @@ export function UploadImage({ onDone, uploadAction }: {
uploadAction?: (file: File) => Promise<string>
}) {
const { t } = useTranslation();
const handleFileChange = useCallback(async (files: File[]) => {
const [loading, setLoading] = React.useState(false);
const handleFileChange = useCallback(async(files: File[]) => {
setLoading(true);
const file = files[0];
if (!file) return;
if(!file) return;
try {
const url = await uploadAction?.(file);
if (!url) {
if(!url) {
onDone?.(URL.createObjectURL(file));
return;
}
onDone?.(url);
// eslint-disable-next-line
} catch (e: any) {
} catch(e: any) {
notify.error(e.message);
onDone?.(URL.createObjectURL(file));
} finally {
setLoading(false);
}
}, [onDone, uploadAction]);
@@ -39,6 +44,10 @@ export function UploadImage({ onDone, uploadAction }: {
onChange={handleFileChange}
accept={ALLOWED_IMAGE_EXTENSIONS.join(',')}
/>
{loading &&
<div className={'absolute bg-bg-body z-10 opacity-90 flex items-center inset-0 justify-center w-full h-full'}>
<LoadingDots />
</div>}
</div>
);

37
src/components/_shared/view-icon/ChangeIconPopover.tsx
View File

@@ -1,6 +1,7 @@
import { ViewIconType } from '@/application/types';
import { EmojiPicker } from '@/components/_shared/emoji-picker';
import IconPicker from '@/components/_shared/icon-picker/IconPicker';
import { UploadImage } from '@/components/_shared/image-upload';
import { Popover } from '@/components/_shared/popover';
import { TabPanel, ViewTab, ViewTabs } from '@/components/_shared/tabs/ViewTabs';
import { Button } from '@mui/material';
@@ -8,7 +9,7 @@ import { PopoverProps } from '@mui/material/Popover';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
function ChangeIconPopover ({
function ChangeIconPopover({
open,
anchorEl,
onClose,
@@ -20,16 +21,20 @@ function ChangeIconPopover ({
removeIcon,
anchorPosition,
hideRemove,
uploadEnabled,
onUploadFile,
}: {
open: boolean,
anchorEl?: HTMLElement | null,
anchorPosition?: PopoverProps['anchorPosition'],
onClose: () => void,
defaultType: 'emoji' | 'icon',
defaultType: 'emoji' | 'icon' | 'upload',
emojiEnabled?: boolean,
uploadEnabled?: boolean,
iconEnabled?: boolean,
popoverProps?: Partial<PopoverProps>,
onSelectIcon?: (icon: { ty: ViewIconType, value: string, color?: string, content?: string }) => void,
onUploadFile?: (file: File) => Promise<string>,
removeIcon?: () => void,
hideRemove?: boolean,
}) {
@@ -80,6 +85,16 @@ function ChangeIconPopover ({
/>
)
}
{
uploadEnabled && (
<ViewTab
className={'flex items-center flex-row justify-center gap-1.5'}
value={'upload'}
label={'Upload'}
data-testid="upload-tab"
/>
)
}
</ViewTabs>
{!hideRemove && <Button
@@ -126,6 +141,24 @@ function ChangeIconPopover ({
hideRemove
/>
</TabPanel>}
{uploadEnabled && <TabPanel
index={'upload'}
value={value}
>
<div className={'pt-4 relative pb-2'}>
<UploadImage
onDone={(url) => {
onSelectIcon?.({
ty: ViewIconType.URL,
value: url,
});
handleClose();
}}
uploadAction={onUploadFile}
/>
</div>
</TabPanel>}
</Popover>
);
}

13
src/components/app/DatabaseView.tsx
View File

@@ -16,17 +16,17 @@ import React, { Suspense, useCallback, useMemo } from 'react';
import { useSearchParams } from 'react-router-dom';
import ViewMetaPreview from 'src/components/view-meta/ViewMetaPreview';
function DatabaseView ({ viewMeta, ...props }: ViewComponentProps) {
function DatabaseView({ viewMeta, uploadFile, ...props }: ViewComponentProps) {
const [search, setSearch] = useSearchParams();
const outline = useAppOutline();
const iidIndex = viewMeta.viewId;
const view = useMemo(() => {
if (!outline || !iidIndex) return;
if(!outline || !iidIndex) return;
return findView(outline || [], iidIndex);
}, [outline, iidIndex]);
const visibleViewIds = useMemo(() => {
if (!view) return [];
if(!view) return [];
return [view.view_id, ...(view.children?.map(v => v.view_id) || [])];
}, [view]);
@@ -58,11 +58,11 @@ function DatabaseView ({ viewMeta, ...props }: ViewComponentProps) {
const doc = props.doc;
const database = doc?.getMap(YjsEditorKey.data_section)?.get(YjsEditorKey.database) as YDatabase;
const skeleton = useMemo(() => {
if (rowId) {
if(rowId) {
return <DocumentSkeleton />;
}
switch (viewMeta.layout) {
switch(viewMeta.layout) {
case ViewLayout.Grid:
return <GridSkeleton includeTitle={false} />;
case ViewLayout.Board:
@@ -74,7 +74,7 @@ function DatabaseView ({ viewMeta, ...props }: ViewComponentProps) {
}
}, [rowId, viewMeta.layout]);
if (!viewId || !doc || !database) return null;
if(!viewId || !doc || !database) return null;
return (
<div
@@ -87,6 +87,7 @@ function DatabaseView ({ viewMeta, ...props }: ViewComponentProps) {
{...viewMeta}
readOnly={props.readOnly}
updatePage={props.updatePage}
uploadFile={uploadFile}
/>}
<Suspense fallback={skeleton}>

9
src/components/app/outline/ViewItem.tsx
View File

@@ -40,7 +40,7 @@ function ViewItem({ view, width, level = 0, renderExtra, expandIds, toggleExpand
const selectedViewId = useAppViewId();
const viewId = view.view_id;
const selected = selectedViewId === viewId;
const { updatePage } = useAppHandlers();
const { updatePage, uploadFile } = useAppHandlers();
const isExpanded = expandIds.includes(viewId);
const [hovered, setHovered] = React.useState<boolean>(false);
@@ -57,6 +57,11 @@ function ViewItem({ view, width, level = 0, renderExtra, expandIds, toggleExpand
/></span>;
}, [isExpanded, level, toggleExpand, viewId]);
const onUploadFile = useCallback(async(file: File) => {
if(!uploadFile) return Promise.reject();
return uploadFile(viewId, file);
}, [uploadFile, viewId]);
const renderItem = useMemo(() => {
if(!view) return null;
@@ -165,6 +170,8 @@ function ViewItem({ view, width, level = 0, renderExtra, expandIds, toggleExpand
onClose={() => {
setIconPopoverAnchorEl(null);
}}
uploadEnabled
onUploadFile={onUploadFile}
popoverProps={popoverProps}
onSelectIcon={(icon) => {
if(icon.ty === ViewIconType.Icon) {

35
src/components/app/view-actions/MorePageActions.tsx
View File

@@ -38,20 +38,35 @@ function MorePageActions({ view, onClose }: {
const {
updatePage,
uploadFile,
} = useAppHandlers();
const { t } = useTranslation();
const handleChangeIcon = useCallback(async (icon: { ty: ViewIconType, value: string }) => {
const viewId = view.view_id;
const onUploadFile = useCallback(async(file: File) => {
if(!uploadFile) return Promise.reject();
return uploadFile(viewId, file);
}, [uploadFile, viewId]);
const handleChangeIcon = useCallback(async(icon: { ty: ViewIconType, value: string, color?: string }) => {
try {
await updatePage?.(view.view_id, {
icon: icon,
icon: icon.ty === ViewIconType.Icon ? {
ty: ViewIconType.Icon,
value: JSON.stringify({
color: icon.color,
groupName: icon.value.split('/')[0],
iconName: icon.value.split('/')[1],
}),
} : icon,
name: view.name,
extra: view.extra || {},
});
setIconPopoverAnchorEl(null);
onClose?.();
// eslint-disable-next-line
} catch (e: any) {
} catch(e: any) {
notify.error(e);
}
}, [onClose, updatePage, view.extra, view.name, view.view_id]);
@@ -63,14 +78,14 @@ function MorePageActions({ view, onClose }: {
const actions = useMemo(() => {
return [{
label: t('button.rename'),
icon: <EditIcon/>,
icon: <EditIcon />,
onClick: () => {
setRenameModalOpen(true);
onClose?.();
},
}, {
label: t('disclosureAction.changeIcon'),
icon: <ChangeIcon/>,
icon: <ChangeIcon />,
onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
setIconPopoverAnchorEl(e.currentTarget);
},
@@ -96,25 +111,25 @@ function MorePageActions({ view, onClose }: {
viewId={view.view_id}
movePopoverOrigins={popoverProps}
/>
<Divider className={'w-full'}/>
<Divider className={'w-full'} />
<Button
size={'small'}
className={'px-3 py-1 justify-start'}
color={'inherit'}
onClick={() => {
if (!currentWorkspaceId) return;
if(!currentWorkspaceId) return;
onClose?.();
window.open(`/app/${currentWorkspaceId}/${view.view_id}`, '_blank');
}}
startIcon={<OpenInBrowserIcon className={'w-4 h-4'}/>}
startIcon={<OpenInBrowserIcon className={'w-4 h-4'} />}
>
{t('disclosureAction.openNewTab')}
</Button>
<Suspense fallback={null}>
<ChangeIconPopover
iconEnabled={false}
iconEnabled
defaultType={'emoji'}
open={openIconPopover}
anchorEl={iconPopoverAnchorEl}
@@ -122,6 +137,8 @@ function MorePageActions({ view, onClose }: {
onClose?.();
setIconPopoverAnchorEl(null);
}}
onUploadFile={onUploadFile}
uploadEnabled
popoverProps={popoverProps}
onSelectIcon={handleChangeIcon}
removeIcon={handleRemoveIcon}

2
src/components/document/Document.tsx
View File

@@ -24,6 +24,7 @@ export const Document = (props: DocumentProps) => {
updatePage,
onRendered,
onEditorConnected,
uploadFile,
} = props;
const blockId = search.get('blockId') || undefined;
@@ -76,6 +77,7 @@ export const Document = (props: DocumentProps) => {
updatePage={updatePage}
onEnter={readOnly ? undefined : handleEnter}
maxWidth={988}
uploadFile={uploadFile}
/>
<Suspense fallback={<EditorSkeleton />}>
<div className={'flex justify-center w-full'}>

4
src/components/view-meta/AddIconCover.tsx
View File

@@ -15,6 +15,7 @@ function AddIconCover({
setIconAnchorEl,
maxWidth,
visible,
onUploadFile,
}: {
visible: boolean;
hasIcon: boolean;
@@ -24,6 +25,7 @@ function AddIconCover({
iconAnchorEl: HTMLElement | null;
setIconAnchorEl: (el: HTMLElement | null) => void;
maxWidth?: number;
onUploadFile: (file: File) => Promise<string>;
}) {
const { t } = useTranslation();
@@ -80,6 +82,8 @@ function AddIconCover({
setIconAnchorEl(null);
onUpdateIcon?.({ ty: ViewIconType.Emoji, value: '' });
}}
uploadEnabled
onUploadFile={onUploadFile}
/>
</>

46
src/components/view-meta/ViewMetaPreview.tsx
View File

@@ -2,13 +2,13 @@ import { CoverType, ViewIconType, ViewLayout, ViewMetaCover, ViewMetaIcon, ViewM
import { notify } from '@/components/_shared/notify';
import TitleEditable from '@/components/view-meta/TitleEditable';
import ViewCover from '@/components/view-meta/ViewCover';
import React, { lazy, Suspense, useEffect, useMemo } from 'react';
import React, { lazy, Suspense, useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import PageIcon from '@/components/_shared/view-icon/PageIcon';
const AddIconCover = lazy(() => import('@/components/view-meta/AddIconCover'));
export function ViewMetaPreview ({
export function ViewMetaPreview({
icon: iconProp,
cover: coverProp,
name,
@@ -18,6 +18,7 @@ export function ViewMetaPreview ({
updatePage,
onEnter,
maxWidth,
uploadFile,
}: ViewMetaProps) {
const [iconAnchorEl, setIconAnchorEl] = React.useState<null | HTMLElement>(null);
const [cover, setCover] = React.useState<ViewMetaCover | null>(coverProp || null);
@@ -32,21 +33,21 @@ export function ViewMetaPreview ({
}, [iconProp]);
const coverType = useMemo(() => {
if (cover && [CoverType.NormalColor, CoverType.GradientColor].includes(cover.type)) {
if(cover && [CoverType.NormalColor, CoverType.GradientColor].includes(cover.type)) {
return 'color';
}
if (CoverType.BuildInImage === cover?.type) {
if(CoverType.BuildInImage === cover?.type) {
return 'built_in';
}
if (cover && [CoverType.CustomImage, CoverType.UpsplashImage].includes(cover.type)) {
if(cover && [CoverType.CustomImage, CoverType.UpsplashImage].includes(cover.type)) {
return 'custom';
}
}, [cover]);
const coverValue = useMemo(() => {
if (coverType === CoverType.BuildInImage) {
if(coverType === CoverType.BuildInImage) {
return {
1: '/covers/m_cover_image_1.png',
2: '/covers/m_cover_image_2.png',
@@ -63,8 +64,8 @@ export function ViewMetaPreview ({
const [isHover, setIsHover] = React.useState(false);
const handleUpdateIcon = React.useCallback(async (icon: { ty: ViewIconType, value: string }) => {
if (!updatePage || !viewId) return;
const handleUpdateIcon = React.useCallback(async(icon: { ty: ViewIconType, value: string }) => {
if(!updatePage || !viewId) return;
setIcon(icon);
try {
await updatePage(viewId, {
@@ -73,15 +74,15 @@ export function ViewMetaPreview ({
extra: extra || {},
});
// eslint-disable-next-line
} catch (e: any) {
} catch(e: any) {
notify.error(e.message);
}
}, [updatePage, viewId, name, extra]);
const handleUpdateName = React.useCallback(async (newName: string) => {
if (!updatePage || !viewId) return;
const handleUpdateName = React.useCallback(async(newName: string) => {
if(!updatePage || !viewId) return;
try {
if (name === newName) return;
if(name === newName) return;
await updatePage(viewId, {
icon: icon || {
ty: ViewIconType.Emoji,
@@ -91,16 +92,16 @@ export function ViewMetaPreview ({
extra: extra || {},
});
// eslint-disable-next-line
} catch (e: any) {
} catch(e: any) {
notify.error(e.message);
}
}, [name, updatePage, viewId, icon, extra]);
const handleUpdateCover = React.useCallback(async (cover?: {
const handleUpdateCover = React.useCallback(async(cover?: {
type: CoverType;
value: string;
}) => {
if (!updatePage || !viewId) return;
if(!updatePage || !viewId) return;
setCover(cover ? cover : null);
try {
@@ -116,11 +117,16 @@ export function ViewMetaPreview ({
},
});
// eslint-disable-next-line
} catch (e: any) {
} catch(e: any) {
notify.error(e.message);
}
}, [extra, icon, name, updatePage, viewId]);
const onUploadFile = useCallback(async(file: File) => {
if(!uploadFile) return Promise.reject();
return uploadFile(file);
}, [uploadFile]);
const ref = React.useRef<HTMLDivElement>(null);
useEffect(() => {
@@ -133,13 +139,13 @@ export function ViewMetaPreview ({
setIsHover(false);
};
if (el) {
if(el) {
el.addEventListener('mouseenter', handleMouseEnter);
el.addEventListener('mouseleave', handleMouseLeave);
}
return () => {
if (el) {
if(el) {
el.removeEventListener('mouseenter', handleMouseEnter);
el.removeEventListener('mouseleave', handleMouseLeave);
}
@@ -174,8 +180,10 @@ export function ViewMetaPreview ({
maxWidth={maxWidth}
iconAnchorEl={iconAnchorEl}
setIconAnchorEl={setIconAnchorEl}
onUploadFile={onUploadFile}
/></Suspense>}
</div>
<div
className={`relative mb-6 flex items-center overflow-visible w-full justify-center`}
@@ -192,7 +200,7 @@ export function ViewMetaPreview ({
{icon?.value ?
<div
onClick={e => {
if (readOnly) return;
if(readOnly) return;
setIconAnchorEl(e.currentTarget);
}}
className={`view-icon flex h-[1.25em] px-1.5 items-center justify-center ${readOnly ? 'cursor-default' : 'cursor-pointer hover:bg-fill-list-hover '}`}