chore: fade in, out

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/ChangeFieldTypePopup.tsx

@@ -1,7 +1,8 @@
 import { FieldType } from '@/services/backend';
 import { FieldTypeIcon } from '$app/components/_shared/EditRow/FieldTypeIcon';
 import { FieldTypeName } from '$app/components/_shared/EditRow/FieldTypeName';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import useOutsideClick from '$app/components/_shared/useOutsideClick';
 
 const typesOrder: FieldType[] = [
   FieldType.RichText,
@@ -14,9 +15,22 @@ const typesOrder: FieldType[] = [
   FieldType.Checklist,
 ];
 
-export const ChangeFieldTypePopup = ({ top, right, onClick }: { top: number; right: number; onClick: () => void }) => {
+export const ChangeFieldTypePopup = ({
+  top,
+  right,
+  onClick,
+  onOutsideClick,
+}: {
+  top: number;
+  right: number;
+  onClick: () => void;
+  onOutsideClick: () => void;
+}) => {
   const ref = useRef<HTMLDivElement>(null);
-  const [adjustedTop, setAdjustedTop] = useState(0);
+  const [adjustedTop, setAdjustedTop] = useState(-100);
+  useOutsideClick(ref, async () => {
+    onOutsideClick();
+  });
 
   useEffect(() => {
     if (!ref.current) return;
@@ -31,7 +45,9 @@ export const ChangeFieldTypePopup = ({ top, right, onClick }: { top: number; rig
   return (
     <div
       ref={ref}
-      className={'fixed z-20 rounded-lg bg-white p-2 shadow-md'}
+      className={`fixed z-10 rounded-lg bg-white p-2 text-xs shadow-md transition-opacity duration-300 ${
+        adjustedTop === -100 ? 'opacity-0' : 'opacity-100'
+      }`}
       style={{ top: `${adjustedTop}px`, left: `${right + 30}px` }}
     >
       <div className={'flex flex-col'}>

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditFieldPopup.tsx

@@ -8,7 +8,6 @@ import { TypeOptionController } from '$app/stores/effects/database/field/type_op
 import { Some } from 'ts-results';
 import { FieldInfo } from '$app/stores/effects/database/field/field_controller';
 import { MoreSvg } from '$app/components/_shared/svg/MoreSvg';
-import { ChangeFieldTypePopup } from '$app/components/_shared/EditRow/ChangeFieldTypePopup';
 import { useAppSelector } from '$app/stores/store';
 import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
 
@@ -19,15 +18,15 @@ export const EditFieldPopup = ({
   viewId,
   onOutsideClick,
   fieldInfo,
-                                 // changeFieldTypeClick,
+  changeFieldTypeClick,
 }: {
   top: number;
   right: number;
   cellIdentifier: CellIdentifier;
   viewId: string;
-  onOutsideClick?: () => void;
+  onOutsideClick: () => void;
   fieldInfo: FieldInfo | undefined;
-  // changeFieldTypeClick: (top: number, right: number) => void
+  changeFieldTypeClick: (buttonTop: number, buttonRight: number) => void;
 }) => {
   const databaseStore = useAppSelector((state) => state.database);
   const { t } = useTranslation('');
@@ -35,11 +34,11 @@ export const EditFieldPopup = ({
   const changeTypeButtonRef = useRef<HTMLDivElement>(null);
   const [name, setName] = useState('');
 
-  const [adjustedTop, setAdjustedTop] = useState(0);
+  const [adjustedTop, setAdjustedTop] = useState(-100);
 
   useOutsideClick(ref, async () => {
     await save();
-    onOutsideClick && onOutsideClick();
+    onOutsideClick();
   });
 
   useEffect(() => {
@@ -65,17 +64,16 @@ export const EditFieldPopup = ({
 
   const onChangeFieldTypeClick = () => {
     if (!changeTypeButtonRef.current) return;
-    const { top: newTop, right: newRight } = changeTypeButtonRef.current.getBoundingClientRect();
+    const { top: buttonTop, right: buttonRight } = changeTypeButtonRef.current.getBoundingClientRect();
-    // setChangeFieldTypeTop(newTop);
+    changeFieldTypeClick(buttonTop, buttonRight);
-    // setChangeFieldTypeRight(newRight);
-    // setShowChangeFieldTypePopup(true);
-    // changeFieldTypeClick(newTop, newRight);
   };
 
   return (
     <div
       ref={ref}
-      className={`fixed z-20 rounded-lg bg-white px-2 py-2 text-xs shadow-md`}
+      className={`fixed z-10 rounded-lg bg-white px-2 py-2 text-xs shadow-md transition-opacity duration-300 ${
+        adjustedTop === -100 ? 'opacity-0' : 'opacity-100'
+      }`}
       style={{ top: `${adjustedTop}px`, left: `${right + 10}px` }}
     >
       <div className={'flex flex-col gap-2 p-2'}>

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx

@@ -6,7 +6,7 @@ import { EditCellWrapper } from '$app/components/_shared/EditRow/EditCellWrapper
 import AddSvg from '$app/components/_shared/svg/AddSvg';
 import { useTranslation } from 'react-i18next';
 import { EditFieldPopup } from '$app/components/_shared/EditRow/EditFieldPopup';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
 import { ChangeFieldTypePopup } from '$app/components/_shared/EditRow/ChangeFieldTypePopup';
 
@@ -23,12 +23,22 @@ export const EditRow = ({
 }) => {
   const { cells, onNewColumnClick } = useRow(viewId, controller, rowInfo);
   const { t } = useTranslation('');
+  const [unveilBackdrop, setUnveilBackdrop] = useState(false);
+  const [unveilForm, setUnveilForm] = useState(false);
   const [showFieldEditor, setShowFieldEditor] = useState(false);
   const [editFieldTop, setEditFieldTop] = useState(0);
   const [editFieldRight, setEditFieldRight] = useState(0);
   const [showChangeFieldTypePopup, setShowChangeFieldTypePopup] = useState(false);
   const [changeFieldTypeTop, setChangeFieldTypeTop] = useState(0);
   const [changeFieldTypeRight, setChangeFieldTypeRight] = useState(0);
+  const [editingCell, setEditingCell] = useState<{ cellIdentifier: CellIdentifier; fieldId: string } | null>(null);
+
+  useEffect(() => {
+    setUnveilBackdrop(true);
+    setTimeout(() => {
+      setUnveilForm(true);
+    }, 300);
+  }, []);
 
   const onEditFieldClick = (cell: { cellIdentifier: CellIdentifier; fieldId: string }, top: number, right: number) => {
     setEditingCell(cell);
@@ -37,12 +47,38 @@ export const EditRow = ({
     setShowFieldEditor(true);
   };
 
-  const [editingCell, setEditingCell] = useState<{ cellIdentifier: CellIdentifier; fieldId: string } | null>(null);
+  const onChangeFieldTypeClick = (buttonTop: number, buttonRight: number) => {
+    setChangeFieldTypeTop(buttonTop);
+    setChangeFieldTypeRight(buttonRight);
+    setShowChangeFieldTypePopup(true);
+  };
+
+  const onOutsideEditFieldClick = () => {
+    if (!showChangeFieldTypePopup) {
+      setShowFieldEditor(false);
+    }
+  };
+
+  const onCloseClick = () => {
+    setUnveilBackdrop(false);
+    setUnveilForm(false);
+    setTimeout(() => {
+      onClose();
+    }, 300);
+  };
 
   return (
-    <div className={'fixed inset-0 z-20 flex items-center justify-center bg-black/30 backdrop-blur-sm'}>
+    <div
-      <div className={'flex h-[90%] w-[70%] flex-col gap-8 rounded-xl bg-white px-8 pb-4 pt-12'}>
+      className={`fixed inset-0 z-10 flex items-center justify-center bg-black/30 backdrop-blur-sm transition-opacity duration-300 ${
-        <div onClick={() => onClose()} className={'absolute top-4 right-4'}>
+        unveilBackdrop ? 'opacity-100' : 'opacity-0'
+      }`}
+    >
+      <div
+        className={`relative flex h-[90%] w-[70%] flex-col gap-8 rounded-xl bg-white px-8 pb-4 pt-12 transition-opacity duration-300 ${
+          unveilForm ? 'opacity-100' : 'opacity-0'
+        }`}
+      >
+        <div onClick={() => onCloseClick()} className={'absolute top-4 right-4'}>
           <button className={'block h-8 w-8 rounded-lg text-shade-2 hover:bg-main-secondary'}>
             <CloseSvg></CloseSvg>
           </button>
@@ -64,8 +100,9 @@ export const EditRow = ({
             right={editFieldRight}
             cellIdentifier={editingCell.cellIdentifier}
             viewId={viewId}
-            onOutsideClick={() => setShowFieldEditor(false)}
+            onOutsideClick={onOutsideEditFieldClick}
             fieldInfo={controller.fieldController.getField(editingCell.cellIdentifier.fieldId)}
+            changeFieldTypeClick={onChangeFieldTypeClick}
           ></EditFieldPopup>
         )}
         {showChangeFieldTypePopup && (
@@ -73,6 +110,7 @@ export const EditRow = ({
             top={changeFieldTypeTop}
             right={changeFieldTypeRight}
             onClick={() => setShowChangeFieldTypePopup(false)}
+            onOutsideClick={() => setShowChangeFieldTypePopup(false)}
           ></ChangeFieldTypePopup>
         )}
         <div className={'border-t border-shade-6 pt-2'}>

frontend/appflowy_tauri/src/appflowy_app/components/error/ErrorModal.tsx

@@ -3,7 +3,7 @@ import { CloseSvg } from '../_shared/svg/CloseSvg';
 
 export const ErrorModal = ({ message, onClose }: { message: string; onClose: () => void }) => {
   return (
-    <div className={'fixed inset-0 z-20 flex items-center justify-center bg-white/30 backdrop-blur-sm'}>
+    <div className={'fixed inset-0 z-10 flex items-center justify-center bg-white/30 backdrop-blur-sm'}>
       <div
         className={
           'relative flex flex-col items-center gap-8 rounded-xl border border-shade-5 bg-white px-16 py-8 shadow-md'
@@ -11,7 +11,7 @@ export const ErrorModal = ({ message, onClose }: { message: string; onClose: ()
       >
         <button
           onClick={() => onClose()}
-          className={'absolute right-0 top-0 z-20 px-2 py-2 text-shade-5 hover:text-black'}
+          className={'absolute right-0 top-0 z-10 px-2 py-2 text-shade-5 hover:text-black'}
         >
           <i className={'block h-8 w-8'}>
             <CloseSvg></CloseSvg>