mirror of
https://github.com/documenso/documenso.git
synced 2025-11-15 17:21:41 +10:00
feat: select signature color
This commit is contained in:
Catalin Pit
@ -140,6 +140,14 @@ msgstr "Genehmiger"
|
||||
msgid "Approving"
|
||||
msgstr "Genehmigung"
|
||||
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:270
|
||||
msgid "Black"
|
||||
msgstr ""
|
||||
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:286
|
||||
msgid "Blue"
|
||||
msgstr ""
|
||||
|
||||
#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:297
|
||||
#: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:58
|
||||
msgid "Cancel"
|
||||
@ -179,7 +187,7 @@ msgstr "Checkbox-Werte"
|
||||
msgid "Clear filters"
|
||||
msgstr "Filter löschen"
|
||||
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:256
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:308
|
||||
msgid "Clear Signature"
|
||||
msgstr "Unterschrift löschen"
|
||||
|
||||
@ -312,6 +320,10 @@ msgstr "Globale Empfängerauthentifizierung"
|
||||
msgid "Go Back"
|
||||
msgstr "Zurück"
|
||||
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:294
|
||||
msgid "Green"
|
||||
msgstr ""
|
||||
|
||||
#: packages/lib/constants/recipient-roles.ts:72
|
||||
msgid "I am a signer of this document"
|
||||
msgstr "Ich bin ein Unterzeichner dieses Dokuments"
|
||||
@ -477,6 +489,10 @@ msgstr "Erhält Kopie"
|
||||
msgid "Recipient action authentication"
|
||||
msgstr "Empfängeraktion Authentifizierung"
|
||||
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:278
|
||||
msgid "Red"
|
||||
msgstr ""
|
||||
|
||||
#: packages/ui/primitives/document-flow/add-settings.tsx:298
|
||||
#: packages/ui/primitives/template-flow/add-template-settings.tsx:332
|
||||
msgid "Redirect URL"
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -633,6 +633,14 @@ msgstr ""
|
||||
msgid "Billing"
|
||||
msgstr ""
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:207
|
||||
msgid "Black"
|
||||
msgstr ""
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:223
|
||||
msgid "Blue"
|
||||
msgstr ""
|
||||
|
||||
#: apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx:101
|
||||
msgid "Browser"
|
||||
msgstr ""
|
||||
@ -664,7 +672,7 @@ msgstr ""
|
||||
#: apps/web/src/app/(signing)/sign/[token]/document-action-auth-account.tsx:74
|
||||
#: apps/web/src/app/(signing)/sign/[token]/document-action-auth-passkey.tsx:164
|
||||
#: apps/web/src/app/(signing)/sign/[token]/document-action-auth-passkey.tsx:189
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:143
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:144
|
||||
#: apps/web/src/app/(signing)/sign/[token]/name-field.tsx:215
|
||||
#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:327
|
||||
#: apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx:110
|
||||
@ -751,7 +759,7 @@ msgid "Click to copy signing link for sending to recipient"
|
||||
msgstr ""
|
||||
|
||||
#: apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx:175
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:107
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:108
|
||||
msgid "Click to insert field"
|
||||
msgstr ""
|
||||
|
||||
@ -1604,6 +1612,10 @@ msgstr ""
|
||||
msgid "Go to your <0>public profile settings</0> to add documents."
|
||||
msgstr ""
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:231
|
||||
msgid "Green"
|
||||
msgstr ""
|
||||
|
||||
#: apps/web/src/app/(dashboard)/settings/profile/page.tsx:29
|
||||
msgid "Here you can edit your personal details."
|
||||
msgstr ""
|
||||
@ -2247,7 +2259,7 @@ msgstr ""
|
||||
msgid "Please enter a meaningful name for your token. This will help you identify it later."
|
||||
msgstr ""
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:127
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:128
|
||||
msgid "Please mark as viewed to complete"
|
||||
msgstr ""
|
||||
|
||||
@ -2412,6 +2424,10 @@ msgstr ""
|
||||
msgid "Recovery codes"
|
||||
msgstr ""
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:215
|
||||
msgid "Red"
|
||||
msgstr ""
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/complete/claim-account.tsx:78
|
||||
#: apps/web/src/components/forms/signup.tsx:93
|
||||
#: apps/web/src/components/forms/v2/signup.tsx:127
|
||||
|
||||
@ -135,6 +135,14 @@ msgstr "Approver"
|
||||
msgid "Approving"
|
||||
msgstr "Approving"
|
||||
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:270
|
||||
msgid "Black"
|
||||
msgstr "Black"
|
||||
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:286
|
||||
msgid "Blue"
|
||||
msgstr "Blue"
|
||||
|
||||
#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:297
|
||||
#: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:58
|
||||
msgid "Cancel"
|
||||
@ -174,7 +182,7 @@ msgstr "Checkbox values"
|
||||
msgid "Clear filters"
|
||||
msgstr "Clear filters"
|
||||
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:256
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:308
|
||||
msgid "Clear Signature"
|
||||
msgstr "Clear Signature"
|
||||
|
||||
@ -307,6 +315,10 @@ msgstr "Global recipient action authentication"
|
||||
msgid "Go Back"
|
||||
msgstr "Go Back"
|
||||
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:294
|
||||
msgid "Green"
|
||||
msgstr "Green"
|
||||
|
||||
#: packages/lib/constants/recipient-roles.ts:72
|
||||
msgid "I am a signer of this document"
|
||||
msgstr "I am a signer of this document"
|
||||
@ -472,6 +484,10 @@ msgstr "Receives copy"
|
||||
msgid "Recipient action authentication"
|
||||
msgstr "Recipient action authentication"
|
||||
|
||||
#: packages/ui/primitives/signature-pad/signature-pad.tsx:278
|
||||
msgid "Red"
|
||||
msgstr "Red"
|
||||
|
||||
#: packages/ui/primitives/document-flow/add-settings.tsx:298
|
||||
#: packages/ui/primitives/template-flow/add-template-settings.tsx:332
|
||||
msgid "Redirect URL"
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -628,6 +628,14 @@ msgstr "Basic details"
|
||||
msgid "Billing"
|
||||
msgstr "Billing"
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:207
|
||||
msgid "Black"
|
||||
msgstr "Black"
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:223
|
||||
msgid "Blue"
|
||||
msgstr "Blue"
|
||||
|
||||
#: apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx:101
|
||||
msgid "Browser"
|
||||
msgstr "Browser"
|
||||
@ -659,7 +667,7 @@ msgstr "By enabling 2FA, you will be required to enter a code from your authenti
|
||||
#: apps/web/src/app/(signing)/sign/[token]/document-action-auth-account.tsx:74
|
||||
#: apps/web/src/app/(signing)/sign/[token]/document-action-auth-passkey.tsx:164
|
||||
#: apps/web/src/app/(signing)/sign/[token]/document-action-auth-passkey.tsx:189
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:143
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:144
|
||||
#: apps/web/src/app/(signing)/sign/[token]/name-field.tsx:215
|
||||
#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:327
|
||||
#: apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx:110
|
||||
@ -746,7 +754,7 @@ msgid "Click to copy signing link for sending to recipient"
|
||||
msgstr "Click to copy signing link for sending to recipient"
|
||||
|
||||
#: apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx:175
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:107
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:108
|
||||
msgid "Click to insert field"
|
||||
msgstr "Click to insert field"
|
||||
|
||||
@ -1599,6 +1607,10 @@ msgstr "Go to owner"
|
||||
msgid "Go to your <0>public profile settings</0> to add documents."
|
||||
msgstr "Go to your <0>public profile settings</0> to add documents."
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:231
|
||||
msgid "Green"
|
||||
msgstr "Green"
|
||||
|
||||
#: apps/web/src/app/(dashboard)/settings/profile/page.tsx:29
|
||||
msgid "Here you can edit your personal details."
|
||||
msgstr "Here you can edit your personal details."
|
||||
@ -2242,7 +2254,7 @@ msgstr "Please contact support if you would like to revert this action."
|
||||
msgid "Please enter a meaningful name for your token. This will help you identify it later."
|
||||
msgstr "Please enter a meaningful name for your token. This will help you identify it later."
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:127
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:128
|
||||
msgid "Please mark as viewed to complete"
|
||||
msgstr "Please mark as viewed to complete"
|
||||
|
||||
@ -2407,6 +2419,10 @@ msgstr "Recovery code copied"
|
||||
msgid "Recovery codes"
|
||||
msgstr "Recovery codes"
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/form.tsx:215
|
||||
msgid "Red"
|
||||
msgstr "Red"
|
||||
|
||||
#: apps/web/src/app/(signing)/sign/[token]/complete/claim-account.tsx:78
|
||||
#: apps/web/src/components/forms/signup.tsx:93
|
||||
#: apps/web/src/components/forms/v2/signup.tsx:127
|
||||
|
||||
@ -9,6 +9,13 @@ import type { StrokeOptions } from 'perfect-freehand';
|
||||
import { getStroke } from 'perfect-freehand';
|
||||
|
||||
import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@documenso/ui/primitives/select';
|
||||
|
||||
import { cn } from '../../lib/utils';
|
||||
import { getSvgPathFromStroke } from './helper';
|
||||
@ -36,6 +43,7 @@ export const SignaturePad = ({
|
||||
const [isPressed, setIsPressed] = useState(false);
|
||||
const [lines, setLines] = useState<Point[][]>([]);
|
||||
const [currentLine, setCurrentLine] = useState<Point[]>([]);
|
||||
const [selectedColor, setSelectedColor] = useState('black');
|
||||
|
||||
const perfectFreehandOptions = useMemo(() => {
|
||||
const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
|
||||
@ -85,6 +93,7 @@ export const SignaturePad = ({
|
||||
ctx.restore();
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
ctx.fillStyle = selectedColor;
|
||||
|
||||
lines.forEach((line) => {
|
||||
const pathData = new Path2D(
|
||||
@ -129,6 +138,7 @@ export const SignaturePad = ({
|
||||
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
ctx.fillStyle = selectedColor;
|
||||
|
||||
newLines.forEach((line) => {
|
||||
const pathData = new Path2D(
|
||||
@ -237,7 +247,7 @@ export const SignaturePad = ({
|
||||
>
|
||||
<canvas
|
||||
ref={$el}
|
||||
className={cn('relative block dark:invert', className)}
|
||||
className={cn('relative block', className)}
|
||||
style={{ touchAction: 'none' }}
|
||||
onPointerMove={(event) => onMouseMove(event)}
|
||||
onPointerDown={(event) => onMouseDown(event)}
|
||||
@ -247,6 +257,48 @@ export const SignaturePad = ({
|
||||
{...props}
|
||||
/>
|
||||
|
||||
<div className="absolute right-2 top-2">
|
||||
<Select onValueChange={(value) => setSelectedColor(value)}>
|
||||
<SelectTrigger className="bg-background w-[60px]">
|
||||
<SelectValue placeholder="Color" />
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectContent align="end">
|
||||
<SelectItem value="black">
|
||||
<div className="flex items-center">
|
||||
<div className="flex w-[150px] items-center">
|
||||
<Trans>Black</Trans>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
|
||||
<SelectItem value="red">
|
||||
<div className="flex items-center">
|
||||
<div className="flex w-[150px] items-center">
|
||||
<Trans>Red</Trans>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
|
||||
<SelectItem value="blue">
|
||||
<div className="flex items-center">
|
||||
<div className="flex w-[150px] items-center">
|
||||
<Trans>Blue</Trans>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
|
||||
<SelectItem value="green">
|
||||
<div className="flex items-center">
|
||||
<div className="flex w-[150px] items-center">
|
||||
<Trans>Green</Trans>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-4 right-4 flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user