Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-08-02 13:48:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Seperate out components

Browse Source
This commit is contained in:
Connor Yoh 2025-07-23 16:55:13 +01:00
parent 102b92190c
commit 9cb79556eb
3 changed files with 124 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/components/tools/convert/ConvertFromImageSettings.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from "react";
import { Stack, Text, Select } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { COLOR_TYPES } from "../../../constants/convertConstants";
import { ConvertParameters } from "../../../hooks/tools/convert/useConvertParameters";
interface ConvertFromImageSettingsProps {
parameters: ConvertParameters;
onParameterChange: (key: keyof ConvertParameters, value: any) => void;
disabled?: boolean;
}
const ConvertFromImageSettings = ({
parameters,
onParameterChange,
disabled = false
}: ConvertFromImageSettingsProps) => {
const { t } = useTranslation();
return (
<Stack gap="sm">
<Text size="sm" fw={500}>{t("convert.pdfOptions", "PDF Options")}:</Text>
<Select
label={t("convert.colorType", "Color Type")}
value={parameters.imageOptions.colorType}
onChange={(val) => val && onParameterChange('imageOptions', {
...parameters.imageOptions,
colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
})}
data={[
{ value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
{ value: COLOR_TYPES.GREYSCALE, label: t("convert.greyscale", "Greyscale") },
{ value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
]}
disabled={disabled}
/>
</Stack>
);
};
export default ConvertFromImageSettings;

79
frontend/src/components/tools/convert/ConvertSettings.tsx
View File

@ -1,15 +1,17 @@
import React, { useMemo } from "react";
import { Stack, Text, Select, NumberInput, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
import { Stack, Text, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import { useTranslation } from "react-i18next";
import { useMultipleEndpointsEnabled } from "../../../hooks/useEndpointConfig";
import GroupedFormatDropdown from "./GroupedFormatDropdown";
import ConvertToImageSettings from "./ConvertToImageSettings";
import ConvertFromImageSettings from "./ConvertFromImageSettings";
import { ConvertParameters } from "../../../hooks/tools/convert/useConvertParameters";
import {
FROM_FORMAT_OPTIONS,
EXTENSION_TO_ENDPOINT,
COLOR_TYPES,
OUTPUT_OPTIONS,
EXTENSION_TO_ENDPOINT
OUTPUT_OPTIONS
} from "../../../constants/convertConstants";
interface ConvertSettingsProps {
@ -150,50 +152,11 @@ const ConvertSettings = ({
{['png', 'jpg'].includes(parameters.toExtension) && (
<>
<Divider />
<Stack gap="sm">
<Text size="sm" fw={500}>{t("convert.imageOptions", "Image Options")}:</Text>
<Group grow>
<Select
label={t("convert.colorType", "Color Type")}
value={parameters.imageOptions.colorType}
onChange={(val) => val && onParameterChange('imageOptions', {
...parameters.imageOptions,
colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
})}
data={[
{ value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
{ value: COLOR_TYPES.GREYSCALE, label: t("convert.greyscale", "Greyscale") },
{ value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
]}
disabled={disabled}
/>
<NumberInput
label={t("convert.dpi", "DPI")}
value={parameters.imageOptions.dpi}
onChange={(val) => typeof val === 'number' && onParameterChange('imageOptions', {
...parameters.imageOptions,
dpi: val
})}
min={72}
max={600}
step={1}
disabled={disabled}
/>
</Group>
<Select
label={t("convert.output", "Output")}
value={parameters.imageOptions.singleOrMultiple}
onChange={(val) => val && onParameterChange('imageOptions', {
...parameters.imageOptions,
singleOrMultiple: val as typeof OUTPUT_OPTIONS[keyof typeof OUTPUT_OPTIONS]
})}
data={[
{ value: OUTPUT_OPTIONS.SINGLE, label: t("convert.single", "Single") },
{ value: OUTPUT_OPTIONS.MULTIPLE, label: t("convert.multiple", "Multiple") },
]}
disabled={disabled}
/>
</Stack>
<ConvertToImageSettings
parameters={parameters}
onParameterChange={onParameterChange}
disabled={disabled}
/>
</>
)}
@ -202,23 +165,11 @@ const ConvertSettings = ({
{['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'webp'].includes(parameters.fromExtension) && parameters.toExtension === 'pdf' && (
<>
<Divider />
<Stack gap="sm">
<Text size="sm" fw={500}>{t("convert.pdfOptions", "PDF Options")}:</Text>
<Select
label={t("convert.colorType", "Color Type")}
value={parameters.imageOptions.colorType}
onChange={(val) => val && onParameterChange('imageOptions', {
...parameters.imageOptions,
colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
})}
data={[
{ value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
{ value: COLOR_TYPES.GREYSCALE, label: t("convert.greyscale", "Greyscale") },
{ value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
]}
disabled={disabled}
/>
</Stack>
<ConvertFromImageSettings
parameters={parameters}
onParameterChange={onParameterChange}
disabled={disabled}
/>
</>
)}
</Stack>

68
frontend/src/components/tools/convert/ConvertToImageSettings.tsx Normal file
View File

@ -0,0 +1,68 @@
import React from "react";
import { Stack, Text, Select, NumberInput, Group } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { COLOR_TYPES, OUTPUT_OPTIONS } from "../../../constants/convertConstants";
import { ConvertParameters } from "../../../hooks/tools/convert/useConvertParameters";
interface ConvertToImageSettingsProps {
parameters: ConvertParameters;
onParameterChange: (key: keyof ConvertParameters, value: any) => void;
disabled?: boolean;
}
const ConvertToImageSettings = ({
parameters,
onParameterChange,
disabled = false
}: ConvertToImageSettingsProps) => {
const { t } = useTranslation();
return (
<Stack gap="sm">
<Text size="sm" fw={500}>{t("convert.imageOptions", "Image Options")}:</Text>
<Group grow>
<Select
label={t("convert.colorType", "Color Type")}
value={parameters.imageOptions.colorType}
onChange={(val) => val && onParameterChange('imageOptions', {
...parameters.imageOptions,
colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
})}
data={[
{ value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
{ value: COLOR_TYPES.GREYSCALE, label: t("convert.greyscale", "Greyscale") },
{ value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
]}
disabled={disabled}
/>
<NumberInput
label={t("convert.dpi", "DPI")}
value={parameters.imageOptions.dpi}
onChange={(val) => typeof val === 'number' && onParameterChange('imageOptions', {
...parameters.imageOptions,
dpi: val
})}
min={72}
max={600}
step={1}
disabled={disabled}
/>
</Group>
<Select
label={t("convert.output", "Output")}
value={parameters.imageOptions.singleOrMultiple}
onChange={(val) => val && onParameterChange('imageOptions', {
...parameters.imageOptions,
singleOrMultiple: val as typeof OUTPUT_OPTIONS[keyof typeof OUTPUT_OPTIONS]
})}
data={[
{ value: OUTPUT_OPTIONS.SINGLE, label: t("convert.single", "Single") },
{ value: OUTPUT_OPTIONS.MULTIPLE, label: t("convert.multiple", "Multiple") },
]}
disabled={disabled}
/>
</Stack>
);
};
export default ConvertToImageSettings;