Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-12-18 20:04:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

make slider with input re-usable

Browse Source
This commit is contained in:
EthanHealy01 2025-09-29 20:23:47 +01:00
parent 63e5cbc680
commit bbb059b739
3 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/shared/sliderWithInput/SliderWithInput.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import { Slider, Text, Group, NumberInput } from '@mantine/core';
interface Props {
label: string;
value: number;
onChange: (value: number) => void;
disabled?: boolean;
min?: number;
max?: number;
step?: number;
}
export default function SliderWithInput({
label,
value,
onChange,
disabled,
min = 0,
max = 200,
step = 1,
}: Props) {
return (
<div>
<Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}%</Text>
<Group gap="sm" align="center">
<div style={{ flex: 1 }}>
<Slider min={min} max={max} step={step} value={value} onChange={onChange} disabled={disabled} />
</div>
<NumberInput
value={value}
onChange={(v) => onChange(Number(v) || 0)}
min={min}
max={max}
step={step}
disabled={disabled}
style={{ width: 90 }}
/>
</Group>
</div>
);
}

29
frontend/src/components/tools/adjustContrast/AdjustContrastBasicSettings.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { Stack, Slider, Text, Group, NumberInput } from '@mantine/core';
import { Stack } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { AdjustContrastParameters } from '../../../hooks/tools/adjustContrast/useAdjustContrastParameters';
import SliderWithInput from '../../shared/sliderWithInput/SliderWithInput';
interface Props {
parameters: AdjustContrastParameters;
@ -12,31 +13,11 @@ interface Props {
export default function AdjustContrastBasicSettings({ parameters, onParameterChange, disabled }: Props) {
const { t } = useTranslation();
const renderSlider = (label: string, value: number, onChange: (v: number) => void) => (
<div>
<Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}%</Text>
<Group gap="sm" align="center">
<div style={{ flex: 1 }}>
<Slider min={0} max={200} step={1} value={value} onChange={onChange} disabled={disabled} />
</div>
<NumberInput
value={value}
onChange={(v) => onChange(Number(v) || 0)}
min={0}
max={200}
step={1}
disabled={disabled}
style={{ width: 90 }}
/>
</Group>
</div>
);
return (
<Stack gap="md">
{renderSlider(t('adjustContrast.contrast', 'Contrast'), parameters.contrast, (v) => onParameterChange('contrast', v as any))}
{renderSlider(t('adjustContrast.brightness', 'Brightness'), parameters.brightness, (v) => onParameterChange('brightness', v as any))}
{renderSlider(t('adjustContrast.saturation', 'Saturation'), parameters.saturation, (v) => onParameterChange('saturation', v as any))}
<SliderWithInput label={t('adjustContrast.contrast', 'Contrast')} value={parameters.contrast} onChange={(v) => onParameterChange('contrast', v as any)} disabled={disabled} />
<SliderWithInput label={t('adjustContrast.brightness', 'Brightness')} value={parameters.brightness} onChange={(v) => onParameterChange('brightness', v as any)} disabled={disabled} />
<SliderWithInput label={t('adjustContrast.saturation', 'Saturation')} value={parameters.saturation} onChange={(v) => onParameterChange('saturation', v as any)} disabled={disabled} />
</Stack>
);
}

29
frontend/src/components/tools/adjustContrast/AdjustContrastColorSettings.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { Stack, Slider, Text, Group, NumberInput } from '@mantine/core';
import { Stack } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { AdjustContrastParameters } from '../../../hooks/tools/adjustContrast/useAdjustContrastParameters';
import SliderWithInput from '../../shared/sliderWithInput/SliderWithInput';
interface Props {
parameters: AdjustContrastParameters;
@ -12,31 +13,11 @@ interface Props {
export default function AdjustContrastColorSettings({ parameters, onParameterChange, disabled }: Props) {
const { t } = useTranslation();
const renderSlider = (label: string, value: number, onChange: (v: number) => void) => (
<div>
<Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}%</Text>
<Group gap="sm" align="center">
<div style={{ flex: 1 }}>
<Slider min={0} max={200} step={1} value={value} onChange={onChange} disabled={disabled} />
</div>
<NumberInput
value={value}
onChange={(v) => onChange(Number(v) || 0)}
min={0}
max={200}
step={1}
disabled={disabled}
style={{ width: 90 }}
/>
</Group>
</div>
);
return (
<Stack gap="md">
{renderSlider(t('adjustContrast.red', 'Red'), parameters.red, (v) => onParameterChange('red', v as any))}
{renderSlider(t('adjustContrast.green', 'Green'), parameters.green, (v) => onParameterChange('green', v as any))}
{renderSlider(t('adjustContrast.blue', 'Blue'), parameters.blue, (v) => onParameterChange('blue', v as any))}
<SliderWithInput label={t('adjustContrast.red', 'Red')} value={parameters.red} onChange={(v) => onParameterChange('red', v as any)} disabled={disabled} />
<SliderWithInput label={t('adjustContrast.green', 'Green')} value={parameters.green} onChange={(v) => onParameterChange('green', v as any)} disabled={disabled} />
<SliderWithInput label={t('adjustContrast.blue', 'Blue')} value={parameters.blue} onChange={(v) => onParameterChange('blue', v as any)} disabled={disabled} />
</Stack>
);
}