mirror of
https://github.com/streetwriters/notesnook.git
synced 2026-02-24 12:12:54 +01:00
feat: improve publish view ui
This commit is contained in:
thecodrr
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { Flex, Text, Button } from "rebass";
|
||||
import { Flex, Text, Button, Box } from "rebass";
|
||||
import * as Icon from "../icons";
|
||||
import Toggle from "../toggle";
|
||||
import Field from "../field";
|
||||
@@ -25,17 +25,17 @@ function PublishView(props) {
|
||||
setPublishId(db.monographs.monograph(noteId));
|
||||
}, [noteId]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
window.addEventListener("click", onWindowClick);
|
||||
window.addEventListener("blur", onWindowClick);
|
||||
// useEffect(() => {
|
||||
// window.addEventListener("keydown", onKeyDown);
|
||||
// window.addEventListener("click", onWindowClick);
|
||||
// window.addEventListener("blur", onWindowClick);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("click", onWindowClick);
|
||||
window.removeEventListener("keydown", onKeyDown);
|
||||
window.removeEventListener("blur", onWindowClick);
|
||||
}
|
||||
}, []);
|
||||
// return () => {
|
||||
// window.removeEventListener("click", onWindowClick);
|
||||
// window.removeEventListener("keydown", onKeyDown);
|
||||
// window.removeEventListener("blur", onWindowClick);
|
||||
// };
|
||||
// }, []);
|
||||
|
||||
useEffect(() => {
|
||||
const attachmentsLoadingEvent = EV.subscribe(
|
||||
@@ -61,183 +61,206 @@ function PublishView(props) {
|
||||
border: "1px solid",
|
||||
borderColor: "border",
|
||||
borderRadius: "default",
|
||||
boxShadow: "0px 0px 15px 0px #00000011",
|
||||
...position,
|
||||
}}
|
||||
bg="background"
|
||||
p={2}
|
||||
// p={2}
|
||||
flexDirection="column"
|
||||
onClick={e => {
|
||||
e.stopPropagation()
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Text variant="body" fontSize="title" fontWeight="bold" color="primary">
|
||||
{noteTitle}
|
||||
</Text>
|
||||
{isPublishing ? (
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
my={50}
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text>Publishing note</Text>
|
||||
{processingStatus && (
|
||||
<Text variant="subBody" mt={1}>
|
||||
Downloading images ({processingStatus.current}/
|
||||
{processingStatus.total})
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
) : (
|
||||
<>
|
||||
{publishId ? (
|
||||
<Flex
|
||||
mt={1}
|
||||
p={1}
|
||||
sx={{
|
||||
border: "1px solid",
|
||||
borderColor: "primary",
|
||||
borderRadius: "default",
|
||||
}}
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Flex flexDirection="column" mr={2} overflow="hidden">
|
||||
<Text variant="body" fontWeight="bold">
|
||||
This note is published at:
|
||||
<Flex flexDirection={"column"} p={2}>
|
||||
<Text variant="body" fontSize="title" fontWeight="bold" color="primary">
|
||||
{noteTitle}
|
||||
</Text>
|
||||
{isPublishing ? (
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
my={50}
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text>Please wait...</Text>
|
||||
{processingStatus && (
|
||||
<Text variant="subBody" mt={1}>
|
||||
Downloading images ({processingStatus.current}/
|
||||
{processingStatus.total})
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
) : (
|
||||
<>
|
||||
{publishId ? (
|
||||
<Flex mt={1} flexDirection="column" overflow="hidden">
|
||||
<Text variant="body" color="fontTertiary" fontWeight="bold">
|
||||
Published at
|
||||
</Text>
|
||||
<Text
|
||||
variant="subBody"
|
||||
as="a"
|
||||
target="_blank"
|
||||
href={`https://monograph.notesnook.com/${publishId}`}
|
||||
<Flex
|
||||
sx={{
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
bg: "bgSecondary",
|
||||
mt: 1,
|
||||
p: 1,
|
||||
borderRadius: "default",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{`https://monograph.notesnook.com/${publishId}`}
|
||||
</Text>
|
||||
<Text
|
||||
variant="body"
|
||||
as="a"
|
||||
target="_blank"
|
||||
href={`https://monograph.notesnook.com/${publishId}`}
|
||||
sx={{
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
textDecoration: "none",
|
||||
overflow: "hidden",
|
||||
mr: 2,
|
||||
}}
|
||||
>
|
||||
{`https://monograph.notesnook.com/${publishId}`}
|
||||
</Text>
|
||||
<Button
|
||||
variant="anchor"
|
||||
className="copyPublishLink"
|
||||
onClick={() => {
|
||||
clipboard.writeText(
|
||||
`https://monograph.notesnook.com/${publishId}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Icon.Copy size={20} color="primary" />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button
|
||||
variant="anchor"
|
||||
className="copyPublishLink"
|
||||
onClick={() => {
|
||||
clipboard.writeText(
|
||||
`https://monograph.notesnook.com/${publishId}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Icon.Copy size={20} color="primary" />
|
||||
</Button>
|
||||
</Flex>
|
||||
) : (
|
||||
<>
|
||||
<Text variant="body" color="fontTertiary">
|
||||
This note will be published to a public URL.
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
<Toggle
|
||||
title="Self destruct?"
|
||||
onTip="Note will be automatically unpublished after first view."
|
||||
offTip="Note will stay published until manually unpublished."
|
||||
isToggled={selfDestruct}
|
||||
onToggled={() => setSelfDestruct((s) => !s)}
|
||||
/>
|
||||
<Toggle
|
||||
title="Password protect?"
|
||||
onTip="Protect published note with a password."
|
||||
offTip="Do not protect published note with a password."
|
||||
isToggled={isPasswordProtected}
|
||||
onToggled={() => setIsPasswordProtected((s) => !s)}
|
||||
/>
|
||||
{isPasswordProtected && (
|
||||
<Field
|
||||
autoFocus
|
||||
id="publishPassword"
|
||||
label="Password"
|
||||
helpText="Enter password to encrypt this note"
|
||||
required
|
||||
sx={{ my: 1 }}
|
||||
/>
|
||||
)}
|
||||
<Flex alignItems="center" justifyContent="space-evenly" mt={1}>
|
||||
<Button
|
||||
flex={1}
|
||||
mr={2}
|
||||
onClick={async () => {
|
||||
try {
|
||||
setIsPublishing(true);
|
||||
const password =
|
||||
document.getElementById("publishPassword")?.value;
|
||||
|
||||
const publishId = await db.monographs.publish(noteId, {
|
||||
selfDestruct,
|
||||
password,
|
||||
});
|
||||
setPublishId(publishId);
|
||||
showToast("success", "Note published.");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
showToast(
|
||||
"error",
|
||||
"Note could not be published: " + e.message
|
||||
);
|
||||
} finally {
|
||||
setIsPublishing(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isPublishing ? (
|
||||
<>
|
||||
<Icon.Loading color="static" />
|
||||
</>
|
||||
) : publishId ? (
|
||||
"Update"
|
||||
) : (
|
||||
"Publish"
|
||||
)}
|
||||
</Button>
|
||||
{publishId && (
|
||||
<Button
|
||||
flex={1}
|
||||
bg="errorBg"
|
||||
mr={2}
|
||||
color="error"
|
||||
onClick={async () => {
|
||||
try {
|
||||
setIsPublishing(true);
|
||||
await db.monographs.unpublish(noteId);
|
||||
setPublishId();
|
||||
onClose(true);
|
||||
showToast("success", "Note unpublished.");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
showToast(
|
||||
"error",
|
||||
"Note could not be unpublished: " + e.message
|
||||
);
|
||||
} finally {
|
||||
setIsPublishing(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Unpublish
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Text variant="body" color="fontTertiary">
|
||||
This note will be published to a public URL.
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
flex={1}
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
onClose(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
<Toggle
|
||||
title="Self destruct?"
|
||||
onTip="Note will be automatically unpublished after first view."
|
||||
offTip="Note will stay published until manually unpublished."
|
||||
isToggled={selfDestruct}
|
||||
onToggled={() => setSelfDestruct((s) => !s)}
|
||||
/>
|
||||
<Toggle
|
||||
title="Password protect?"
|
||||
onTip="Protect published note with a password."
|
||||
offTip="Do not protect published note with a password."
|
||||
isToggled={isPasswordProtected}
|
||||
onToggled={() => setIsPasswordProtected((s) => !s)}
|
||||
/>
|
||||
{isPasswordProtected && (
|
||||
<Field
|
||||
autoFocus
|
||||
id="publishPassword"
|
||||
placeholder="Enter password to encrypt this note"
|
||||
required
|
||||
sx={{ my: 1 }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
alignItems="center"
|
||||
justifyContent={"end"}
|
||||
bg="bgSecondary"
|
||||
p={1}
|
||||
px={2}
|
||||
>
|
||||
<Button
|
||||
variant="primary"
|
||||
color="primary"
|
||||
fontWeight="bold"
|
||||
bg={"transparent"}
|
||||
sx={{
|
||||
":hover": { bg: "bgSecondary" },
|
||||
}}
|
||||
onClick={async () => {
|
||||
try {
|
||||
setIsPublishing(true);
|
||||
const password =
|
||||
document.getElementById("publishPassword")?.value;
|
||||
|
||||
const publishId = await db.monographs.publish(noteId, {
|
||||
selfDestruct,
|
||||
password,
|
||||
});
|
||||
setPublishId(publishId);
|
||||
showToast("success", "Note published.");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
showToast("error", "Note could not be published: " + e.message);
|
||||
} finally {
|
||||
setIsPublishing(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isPublishing ? (
|
||||
<>
|
||||
<Icon.Loading color="static" />
|
||||
</>
|
||||
) : publishId ? (
|
||||
"Update"
|
||||
) : (
|
||||
"Publish"
|
||||
)}
|
||||
</Button>
|
||||
{publishId && (
|
||||
<Button
|
||||
variant="primary"
|
||||
color="error"
|
||||
fontWeight="bold"
|
||||
bg={"transparent"}
|
||||
sx={{
|
||||
":hover": { bg: "bgSecondary" },
|
||||
}}
|
||||
onClick={async () => {
|
||||
try {
|
||||
setIsPublishing(true);
|
||||
await db.monographs.unpublish(noteId);
|
||||
setPublishId();
|
||||
onClose(true);
|
||||
showToast("success", "Note unpublished.");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
showToast(
|
||||
"error",
|
||||
"Note could not be unpublished: " + e.message
|
||||
);
|
||||
} finally {
|
||||
setIsPublishing(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Unpublish
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="primary"
|
||||
data-test-id="dialog-no"
|
||||
color="text"
|
||||
fontWeight="bold"
|
||||
bg={"transparent"}
|
||||
sx={{
|
||||
":hover": { bg: "bgSecondary" },
|
||||
}}
|
||||
onClick={() => {
|
||||
onClose(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -258,8 +281,8 @@ export function showPublishView(noteId, location = "top") {
|
||||
<PublishView
|
||||
noteId={noteId}
|
||||
position={{
|
||||
top: location === "top" ? [0, 50, 50] : undefined,
|
||||
right: location === "top" ? [0, 20, 20] : undefined,
|
||||
top: location === "top" ? [0, 50, 60] : undefined,
|
||||
right: location === "top" ? [0, 20, 10] : undefined,
|
||||
bottom: location === "bottom" ? 0 : undefined,
|
||||
left: location === "bottom" ? 0 : undefined,
|
||||
}}
|
||||
@@ -273,11 +296,10 @@ export function showPublishView(noteId, location = "top") {
|
||||
return Promise.reject("No element with id 'dialogContainer'");
|
||||
}
|
||||
|
||||
|
||||
function onKeyDown(event) {
|
||||
if (event.keyCode === 27) closeOpenedDialog();
|
||||
}
|
||||
|
||||
function onWindowClick() {
|
||||
closeOpenedDialog()
|
||||
closeOpenedDialog();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user