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

Options are now in drop down grid

Browse Source
This commit is contained in:
Connor Yoh 2025-07-23 14:30:53 +01:00
parent 2291b14d79
commit 537e71cfb9
3 changed files with 48 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,18 +28,16 @@ const ConvertSettings = ({
const theme = useMantineTheme(); const theme = useMantineTheme();
const { colorScheme } = useMantineColorScheme(); const { colorScheme } = useMantineColorScheme();
const handleFromExtensionChange = (value: string | null) => { const handleFromExtensionChange = (value: string) => {
if (value) { onParameterChange('fromExtension', value);
onParameterChange('fromExtension', value); // Reset to extension when from extension changes
// Reset to extension when from extension changes onParameterChange('toExtension', '');
onParameterChange('toExtension', ''); // Reset format-specific options
// Reset format-specific options onParameterChange('imageOptions', {
onParameterChange('imageOptions', { colorType: COLOR_TYPES.COLOR,
colorType: COLOR_TYPES.COLOR, dpi: 300,
dpi: 300, singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE, });
});
}
}; };
const handleToExtensionChange = (value: string) => { const handleToExtensionChange = (value: string) => {
@ -60,14 +58,13 @@ const ConvertSettings = ({
<Text size="sm" fw={500}> <Text size="sm" fw={500}>
{t("convert.convertFrom", "Convert from")}: {t("convert.convertFrom", "Convert from")}:
</Text> </Text>
<Select <GroupedFormatDropdown
value={parameters.fromExtension} value={parameters.fromExtension}
onChange={handleFromExtensionChange}
data={FROM_FORMAT_OPTIONS.map(option => ({ value: option.value, label: option.label }))}
disabled={disabled}
searchable
clearable
placeholder="Select source file format" placeholder="Select source file format"
options={FROM_FORMAT_OPTIONS}
onChange={handleFromExtensionChange}
disabled={disabled}
minWidth="350px"
/> />
</Stack> </Stack>

4
frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
View File

@ -43,11 +43,11 @@ const GroupedFormatDropdown = ({
return groups; return groups;
}, [options]); }, [options]);
// Get selected option label for display // Get selected option label for display in format "Group (EXTENSION)"
const selectedLabel = useMemo(() => { const selectedLabel = useMemo(() => {
if (!value) return placeholder; if (!value) return placeholder;
const selected = options.find(opt => opt.value === value); const selected = options.find(opt => opt.value === value);
return selected ? selected.label : value; return selected ? `${selected.group} (${selected.label})` : value.toUpperCase();
}, [value, options, placeholder]); }, [value, options, placeholder]);
const handleOptionSelect = (selectedValue: string) => { const handleOptionSelect = (selectedValue: string) => {

62
frontend/src/constants/convertConstants.ts
View File

@ -84,41 +84,41 @@ export const FILE_EXTENSIONS = {
// Grouped file extensions for dropdowns // Grouped file extensions for dropdowns
export const FROM_FORMAT_OPTIONS = [ export const FROM_FORMAT_OPTIONS = [
{ value: 'pdf', label: 'PDF', group: 'Document' }, { value: 'pdf', label: 'PDF', group: 'Document' },
{ value: 'docx', label: 'Word Document (.docx)', group: 'Office Documents' }, { value: 'docx', label: 'DOCX', group: 'Document' },
{ value: 'doc', label: 'Word Document (.doc)', group: 'Office Documents' }, { value: 'doc', label: 'DOC', group: 'Document' },
{ value: 'xlsx', label: 'Excel Spreadsheet (.xlsx)', group: 'Office Documents' }, { value: 'odt', label: 'ODT', group: 'Document' },
{ value: 'xls', label: 'Excel Spreadsheet (.xls)', group: 'Office Documents' }, { value: 'xlsx', label: 'XLSX', group: 'Spreadsheet' },
{ value: 'pptx', label: 'PowerPoint (.pptx)', group: 'Office Documents' }, { value: 'xls', label: 'XLS', group: 'Spreadsheet' },
{ value: 'ppt', label: 'PowerPoint (.ppt)', group: 'Office Documents' }, { value: 'ods', label: 'ODS', group: 'Spreadsheet' },
{ value: 'odt', label: 'OpenDocument Text (.odt)', group: 'Office Documents' }, { value: 'pptx', label: 'PPTX', group: 'Presentation' },
{ value: 'ods', label: 'OpenDocument Spreadsheet (.ods)', group: 'Office Documents' }, { value: 'ppt', label: 'PPT', group: 'Presentation' },
{ value: 'odp', label: 'OpenDocument Presentation (.odp)', group: 'Office Documents' }, { value: 'odp', label: 'ODP', group: 'Presentation' },
{ value: 'jpg', label: 'JPEG Image (.jpg)', group: 'Images' }, { value: 'jpg', label: 'JPG', group: 'Image' },
{ value: 'jpeg', label: 'JPEG Image (.jpeg)', group: 'Images' }, { value: 'jpeg', label: 'JPEG', group: 'Image' },
{ value: 'png', label: 'PNG Image (.png)', group: 'Images' }, { value: 'png', label: 'PNG', group: 'Image' },
{ value: 'gif', label: 'GIF Image (.gif)', group: 'Images' }, { value: 'gif', label: 'GIF', group: 'Image' },
{ value: 'bmp', label: 'BMP Image (.bmp)', group: 'Images' }, { value: 'bmp', label: 'BMP', group: 'Image' },
{ value: 'tiff', label: 'TIFF Image (.tiff)', group: 'Images' }, { value: 'tiff', label: 'TIFF', group: 'Image' },
{ value: 'webp', label: 'WebP Image (.webp)', group: 'Images' }, { value: 'webp', label: 'WEBP', group: 'Image' },
{ value: 'html', label: 'HTML (.html)', group: 'Web' }, { value: 'html', label: 'HTML', group: 'Web' },
{ value: 'htm', label: 'HTML (.htm)', group: 'Web' }, { value: 'htm', label: 'HTM', group: 'Web' },
{ value: 'md', label: 'Markdown (.md)', group: 'Text' }, { value: 'md', label: 'MD', group: 'Text' },
{ value: 'txt', label: 'Text File (.txt)', group: 'Text' }, { value: 'txt', label: 'TXT', group: 'Text' },
{ value: 'rtf', label: 'Rich Text Format (.rtf)', group: 'Text' }, { value: 'rtf', label: 'RTF', group: 'Text' },
]; ];
export const TO_FORMAT_OPTIONS = [ export const TO_FORMAT_OPTIONS = [
{ value: 'pdf', label: 'PDF', group: 'Document' }, { value: 'pdf', label: 'PDF', group: 'Document' },
{ value: 'docx', label: 'Word Document (.docx)', group: 'Office Documents' }, { value: 'docx', label: 'DOCX', group: 'Document' },
{ value: 'odt', label: 'OpenDocument Text (.odt)', group: 'Office Documents' }, { value: 'odt', label: 'ODT', group: 'Document' },
{ value: 'pptx', label: 'PowerPoint (.pptx)', group: 'Office Documents' }, { value: 'pptx', label: 'PPTX', group: 'Presentation' },
{ value: 'odp', label: 'OpenDocument Presentation (.odp)', group: 'Office Documents' }, { value: 'odp', label: 'ODP', group: 'Presentation' },
{ value: 'txt', label: 'Text File (.txt)', group: 'Text' }, { value: 'txt', label: 'TXT', group: 'Text' },
{ value: 'rtf', label: 'Rich Text Format (.rtf)', group: 'Text' }, { value: 'rtf', label: 'RTF', group: 'Text' },
{ value: 'png', label: 'PNG Image (.png)', group: 'Images' }, { value: 'png', label: 'PNG', group: 'Image' },
{ value: 'jpg', label: 'JPEG Image (.jpg)', group: 'Images' }, { value: 'jpg', label: 'JPG', group: 'Image' },
{ value: 'html', label: 'HTML (.html)', group: 'Web' }, { value: 'html', label: 'HTML', group: 'Web' },
{ value: 'xml', label: 'XML (.xml)', group: 'Web' }, { value: 'xml', label: 'XML', group: 'Web' },
]; ];
// Conversion matrix - what each source format can convert to // Conversion matrix - what each source format can convert to