feat: update editor style (#454)

* feat: update editor style

* chore: update bg

web/src/components/MemoEditor.tsx

@@ -35,10 +35,9 @@ interface State {
   isUploadingResource: boolean;
   resourceList: Resource[];
   shouldShowEmojiPicker: boolean;
-  isEditorFocused: boolean;
 }
 
-const MemoEditor: React.FC = () => {
+const MemoEditor = () => {
   const { t, i18n } = useTranslation();
   const user = useAppSelector((state) => state.user.user as User);
   const setting = user.setting;
@@ -49,7 +48,6 @@ const MemoEditor: React.FC = () => {
     fullscreen: false,
     shouldShowEmojiPicker: false,
     resourceList: [],
-    isEditorFocused: false,
   });
   const [allowSave, setAllowSave] = useState<boolean>(false);
   const prevGlobalStateRef = useRef(editorState);
@@ -155,9 +153,11 @@ const MemoEditor: React.FC = () => {
           }
         }
       }
-      setState({
+      setState((state) => {
-        ...state,
+        return {
-        resourceList: [...state.resourceList, ...resourceList],
+          ...state,
+          resourceList: [...state.resourceList, ...resourceList],
+        };
       });
     }
   };
@@ -168,18 +168,22 @@ const MemoEditor: React.FC = () => {
       const file = event.clipboardData.files[0];
       const resource = await handleUploadResource(file);
       if (resource) {
-        setState({
+        setState((state) => {
-          ...state,
+          return {
-          resourceList: [...state.resourceList, resource],
+            ...state,
+            resourceList: [...state.resourceList, resource],
+          };
         });
       }
     }
   };
 
   const handleUploadResource = async (file: File) => {
-    setState({
+    setState((state) => {
-      ...state,
+      return {
-      isUploadingResource: true,
+        ...state,
+        isUploadingResource: true,
+      };
     });
 
     let resource = undefined;
@@ -191,9 +195,11 @@ const MemoEditor: React.FC = () => {
       toastHelper.error(error.response.data.message);
     }
 
-    setState({
+    setState((state) => {
-      ...state,
+      return {
-      isUploadingResource: false,
+        ...state,
+        isUploadingResource: false,
+      };
     });
     return resource;
   };
@@ -232,10 +238,12 @@ const MemoEditor: React.FC = () => {
       toastHelper.error(error.response.data.message);
     }
 
-    setState({
+    setState((state) => {
-      ...state,
+      return {
-      fullscreen: false,
+        ...state,
-      resourceList: [],
+        fullscreen: false,
+        resourceList: [],
+      };
     });
     setEditorContentCache("");
     storage.remove(["editingMemoVisibilityCache"]);
@@ -314,9 +322,11 @@ const MemoEditor: React.FC = () => {
           }
         }
       }
-      setState({
+      setState((state) => {
-        ...state,
+        return {
-        resourceList: [...state.resourceList, ...resourceList],
+          ...state,
+          resourceList: [...state.resourceList, ...resourceList],
+        };
       });
       document.body.removeChild(inputEl);
     };
@@ -324,9 +334,11 @@ const MemoEditor: React.FC = () => {
   };
 
   const handleFullscreenBtnClick = () => {
-    setState({
+    setState((state) => {
-      ...state,
+      return {
-      fullscreen: !state.fullscreen,
+        ...state,
+        fullscreen: !state.fullscreen,
+      };
     });
   };
 
@@ -354,9 +366,11 @@ const MemoEditor: React.FC = () => {
   };
 
   const handleDeleteResource = async (resourceId: ResourceId) => {
-    setState({
+    setState((state) => {
-      ...state,
+      return {
-      resourceList: state.resourceList.filter((resource) => resource.id !== resourceId),
+        ...state,
+        resourceList: state.resourceList.filter((resource) => resource.id !== resourceId),
+      };
     });
 
     if (editorState.editMemoId) {
@@ -372,17 +386,10 @@ const MemoEditor: React.FC = () => {
 
   const handleEditorFocus = () => {
     editorRef.current?.focus();
-    setState({
-      ...state,
-      isEditorFocused: true,
-    });
   };
 
   const handleEditorBlur = () => {
-    setState({
+    // do nth
-      ...state,
-      isEditorFocused: false,
-    });
   };
 
   const isEditing = Boolean(editorState.editMemoId && editorState.editMemoId !== UNKNOWN_ID);
@@ -409,12 +416,6 @@ const MemoEditor: React.FC = () => {
       onBlur={handleEditorBlur}
     >
       <div className="editor-header-container">
-        <Selector
-          className={`visibility-selector ${state.isEditorFocused || allowSave ? "" : "!hidden"}`}
-          value={editorState.memoVisibility}
-          dataSource={memoVisibilityOptionSelectorItems}
-          handleValueChanged={handleMemoVisibilityOptionChanged}
-        />
         <div className={`editing-container ${isEditing ? "" : "!hidden"}`}>
           <span className="tip-text">{t("editor.editing")}</span>
           <button className="cancel-btn" onClick={handleCancelEdit}>
@@ -465,12 +466,6 @@ const MemoEditor: React.FC = () => {
             onShouldShowEmojiPickerChange={handleChangeShouldShowEmojiPicker}
           />
         </div>
-        <div className="btns-container">
-          <button className="action-btn confirm-btn" disabled={!allowSave || state.isUploadingResource} onClick={handleSaveBtnClick}>
-            {t("editor.save")}
-            <img className="icon-img" src="/logo.webp" />
-          </button>
-        </div>
       </div>
       {state.resourceList.length > 0 && (
         <div className="resource-list-wrapper">
@@ -485,6 +480,20 @@ const MemoEditor: React.FC = () => {
           })}
         </div>
       )}
+      <div className="editor-footer-container">
+        <Selector
+          className={`visibility-selector`}
+          value={editorState.memoVisibility}
+          dataSource={memoVisibilityOptionSelectorItems}
+          handleValueChanged={handleMemoVisibilityOptionChanged}
+        />
+        <div className="buttons-container">
+          <button className="action-btn confirm-btn" disabled={!allowSave || state.isUploadingResource} onClick={handleSaveBtnClick}>
+            {t("editor.save")}
+            <img className="icon-img w-4 h-auto" src="/logo.webp" />
+          </button>
+        </div>
+      </div>
     </div>
   );
 };

web/src/less/editor.less

@@ -4,7 +4,7 @@
   @apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
 
   > .common-editor-inputer {
-    @apply w-full h-full mt-2 mb-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
+    @apply w-full h-full my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
     max-height: 300px;
     .pretty-scroll-bar(2px, 0);
 

web/src/less/memo-editor.less

@@ -1,7 +1,7 @@
 @import "./mixin.less";
 
 .memo-editor-container {
-  @apply transition-all relative w-full flex flex-col justify-start items-start bg-white p-4 rounded-lg border-2 border-gray-200;
+  @apply transition-all relative w-full flex flex-col justify-start items-start bg-white p-4 pt-3 rounded-lg border-2 border-gray-200;
 
   &.float {
     @media (max-width: 640px) {
@@ -47,26 +47,14 @@
   }
 
   &.edit-ing {
-    border-color: @text-blue;
+    @apply border-blue-500;
   }
 
   > .editor-header-container {
-    @apply w-full flex flex-row justify-between items-center;
+    @apply w-full flex flex-row justify-between items-center mb-1;
-
-    > .visibility-selector {
-      @apply h-7;
-
-      > .current-value-container {
-        @apply rounded-full;
-
-        > .value-text {
-          @apply text-xs w-full;
-        }
-      }
-    }
 
     > .editing-container {
-      @apply mb-1 flex flex-row justify-start items-center text-xs leading-6;
+      @apply flex flex-row justify-start items-center text-xs;
 
       > .tip-text {
         @apply text-gray-400 mr-2;
@@ -130,33 +118,13 @@
         }
       }
     }
-
-    > .btns-container {
-      @apply grow-0 shrink-0 flex flex-row justify-end items-center;
-
-      > .action-btn {
-        @apply border-none select-none cursor-pointer py-1 px-3 rounded text-sm hover:opacity-80;
-      }
-
-      > .cancel-btn {
-        @apply text-gray-500 bg-transparent mr-2;
-      }
-
-      > .confirm-btn {
-        @apply flex flex-row justify-center items-center shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
-
-        > .icon-img {
-          @apply ml-1 w-6 h-auto;
-        }
-      }
-    }
   }
 
   > .resource-list-wrapper {
     @apply w-full flex flex-row justify-start flex-wrap;
 
     > .resource-container {
-      @apply mt-1 mr-1 flex flex-row justify-start items-center flex-nowrap bg-gray-50 px-2 py-1 rounded cursor-pointer hover:bg-gray-100;
+      @apply mt-1 mr-1 flex flex-row justify-start items-center flex-nowrap bg-gray-100 px-2 py-1 rounded cursor-pointer hover:bg-gray-200;
 
       > .icon-img {
         @apply w-4 h-auto mr-1 text-gray-500;
@@ -171,4 +139,32 @@
       }
     }
   }
+
+  > .editor-footer-container {
+    @apply w-full flex flex-row justify-between items-center border-t pt-2 mt-2;
+
+    > .visibility-selector {
+      @apply h-7;
+
+      > .current-value-container {
+        @apply rounded-full;
+
+        > .value-text {
+          @apply text-xs w-full;
+        }
+      }
+    }
+
+    > .buttons-container {
+      @apply grow-0 shrink-0 flex flex-row justify-end items-center;
+
+      > .confirm-btn {
+        @apply border-none select-none rounded flex flex-row justify-center items-center shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
+
+        > .icon-img {
+          @apply ml-1 w-6 h-auto;
+        }
+      }
+    }
+  }
 }