[WEB-5520] fix: comments UI in space app #8189
This commit is contained in:
parent
eddf80aaed
commit
a0da806a79
4 changed files with 26 additions and 21 deletions
|
|
@ -79,21 +79,23 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
|
||||||
// overriding the containerClassName to add relative class passed
|
// overriding the containerClassName to add relative class passed
|
||||||
containerClassName={cn(containerClassName, "relative")}
|
containerClassName={cn(containerClassName, "relative")}
|
||||||
/>
|
/>
|
||||||
<IssueCommentToolbar
|
{editable && (
|
||||||
executeCommand={(item) => {
|
<IssueCommentToolbar
|
||||||
// TODO: update this while toolbar homogenization
|
executeCommand={(item) => {
|
||||||
// @ts-expect-error type mismatch here
|
// TODO: update this while toolbar homogenization
|
||||||
editorRef?.executeMenuItemCommand({
|
// @ts-expect-error type mismatch here
|
||||||
itemKey: item.itemKey,
|
editorRef?.executeMenuItemCommand({
|
||||||
...item.extraProps,
|
itemKey: item.itemKey,
|
||||||
});
|
...item.extraProps,
|
||||||
}}
|
});
|
||||||
isSubmitting={isSubmitting}
|
}}
|
||||||
showSubmitButton={showSubmitButton}
|
isSubmitting={isSubmitting}
|
||||||
handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
|
showSubmitButton={showSubmitButton}
|
||||||
isCommentEmpty={isEmpty}
|
handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
|
||||||
editorRef={editorRef}
|
isCommentEmpty={isEmpty}
|
||||||
/>
|
editorRef={editorRef}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -96,6 +96,9 @@ export const AddComment = observer(function AddComment(props: Props) {
|
||||||
setUploadAssetIds((prev) => [...prev, asset_id]);
|
setUploadAssetIds((prev) => [...prev, asset_id]);
|
||||||
return asset_id;
|
return asset_id;
|
||||||
}}
|
}}
|
||||||
|
displayConfig={{
|
||||||
|
fontSize: "small-font",
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
|
||||||
control,
|
control,
|
||||||
formState: { isSubmitting },
|
formState: { isSubmitting },
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
} = useForm<any>({
|
} = useForm<TIssuePublicComment>({
|
||||||
defaultValues: { comment_html: comment.comment_html },
|
defaultValues: { comment_html: comment.comment_html },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -120,6 +120,9 @@ export const CommentCard = observer(function CommentCard(props: Props) {
|
||||||
const { asset_id } = await uploadCommentAsset(file, anchor, comment.id);
|
const { asset_id } = await uploadCommentAsset(file, anchor, comment.id);
|
||||||
return asset_id;
|
return asset_id;
|
||||||
}}
|
}}
|
||||||
|
displayConfig={{
|
||||||
|
fontSize: "small-font",
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
import type { FC, ReactNode } from "react";
|
import type { ReactNode } from "react";
|
||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
// plane imports
|
// plane imports
|
||||||
import { useTranslation } from "@plane/i18n";
|
import { useTranslation } from "@plane/i18n";
|
||||||
import type { TIssueComment } from "@plane/types";
|
import type { TIssueComment } from "@plane/types";
|
||||||
import { EIssueCommentAccessSpecifier } from "@plane/types";
|
|
||||||
import { Avatar, Tooltip } from "@plane/ui";
|
import { Avatar, Tooltip } from "@plane/ui";
|
||||||
import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
|
import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
|
||||||
// hooks
|
// hooks
|
||||||
|
|
@ -56,9 +55,7 @@ export const CommentBlock = observer(function CommentBlock(props: TCommentBlock)
|
||||||
<div className="flex w-full gap-2">
|
<div className="flex w-full gap-2">
|
||||||
<div className="flex-1 flex flex-wrap items-center gap-1">
|
<div className="flex-1 flex flex-wrap items-center gap-1">
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<span className="text-xs font-medium">
|
<span className="text-xs font-medium">{displayName}</span>
|
||||||
{`${displayName}${comment.access === EIssueCommentAccessSpecifier.EXTERNAL ? " (External User)" : ""}`}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-custom-text-300">
|
<div className="text-xs text-custom-text-300">
|
||||||
commented{" "}
|
commented{" "}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue