From 392886ef60c368445e8243bdf3a5f901192565d0 Mon Sep 17 00:00:00 2001 From: EthanHealy01 Date: Mon, 15 Sep 2025 15:55:51 +0100 Subject: [PATCH] change requests to change from 'advanced' -> 'settings' and to use tooltips rather than grey text below inputs. --- .../public/locales/en-GB/translation.json | 45 ++++++++++-- .../public/locales/en-US/translation.json | 45 ++++++++++-- .../removeBlanks/RemoveBlanksSettings.tsx | 69 +++++++------------ .../tooltips/useRemoveBlanksTips.ts | 41 +++++++++++ frontend/src/tools/RemoveBlanks.tsx | 19 ++--- 5 files changed, 157 insertions(+), 62 deletions(-) create mode 100644 frontend/src/components/tooltips/useRemoveBlanksTips.ts diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index 6ba7c83ba..2b39677b1 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/frontend/public/locales/en-GB/translation.json @@ -1383,11 +1383,46 @@ "tags": "cleanup,streamline,non-content,organize", "title": "Remove Blanks", "header": "Remove Blank Pages", - "threshold": "Pixel Whiteness Threshold:", - "thresholdDesc": "Threshold for determining how white a white pixel must be to be classed as 'White'. 0 = Black, 255 pure white.", - "whitePercent": "White Percent (%):", - "whitePercentDesc": "Percent of page that must be 'white' pixels to be removed", - "submit": "Remove Blanks" + "settings": { + "title": "Settings" + }, + "threshold": { + "label": "Pixel Whiteness Threshold" + }, + "whitePercent": { + "label": "White Percentage Threshold", + "unit": "%" + }, + "includeBlankPages": { + "label": "Include detected blank pages" + }, + "tooltip": { + "header": { + "title": "Remove Blank Pages Settings" + }, + "threshold": { + "title": "Pixel Whiteness Threshold", + "text": "Controls how white a pixel must be to be considered 'white'. This helps determine what counts as a blank area on the page.", + "bullet1": "0 = Pure black (most restrictive)", + "bullet2": "128 = Medium grey", + "bullet3": "255 = Pure white (least restrictive)" + }, + "whitePercent": { + "title": "White Percentage Threshold", + "text": "Sets the minimum percentage of white pixels required for a page to be considered blank and removed.", + "bullet1": "Lower values (e.g., 80%) = More pages removed", + "bullet2": "Higher values (e.g., 95%) = Only very blank pages removed", + "bullet3": "Use higher values for documents with light backgrounds" + }, + "includeBlankPages": { + "title": "Include Detected Blank Pages", + "text": "When enabled, creates a separate PDF containing all the blank pages that were detected and removed from the original document.", + "bullet1": "Useful for reviewing what was removed", + "bullet2": "Helps verify the detection accuracy", + "bullet3": "Can be disabled to reduce output file size" + } + }, + "submit": "Remove blank pages" }, "removeAnnotations": { "tags": "comments,highlight,notes,markup,remove", diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json index 4b93181b8..07b5041b4 100644 --- a/frontend/public/locales/en-US/translation.json +++ b/frontend/public/locales/en-US/translation.json @@ -1013,11 +1013,46 @@ "tags": "cleanup,streamline,non-content,organize", "title": "Remove Blanks", "header": "Remove Blank Pages", - "threshold": "Pixel Whiteness Threshold:", - "thresholdDesc": "Threshold for determining how white a white pixel must be to be classed as 'White'. 0 = Black, 255 pure white.", - "whitePercent": "White Percent (%):", - "whitePercentDesc": "Percent of page that must be 'white' pixels to be removed", - "submit": "Remove Blanks" + "settings": { + "title": "Settings" + }, + "threshold": { + "label": "Pixel Whiteness Threshold" + }, + "whitePercent": { + "label": "White Percentage Threshold", + "unit": "%" + }, + "includeBlankPages": { + "label": "Include detected blank pages" + }, + "tooltip": { + "header": { + "title": "Remove Blank Pages Settings" + }, + "threshold": { + "title": "Pixel Whiteness Threshold", + "text": "Controls how white a pixel must be to be considered 'white'. This helps determine what counts as a blank area on the page.", + "bullet1": "0 = Pure black (most restrictive)", + "bullet2": "128 = Medium gray", + "bullet3": "255 = Pure white (least restrictive)" + }, + "whitePercent": { + "title": "White Percentage Threshold", + "text": "Sets the minimum percentage of white pixels required for a page to be considered blank and removed.", + "bullet1": "Lower values (e.g., 80%) = More pages removed", + "bullet2": "Higher values (e.g., 95%) = Only very blank pages removed", + "bullet3": "Use higher values for documents with light backgrounds" + }, + "includeBlankPages": { + "title": "Include Detected Blank Pages", + "text": "When enabled, creates a separate PDF containing all the blank pages that were detected and removed from the original document.", + "bullet1": "Useful for reviewing what was removed", + "bullet2": "Helps verify the detection accuracy", + "bullet3": "Can be disabled to reduce output file size" + } + }, + "submit": "Remove blank pages" }, "removeAnnotations": { "tags": "comments,highlight,notes,markup,remove", diff --git a/frontend/src/components/tools/removeBlanks/RemoveBlanksSettings.tsx b/frontend/src/components/tools/removeBlanks/RemoveBlanksSettings.tsx index f40435267..6d096606f 100644 --- a/frontend/src/components/tools/removeBlanks/RemoveBlanksSettings.tsx +++ b/frontend/src/components/tools/removeBlanks/RemoveBlanksSettings.tsx @@ -1,4 +1,4 @@ -import { Stack, Text, Checkbox } from "@mantine/core"; +import { Stack, Checkbox } from "@mantine/core"; import { useTranslation } from "react-i18next"; import NumberInputWithUnit from "../shared/NumberInputWithUnit"; import { RemoveBlanksParameters } from "../../../hooks/tools/removeBlanks/useRemoveBlanksParameters"; @@ -14,51 +14,32 @@ const RemoveBlanksSettings = ({ parameters, onParameterChange, disabled = false return ( - - onParameterChange('threshold', typeof v === 'string' ? Number(v) : v)} - unit={t('removeBlanks.threshold.unit', '')} - min={0} - max={255} - disabled={disabled} - /> - - {t('removeBlanks.threshold.desc', "Threshold for determining how white a white pixel must be to be classed as 'White'. 0 = Black, 255 pure white.")} - - + onParameterChange('threshold', typeof v === 'string' ? Number(v) : v)} + unit={t('removeBlanks.threshold.unit', '')} + min={0} + max={255} + disabled={disabled} + /> - - onParameterChange('whitePercent', typeof v === 'string' ? Number(v) : v)} - unit={t('removeBlanks.whitePercent.unit', '%')} - min={0.1} - max={100} - disabled={disabled} - /> - - {t('removeBlanks.whitePercent.desc', "Percent of page that must be 'white' pixels to be removed")} - - + onParameterChange('whitePercent', typeof v === 'string' ? Number(v) : v)} + unit={t('removeBlanks.whitePercent.unit', '%')} + min={0.1} + max={100} + disabled={disabled} + /> - - onParameterChange('includeBlankPages', event.currentTarget.checked)} - disabled={disabled} - label={ -
- {t('removeBlanks.includeBlankPages.label', 'Include detected blank pages')} - - {t('removeBlanks.includeBlankPages.desc', 'Include the detected blank pages as a separate PDF in the output')} - -
- } - /> - + onParameterChange('includeBlankPages', event.currentTarget.checked)} + disabled={disabled} + label={t('removeBlanks.includeBlankPages.label', 'Include detected blank pages')} + /> ); }; diff --git a/frontend/src/components/tooltips/useRemoveBlanksTips.ts b/frontend/src/components/tooltips/useRemoveBlanksTips.ts new file mode 100644 index 000000000..a011bd4ee --- /dev/null +++ b/frontend/src/components/tooltips/useRemoveBlanksTips.ts @@ -0,0 +1,41 @@ +import { useTranslation } from 'react-i18next'; +import { TooltipContent } from '../../types/tips'; + +export const useRemoveBlanksTips = (): TooltipContent => { + const { t } = useTranslation(); + + return { + header: { + title: t("removeBlanks.tooltip.header.title", "Remove Blank Pages Settings"), + }, + tips: [ + { + title: t("removeBlanks.tooltip.threshold.title", "Pixel Whiteness Threshold"), + description: t("removeBlanks.tooltip.threshold.text", "Controls how white a pixel must be to be considered 'white'. This helps determine what counts as a blank area on the page."), + bullets: [ + t("removeBlanks.tooltip.threshold.bullet1", "0 = Pure black (most restrictive)"), + t("removeBlanks.tooltip.threshold.bullet2", "128 = Medium gray"), + t("removeBlanks.tooltip.threshold.bullet3", "255 = Pure white (least restrictive)") + ] + }, + { + title: t("removeBlanks.tooltip.whitePercent.title", "White Percentage Threshold"), + description: t("removeBlanks.tooltip.whitePercent.text", "Sets the minimum percentage of white pixels required for a page to be considered blank and removed."), + bullets: [ + t("removeBlanks.tooltip.whitePercent.bullet1", "Lower values (e.g., 80%) = More pages removed"), + t("removeBlanks.tooltip.whitePercent.bullet2", "Higher values (e.g., 95%) = Only very blank pages removed"), + t("removeBlanks.tooltip.whitePercent.bullet3", "Use higher values for documents with light backgrounds") + ] + }, + { + title: t("removeBlanks.tooltip.includeBlankPages.title", "Include Detected Blank Pages"), + description: t("removeBlanks.tooltip.includeBlankPages.text", "When enabled, creates a separate PDF containing all the blank pages that were detected and removed from the original document."), + bullets: [ + t("removeBlanks.tooltip.includeBlankPages.bullet1", "Useful for reviewing what was removed"), + t("removeBlanks.tooltip.includeBlankPages.bullet2", "Helps verify the detection accuracy"), + t("removeBlanks.tooltip.includeBlankPages.bullet3", "Can be disabled to reduce output file size") + ] + } + ] + }; +}; diff --git a/frontend/src/tools/RemoveBlanks.tsx b/frontend/src/tools/RemoveBlanks.tsx index c13b1a38d..89b0a84fb 100644 --- a/frontend/src/tools/RemoveBlanks.tsx +++ b/frontend/src/tools/RemoveBlanks.tsx @@ -6,9 +6,11 @@ import { useBaseTool } from "../hooks/tools/shared/useBaseTool"; import { useRemoveBlanksParameters } from "../hooks/tools/removeBlanks/useRemoveBlanksParameters"; import { useRemoveBlanksOperation } from "../hooks/tools/removeBlanks/useRemoveBlanksOperation"; import RemoveBlanksSettings from "../components/tools/removeBlanks/RemoveBlanksSettings"; +import { useRemoveBlanksTips } from "../components/tooltips/useRemoveBlanksTips"; const RemoveBlanks = (props: BaseToolProps) => { const { t } = useTranslation(); + const tooltipContent = useRemoveBlanksTips(); const base = useBaseTool( 'remove-blanks', @@ -18,12 +20,12 @@ const RemoveBlanks = (props: BaseToolProps) => { ); // Step expansion state management - const [expandedStep, setExpandedStep] = useState<"files" | "advanced" | null>("files"); + const [expandedStep, setExpandedStep] = useState<"files" | "settings" | null>("files"); - // Auto-expand advanced when files are selected + // Auto-expand settings when files are selected useEffect(() => { if (base.selectedFiles.length > 0 && expandedStep === "files") { - setExpandedStep("advanced"); + setExpandedStep("settings"); } }, [base.selectedFiles.length, expandedStep]); @@ -42,12 +44,12 @@ const RemoveBlanks = (props: BaseToolProps) => { /> ); - const handleAdvancedClick = () => { + const handleSettingsClick = () => { if (base.hasResults) { base.handleSettingsReset(); } else { if (!base.hasFiles) return; - setExpandedStep(expandedStep === "advanced" ? null : "advanced"); + setExpandedStep(expandedStep === "settings" ? null : "settings"); } }; @@ -58,10 +60,11 @@ const RemoveBlanks = (props: BaseToolProps) => { }, steps: [ { - title: t("removeBlanks.advanced.title", "Advanced"), - isCollapsed: expandedStep !== "advanced", - onCollapsedClick: handleAdvancedClick, + title: t("removeBlanks.settings.title", "Settings"), + isCollapsed: expandedStep !== "settings", + onCollapsedClick: handleSettingsClick, content: settingsContent, + tooltip: tooltipContent, }, ], executeButton: {