Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-12 15:53:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

Adds tooltip to recipient action buttons

Browse Source
This commit is contained in:
Piyush Maurya
2023-05-11 12:15:41 +05:30
parent 012d2a9a09
commit 825231fe2a
5 changed files with 87 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web/pages/documents.tsx
View File

@ -303,16 +303,17 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</td>
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<div>
<IconButton
icon={PencilSquareIcon}
className="mr-2"
onClick={(event: any) => {
event.preventDefault();
event.stopPropagation();
router.push("/documents/" + document.id);
}}
disabled={document.status === "COMPLETED"}
/>
{document.status !== "COMPLETED" && (
<IconButton
icon={PencilSquareIcon}
className="mr-2"
onClick={(event: any) => {
event.preventDefault();
event.stopPropagation();
router.push("/documents/" + document.id);
}}
/>
)}
<IconButton
icon={ArrowDownTrayIcon}
className="mr-2"

72
apps/web/pages/documents/[id]/recipients.tsx
View File

@ -4,7 +4,7 @@ import { NEXT_PUBLIC_WEBAPP_URL, classNames } from "@documenso/lib";
import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api";
import { getDocument } from "@documenso/lib/query";
import { getUserFromToken } from "@documenso/lib/server";
import { Breadcrumb, Button, Dialog, IconButton } from "@documenso/ui";
import { Breadcrumb, Button, Dialog, IconButton, Tooltip } from "@documenso/ui";
import Layout from "../../../components/layout";
import { NextPageWithLayout } from "../../_app";
import {
@ -264,38 +264,46 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</div>
{props.document.status !== DocumentStatus.COMPLETED && (
<div className="mr-1 flex">
<IconButton
icon={PaperAirplaneIcon}
disabled={
!item.id ||
item.sendStatus !== "SENT" ||
item.signingStatus === "SIGNED" ||
loading
}
color="secondary"
className="my-auto mr-4 h-9"
onClick={() => {
if (confirm("Resend this signing request?")) {
setLoading(true);
sendSigningRequests(props.document, [item.id]).finally(() => {
setLoading(false);
});
<Tooltip label="Resend">
<IconButton
icon={PaperAirplaneIcon}
disabled={
!item.id ||
item.sendStatus !== "SENT" ||
item.signingStatus === "SIGNED" ||
loading
}
}}>
Resend
</IconButton>
<IconButton
icon={TrashIcon}
disabled={!item.id || item.sendStatus === "SENT" || loading}
onClick={() => {
const removedItem = { ...fields }[index];
remove(index);
deleteRecipient(item)?.catch((err) => {
append(removedItem);
});
}}
className="group-hover:text-neon-dark group-hover:disabled:text-gray-400"
/>
className="my-auto mr-4 h-9"
onClick={(event: any) => {
event.preventDefault();
event.stopPropagation();
if (confirm("Resend this signing request?")) {
setLoading(true);
sendSigningRequests(props.document, [item.id]).finally(() => {
setLoading(false);
});
}
}}>
</IconButton>
</Tooltip>
<Tooltip label="Delete">
<IconButton
icon={TrashIcon}
disabled={!item.id || item.sendStatus === "SENT" || loading}
onClick={(event: any) => {
event.preventDefault();
event.stopPropagation();
if (confirm("Delete this signing request?")) {
const removedItem = { ...fields }[index];
remove(index);
deleteRecipient(item)?.catch((err) => {
append(removedItem);
});
}
}}
className="group-hover:text-neon-dark group-hover:disabled:text-gray-400"
/>
</Tooltip>
</div>
)}
</div>

34
packages/ui/components/tooltip/Tooltip.tsx Normal file
View File

@ -0,0 +1,34 @@
import React, { useState } from "react";
export function Tooltip(props: any) {
let timeout: NodeJS.Timeout;
const [active, setActive] = useState(false);
const showTip = () => {
timeout = setTimeout(() => {
setActive(true);
}, props.delay || 40);
};
const hideTip = () => {
clearInterval(timeout);
setActive(false);
};
return (
<div
className="relative"
onPointerEnter={showTip}
onPointerLeave={hideTip}
>
{props.children}
{active && (
<div className="absolute left-1/4 -translate-x-1/2 bottom-9 transform px-4">
<span className="text-xs inline-block py-1 px-2 rounded text-neon-800 bg-neon-200">
{props.label}
</span>
</div>
)}
</div>
);
};

1
packages/ui/components/tooltip/index.ts Normal file
View File

@ -0,0 +1 @@
export { Tooltip } from "./Tooltip";

1
packages/ui/index.ts
View File

@ -2,3 +2,4 @@ export { Button, IconButton } from "./components/button/index";
export { SelectBox } from "./components/selectBox/index";
export { Breadcrumb } from "./components/breadcrumb/index";
export { Dialog } from "./components/dialog/index";
export { Tooltip } from "./components/tooltip/index";