From 241c93c6b79e3353fa786e3ac7235038ca403dcb Mon Sep 17 00:00:00 2001 From: boojack Date: Sat, 12 Nov 2022 20:57:08 +0800 Subject: [PATCH] feat: update editor style (#454) * feat: update editor style * chore: update bg --- web/src/components/MemoEditor.tsx | 105 ++++++++++++++++-------------- web/src/less/editor.less | 2 +- web/src/less/memo-editor.less | 70 ++++++++++---------- 3 files changed, 91 insertions(+), 86 deletions(-) diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx index 6a8e805d..36f6364f 100644 --- 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(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} >
-
{t("editor.editing")}
-
- -
{state.resourceList.length > 0 && (
@@ -485,6 +480,20 @@ const MemoEditor: React.FC = () => { })}
)} +
+ +
+ +
+
); }; diff --git a/web/src/less/editor.less b/web/src/less/editor.less index ecda5603..a0c3d0d6 100644 --- 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); diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less index 43693ef6..55c21b9b 100644 --- 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; + } + } + } + } }