feat: update editor style (#454)

* feat: update editor style * chore: update bg
2024-12-20 01:31:29 +03:00 · 2022-11-12 20:57:08 +08:00 · 2022-11-12 20:57:08 +08:00 · 241c93c6b7
commit 241c93c6b7
parent bf07ab9e2f
3 changed files with 91 additions and 86 deletions
--- a/web/src/components/MemoEditor.tsx
+++ b/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({
-        ...state,
-        resourceList: [...state.resourceList, ...resourceList],
+      setState((state) => {
+        return {
+          ...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({
-          ...state,
-          resourceList: [...state.resourceList, resource],
+        setState((state) => {
+          return {
+            ...state,
+            resourceList: [...state.resourceList, resource],
+          };
        });
      }
    }
  };

  const handleUploadResource = async (file: File) => {
-    setState({
-      ...state,
-      isUploadingResource: true,
+    setState((state) => {
+      return {
+        ...state,
+        isUploadingResource: true,
+      };
    });

    let resource = undefined;
@ -191,9 +195,11 @@ const MemoEditor: React.FC = () => {
      toastHelper.error(error.response.data.message);
    }

-    setState({
-      ...state,
-      isUploadingResource: false,
+    setState((state) => {
+      return {
+        ...state,
+        isUploadingResource: false,
+      };
    });
    return resource;
  };
@ -232,10 +238,12 @@ const MemoEditor: React.FC = () => {
      toastHelper.error(error.response.data.message);
    }

-    setState({
-      ...state,
-      fullscreen: false,
-      resourceList: [],
+    setState((state) => {
+      return {
+        ...state,
+        fullscreen: false,
+        resourceList: [],
+      };
    });
    setEditorContentCache("");
    storage.remove(["editingMemoVisibilityCache"]);
@ -314,9 +322,11 @@ const MemoEditor: React.FC = () => {
          }
        }
      }
-      setState({
-        ...state,
-        resourceList: [...state.resourceList, ...resourceList],
+      setState((state) => {
+        return {
+          ...state,
+          resourceList: [...state.resourceList, ...resourceList],
+        };
      });
      document.body.removeChild(inputEl);
    };
@ -324,9 +334,11 @@ const MemoEditor: React.FC = () => {
  };

  const handleFullscreenBtnClick = () => {
-    setState({
-      ...state,
-      fullscreen: !state.fullscreen,
+    setState((state) => {
+      return {
+        ...state,
+        fullscreen: !state.fullscreen,
+      };
    });
  };

@ -354,9 +366,11 @@ const MemoEditor: React.FC = () => {
  };

  const handleDeleteResource = async (resourceId: ResourceId) => {
-    setState({
-      ...state,
-      resourceList: state.resourceList.filter((resource) => resource.id !== resourceId),
+    setState((state) => {
+      return {
+        ...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({
-      ...state,
-      isEditorFocused: false,
-    });
+    // do nth
  };

  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>
  );
 };
--- a/web/src/less/editor.less
+++ b/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);

--- a/web/src/less/memo-editor.less
+++ b/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;
-
-    > .visibility-selector {
-      @apply h-7;
-
-      > .current-value-container {
-        @apply rounded-full;
-
-        > .value-text {
-          @apply text-xs w-full;
-        }
-      }
-    }
+    @apply w-full flex flex-row justify-between items-center mb-1;

    > .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;
+        }
+      }
+    }
+  }
 }