Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 00:03:33 +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>
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"> <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<div> <div>
<IconButton {document.status !== "COMPLETED" && (
icon={PencilSquareIcon} <IconButton
className="mr-2" icon={PencilSquareIcon}
onClick={(event: any) => { className="mr-2"
event.preventDefault(); onClick={(event: any) => {
event.stopPropagation(); event.preventDefault();
router.push("/documents/" + document.id); event.stopPropagation();
}} router.push("/documents/" + document.id);
disabled={document.status === "COMPLETED"} }}
/> />
)}
<IconButton <IconButton
icon={ArrowDownTrayIcon} icon={ArrowDownTrayIcon}
className="mr-2" 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 { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api";
import { getDocument } from "@documenso/lib/query"; import { getDocument } from "@documenso/lib/query";
import { getUserFromToken } from "@documenso/lib/server"; 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 Layout from "../../../components/layout";
import { NextPageWithLayout } from "../../_app"; import { NextPageWithLayout } from "../../_app";
import { import {
@ -264,38 +264,46 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</div> </div>
{props.document.status !== DocumentStatus.COMPLETED && ( {props.document.status !== DocumentStatus.COMPLETED && (
<div className="mr-1 flex"> <div className="mr-1 flex">
<IconButton <Tooltip label="Resend">
icon={PaperAirplaneIcon} <IconButton
disabled={ icon={PaperAirplaneIcon}
!item.id || disabled={
item.sendStatus !== "SENT" || !item.id ||
item.signingStatus === "SIGNED" || item.sendStatus !== "SENT" ||
loading 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);
});
} }
}}> className="my-auto mr-4 h-9"
Resend onClick={(event: any) => {
</IconButton> event.preventDefault();
<IconButton event.stopPropagation();
icon={TrashIcon} if (confirm("Resend this signing request?")) {
disabled={!item.id || item.sendStatus === "SENT" || loading} setLoading(true);
onClick={() => { sendSigningRequests(props.document, [item.id]).finally(() => {
const removedItem = { ...fields }[index]; setLoading(false);
remove(index); });
deleteRecipient(item)?.catch((err) => { }
append(removedItem); }}>
}); </IconButton>
}} </Tooltip>
className="group-hover:text-neon-dark group-hover:disabled:text-gray-400" <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>
)} )}
</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 { SelectBox } from "./components/selectBox/index";
export { Breadcrumb } from "./components/breadcrumb/index"; export { Breadcrumb } from "./components/breadcrumb/index";
export { Dialog } from "./components/dialog/index"; export { Dialog } from "./components/dialog/index";
export { Tooltip } from "./components/tooltip/index";