From 994e2040971b0745fca7ba292c36f7d0d75fe50a Mon Sep 17 00:00:00 2001
From: ascarbek <ascarbek@gmail.com>
Date: Mon, 27 Mar 2023 01:09:38 +0600
Subject: [PATCH] fix: padding fixes for cell wrapper

---
 .../components/_shared/EditRow/CellOptions.tsx   |  6 +++++-
 .../_shared/EditRow/CellOptionsPopup.tsx         |  7 +++++++
 .../components/_shared/EditRow/EditCellDate.tsx  |  6 +++++-
 .../components/_shared/EditRow/EditCellText.tsx  | 16 +++++++++-------
 .../_shared/EditRow/EditCellWrapper.tsx          |  4 ++--
 .../components/_shared/EditRow/EditRow.tsx       |  2 ++
 6 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptions.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptions.tsx
index 2413afb6ee..9aa2f9d38c 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptions.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptions.tsx
@@ -18,7 +18,11 @@ export const CellOptions = ({
   };
 
   return (
-    <div ref={ref} onClick={() => onClick()} className={'flex flex-wrap items-center gap-2 text-xs text-black'}>
+    <div
+      ref={ref}
+      onClick={() => onClick()}
+      className={'flex flex-wrap items-center gap-2 px-4 py-2 text-xs text-black'}
+    >
       {data?.select_options.map((option, index) => (
         <div className={`${getBgColor(option.color)} rounded px-2 py-0.5`} key={index}>
           {option?.name || ''}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx
index 9b7a8bc16d..a69cc0ec29 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx
@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { Details2Svg } from '$app/components/_shared/svg/Details2Svg';
 import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg';
 import { CloseSvg } from '$app/components/_shared/svg/CloseSvg';
+import useOutsideClick from '$app/components/_shared/useOutsideClick';
 
 export const CellOptionsPopup = ({
   top,
@@ -16,12 +17,14 @@ export const CellOptionsPopup = ({
   cellIdentifier,
   cellCache,
   fieldController,
+  onOutsideClick,
 }: {
   top: number;
   left: number;
   cellIdentifier: CellIdentifier;
   cellCache: CellCache;
   fieldController: FieldController;
+  onOutsideClick: () => void;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   const { t } = useTranslation('');
@@ -39,6 +42,10 @@ export const CellOptionsPopup = ({
     }
   }, [ref, window, top, left]);
 
+  useOutsideClick(ref, async () => {
+    onOutsideClick();
+  });
+
   return (
     <div
       ref={ref}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx
index a960a7c6be..6f24c50ebe 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx
@@ -20,5 +20,9 @@ export const EditCellDate = ({
     console.log(v);
   };
 
-  return <Picker value={value} onChange={onChange} useRange={false} asSingle={true}></Picker>;
+  return (
+    <div className={'px-4 py-2'}>
+      <Picker value={value} onChange={onChange} useRange={false} asSingle={true}></Picker>;
+    </div>
+  );
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellText.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellText.tsx
index bc36f35ecf..357fbac9d7 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellText.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellText.tsx
@@ -21,12 +21,14 @@ export const EditCellText = ({ data, cellController }: { data: string; cellContr
   };
 
   return (
-    <textarea
-      className={'h-full w-full resize-none'}
-      rows={contentRows}
-      value={value}
-      onChange={(e) => onTextFieldChange(e.target.value)}
-      onBlur={() => save()}
-    />
+    <div className={'px-4 py-2'}>
+      <textarea
+        className={'h-full w-full resize-none'}
+        rows={contentRows}
+        value={value}
+        onChange={(e) => onTextFieldChange(e.target.value)}
+        onBlur={() => save()}
+      />
+    </div>
   );
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx
index e343d69c47..6fe4f3d253 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx
@@ -50,7 +50,7 @@ export const EditCellWrapper = ({
           {databaseStore.fields[cellIdentifier.fieldId].title}
         </span>
       </div>
-      <div className={'flex-1 cursor-pointer rounded-lg px-4 py-2 hover:bg-shade-6'}>
+      <div className={'flex-1 cursor-pointer rounded-lg hover:bg-shade-6'}>
         {(cellIdentifier.fieldType === FieldType.SingleSelect ||
           cellIdentifier.fieldType === FieldType.MultiSelect ||
           cellIdentifier.fieldType === FieldType.Checklist) &&
@@ -62,7 +62,7 @@ export const EditCellWrapper = ({
           )}
 
         {cellIdentifier.fieldType === FieldType.Checkbox && (
-          <div className={'h-8 w-8'}>
+          <div className={'h-8 w-8 px-4 py-2'}>
             {(data as boolean | undefined) ? <EditorCheckSvg></EditorCheckSvg> : <EditorUncheckSvg></EditorUncheckSvg>}
           </div>
         )}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx
index 633f6518d2..96452fa93c 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx
@@ -118,6 +118,7 @@ export const EditRow = ({
             ></EditCellWrapper>
           ))}
         </div>
+
         <div className={'border-t border-shade-6 pt-2'}>
           <button
             onClick={() => onNewColumnClick()}
@@ -156,6 +157,7 @@ export const EditRow = ({
             cellIdentifier={editingCell}
             cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
             fieldController={controller.fieldController}
+            onOutsideClick={() => setShowChangeOptionsPopup(false)}
           ></CellOptionsPopup>
         )}
       </div>