Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-11-16 01:21:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

?

Browse Source
This commit is contained in:
Reece 2025-11-13 14:12:57 +00:00
parent 75ff6ed441
commit 6a3fa31317
1 changed files with 75 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx
View File

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Stack, Text, Divider, Collapse, Button, NumberInput } from "@mantine/core"; import { Stack, Text, Divider, Collapse, Button, NumberInput, Checkbox } from "@mantine/core";
import { BookletImpositionParameters } from "@app/hooks/tools/bookletImposition/useBookletImpositionParameters"; import { BookletImpositionParameters } from "@app/hooks/tools/bookletImposition/useBookletImpositionParameters";
import ButtonSelector from "@app/components/shared/ButtonSelector"; import ButtonSelector from "@app/components/shared/ButtonSelector";
@ -21,28 +21,27 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
{/* Double Sided */} {/* Double Sided */}
<Stack gap="sm"> <Stack gap="sm">
<label <Checkbox
style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }} checked={parameters.doubleSided}
title={t('bookletImposition.doubleSided.tooltip', 'Creates both front and back sides for proper booklet printing')} onChange={(event) => {
> const isDoubleSided = event.currentTarget.checked;
<input onParameterChange('doubleSided', isDoubleSided);
type="checkbox" // Reset to BOTH when turning double-sided back on
checked={parameters.doubleSided} if (isDoubleSided) {
onChange={(e) => { onParameterChange('duplexPass', 'BOTH');
const isDoubleSided = e.target.checked; } else {
onParameterChange('doubleSided', isDoubleSided); // Default to FIRST pass when going to manual duplex
// Reset to BOTH when turning double-sided back on onParameterChange('duplexPass', 'FIRST');
if (isDoubleSided) { }
onParameterChange('duplexPass', 'BOTH'); }}
} else { disabled={disabled}
// Default to FIRST pass when going to manual duplex label={
onParameterChange('duplexPass', 'FIRST'); <div>
} <Text size="sm">{t('bookletImposition.doubleSided.label', 'Double-sided printing')}</Text>
}} <Text size="xs" c="dimmed">{t('bookletImposition.doubleSided.tooltip', 'Creates both front and back sides for proper booklet printing')}</Text>
disabled={disabled} </div>
/> }
<Text size="sm">{t('bookletImposition.doubleSided.label', 'Double-sided printing')}</Text> />
</label>
{/* Manual Duplex Pass Selection - only show when double-sided is OFF */} {/* Manual Duplex Pass Selection - only show when double-sided is OFF */}
{!parameters.doubleSided && ( {!parameters.doubleSided && (
@ -67,8 +66,8 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
<Text size="xs" c="blue" fs="italic"> <Text size="xs" c="blue" fs="italic">
{parameters.duplexPass === 'FIRST' {parameters.duplexPass === 'FIRST'
? t('bookletImposition.duplexPass.firstInstructions', 'Prints front sides -> stack face-down -> run again with 2nd Pass') ? t('bookletImposition.duplexPass.firstInstructions', 'Prints front sides → stack face-down → run again with 2nd Pass')
: t('bookletImposition.duplexPass.secondInstructions', 'Load printed stack face-down -> prints back sides') : t('bookletImposition.duplexPass.secondInstructions', 'Load printed stack face-down → prints back sides')
} }
</Text> </Text>
</Stack> </Stack>
@ -84,53 +83,50 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
onClick={() => setAdvancedOpen(!advancedOpen)} onClick={() => setAdvancedOpen(!advancedOpen)}
disabled={disabled} disabled={disabled}
> >
{t('bookletImposition.advanced.toggle', 'Advanced Options')} {advancedOpen ? '^' : 'v'} {t('bookletImposition.advanced.toggle', 'Advanced Options')} {advancedOpen ? '▲' : '▼'}
</Button> </Button>
<Collapse in={advancedOpen}> <Collapse in={advancedOpen}>
<Stack gap="md" mt="md"> <Stack gap="md" mt="md">
{/* Right-to-Left Binding */} {/* Right-to-Left Binding */}
<label <Checkbox
style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }} checked={parameters.spineLocation === 'RIGHT'}
title={t('bookletImposition.rtlBinding.tooltip', 'For Arabic, Hebrew, or other right-to-left languages')} onChange={(event) => onParameterChange('spineLocation', event.currentTarget.checked ? 'RIGHT' : 'LEFT')}
> disabled={disabled}
<input label={
type="checkbox" <div>
checked={parameters.spineLocation === 'RIGHT'} <Text size="sm">{t('bookletImposition.rtlBinding.label', 'Right-to-left binding')}</Text>
onChange={(e) => onParameterChange('spineLocation', e.target.checked ? 'RIGHT' : 'LEFT')} <Text size="xs" c="dimmed">{t('bookletImposition.rtlBinding.tooltip', 'For Arabic, Hebrew, or other right-to-left languages')}</Text>
disabled={disabled} </div>
/> }
<Text size="sm">{t('bookletImposition.rtlBinding.label', 'Right-to-left binding')}</Text> />
</label>
{/* Add Border Option */} {/* Add Border Option */}
<label <Checkbox
style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }} checked={parameters.addBorder}
title={t('bookletImposition.addBorder.tooltip', 'Adds borders around each page section to help with cutting and alignment')} onChange={(event) => onParameterChange('addBorder', event.currentTarget.checked)}
> disabled={disabled}
<input label={
type="checkbox" <div>
checked={parameters.addBorder} <Text size="sm">{t('bookletImposition.addBorder.label', 'Add borders around pages')}</Text>
onChange={(e) => onParameterChange('addBorder', e.target.checked)} <Text size="xs" c="dimmed">{t('bookletImposition.addBorder.tooltip', 'Adds borders around each page section to help with cutting and alignment')}</Text>
disabled={disabled} </div>
/> }
<Text size="sm">{t('bookletImposition.addBorder.label', 'Add borders around pages')}</Text> />
</label>
{/* Gutter Margin */} {/* Gutter Margin */}
<Stack gap="xs"> <Stack gap="xs">
<label <Checkbox
style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }} checked={parameters.addGutter}
title={t('bookletImposition.addGutter.tooltip', 'Adds inner margin space for binding')} onChange={(event) => onParameterChange('addGutter', event.currentTarget.checked)}
> disabled={disabled}
<input label={
type="checkbox" <div>
checked={parameters.addGutter} <Text size="sm">{t('bookletImposition.addGutter.label', 'Add gutter margin')}</Text>
onChange={(e) => onParameterChange('addGutter', e.target.checked)} <Text size="xs" c="dimmed">{t('bookletImposition.addGutter.tooltip', 'Adds inner margin space for binding')}</Text>
disabled={disabled} </div>
/> }
<Text size="sm">{t('bookletImposition.addGutter.label', 'Add gutter margin')}</Text> />
</label>
{parameters.addGutter && ( {parameters.addGutter && (
<NumberInput <NumberInput
@ -147,23 +143,24 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
</Stack> </Stack>
{/* Flip on Short Edge */} {/* Flip on Short Edge */}
<label <Checkbox
style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }} checked={parameters.flipOnShortEdge}
title={!parameters.doubleSided onChange={(event) => onParameterChange('flipOnShortEdge', event.currentTarget.checked)}
? t('bookletImposition.flipOnShortEdge.manualNote', 'Not needed in manual mode - you flip the stack yourself') disabled={disabled || !parameters.doubleSided}
: t('bookletImposition.flipOnShortEdge.tooltip', 'Enable for short-edge duplex printing (automatic duplex only - ignored in manual mode)') label={
<div>
<Text size="sm" c={!parameters.doubleSided ? "dimmed" : undefined}>
{t('bookletImposition.flipOnShortEdge.label', 'Flip on short edge')}
</Text>
<Text size="xs" c="dimmed">
{!parameters.doubleSided
? t('bookletImposition.flipOnShortEdge.manualNote', 'Not needed in manual mode - you flip the stack yourself')
: t('bookletImposition.flipOnShortEdge.tooltip', 'Enable for short-edge duplex printing (automatic duplex only - ignored in manual mode)')
}
</Text>
</div>
} }
> />
<input
type="checkbox"
checked={parameters.flipOnShortEdge}
onChange={(e) => onParameterChange('flipOnShortEdge', e.target.checked)}
disabled={disabled || !parameters.doubleSided}
/>
<Text size="sm" c={!parameters.doubleSided ? "dimmed" : undefined}>
{t('bookletImposition.flipOnShortEdge.label', 'Flip on short edge')}
</Text>
</label>
{/* Paper Size Note */} {/* Paper Size Note */}
<Text size="xs" c="dimmed" fs="italic"> <Text size="xs" c="dimmed" fs="italic">