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

fix: add field drag drop colors

Browse Source
This commit is contained in:
David Nguyen
2025-11-17 16:47:33 +11:00
parent 6aa56fe7e0
commit f26871662e
3 changed files with 57 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
View File

@ -278,8 +278,20 @@ export const EnvelopeEditorFieldDragDrop = ({
onMouseDown={() => setSelectedField(field.type)} onMouseDown={() => setSelectedField(field.type)}
data-selected={selectedField === field.type ? true : undefined} data-selected={selectedField === field.type ? true : undefined}
className={cn( className={cn(
'border-border group flex h-12 cursor-pointer items-center justify-center rounded-lg border px-4 transition-colors', 'group flex h-12 cursor-pointer items-center justify-center rounded-lg border px-4 transition-colors',
RECIPIENT_COLOR_STYLES[selectedRecipientColor].fieldButton, RECIPIENT_COLOR_STYLES[selectedRecipientColor].fieldButton,
{
'text-recipient-green border-recipient-green/30':
selectedRecipientColor === 'green',
'text-recipient-blue border-recipient-blue/30': selectedRecipientColor === 'blue',
'text-recipient-purple border-recipient-purple/30':
selectedRecipientColor === 'purple',
'text-recipient-orange border-recipient-orange/30':
selectedRecipientColor === 'orange',
'text-recipient-yellow border-recipient-yellow/30':
selectedRecipientColor === 'yellow',
'text-recipient-pink border-recipient-pink/30': selectedRecipientColor === 'pink',
},
)} )}
> >
<p <p
@ -287,12 +299,12 @@ export const EnvelopeEditorFieldDragDrop = ({
'text-muted-foreground font-noto group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal', 'text-muted-foreground font-noto group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
field.className, field.className,
{ {
'group-hover:text-recipient-green': selectedRecipientColor === 'green', 'text-recipient-green': selectedRecipientColor === 'green',
'group-hover:text-recipient-blue': selectedRecipientColor === 'blue', 'text-recipient-blue': selectedRecipientColor === 'blue',
'group-hover:text-recipient-purple': selectedRecipientColor === 'purple', 'text-recipient-purple': selectedRecipientColor === 'purple',
'group-hover:text-recipient-orange': selectedRecipientColor === 'orange', 'text-recipient-orange': selectedRecipientColor === 'orange',
'group-hover:text-recipient-yellow': selectedRecipientColor === 'yellow', 'text-recipient-yellow': selectedRecipientColor === 'yellow',
'group-hover:text-recipient-pink': selectedRecipientColor === 'pink', 'text-recipient-pink': selectedRecipientColor === 'pink',
}, },
)} )}
> >

54
apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
View File

