From 2aed7c70aa46f7e6c7473a07a9fc0481858f51e0 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 23 Aug 2022 21:33:53 +0800
Subject: [PATCH] chore: update cancel editing button

---
 web/src/components/Editor/Editor.tsx | 13 -------------
 web/src/components/MemoEditor.tsx    | 11 +++++++----
 web/src/less/memo-editor.less        | 12 ++++++++++--
 web/src/locales/en.json              |  2 +-
 web/src/locales/zh.json              |  2 +-
 5 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/web/src/components/Editor/Editor.tsx b/web/src/components/Editor/Editor.tsx
index 09f761c6..4055470a 100644
--- a/web/src/components/Editor/Editor.tsx
+++ b/web/src/components/Editor/Editor.tsx
@@ -18,10 +18,8 @@ interface EditorProps {
   placeholder: string;
   fullscreen: boolean;
   showConfirmBtn: boolean;
-  showCancelBtn: boolean;
   tools?: ReactNode;
   onConfirmBtnClick: (content: string) => void;
-  onCancelBtnClick: () => void;
   onContentChange: (content: string) => void;
 }
 
@@ -33,9 +31,7 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
     placeholder,
     fullscreen,
     showConfirmBtn,
-    showCancelBtn,
     onConfirmBtnClick: handleConfirmBtnClickCallback,
-    onCancelBtnClick: handleCancelBtnClickCallback,
     onContentChange: handleContentChangeCallback,
   } = props;
   const { t } = useI18n();
@@ -111,10 +107,6 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
     editorRef.current.value = "";
   }, []);
 
-  const handleCommonCancelBtnClick = useCallback(() => {
-    handleCancelBtnClickCallback();
-  }, []);
-
   return (
     <div className={"common-editor-wrapper " + className}>
       <textarea
@@ -130,11 +122,6 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
           <Only when={props.tools !== undefined}>{props.tools}</Only>
         </div>
         <div className="btns-container">
-          <Only when={showCancelBtn}>
-            <button className="action-btn cancel-btn" onClick={handleCommonCancelBtnClick}>
-              {t("editor.cancel-edit")}
-            </button>
-          </Only>
           <Only when={showConfirmBtn}>
             <button className="action-btn confirm-btn" disabled={editorRef.current?.value === ""} onClick={handleCommonConfirmBtnClick}>
               {t("editor.save")} <span className="icon-text">✍️</span>
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index 510dc6c8..313aa44a 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -167,7 +167,7 @@ const MemoEditor: React.FC<Props> = () => {
     setEditorContentCache("");
   };
 
-  const handleCancelBtnClick = useCallback(() => {
+  const handleCancelEditingBtnClick = useCallback(() => {
     editorStateService.clearEditMemo();
     editorRef.current?.setContent("");
     setEditorContentCache("");
@@ -219,9 +219,7 @@ const MemoEditor: React.FC<Props> = () => {
       placeholder: t("editor.placeholder"),
       fullscreen: state.fullscreen,
       showConfirmBtn: true,
-      showCancelBtn: isEditing,
       onConfirmBtnClick: handleSaveBtnClick,
-      onCancelBtnClick: handleCancelBtnClick,
       onContentChange: handleContentChange,
     }),
     [isEditing, state.fullscreen, locale]
@@ -229,7 +227,12 @@ const MemoEditor: React.FC<Props> = () => {
 
   return (
     <div className={`memo-editor-container ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}>
-      <p className={"tip-text " + (isEditing ? "" : "hidden")}>Editing...</p>
+      <div className={`tip-container ${isEditing ? "" : "!hidden"}`}>
+        <span className="tip-text">{t("editor.editing")}</span>
+        <button className="cancel-btn" onClick={handleCancelEditingBtnClick}>
+          {t("common.cancel")}
+        </button>
+      </div>
       <Editor
         ref={editorRef}
         {...editorConfig}
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index 8278356d..0fbfd835 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -25,8 +25,16 @@
     border-color: @text-blue;
   }
 
-  > .tip-text {
-    @apply text-xs leading-5 text-gray-400;
+  > .tip-container {
+    @apply mb-1 w-full flex flex-row justify-start items-center text-xs leading-6;
+
+    > .tip-text {
+      @apply text-blue-600 mr-2;
+    }
+
+    > .cancel-btn {
+      @apply px-2 border rounded-full leading-5 text-gray-600 hover:border-gray-600;
+    }
   }
 
   > .memo-editor {
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 7135ebf2..3bc4ebaa 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -37,8 +37,8 @@
     "archived": "Archived"
   },
   "editor": {
+    "editing": "Editing...",
     "save": "Save",
-    "cancel-edit": "Cancel edit",
     "placeholder": "Any thoughts..."
   },
   "memo": {
diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json
index 26c1bd7f..b4a4960b 100644
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@@ -38,8 +38,8 @@
     "archived": "已归档"
   },
   "editor": {
+    "editing": "编辑中...",
     "save": "记下",
-    "cancel-edit": "退出编辑",
     "placeholder": "现在的想法是..."
   },
   "memo": {