feat: update visibility selector style (#441)

web/src/components/Editor/Editor.tsx

@@ -17,14 +17,12 @@ interface Props {
   placeholder: string;
   fullscreen: boolean;
   tools?: ReactNode;
-  onPaste: (event: React.ClipboardEvent) => void;
-  onFocus: () => void;
   onContentChange: (content: string) => void;
+  onPaste: (event: React.ClipboardEvent) => void;
 }
 
-// eslint-disable-next-line react/display-name
-const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefActions>) => {
-  const { className, initialContent, placeholder, fullscreen, onPaste, onFocus, onContentChange: handleContentChangeCallback } = props;
+const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<EditorRefActions>) {
+  const { className, initialContent, placeholder, fullscreen, onPaste, onContentChange: handleContentChangeCallback } = props;
   const editorRef = useRef<HTMLTextAreaElement>(null);
   const refresh = useRefresh();
 
@@ -106,7 +104,6 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefAction
         ref={editorRef}
         onPaste={onPaste}
         onInput={handleEditorInput}
-        onFocus={onFocus}
       ></textarea>
     </div>
   );

web/src/components/MemoEditor.tsx

@@ -33,9 +33,9 @@ const setEditingMemoVisibilityCache = (visibility: Visibility) => {
 interface State {
   fullscreen: boolean;
   isUploadingResource: boolean;
-  shouldShowEmojiPicker: boolean;
   resourceList: Resource[];
-  hasFocused: boolean;
+  shouldShowEmojiPicker: boolean;
+  isEditorFocused: boolean;
 }
 
 const MemoEditor: React.FC = () => {
@@ -49,7 +49,7 @@ const MemoEditor: React.FC = () => {
     fullscreen: false,
     shouldShowEmojiPicker: false,
     resourceList: [],
-    hasFocused: false,
+    isEditorFocused: false,
   });
   const [allowSave, setAllowSave] = useState<boolean>(false);
   const prevGlobalStateRef = useRef(editorState);
@@ -57,6 +57,12 @@ const MemoEditor: React.FC = () => {
   const tagSeletorRef = useRef<HTMLDivElement>(null);
   const editorFontStyle = user?.setting.editorFontStyle || "normal";
   const mobileEditorStyle = user?.setting.mobileEditorStyle || "normal";
+  const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
+    return {
+      value: item.value,
+      text: t(`memo.visibility.${toLower(item.value)}`),
+    };
+  });
 
   useEffect(() => {
     const { editingMemoIdCache, editingMemoVisibilityCache } = storage.get(["editingMemoIdCache", "editingMemoVisibilityCache"]);
@@ -364,6 +370,27 @@ const MemoEditor: React.FC = () => {
     }
   };
 
+  const handleMemoVisibilityOptionChanged = async (value: string) => {
+    const visibilityValue = value as Visibility;
+    editorStateService.setMemoVisibility(visibilityValue);
+    setEditingMemoVisibilityCache(visibilityValue);
+  };
+
+  const handleEditorFocus = () => {
+    editorRef.current?.focus();
+    setState({
+      ...state,
+      isEditorFocused: true,
+    });
+  };
+
+  const handleEditorBlur = () => {
+    setState({
+      ...state,
+      isEditorFocused: false,
+    });
+  };
+
   const isEditing = Boolean(editorState.editMemoId && editorState.editMemoId !== UNKNOWN_ID);
 
   const editorConfig = useMemo(
@@ -373,55 +400,35 @@ const MemoEditor: React.FC = () => {
       placeholder: t("editor.placeholder"),
       fullscreen: state.fullscreen,
       onContentChange: handleContentChange,
+      onPaste: handlePasteEvent,
     }),
     [state.fullscreen, i18n.language, editorFontStyle]
   );
 
-  const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
-    return {
-      value: item.value,
-      text: t(`memo.visibility.${toLower(item.value)}`),
-    };
-  });
-
-  const handleMemoVisibilityOptionChanged = async (value: string) => {
-    const visibilityValue = value as Visibility;
-    editorStateService.setMemoVisibility(visibilityValue);
-    setEditingMemoVisibilityCache(visibilityValue);
-  };
-
-  const handleEditorFocus = () => {
-    setState({
-      ...state,
-      hasFocused: true,
-    });
-  };
-
   return (
     <div
       className={`memo-editor-container ${mobileEditorStyle} ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}
+      tabIndex={0}
       onKeyDown={handleKeyDown}
       onDrop={handleDropEvent}
+      onFocus={handleEditorFocus}
+      onBlur={handleEditorBlur}
     >
-      <div className={`tip-container ${isEditing ? "" : "!hidden"}`}>
-        <span className="tip-text">{t("editor.editing")}</span>
-        <button className="cancel-btn" onClick={handleCancelEdit}>
-          {t("common.cancel")}
-        </button>
-      </div>
-      <Editor ref={editorRef} {...editorConfig} onPaste={handlePasteEvent} onFocus={handleEditorFocus} />
-      <div className={`visibility-selector-container ${state.hasFocused || allowSave ? "" : "!hidden"}`}>
-        <div className="memo-visibility-selector">
-          <label className="form-label selector">
-            <Selector
-              className="w-36"
-              value={editorState.memoVisibility}
-              dataSource={memoVisibilityOptionSelectorItems}
-              handleValueChanged={handleMemoVisibilityOptionChanged}
-            />
-          </label>
+      <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}>
+            {t("common.cancel")}
+          </button>
         </div>
       </div>
+      <Editor ref={editorRef} {...editorConfig} />
       <div className="common-tools-wrapper">
         <div className="common-tools-container">
           <div className="action-btn tag-action">

web/src/less/editor.less

@@ -10,8 +10,7 @@
   }
 
   > .common-editor-inputer {
-    @apply w-full h-full mt-1 mb-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
-    min-height: 40px;
+    @apply w-full h-full mt-2 mb-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/explore.less

@@ -8,8 +8,7 @@
     @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
 
     > .page-header {
-      @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 sm:pr-6 pt-6 mb-2;
-      background-color: #f6f5f4;
+      @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between backdrop-blur-sm items-center px-4 sm:pr-6 pt-6 mb-2;
 
       > .title-container {
         @apply flex flex-row justify-start items-center;

web/src/less/memo-editor.less

@@ -50,20 +50,32 @@
     border-color: @text-blue;
   }
 
-  > .tip-container {
-    @apply mb-1 w-full flex flex-row justify-start items-center text-xs leading-6;
+  > .editor-header-container {
+    @apply w-full flex flex-row justify-between items-center;
 
-    > .tip-text {
-      @apply text-gray-400 mr-2;
-    }
+    > .visibility-selector {
+      @apply h-7;
+
+      > .current-value-container {
+        @apply rounded-full;
 
-    > .cancel-btn {
-      @apply px-2 border rounded-full leading-5 text-blue-600 hover:border-blue-600;
+        > .value-text {
+          @apply text-sm w-full;
+        }
+      }
     }
-  }
 
-  > .visibility-selector-container{
-    @apply w-full border-b py-2;
+    > .editing-container {
+      @apply mb-1 flex flex-row justify-start items-center text-xs leading-6;
+
+      > .tip-text {
+        @apply text-gray-400 mr-2;
+      }
+
+      > .cancel-btn {
+        @apply px-2 border rounded-full leading-5 text-blue-600 hover:border-blue-600;
+      }
+    }
   }
 
   > .memo-editor {