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

feat(ui): adjust CompressSettings and SliderWithInput for better readability

Browse Source 
- Increased `Stack` gap in `CompressSettings` from `sm` to `md`
- Updated compression level descriptions with more detailed tooltips
- Adjusted label font weight and margin in `SliderWithInput` for improved presentation
- Added suffix support for numeric input in `SliderWithInput`

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>
This commit is contained in:
Balázs Szücs 2025-11-14 22:46:48 +01:00
parent c5dfbe5b50
commit 1cc5c9df3b
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx
View File

@ -23,8 +23,8 @@ export default function SliderWithInput({
}: Props) {
return (
<div>
<Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}{suffix}</Text>
<Group gap="sm" align="center">
<Text size="sm" fw={500} mb={8}>{label}</Text>
<Group gap="md" align="center">
<div style={{ flex: 1 }}>
<Slider min={min} max={max} step={step} value={value} onChange={onChange} disabled={disabled} />
</div>
@ -35,6 +35,7 @@ export default function SliderWithInput({
max={max}
step={step}
disabled={disabled}
suffix={suffix}
style={{ width: 90 }}
/>
</Group>

10
frontend/src/core/components/tools/compress/CompressSettings.tsx
View File

@ -31,7 +31,7 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
{/* Quality Adjustment */}
{parameters.compressionMethod === 'quality' && (
<Stack gap="sm">
<Stack gap="md">
<Divider />
<SliderWithInput
label={t('compress.tooltip.qualityAdjustment.title', 'Compression Level')}
@ -43,10 +43,10 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
step={1}
suffix=""
/>
<Text size="xs" c="dimmed" style={{ marginTop: '8px' }}>
{parameters.compressionLevel <= 3 && t('compress.compressionLevel.range1to3')}
{parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && t('compress.compressionLevel.range4to6')}
{parameters.compressionLevel >= 7 && t('compress.compressionLevel.range7to9')}
<Text size="xs" c="dimmed" mt={-4}>
{parameters.compressionLevel <= 3 && t('compress.compressionLevel.range1to3', 'Lower values preserve quality but result in larger files')}
{parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && t('compress.compressionLevel.range4to6', 'Medium compression with moderate quality reduction')}
{parameters.compressionLevel >= 7 && t('compress.compressionLevel.range7to9', 'Higher values reduce file size significantly but may reduce image clarity')}
</Text>
</Stack>
)}