saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-26 14:19:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign sort UI

Browse Source
This commit is contained in:
James Brunton 2025-08-19 16:17:37 +01:00
parent 391d283fcd
commit 8dcf820a01
1 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/components/tools/merge/MergeFileSorter.tsx
View File

@ -1,10 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Group, Button, Text, ActionIcon, Stack } from '@mantine/core'; import { Group, Button, Text, ActionIcon, Stack, Select } from '@mantine/core';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import SortIcon from '@mui/icons-material/Sort'; import SortIcon from '@mui/icons-material/Sort';
import SortByAlphaIcon from '@mui/icons-material/SortByAlpha';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
@ -18,54 +15,61 @@ const MergeFileSorter: React.FC<MergeFileSorterProps> = ({
disabled = false, disabled = false,
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [sortType, setSortType] = useState<'filename' | 'dateModified'>('filename');
const [ascending, setAscending] = useState(true); const [ascending, setAscending] = useState(true);
const sortButtons = [ const sortOptions = [
{ { value: 'filename', label: t('merge.sortBy.filename', 'File Name') },
key: 'filename' as const, { value: 'dateModified', label: t('merge.sortBy.dateModified', 'Date Modified') },
icon: <SortByAlphaIcon/>,
label: t('merge.sortBy.filename', 'Sort by Filename'),
},
{
key: 'dateModified' as const,
icon: <AccessTimeIcon/>,
label: t('merge.sortBy.dateModified', 'Sort by Date Modified'),
},
]; ];
const handleSortDirectionToggle = () => { const handleSort = () => {
onSortFiles(sortType, ascending);
};
const handleDirectionToggle = () => {
setAscending(!ascending); setAscending(!ascending);
}; };
return ( return (
<Stack gap="xs"> <Stack gap="xs">
<Text size="sm" fw={500}> <Text size="sm" fw={500}>
{t('merge.sortBy.description', "Files will be merged in the order they're selected. Drag to reorder or use the buttons below to sort.")} {t('merge.sortBy.description', "Files will be merged in the order they're selected. Drag to reorder or sort below.")}
</Text> </Text>
<Group gap="xs"> <Stack gap="xs">
{sortButtons.map(({ key, icon, label }) => ( <Group gap="xs" align="end" justify="space-between">
<Button <Select
key={key} data={sortOptions}
variant="light" value={sortType}
size="xs" onChange={(value) => setSortType(value as 'filename' | 'dateModified')}
leftSection={icon}
onClick={() => onSortFiles(key, ascending)}
disabled={disabled} disabled={disabled}
> label={t('merge.sortBy.label', 'Sort By')}
{label} size='xs'
</Button> style={{ flex: 1 }}
))} />
<ActionIcon <ActionIcon
variant="light" variant="light"
size="sm" size="md"
onClick={handleSortDirectionToggle} onClick={handleDirectionToggle}
disabled={disabled} disabled={disabled}
title={ascending ? t('merge.sortBy.ascending', 'Ascending') : t('merge.sortBy.descending', 'Descending')} title={ascending ? t('merge.sortBy.ascending', 'Ascending') : t('merge.sortBy.descending', 'Descending')}
> >
{ascending ? <ArrowUpwardIcon/> : <ArrowDownwardIcon/>} {ascending ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
</ActionIcon> </ActionIcon>
</Group> </Group>
<Button
variant="light"
size="xs"
leftSection={<SortIcon />}
onClick={handleSort}
disabled={disabled}
fullWidth
>
{t('merge.sortBy.sort', 'Sort')}
</Button>
</Stack>
</Stack> </Stack>
); );
}; };