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

fix: z-index of field settings (#1469)

Browse Source
This commit is contained in:
Ephraim Duncan
2024-12-17 06:09:58 +00:00
committed by GitHub
parent 9502f4361d
commit c960a48b4f
3 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/primitives/document-flow/add-fields.tsx
View File

@ -129,6 +129,7 @@ export const AddFieldsFormPartial = ({
currentStep === 1 && typeof documentFlow.onBackStep === 'function' && canGoBack;
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
const [currentField, setCurrentField] = useState<FieldFormType>();
const [activeFieldId, setActiveFieldId] = useState<string | null>(null);
const form = useForm<TAddFieldsFormSchema>({
defaultValues: {
@ -652,6 +653,9 @@ export const AddFieldsFormPartial = ({
}}
hideRecipients={hideRecipients}
hasErrors={!!hasFieldError}
active={activeFieldId === field.formId}
onFieldActivate={() => setActiveFieldId(field.formId)}
onFieldDeactivate={() => setActiveFieldId(null)}
/>
);
})}

29
packages/ui/primitives/document-flow/field-item.tsx
View File

@ -47,6 +47,9 @@ export type FieldItemProps = {
recipientIndex?: number;
hideRecipients?: boolean;
hasErrors?: boolean;
active?: boolean;
onFieldActivate?: () => void;
onFieldDeactivate?: () => void;
};
export const FieldItem = ({
@ -67,8 +70,10 @@ export const FieldItem = ({
recipientIndex = 0,
hideRecipients = false,
hasErrors,
active,
onFieldActivate,
onFieldDeactivate,
}: FieldItemProps) => {
const [active, setActive] = useState(false);
const [coords, setCoords] = useState({
pageX: 0,
pageY: 0,
@ -150,6 +155,8 @@ export const FieldItem = ({
});
if (isOutsideOfField) {
setSettingsActive(false);
onFieldDeactivate?.();
onBlur?.();
}
};
@ -188,10 +195,12 @@ export const FieldItem = ({
return createPortal(
<Rnd
key={coords.pageX + coords.pageY + coords.pageHeight + coords.pageWidth}
className={cn('group z-20', {
className={cn('group', {
'pointer-events-none': passive,
'pointer-events-none cursor-not-allowed opacity-75': disabled,
'z-10': !active || disabled,
'z-50': active && !disabled,
'z-20': !active && !disabled,
'z-10': disabled,
})}
minHeight={fixedSize ? '' : minHeight || 'auto'}
minWidth={fixedSize ? '' : minWidth || 'auto'}
@ -202,15 +211,15 @@ export const FieldItem = ({
width: fixedSize ? '' : coords.pageWidth,
}}
bounds={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`}
onDragStart={() => setActive(true)}
onResizeStart={() => setActive(true)}
onDragStart={() => onFieldActivate?.()}
onResizeStart={() => onFieldActivate?.()}
enableResizing={!fixedSize}
onResizeStop={(_e, _d, ref) => {
setActive(false);
onFieldDeactivate?.();
onResize?.(ref);
}}
onDragStop={(_e, d) => {
setActive(false);
onFieldDeactivate?.();
onMove?.(d.node);
}}
>
@ -226,8 +235,10 @@ export const FieldItem = ({
!fixedSize && '[container-type:size]',
)}
data-error={hasErrors ? 'true' : undefined}
onClick={() => {
onClick={(e) => {
e.stopPropagation();
setSettingsActive((prev) => !prev);
onFieldActivate?.();
onFocus?.();
}}
ref={$el}
@ -264,7 +275,7 @@ export const FieldItem = ({
</div>
{!disabled && settingsActive && (
<div className="mt-1 flex justify-center">
<div className="z-[60] mt-1 flex justify-center">
<div className="dark:bg-background group flex items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5">
{advancedField && (
<button

4
packages/ui/primitives/template-flow/add-template-fields.tsx
View File

@ -100,6 +100,7 @@ export const AddTemplateFieldsFormPartial = ({
const { currentStep, totalSteps, previousStep } = useStep();
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
const [currentField, setCurrentField] = useState<FieldFormType>();
const [activeFieldId, setActiveFieldId] = useState<string | null>(null);
const form = useForm<TAddTemplateFieldsFormSchema>({
defaultValues: {
@ -475,6 +476,9 @@ export const AddTemplateFieldsFormPartial = ({
handleAdvancedSettings();
}}
hideRecipients={hideRecipients}
active={activeFieldId === field.formId}
onFieldActivate={() => setActiveFieldId(field.formId)}
onFieldDeactivate={() => setActiveFieldId(null)}
/>
);
})}