added css animations for saved state

This commit is contained in:
Palanikannan1437 2023-08-14 22:27:41 +05:30
parent 8b02f58498
commit cdb07fc3c4
3 changed files with 15 additions and 6 deletions

View File

@ -71,7 +71,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
if (isSubmitting === "submitted") {
setTimeout(async () => {
setIsSubmitting("saved");
}, 1000);
}, 2000);
}
}, [isSubmitting]);
@ -154,9 +154,9 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
);
}}
/>
{isSubmitting !== "saved" && (<div className="absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center">
{isSubmitting === "submitting" ? "Saving..." : "Saved"}
</div>)}
<div className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${isSubmitting === 'saved' ? 'fadeOut' : 'fadeIn'}`}>
{isSubmitting === 'submitting' ? 'Saving...' : 'Saved'}
</div>
</div>
</div>
);

View File

@ -58,11 +58,9 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
useImperativeHandle(forwardedRef, () => ({
clearEditor: () => {
console.log(editorRef);
editorRef.current?.commands.clearContent();
},
setEditorValue: (content: string) => {
console.log(editorRef, forwardedRef, content);
editorRef.current?.commands.setContent(content);
},
}));

View File

@ -115,3 +115,14 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
.fadeIn {
opacity: 1;
transition: opacity 0.3s ease-in;
}
.fadeOut {
opacity: 0;
transition: opacity 0.2s ease-out;
}