Skip to content

feat: scrollable link option panels #1430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mfts merged 3 commits into from
Jan 3, 2025
Merged

feat: scrollable link option panels #1430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b566139
fix: make watermark panel scrollable
mfts Jan 3, 2025
94f54f2
fix: make agreement panel scrollable
mfts Jan 3, 2025
513c908
refactor: change bottom padding on link sheet
mfts Jan 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 67 additions & 64 deletions components/links/link-sheet/agreement-panel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import DocumentUpload from "@/components/document-upload";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Sheet,
SheetContent,
Expand Down Expand Up @@ -151,7 +152,7 @@ export default function AgreementSheet({

return (
<Sheet open={isOpen} onOpenChange={setIsOpen}>
<SheetContent className="flex w-[85%] flex-col justify-between bg-background px-4 text-foreground sm:w-[500px] md:px-5">
<SheetContent className="flex h-full w-[85%] flex-col justify-between bg-background px-4 text-foreground sm:w-[500px] md:px-5">
<SheetHeader className="text-start">
<SheetTitle>Create a new agreement</SheetTitle>
<SheetDescription>
Expand All @@ -160,89 +161,91 @@ export default function AgreementSheet({
</SheetDescription>
</SheetHeader>

<form className="flex grow flex-col" onSubmit={handleSubmit}>
<div className="flex-grow space-y-6">
<div className="w-full space-y-2">
<Label htmlFor="name">Display name</Label>
<Input
className="flex w-full rounded-md border-0 bg-background py-1.5 text-foreground shadow-sm ring-1 ring-inset ring-input placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-gray-400 sm:text-sm sm:leading-6"
id="name"
type="text"
name="name"
required
autoComplete="off"
data-1p-ignore
placeholder="Standard NDA"
value={data.name || ""}
onChange={(e) =>
setData({
...data,
name: e.target.value,
})
}
/>
</div>

<div>
<LinkItem
title="Require viewer's name"
enabled={data.requireName}
action={() =>
setData({ ...data, requireName: !data.requireName })
}
/>
</div>

<div className="space-y-4">
<ScrollArea className="flex-1">
<form className="flex grow flex-col" onSubmit={handleSubmit}>
<div className="flex-grow space-y-6">
<div className="w-full space-y-2">
<Label htmlFor="link">Link to an agreement</Label>
<Label htmlFor="name">Display name</Label>
<Input
className="flex w-full rounded-md border-0 bg-background py-1.5 text-foreground shadow-sm ring-1 ring-inset ring-input placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-gray-400 sm:text-sm sm:leading-6"
id="link"
type="url"
pattern="https://.*"
name="link"
id="name"
type="text"
name="name"
required
autoComplete="off"
data-1p-ignore
placeholder="https://www.papermark.io/nda"
value={data.link || ""}
placeholder="Standard NDA"
value={data.name || ""}
onChange={(e) =>
setData({
...data,
link: e.target.value,
name: e.target.value,
})
}
onInvalid={(e) =>
e.currentTarget.setCustomValidity(
"Please enter a valid URL starting with https://",
)
/>
</div>

<div>
<LinkItem
title="Require viewer's name"
enabled={data.requireName}
action={() =>
setData({ ...data, requireName: !data.requireName })
}
/>
</div>

<div className="space-y-12">
<div className="space-y-2 pb-6">
<Label>Or upload an agreement</Label>
<div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<DocumentUpload
currentFile={currentFile}
setCurrentFile={setCurrentFile}
/>
<div className="space-y-4">
<div className="w-full space-y-2">
<Label htmlFor="link">Link to an agreement</Label>
<Input
className="flex w-full rounded-md border-0 bg-background py-1.5 text-foreground shadow-sm ring-1 ring-inset ring-input placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-gray-400 sm:text-sm sm:leading-6"
id="link"
type="url"
pattern="https://.*"
name="link"
required
autoComplete="off"
data-1p-ignore
placeholder="https://www.papermark.io/nda"
value={data.link || ""}
onChange={(e) =>
setData({
...data,
link: e.target.value,
})
}
onInvalid={(e) =>
e.currentTarget.setCustomValidity(
"Please enter a valid URL starting with https://",
)
}
/>
</div>

<div className="space-y-12">
<div className="space-y-2 pb-6">
<Label>Or upload an agreement</Label>
<div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<DocumentUpload
currentFile={currentFile}
setCurrentFile={setCurrentFile}
/>
</div>
</div>
</div>
</div>
</div>
</div>

<SheetFooter>
<div className="flex items-center">
<Button type="submit" loading={isLoading}>
Create Agreement
</Button>
</div>
</SheetFooter>
</form>
<SheetFooter className="flex-shrink-0">
<div className="flex items-center">
<Button type="submit" loading={isLoading}>
Create Agreement
</Button>
</div>
</SheetFooter>
</form>
</ScrollArea>
</SheetContent>
</Sheet>
);
Expand Down
4 changes: 2 additions & 2 deletions components/links/link-sheet/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ export default function LinkSheet({

<TabsContent value={LinkAudienceType.GENERAL}>
{/* GENERAL LINK */}
<div className="space-y-6 pb-[35%] pt-2">
<div className="space-y-6 pb-10 pt-2">
<div className="space-y-2">
<Label htmlFor="link-name">Link Name</Label>

Expand Down Expand Up @@ -341,7 +341,7 @@ export default function LinkSheet({

<TabsContent value={LinkAudienceType.GROUP}>
{/* GROUP LINK */}
<div className="space-y-6 pb-[35%] pt-2">
<div className="space-y-6 pb-10 pt-2">
<div className="space-y-2">
<div className="flex w-full items-center justify-between">
<Label htmlFor="group-id">Group </Label>
Expand Down
Loading
Loading