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

fix: generate sharing memo image (#663)

Browse Source
This commit is contained in:
boojack
2022-12-03 09:41:52 +08:00
committed by GitHub
parent e3d76193b9
commit a7374cf998
4 changed files with 60 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/Memo.tsx
View File

@ -8,7 +8,7 @@ import Icon from "./Icon";
import toastHelper from "./Toast"; import toastHelper from "./Toast";
import MemoContent from "./MemoContent"; import MemoContent from "./MemoContent";
import MemoResources from "./MemoResources"; import MemoResources from "./MemoResources";
import showShareMemoImageDialog from "./ShareMemoImageDialog"; import showShareMemo from "./ShareMemoDialog";
import showPreviewImageDialog from "./PreviewImageDialog"; import showPreviewImageDialog from "./PreviewImageDialog";
import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog"; import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
import "../less/memo.less"; import "../less/memo.less";
@ -89,7 +89,7 @@ const Memo: React.FC<Props> = (props: Props) => {
}; };
const handleGenMemoImageBtnClick = () => { const handleGenMemoImageBtnClick = () => {
showShareMemoImageDialog(memo); showShareMemo(memo);
}; };
const handleMemoContentClick = async (e: React.MouseEvent) => { const handleMemoContentClick = async (e: React.MouseEvent) => {

107
web/src/components/ShareMemoImageDialog.tsx → web/src/components/ShareMemoDialog.tsx
View File

@ -1,9 +1,10 @@
import { Select, Option } from "@mui/joy";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { toLower } from "lodash"; import { toLower } from "lodash";
import toImage from "../labs/html2image"; import toImage from "../labs/html2image";
import { ANIMATION_DURATION, VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts"; import { VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts";
import * as utils from "../helpers/utils"; import * as utils from "../helpers/utils";
import { getMemoStats } from "../helpers/api"; import { getMemoStats } from "../helpers/api";
import { memoService, userService } from "../services"; import { memoService, userService } from "../services";
@ -13,8 +14,7 @@ import { generateDialog } from "./Dialog";
import toastHelper from "./Toast"; import toastHelper from "./Toast";
import MemoContent from "./MemoContent"; import MemoContent from "./MemoContent";
import MemoResources from "./MemoResources"; import MemoResources from "./MemoResources";
import Selector from "./common/Selector"; import "../less/share-memo-dialog.less";
import "../less/share-memo-image-dialog.less";
interface Props extends DialogProps { interface Props extends DialogProps {
memo: Memo; memo: Memo;
@ -22,18 +22,18 @@ interface Props extends DialogProps {
interface State { interface State {
memoAmount: number; memoAmount: number;
shortcutImgUrl: string;
memoVisibility: string; memoVisibility: string;
generatedImgUrl: string;
} }
const ShareMemoImageDialog: React.FC<Props> = (props: Props) => { const ShareMemoDialog: React.FC<Props> = (props: Props) => {
const { memo: propsMemo, destroy } = props; const { memo: propsMemo, destroy } = props;
const { t } = useTranslation(); const { t } = useTranslation();
const user = userService.getState().user as User; const user = userService.getState().user as User;
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
memoAmount: 0, memoAmount: 0,
shortcutImgUrl: "",
memoVisibility: propsMemo.visibility, memoVisibility: propsMemo.visibility,
generatedImgUrl: "",
}); });
const loadingState = useLoading(); const loadingState = useLoading();
const memoElRef = useRef<HTMLDivElement>(null); const memoElRef = useRef<HTMLDivElement>(null);
@ -64,26 +64,24 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
return; return;
} }
setTimeout(() => { if (!memoElRef.current) {
if (!memoElRef.current) { return;
return; }
}
toImage(memoElRef.current, { toImage(memoElRef.current, {
pixelRatio: window.devicePixelRatio * 2, pixelRatio: window.devicePixelRatio * 2,
}) })
.then((url) => { .then((url) => {
setState((state) => { setState((state) => {
return { return {
...state, ...state,
shortcutImgUrl: url, generatedImgUrl: url,
}; };
});
})
.catch((err) => {
console.error(err);
}); });
}, ANIMATION_DURATION); })
.catch((err) => {
console.error(err);
});
}, [loadingState.isLoading]); }, [loadingState.isLoading]);
const handleCloseBtnClick = () => { const handleCloseBtnClick = () => {
@ -92,7 +90,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
const handleDownloadBtnClick = () => { const handleDownloadBtnClick = () => {
const a = document.createElement("a"); const a = document.createElement("a");
a.href = state.shortcutImgUrl; a.href = state.generatedImgUrl;
a.download = `memos-${utils.getDateTimeString(Date.now())}.png`; a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
a.click(); a.click();
}; };
@ -134,7 +132,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container">
<div className="memo-container" ref={memoElRef}> <div className="memo-container" ref={memoElRef}>
{state.shortcutImgUrl !== "" && <img className="memo-shortcut-img" src={state.shortcutImgUrl} />} {state.generatedImgUrl !== "" && <img className="memo-shortcut-img" src={state.generatedImgUrl} />}
<span className="time-text">{memo.createdAtStr}</span> <span className="time-text">{memo.createdAtStr}</span>
<div className="memo-content-wrapper"> <div className="memo-content-wrapper">
<MemoContent content={memo.content} displayConfig={{ enableExpand: false }} /> <MemoContent content={memo.content} displayConfig={{ enableExpand: false }} />
@ -150,28 +148,35 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
<img className="logo-img" src="/logo.webp" alt="" /> <img className="logo-img" src="/logo.webp" alt="" />
</div> </div>
</div> </div>
<div className="share-actions-container"> <div className="px-4 py-3 w-full flex flex-row justify-between items-center">
<div className="visibility-selector"> <Select
<Selector className="!min-w-[10rem] w-auto text-sm"
className="visibility-selector" value={state.memoVisibility}
value={state.memoVisibility} onChange={(_, visibility) => {
dataSource={memoVisibilityOptionSelectorItems} if (visibility) {
handleValueChanged={handleMemoVisibilityOptionChanged} handleMemoVisibilityOptionChanged(visibility);
/> }
</div> }}
<div className="share-btns-container"> >
<div className="buttons-wrapper"> {memoVisibilityOptionSelectorItems.map((item) => (
<div className="share-btn share-image-btn" onClick={handleDownloadBtnClick}> <Option key={item.value} value={item.value} className="whitespace-nowrap">
<Icon.Download className="icon-img" /> {item.text}
<span>{t("common.image")}</span> </Option>
</div> ))}
</div> </Select>
<div className="buttons-wrapper"> <div className="flex flex-row justify-end items-center">
<div className="share-btn share-link-btn" onClick={handleCopyLinkBtnClick}> <button disabled={state.generatedImgUrl === ""} className="btn-normal mr-2" onClick={handleDownloadBtnClick}>
<Icon.Link className="icon-img" /> {state.generatedImgUrl === "" ? (
<span>{t("common.link")}</span> <Icon.Loader className="w-4 h-auto mr-1 animate-spin" />
</div> ) : (
</div> <Icon.Download className="w-4 h-auto mr-1" />
)}
<span>{t("common.image")}</span>
</button>
<button className="btn-normal" onClick={handleCopyLinkBtnClick}>
<Icon.Link className="w-4 h-auto mr-1" />
<span>{t("common.link")}</span>
</button>
</div> </div>
</div> </div>
</div> </div>
@ -179,12 +184,12 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
); );
}; };
export default function showShareMemoImageDialog(memo: Memo): void { export default function showShareMemoDialog(memo: Memo): void {
generateDialog( generateDialog(
{ {
className: "share-memo-image-dialog", className: "share-memo-dialog",
}, },
ShareMemoImageDialog, ShareMemoDialog,
{ memo } { memo }
); );
} }