@ -106,6 +106,13 @@ export const EnvelopeEditorFieldsPage = () => {
editorFields.setSelectedRecipient(firstSelectableRecipient?.id ?? null); editorFields.setSelectedRecipient(firstSelectableRecipient?.id ?? null);
}, []); }, []);
const canRecipientBeModified = useMemo(
() =>
editorFields.selectedRecipient !== null &&
canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields),
[editorFields.selectedRecipient, envelope.fields],
);
return ( return (
<div className="relative flex h-full"> <div className="relative flex h-full">
<div className="flex w-full flex-col overflow-y-auto"> <div className="flex w-full flex-col overflow-y-auto">
@ -175,32 +182,35 @@ export const EnvelopeEditorFieldsPage = () => {
align="end" align="end"
/> />
{editorFields.selectedRecipient && {!canRecipientBeModified && (
!canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && ( <Alert className="mt-4" variant="warning">
<Alert className="mt-4" variant="warning"> <AlertDescription>
<AlertDescription> <Trans>
<Trans> This recipient can no longer be modified as they have signed a field, or
This recipient can no longer be modified as they have signed a field, or completed the document.
completed the document. </Trans>
</Trans> </AlertDescription>
</AlertDescription> </Alert>
</Alert> )}
)}
</section> </section>
<Separator className="my-4" /> {canRecipientBeModified && (
<>
<Separator className="my-4" />
{/* Add fields section. */} {/* Add fields section. */}
<section className="px-4"> <section className="px-4">
<h3 className="text-foreground mb-2 text-sm font-semibold"> <h3 className="text-foreground mb-2 text-sm font-semibold">
<Trans>Add Fields</Trans> <Trans>Add Fields</Trans>
</h3> </h3>
<EnvelopeEditorFieldDragDrop <EnvelopeEditorFieldDragDrop
selectedRecipientId={editorFields.selectedRecipient?.id ?? null} selectedRecipientId={editorFields.selectedRecipient?.id ?? null}
selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null} selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
/> />
</section> </section>
</>
)}
{/* Field details section. */} {/* Field details section. */}
<AnimateGenericFadeInOut key={editorFields.selectedField?.formId}> <AnimateGenericFadeInOut key={editorFields.selectedField?.formId}>

12
packages/ui/lib/recipient-colors.ts
View File

@ -39,7 +39,7 @@ export const RECIPIENT_COLOR_STYLES = {
baseRing: 'rgba(122, 195, 85, 1)', baseRing: 'rgba(122, 195, 85, 1)',
baseRingHover: 'rgba(122, 195, 85, 0.3)', baseRingHover: 'rgba(122, 195, 85, 0.3)',
baseTextHover: 'rgba(122, 195, 85, 1)', baseTextHover: 'rgba(122, 195, 85, 1)',
fieldButton: 'hover:border-recipient-green hover:bg-recipient-green/30 ', fieldButton: 'hover:border-recipient-green bg-recipient-green/5 hover:bg-recipient-green/30 ',
fieldItem: 'group/field-item rounded-[2px]', fieldItem: 'group/field-item rounded-[2px]',
fieldItemInitials: 'group-hover/field-item:bg-recipient-green', fieldItemInitials: 'group-hover/field-item:bg-recipient-green',
comboxBoxTrigger: comboxBoxTrigger:
@ -52,7 +52,7 @@ export const RECIPIENT_COLOR_STYLES = {
baseRing: 'rgba(56, 123, 199, 1)', baseRing: 'rgba(56, 123, 199, 1)',
baseRingHover: 'rgba(56, 123, 199, 0.3)', baseRingHover: 'rgba(56, 123, 199, 0.3)',
baseTextHover: 'rgba(56, 123, 199, 1)', baseTextHover: 'rgba(56, 123, 199, 1)',
fieldButton: 'hover:border-recipient-blue hover:bg-recipient-blue/30', fieldButton: 'hover:border-recipient-blue bg-recipient-blue/5 hover:bg-recipient-blue/30',
fieldItem: 'group/field-item rounded-[2px]', fieldItem: 'group/field-item rounded-[2px]',
fieldItemInitials: 'group-hover/field-item:bg-recipient-blue', fieldItemInitials: 'group-hover/field-item:bg-recipient-blue',
comboxBoxTrigger: comboxBoxTrigger:
@ -65,7 +65,7 @@ export const RECIPIENT_COLOR_STYLES = {
baseRing: 'rgba(151, 71, 255, 1)', baseRing: 'rgba(151, 71, 255, 1)',
baseRingHover: 'rgba(151, 71, 255, 0.3)', baseRingHover: 'rgba(151, 71, 255, 0.3)',
baseTextHover: 'rgba(151, 71, 255, 1)', baseTextHover: 'rgba(151, 71, 255, 1)',
fieldButton: 'hover:border-recipient-purple hover:bg-recipient-purple/30', fieldButton: 'hover:border-recipient-purple bg-recipient-purple/5 hover:bg-recipient-purple/30',
fieldItem: 'group/field-item rounded-[2px]', fieldItem: 'group/field-item rounded-[2px]',
fieldItemInitials: 'group-hover/field-item:bg-recipient-purple', fieldItemInitials: 'group-hover/field-item:bg-recipient-purple',
comboxBoxTrigger: comboxBoxTrigger:
@ -78,7 +78,7 @@ export const RECIPIENT_COLOR_STYLES = {
baseRing: 'rgba(246, 159, 30, 1)', baseRing: 'rgba(246, 159, 30, 1)',
baseRingHover: 'rgba(246, 159, 30, 0.3)', baseRingHover: 'rgba(246, 159, 30, 0.3)',
baseTextHover: 'rgba(246, 159, 30, 1)', baseTextHover: 'rgba(246, 159, 30, 1)',
fieldButton: 'hover:border-recipient-orange hover:bg-recipient-orange/30', fieldButton: 'hover:border-recipient-orange bg-recipient-orange/5 hover:bg-recipient-orange/30',
fieldItem: 'group/field-item rounded-[2px]', fieldItem: 'group/field-item rounded-[2px]',
fieldItemInitials: 'group-hover/field-item:bg-recipient-orange', fieldItemInitials: 'group-hover/field-item:bg-recipient-orange',
comboxBoxTrigger: comboxBoxTrigger:
@ -91,7 +91,7 @@ export const RECIPIENT_COLOR_STYLES = {
baseRing: 'rgba(219, 186, 0, 1)', baseRing: 'rgba(219, 186, 0, 1)',
baseRingHover: 'rgba(219, 186, 0, 0.3)', baseRingHover: 'rgba(219, 186, 0, 0.3)',
baseTextHover: 'rgba(219, 186, 0, 1)', baseTextHover: 'rgba(219, 186, 0, 1)',
fieldButton: 'hover:border-recipient-yellow hover:bg-recipient-yellow/30', fieldButton: 'hover:border-recipient-yellow bg-recipient-yellow/5 hover:bg-recipient-yellow/30',
fieldItem: 'group/field-item rounded-[2px]', fieldItem: 'group/field-item rounded-[2px]',
fieldItemInitials: 'group-hover/field-item:bg-recipient-yellow', fieldItemInitials: 'group-hover/field-item:bg-recipient-yellow',
comboxBoxTrigger: comboxBoxTrigger:
@ -104,7 +104,7 @@ export const RECIPIENT_COLOR_STYLES = {
baseRing: 'rgba(217, 74, 186, 1)', baseRing: 'rgba(217, 74, 186, 1)',
baseRingHover: 'rgba(217, 74, 186, 0.3)', baseRingHover: 'rgba(217, 74, 186, 0.3)',
baseTextHover: 'rgba(217, 74, 186, 1)', baseTextHover: 'rgba(217, 74, 186, 1)',
fieldButton: 'hover:border-recipient-pink hover:bg-recipient-pink/30', fieldButton: 'hover:border-recipient-pink bg-recipient-pink/5 hover:bg-recipient-pink/30',
fieldItem: 'group/field-item rounded-[2px]', fieldItem: 'group/field-item rounded-[2px]',
fieldItemInitials: 'group-hover/field-item:bg-recipient-pink', fieldItemInitials: 'group-hover/field-item:bg-recipient-pink',
comboxBoxTrigger: comboxBoxTrigger: