Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add comment tip (#5854)

Browse Source
This commit is contained in:
Kilu.He 2024-08-01 14:15:38 +08:00 committed by GitHub
parent 87e950733f
commit 0cd5af5ffa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/appflowy_web_app/src/components/_shared/notify/InfoSnackbar.tsx
View File

@ -31,8 +31,8 @@ const InfoSnackbar = forwardRef<HTMLDivElement, InfoSnackbarProps>(
}; };
return ( return (
<SnackbarContent ref={ref}> <SnackbarContent ref={ref} className={'flex items-center justify-center'}>
<Paper className={`relative flex flex-col gap-4 border p-4 ${getBorderColor(type)}`}> <Paper className={`relative flex flex-col gap-4 border p-5 ${getBorderColor(type)}`}>
<div className={'flex w-full items-center justify-between text-base font-medium'}> <div className={'flex w-full items-center justify-between text-base font-medium'}>
<div className={'flex flex-1 items-center gap-2 text-left font-semibold'}> <div className={'flex flex-1 items-center gap-2 text-left font-semibold'}>
{getIcon(type)} {getIcon(type)}
@ -45,7 +45,7 @@ const InfoSnackbar = forwardRef<HTMLDivElement, InfoSnackbarProps>(
</div> </div>
</div> </div>
<div className={'flex-1 pr-10'}>{message}</div> <div className={'mx-8 flex-1'}>{message}</div>
{showActions && ( {showActions && (
<div className={'flex w-full justify-end gap-4'}> <div className={'flex w-full justify-end gap-4'}>
<Button <Button

40
frontend/appflowy_web_app/src/components/global-comment/add-comment/AddComment.tsx
View File

@ -16,9 +16,10 @@ interface AddCommentProps {
setContent: (content: string) => void; setContent: (content: string) => void;
focus: boolean; focus: boolean;
setFocus: (focus: boolean) => void; setFocus: (focus: boolean) => void;
fixed: boolean;
} }
function AddComment({ content, setContent, focus, setFocus }: AddCommentProps) { function AddComment({ content, setContent, focus, setFocus, fixed }: AddCommentProps) {
const { reload, replyCommentId, replyComment: setReplyCommentId } = useGlobalCommentContext(); const { reload, replyCommentId, replyComment: setReplyCommentId } = useGlobalCommentContext();
const { t } = useTranslation(); const { t } = useTranslation();
@ -50,24 +51,37 @@ function AddComment({ content, setContent, focus, setFocus }: AddCommentProps) {
setContent(''); setContent('');
setReplyCommentId(null); setReplyCommentId(null);
notify.info({ if (fixed) {
type: 'success', notify.info({
title: t('globalComment.commentAddedSuccessfully'), type: 'success',
message: t('globalComment.askForViewComment'), title: t('globalComment.commentAddedSuccessfully'),
okText: t('button.yes'), message: t('globalComment.commentAddedSuccessTip'),
onOk: () => { okText: t('button.yes'),
const element = document.getElementById('addComment') as HTMLElement; onOk: () => {
const element = document.getElementById('addComment') as HTMLElement;
if (!element) return; if (!element) return;
void smoothScrollIntoViewIfNeeded(element, { behavior: 'smooth', scrollMode: 'if-needed', block: 'start' }); void smoothScrollIntoViewIfNeeded(element, { behavior: 'smooth', scrollMode: 'if-needed', block: 'start' });
}, },
}); });
}
} catch (_e) { } catch (_e) {
notify.error(t('globalComment.failedToAddComment')); notify.error(t('globalComment.failedToAddComment'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, [createCommentOnPublishView, viewId, loading, content, replyCommentId, reload, setReplyCommentId, t, setContent]); }, [
fixed,
createCommentOnPublishView,
viewId,
loading,
content,
replyCommentId,
reload,
setReplyCommentId,
t,
setContent,
]);
return ( return (
<div className={'flex flex-col gap-2'}> <div className={'flex flex-col gap-2'}>

3
frontend/appflowy_web_app/src/components/global-comment/add-comment/AddCommentWrapper.tsx
View File

@ -50,13 +50,14 @@ export function AddCommentWrapper() {
setContent={setContent} setContent={setContent}
focus={focus && !showFixedAddComment} focus={focus && !showFixedAddComment}
setFocus={setFocus} setFocus={setFocus}
fixed={false}
/> />
</div> </div>
{showFixedAddComment && ( {showFixedAddComment && (
<Portal container={document.body}> <Portal container={document.body}>
<div className={'fixed top-[48px] flex w-full justify-center'}> <div className={'fixed top-[48px] flex w-full justify-center'}>
<div className={'w-[964px] min-w-0 max-w-full px-16 max-sm:px-4'}> <div className={'w-[964px] min-w-0 max-w-full px-16 max-sm:px-4'}>
<AddComment content={content} setContent={setContent} focus={focus} setFocus={setFocus} /> <AddComment fixed content={content} setContent={setContent} focus={focus} setFocus={setFocus} />
</div> </div>
</div> </div>
</Portal> </Portal>

2
frontend/resources/translations/en.json
View File

@ -2365,6 +2365,6 @@
"readMore": "Read more", "readMore": "Read more",
"failedToAddComment": "Failed to add comment", "failedToAddComment": "Failed to add comment",
"commentAddedSuccessfully": "Comment added successfully.", "commentAddedSuccessfully": "Comment added successfully.",
"askForViewComment": "Do you want to view the comment?" "commentAddedSuccessTip": "You've just added or replied to a comment. Would you like to jump to the top to see the latest comments?"
} }
} }