2
web/src/css/tailwind.css
View File

@ -16,7 +16,7 @@
@layer components { @layer components {
.btn-normal { .btn-normal {
@apply select-none inline-flex border dark:border-zinc-700 cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow; @apply select-none flex flex-row justify-center items-center border dark:border-zinc-700 cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:shadow-none;
} }
.btn-primary { .btn-primary {

34
web/src/less/share-memo-image-dialog.less → web/src/less/share-memo-dialog.less
View File

@ -1,4 +1,4 @@
.share-memo-image-dialog { .share-memo-dialog {
> .dialog-container { > .dialog-container {
@apply w-96 p-0 bg-white dark:bg-zinc-800; @apply w-96 p-0 bg-white dark:bg-zinc-800;
@ -77,38 +77,6 @@
} }
} }
} }
.share-actions-container {
@apply flex justify-between px-4 py-3 mb-0 w-full border-t dark:border-t-zinc-700;
> .visibility-selector {
@apply w-36;
> .selector-wrapper {
@apply h-10;
}
}
> .share-btns-container {
@apply flex justify-end;
> .buttons-wrapper {
@apply flex flex-row justify-start items-center;
> .share-btn {
@apply text-sm cursor-pointer px-3 py-2 rounded flex flex-row justify-center items-center border dark:border-zinc-700 hover:opacity-80;
> .icon-img {
@apply w-4 h-auto mr-1;
}
}
> .share-image-btn {
@apply mr-3;
}
}
}
}
} }
} }
} }