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 { colorScheme } = useMantineColorScheme();
const handleFromExtensionChange = (value: string | null) => {
if (value) {
onParameterChange('fromExtension', value);
// Reset to extension when from extension changes
onParameterChange('toExtension', '');
// Reset format-specific options
onParameterChange('imageOptions', {
colorType: COLOR_TYPES.COLOR,
dpi: 300,
singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
});
}
const handleFromExtensionChange = (value: string) => {
onParameterChange('fromExtension', value);
// Reset to extension when from extension changes
onParameterChange('toExtension', '');
// Reset format-specific options
onParameterChange('imageOptions', {
colorType: COLOR_TYPES.COLOR,
dpi: 300,
singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
});
};
const handleToExtensionChange = (value: string) => {
@ -60,14 +58,13 @@ const ConvertSettings = ({
<Text size="sm" fw={500}>
{t("convert.convertFrom", "Convert from")}:
</Text>
<Select
<GroupedFormatDropdown
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"
options={FROM_FORMAT_OPTIONS}
onChange={handleFromExtensionChange}
disabled={disabled}
minWidth="350px"
/>
</Stack>

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

@ -43,11 +43,11 @@ const GroupedFormatDropdown = ({
return groups;
}, [options]);
// Get selected option label for display
// Get selected option label for display in format "Group (EXTENSION)"
const selectedLabel = useMemo(() => {
if (!value) return placeholder;
const selected = options.find(opt => opt.value === value);
return selected ? selected.label : value;
return selected ? `${selected.group} (${selected.label})` : value.toUpperCase();
}, [value, options, placeholder]);
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
export const FROM_FORMAT_OPTIONS = [
{ value: 'pdf', label: 'PDF', group: 'Document' },
{ value: 'docx', label: 'Word Document (.docx)', group: 'Office Documents' },
{ value: 'doc', label: 'Word Document (.doc)', group: 'Office Documents' },
{ value: 'xlsx', label: 'Excel Spreadsheet (.xlsx)', group: 'Office Documents' },
{ value: 'xls', label: 'Excel Spreadsheet (.xls)', group: 'Office Documents' },
{ value: 'pptx', label: 'PowerPoint (.pptx)', group: 'Office Documents' },
{ value: 'ppt', label: 'PowerPoint (.ppt)', group: 'Office Documents' },
{ value: 'odt', label: 'OpenDocument Text (.odt)', group: 'Office Documents' },
{ value: 'ods', label: 'OpenDocument Spreadsheet (.ods)', group: 'Office Documents' },
{ value: 'odp', label: 'OpenDocument Presentation (.odp)', group: 'Office Documents' },
{ value: 'jpg', label: 'JPEG Image (.jpg)', group: 'Images' },
{ value: 'jpeg', label: 'JPEG Image (.jpeg)', group: 'Images' },
{ value: 'png', label: 'PNG Image (.png)', group: 'Images' },
{ value: 'gif', label: 'GIF Image (.gif)', group: 'Images' },
{ value: 'bmp', label: 'BMP Image (.bmp)', group: 'Images' },
{ value: 'tiff', label: 'TIFF Image (.tiff)', group: 'Images' },
{ value: 'webp', label: 'WebP Image (.webp)', group: 'Images' },
{ value: 'html', label: 'HTML (.html)', group: 'Web' },
{ value: 'htm', label: 'HTML (.htm)', group: 'Web' },
{ value: 'md', label: 'Markdown (.md)', group: 'Text' },
{ value: 'txt', label: 'Text File (.txt)', group: 'Text' },
{ value: 'rtf', label: 'Rich Text Format (.rtf)', group: 'Text' },
{ value: 'docx', label: 'DOCX', group: 'Document' },
{ value: 'doc', label: 'DOC', group: 'Document' },
{ value: 'odt', label: 'ODT', group: 'Document' },
{ value: 'xlsx', label: 'XLSX', group: 'Spreadsheet' },
{ value: 'xls', label: 'XLS', group: 'Spreadsheet' },
{ value: 'ods', label: 'ODS', group: 'Spreadsheet' },
{ value: 'pptx', label: 'PPTX', group: 'Presentation' },
{ value: 'ppt', label: 'PPT', group: 'Presentation' },
{ value: 'odp', label: 'ODP', group: 'Presentation' },
{ value: 'jpg', label: 'JPG', group: 'Image' },
{ value: 'jpeg', label: 'JPEG', group: 'Image' },
{ value: 'png', label: 'PNG', group: 'Image' },
{ value: 'gif', label: 'GIF', group: 'Image' },
{ value: 'bmp', label: 'BMP', group: 'Image' },
{ value: 'tiff', label: 'TIFF', group: 'Image' },
{ value: 'webp', label: 'WEBP', group: 'Image' },
{ value: 'html', label: 'HTML', group: 'Web' },
{ value: 'htm', label: 'HTM', group: 'Web' },
{ value: 'md', label: 'MD', group: 'Text' },
{ value: 'txt', label: 'TXT', group: 'Text' },
{ value: 'rtf', label: 'RTF', group: 'Text' },
];
export const TO_FORMAT_OPTIONS = [
{ value: 'pdf', label: 'PDF', group: 'Document' },
{ value: 'docx', label: 'Word Document (.docx)', group: 'Office Documents' },
{ value: 'odt', label: 'OpenDocument Text (.odt)', group: 'Office Documents' },
{ value: 'pptx', label: 'PowerPoint (.pptx)', group: 'Office Documents' },
{ value: 'odp', label: 'OpenDocument Presentation (.odp)', group: 'Office Documents' },
{ value: 'txt', label: 'Text File (.txt)', group: 'Text' },
{ value: 'rtf', label: 'Rich Text Format (.rtf)', group: 'Text' },
{ value: 'png', label: 'PNG Image (.png)', group: 'Images' },
{ value: 'jpg', label: 'JPEG Image (.jpg)', group: 'Images' },
{ value: 'html', label: 'HTML (.html)', group: 'Web' },
{ value: 'xml', label: 'XML (.xml)', group: 'Web' },
{ value: 'docx', label: 'DOCX', group: 'Document' },
{ value: 'odt', label: 'ODT', group: 'Document' },
{ value: 'pptx', label: 'PPTX', group: 'Presentation' },
{ value: 'odp', label: 'ODP', group: 'Presentation' },
{ value: 'txt', label: 'TXT', group: 'Text' },
{ value: 'rtf', label: 'RTF', group: 'Text' },
{ value: 'png', label: 'PNG', group: 'Image' },
{ value: 'jpg', label: 'JPG', group: 'Image' },
{ value: 'html', label: 'HTML', group: 'Web' },
{ value: 'xml', label: 'XML', group: 'Web' },
];
// Conversion matrix - what each source format can convert to