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

Change selector to use big buttons

Browse Source
This commit is contained in:
James Brunton 2025-09-08 17:13:09 +01:00
parent 3a20238335
commit d0c59a6ab5
1 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/components/tools/redact/RedactModeSelector.tsx
View File

@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Select, Stack, Text } from '@mantine/core'; import { Button, Stack, Text } from '@mantine/core';
import { RedactMode } from '../../../hooks/tools/redact/useRedactParameters'; import { RedactMode } from '../../../hooks/tools/redact/useRedactParameters';
interface RedactModeSelectorProps { interface RedactModeSelectorProps {
@ -11,35 +11,36 @@ interface RedactModeSelectorProps {
export default function RedactModeSelector({ mode, onModeChange, disabled }: RedactModeSelectorProps) { export default function RedactModeSelector({ mode, onModeChange, disabled }: RedactModeSelectorProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const modeOptions = [
{
value: 'automatic',
label: t('redact.modeSelector.automatic', 'Automatic'),
disabled: false
},
{
value: 'manual',
label: t('redact.modeSelector.manual', 'Manual'),
disabled: true // Disabled until implemented
}
];
return ( return (
<Stack gap="sm"> <Stack gap="sm">
<Text size="sm" fw={600}> <Text size="sm" fw={600}>
{t('redact.modeSelector.title', 'Redaction Mode')} {t('redact.modeSelector.title', 'Redaction Mode')}
</Text> </Text>
<Select <div style={{ display: 'flex', gap: '4px' }}>
value={mode} <Button
onChange={(value) => { variant={mode === 'automatic' ? 'filled' : 'outline'}
if (value && value !== 'manual') { // Don't allow manual selection yet color={mode === 'automatic' ? 'blue' : 'var(--text-muted)'}
onModeChange(value as RedactMode); onClick={() => onModeChange('automatic')}
} disabled={disabled}
}} style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
disabled={disabled} >
data={modeOptions} <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
/> {t('redact.modeSelector.automatic', 'Automatic')}
</div>
</Button>
<Button
variant={mode === 'manual' ? 'filled' : 'outline'}
color={mode === 'manual' ? 'blue' : 'var(--text-muted)'}
onClick={() => onModeChange('manual')}
disabled={disabled || true} // Keep manual disabled until implemented
style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
>
<div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
{t('redact.modeSelector.manual', 'Manual')}
</div>
</Button>
</div>
</Stack> </Stack>
); );
} }