diff --git a/frontend/src/components/tools/addStamp/AddStampAutomationSettings.tsx b/frontend/src/components/tools/addStamp/AddStampAutomationSettings.tsx new file mode 100644 index 0000000000..25091d854e --- /dev/null +++ b/frontend/src/components/tools/addStamp/AddStampAutomationSettings.tsx @@ -0,0 +1,43 @@ +/** + * AddStampAutomationSettings - Used for automation only + * + * This component combines all stamp settings into a single step interface + * for use in the automation system. It includes setup and formatting + * settings in one unified component. + */ + +import { Stack } from "@mantine/core"; +import { AddStampParameters } from "./useAddStampParameters"; +import StampSetupSettings from "./StampSetupSettings"; +import StampPositionFormattingSettings from "./StampPositionFormattingSettings"; + +interface AddStampAutomationSettingsProps { + parameters: AddStampParameters; + onParameterChange: (key: K, value: AddStampParameters[K]) => void; + disabled?: boolean; +} + +const AddStampAutomationSettings = ({ parameters, onParameterChange, disabled = false }: AddStampAutomationSettingsProps) => { + return ( + + {/* Stamp Setup (Type, Text/Image, Page Selection) */} + + + {/* Position and Formatting Settings */} + {parameters.stampType && ( + + )} + + ); +}; + +export default AddStampAutomationSettings; diff --git a/frontend/src/components/tools/addStamp/StampPositionFormattingSettings.tsx b/frontend/src/components/tools/addStamp/StampPositionFormattingSettings.tsx new file mode 100644 index 0000000000..d1c0d0c9f2 --- /dev/null +++ b/frontend/src/components/tools/addStamp/StampPositionFormattingSettings.tsx @@ -0,0 +1,201 @@ +import { useTranslation } from "react-i18next"; +import { Group, Select, Stack, ColorInput, Button, Slider, Text, NumberInput } from "@mantine/core"; +import { AddStampParameters } from "./useAddStampParameters"; +import LocalIcon from "../../shared/LocalIcon"; +import styles from "./StampPreview.module.css"; +import { Tooltip } from "../../shared/Tooltip"; + +interface StampPositionFormattingSettingsProps { + parameters: AddStampParameters; + onParameterChange: (key: K, value: AddStampParameters[K]) => void; + disabled?: boolean; + showPositionGrid?: boolean; // When true, show the 9-position grid for automation +} + +const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabled = false, showPositionGrid = false }: StampPositionFormattingSettingsProps) => { + const { t } = useTranslation(); + + return ( + + {/* Position Grid - shown in automation settings */} + {showPositionGrid && ( + + {t('AddStampRequest.position', 'Stamp Position')} +
+ {Array.from({ length: 9 }).map((_, i) => { + const idx = (i + 1) as 1|2|3|4|5|6|7|8|9; + const selected = parameters.position === idx; + return ( + + ); + })} +
+
+ )} + {/* Icon pill buttons row */} +
+ + + + + + + + + +
+ + {/* Single slider bound to selected pill */} + {parameters._activePill === 'fontSize' && ( + + + {parameters.stampType === 'image' + ? t('AddStampRequest.imageSize', 'Image Size') + : t('AddStampRequest.fontSize', 'Font Size') + } + + + onParameterChange('fontSize', typeof v === 'number' ? v : 1)} + min={1} + max={400} + step={1} + size="sm" + className={styles.numberInput} + disabled={disabled} + /> + onParameterChange('fontSize', v as number)} + min={1} + max={400} + step={1} + className={styles.slider} + /> + + + )} + {parameters._activePill === 'rotation' && ( + + {t('AddStampRequest.rotation', 'Rotation')} + + onParameterChange('rotation', typeof v === 'number' ? v : 0)} + min={-180} + max={180} + step={1} + size="sm" + className={styles.numberInput} + hideControls + disabled={disabled} + /> + onParameterChange('rotation', v as number)} + min={-180} + max={180} + step={1} + className={styles.sliderWide} + /> + + + )} + {parameters._activePill === 'opacity' && ( + + {t('AddStampRequest.opacity', 'Opacity')} + + onParameterChange('opacity', typeof v === 'number' ? v : 0)} + min={0} + max={100} + step={1} + size="sm" + className={styles.numberInput} + disabled={disabled} + /> + onParameterChange('opacity', v as number)} + min={0} + max={100} + step={1} + className={styles.slider} + /> + + + )} + + {parameters.stampType !== 'image' && ( + onParameterChange('customColor', value)} + format="hex" + disabled={disabled} + /> + )} + + {/* Margin selection for text stamps */} + {parameters.stampType === 'text' && ( +