usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-11-28 23:04:57 +03: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
Show Stats 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 tags = useAppSelector((state) => state.memo.tags);
const [isTagSeletorShown, toggleTagSeletor] = useToggle(false);
const [isUploadingResource, setIsUploadingResource] = useToggle(false);
const editorRef = useRef<EditorRefActions>(null);
const prevGlobalStateRef = useRef(editorState);
const tagSeletorRef = useRef<HTMLDivElement>(null);
@ -119,22 +120,32 @@ const MemoEditor: React.FC<Props> = () => {
};
}, []);
const handleUploadFile = useCallback(async (file: File) => {
const { type } = file;
const handleUploadFile = useCallback(
async (file: File) => {
if (isUploadingResource) {
return;
}
if (!type.startsWith("image")) {
return;
}
setIsUploadingResource(true);
const { type } = file;
try {
const image = await resourceService.upload(file);
const url = `/h/r/${image.id}/${image.filename}`;
if (!type.startsWith("image")) {
return;
}
return url;
} catch (error: any) {
toastHelper.error(error);
}
}, []);
try {
const image = await resourceService.upload(file);
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) => {
if (content === "") {
@ -283,8 +294,13 @@ const MemoEditor: React.FC<Props> = () => {
{...editorConfig}
tools={
<>
<img className="action-btn file-upload" src="/icons/tag.svg" onClick={handleTagTextBtnClick} />
<img className="action-btn file-upload" src="/icons/image.svg" onClick={handleUploadFileBtnClick} />
<div className="action-btn">
<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;
> .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 {
@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 {
.flex(column, flex-start, flex-start);