mirror of https://github.com/usememos/memos
feat: implement part of full-screen layout
Steven
1 year ago
parent
15a091fe4c
commit
d6656db20d
@ -1,62 +0,0 @@
|
|||||||
import copy from "copy-to-clipboard";
|
|
||||||
import React from "react";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
import { useTranslate } from "@/utils/i18n";
|
|
||||||
import { generateDialog } from "./Dialog";
|
|
||||||
import Icon from "./Icon";
|
|
||||||
|
|
||||||
interface Props extends DialogProps {
|
|
||||||
memoId: MemoId;
|
|
||||||
}
|
|
||||||
|
|
||||||
const EmbedMemoDialog: React.FC<Props> = (props: Props) => {
|
|
||||||
const t = useTranslate();
|
|
||||||
const { memoId, destroy } = props;
|
|
||||||
|
|
||||||
const memoEmbeddedCode = () => {
|
|
||||||
return `<iframe style="width:100%;height:auto;min-width:256px;" src="${window.location.origin}/m/${memoId}/embed" frameBorder="0"></iframe>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCopyCode = () => {
|
|
||||||
copy(memoEmbeddedCode());
|
|
||||||
toast.success("Succeed to copy code to clipboard.");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="dialog-header-container">
|
|
||||||
<p className="title-text">{t("embed-memo.title")}</p>
|
|
||||||
<button className="btn close-btn" onClick={() => destroy()}>
|
|
||||||
<Icon.X />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="dialog-content-container !w-80">
|
|
||||||
<p className="text-base leading-6 mb-2">{t("embed-memo.text")}</p>
|
|
||||||
<pre className="w-full font-mono text-sm p-3 border rounded-lg">
|
|
||||||
<code className="w-full break-all whitespace-pre-wrap">{memoEmbeddedCode()}</code>
|
|
||||||
</pre>
|
|
||||||
<p className="w-full text-sm leading-6 flex flex-row justify-between items-center mt-2">
|
|
||||||
<span className="italic opacity-80">{t("embed-memo.only-public-supported")}</span>
|
|
||||||
<span className="btn-primary" onClick={handleCopyCode}>
|
|
||||||
{t("embed-memo.copy")}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
function showEmbedMemoDialog(memoId: MemoId) {
|
|
||||||
generateDialog(
|
|
||||||
{
|
|
||||||
className: "embed-memo-dialog",
|
|
||||||
dialogName: "embed-memo-dialog",
|
|
||||||
},
|
|
||||||
EmbedMemoDialog,
|
|
||||||
{
|
|
||||||
memoId,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default showEmbedMemoDialog;
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
@apply text-base w-full h-full overflow-hidden dark:bg-zinc-800;
|
@apply text-base w-full min-h-full bg-zinc-100 dark:bg-zinc-800;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root {
|
#root {
|
||||||
@apply w-full h-full overflow-auto;
|
@apply w-full h-auto overflow-auto;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,62 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import MemoContentV1 from "@/components/MemoContentV1";
|
|
||||||
import MemoResourceListView from "@/components/MemoResourceListView";
|
|
||||||
import { UNKNOWN_ID } from "@/helpers/consts";
|
|
||||||
import { getDateTimeString } from "@/helpers/datetime";
|
|
||||||
import useLoading from "@/hooks/useLoading";
|
|
||||||
import { useMemoStore } from "@/store/module";
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
memo: Memo;
|
|
||||||
}
|
|
||||||
|
|
||||||
const EmbedMemo = () => {
|
|
||||||
const params = useParams();
|
|
||||||
const memoStore = useMemoStore();
|
|
||||||
const [state, setState] = useState<State>({
|
|
||||||
memo: {
|
|
||||||
id: UNKNOWN_ID,
|
|
||||||
} as Memo,
|
|
||||||
});
|
|
||||||
const loadingState = useLoading();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const memoId = Number(params.memoId);
|
|
||||||
if (memoId && !isNaN(memoId)) {
|
|
||||||
memoStore
|
|
||||||
.fetchMemoById(memoId)
|
|
||||||
.then((memo) => {
|
|
||||||
setState({
|
|
||||||
memo,
|
|
||||||
});
|
|
||||||
loadingState.setFinish();
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
toast.error(error.response.data.message);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="w-full h-full flex flex-row justify-start items-start p-2">
|
|
||||||
{!loadingState.isLoading && (
|
|
||||||
<div className="w-full max-w-lg mx-auto my-auto shadow px-4 py-4 rounded-lg">
|
|
||||||
<div className="w-full flex flex-col justify-start items-start">
|
|
||||||
<div className="w-full mb-2 flex flex-row justify-start items-center text-sm text-gray-400 dark:text-gray-300">
|
|
||||||
<span>{getDateTimeString(state.memo.displayTs)}</span>
|
|
||||||
<a className="ml-2 hover:underline hover:text-green-600" href={`/u/${state.memo.creatorUsername}`}>
|
|
||||||
@{state.memo.creatorName}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<MemoContentV1 className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
|
|
||||||
<MemoResourceListView resourceList={state.memo.resourceList} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EmbedMemo;
|
|
||||||
Loading…
Reference in New Issue