From 67691d1e99c2b8737e0354632d59da9ae1cbd42a Mon Sep 17 00:00:00 2001 From: boojack Date: Fri, 11 Nov 2022 19:25:21 +0800 Subject: [PATCH] feat: update visibility selector style (#441) --- web/src/components/Editor/Editor.tsx | 9 +-- web/src/components/MemoEditor.tsx | 87 +++++++++++++++------------- web/src/less/editor.less | 3 +- web/src/less/explore.less | 3 +- web/src/less/memo-editor.less | 32 ++++++---- 5 files changed, 74 insertions(+), 60 deletions(-) diff --git a/web/src/components/Editor/Editor.tsx b/web/src/components/Editor/Editor.tsx index e33c4df6..9f871c1a 100644 --- a/web/src/components/Editor/Editor.tsx +++ b/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) => { - const { className, initialContent, placeholder, fullscreen, onPaste, onFocus, onContentChange: handleContentChangeCallback } = props; +const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef) { + const { className, initialContent, placeholder, fullscreen, onPaste, onContentChange: handleContentChangeCallback } = props; const editorRef = useRef(null); const refresh = useRefresh(); @@ -106,7 +104,6 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef ); diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx index 71bbbb45..8ea3794e 100644 --- a/web/src/components/MemoEditor.tsx +++ b/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(false); const prevGlobalStateRef = useRef(editorState); @@ -57,6 +57,12 @@ const MemoEditor: React.FC = () => { const tagSeletorRef = useRef(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 (
-
- {t("editor.editing")} - -
- -
-
- +
+ +
+ {t("editor.editing")} +
+
diff --git a/web/src/less/editor.less b/web/src/less/editor.less index c027f504..2f3f3340 100644 --- a/web/src/less/editor.less +++ b/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); diff --git a/web/src/less/explore.less b/web/src/less/explore.less index 8a2346ba..2556f523 100644 --- a/web/src/less/explore.less +++ b/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; diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less index 7d541306..6e49f767 100644 --- a/web/src/less/memo-editor.less +++ b/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; + + > .value-text { + @apply text-sm w-full; + } + } } - > .cancel-btn { - @apply px-2 border rounded-full leading-5 text-blue-600 hover:border-blue-600; - } - } + > .editing-container { + @apply mb-1 flex flex-row justify-start items-center text-xs leading-6; - > .visibility-selector-container{ - @apply w-full border-b py-2; + > .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 {