YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: add image uploading status

Browse Source
This commit is contained in:
boojack
2022-06-24 20:01:02 +08:00
parent 2c8ff2794d
commit 929f621be4
3 changed files with 41 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
web/src/components/MemoEditor.tsx
View File

@ -46,6 +46,7 @@ const MemoEditor: React.FC<Props> = () => {
const editorState = useAppSelector((state) => state.editor); const editorState = useAppSelector((state) => state.editor);
const tags = useAppSelector((state) => state.memo.tags); const tags = useAppSelector((state) => state.memo.tags);
const [isTagSeletorShown, toggleTagSeletor] = useToggle(false); const [isTagSeletorShown, toggleTagSeletor] = useToggle(false);
const [isUploadingResource, setIsUploadingResource] = useToggle(false);
const editorRef = useRef<EditorRefActions>(null); const editorRef = useRef<EditorRefActions>(null);
const prevGlobalStateRef = useRef(editorState); const prevGlobalStateRef = useRef(editorState);
const tagSeletorRef = useRef<HTMLDivElement>(null); const tagSeletorRef = useRef<HTMLDivElement>(null);
@ -119,22 +120,32 @@ const MemoEditor: React.FC<Props> = () => {
}; };
}, []); }, []);
const handleUploadFile = useCallback(async (file: File) => { const handleUploadFile = useCallback(
const { type } = file; async (file: File) => {
if (isUploadingResource) {
return;
}
if (!type.startsWith("image")) { setIsUploadingResource(true);
return; const { type } = file;
}
try { if (!type.startsWith("image")) {
const image = await resourceService.upload(file); return;
const url = `/h/r/${image.id}/${image.filename}`; }
return url; try {
} catch (error: any) { const image = await resourceService.upload(file);
toastHelper.error(error); const url = `/h/r/${image.id}/${image.filename}`;
}
}, []); return url;
} catch (error: any) {
toastHelper.error(error);
} finally {
setIsUploadingResource(false);
}
},
[isUploadingResource]
);
const handleSaveBtnClick = useCallback(async (content: string) => { const handleSaveBtnClick = useCallback(async (content: string) => {
if (content === "") { if (content === "") {
@ -283,8 +294,13 @@ const MemoEditor: React.FC<Props> = () => {
{...editorConfig} {...editorConfig}
tools={ tools={
<> <>
<img className="action-btn file-upload" src="/icons/tag.svg" onClick={handleTagTextBtnClick} /> <div className="action-btn">
<img className="action-btn file-upload" src="/icons/image.svg" onClick={handleUploadFileBtnClick} /> <img className="icon-img" src="/icons/tag.svg" onClick={handleTagTextBtnClick} />
</div>
<div className="action-btn">
<img className="icon-img" src="/icons/image.svg" onClick={handleUploadFileBtnClick} />
<span className={`tip-text ${isUploadingResource ? "!block" : ""}`}>Uploading</span>
</div>
</> </>
} }
/> />

10
web/src/less/editor.less
View File

@ -29,7 +29,15 @@
@apply flex flex-row justify-start items-center; @apply flex flex-row justify-start items-center;
> .action-btn { > .action-btn {
@apply p-1 w-7 h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-80 hover:bg-gray-300 hover:shadow; @apply flex flex-row justify-start items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-80 hover:bg-gray-300 hover:shadow;
> .icon-img {
@apply w-5 h-auto;
}
> .tip-text {
@apply hidden ml-1 text-xs leading-5 text-gray-700 border border-gray-300 rounded-xl px-2;
}
} }
} }

1
web/src/less/setting-dialog.less
View File

@ -42,6 +42,7 @@
> .section-content-container { > .section-content-container {
@apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll; @apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll;
.hide-scroll-bar();
> .section-container { > .section-container {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);