diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index 9d53d472a..2d52409ef 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/frontend/public/locales/en-GB/translation.json @@ -1912,7 +1912,36 @@ "tags": "trim,shrink,edit,shape", "title": "Crop", "header": "Crop PDF", - "submit": "Submit" + "submit": "Apply Crop", + "noFileSelected": "Select a PDF file to begin cropping", + "preview": { + "title": "Crop Area Selection" + }, + "reset": "Reset to full PDF", + "coordinates": { + "title": "Position and Size", + "x": "X Position", + "y": "Y Position", + "width": "Width", + "height": "Height" + }, + "error": { + "invalidArea": "Crop area extends beyond PDF boundaries", + "failed": "Failed to crop PDF" + }, + "steps": { + "selectArea": "Select Crop Area" + }, + "tooltip": { + "title": "How to Crop PDFs", + "description": "Select the area to crop from your PDF by dragging and resizing the blue overlay on the thumbnail.", + "drag": "Drag the overlay to move the crop area", + "resize": "Drag the corner and edge handles to resize", + "precision": "Use coordinate inputs for precise positioning" + }, + "results": { + "title": "Crop Results" + } }, "autoSplitPDF": { "tags": "QR-based,separate,scan-segment,organize", diff --git a/frontend/src/components/tools/crop/CropSettings.tsx b/frontend/src/components/tools/crop/CropSettings.tsx index e957936cd..dcfb3fcec 100644 --- a/frontend/src/components/tools/crop/CropSettings.tsx +++ b/frontend/src/components/tools/crop/CropSettings.tsx @@ -195,12 +195,12 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => { {/* Manual Coordinate Input */} - {t("crop.coordinates.title", "Precise Coordinates (PDF Points)")} + {t("crop.coordinates.title", "Position and Size")} handleCoordinateChange('x', value)} disabled={disabled} @@ -211,7 +211,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => { size="xs" /> handleCoordinateChange('y', value)} disabled={disabled} diff --git a/frontend/src/components/tooltips/useCropTooltips.ts b/frontend/src/components/tooltips/useCropTooltips.ts new file mode 100644 index 000000000..5ca0ebaec --- /dev/null +++ b/frontend/src/components/tooltips/useCropTooltips.ts @@ -0,0 +1,21 @@ +import { useTranslation } from 'react-i18next'; + +export function useCropTooltips() { + const { t } = useTranslation(); + + return { + header: { + title: t("crop.tooltip.title", "How to Crop PDFs") + }, + tips: [ + { + description: t("crop.tooltip.description", "Select the area to crop from your PDF by dragging and resizing the blue overlay on the thumbnail."), + bullets: [ + t("crop.tooltip.drag", "Drag the overlay to move the crop area"), + t("crop.tooltip.resize", "Drag the corner and edge handles to resize"), + t("crop.tooltip.precision", "Use coordinate inputs for precise positioning"), + ] + } + ] + }; +} diff --git a/frontend/src/tools/Crop.tsx b/frontend/src/tools/Crop.tsx index dd3185917..d185e3877 100644 --- a/frontend/src/tools/Crop.tsx +++ b/frontend/src/tools/Crop.tsx @@ -4,6 +4,7 @@ import CropSettings from "../components/tools/crop/CropSettings"; import { useCropParameters } from "../hooks/tools/crop/useCropParameters"; import { useCropOperation } from "../hooks/tools/crop/useCropOperation"; import { useBaseTool } from "../hooks/tools/shared/useBaseTool"; +import { useCropTooltips } from "../components/tooltips/useCropTooltips"; import { BaseToolProps, ToolComponent } from "../types/tool"; const Crop = (props: BaseToolProps) => { @@ -16,6 +17,8 @@ const Crop = (props: BaseToolProps) => { props ); + const tooltips = useCropTooltips(); + return createToolFlow({ files: { selectedFiles: base.selectedFiles, @@ -27,22 +30,7 @@ const Crop = (props: BaseToolProps) => { title: t("crop.steps.selectArea", "Select Crop Area"), isCollapsed: !base.hasFiles, // Collapsed until files selected onCollapsedClick: base.hasResults ? base.handleSettingsReset : undefined, - tooltip: { - content: ( -
-

{t("crop.tooltip.description", "Select the area to crop from your PDF by dragging and resizing the red overlay on the thumbnail.")}

-
- ), - tips: [ - t("crop.tooltip.drag", "Drag the overlay to move the crop area"), - t("crop.tooltip.resize", "Drag the corner and edge handles to resize"), - t("crop.tooltip.precision", "Use coordinate inputs for precise positioning"), - t("crop.tooltip.constraints", "Crop area is automatically constrained to PDF bounds") - ], - header: { - title: t("crop.tooltip.title", "How to Crop PDFs"), - } - }, + tooltip: tooltips, content: ( { }, ], executeButton: { - text: t("crop.submit", "Crop PDF"), + text: t("crop.submit", "Apply Crop"), loadingText: t("loading"), onClick: base.handleExecute, isVisible: !base.hasResults,