mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-09-18 09:29:24 +00:00
Stack options
This commit is contained in:
Connor Yoh
parent
4f67aca9e4
commit
91821f805f
@ -1,26 +1,15 @@
|
||||
import { Grid, Card, Stack, Text } from '@mantine/core';
|
||||
import { Stack, Card, Text } from '@mantine/core';
|
||||
import { Tooltip } from '../../shared/Tooltip';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SPLIT_METHODS, type SplitMethod } from '../../../constants/splitConstants';
|
||||
import { type SplitMethod, METHOD_OPTIONS } from '../../../constants/splitConstants';
|
||||
import { useSplitSettingsTips } from '../../tooltips/useSplitSettingsTips';
|
||||
|
||||
export interface SplitMethodSelectorProps {
|
||||
selectedMethod: SplitMethod | '';
|
||||
onMethodSelect: (method: SplitMethod) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface MethodOption {
|
||||
method: SplitMethod;
|
||||
icon: string;
|
||||
prefixKey: string;
|
||||
nameKey: string;
|
||||
descKey: string;
|
||||
tooltipKey: string;
|
||||
}
|
||||
|
||||
const SplitMethodSelector = ({
|
||||
selectedMethod,
|
||||
onMethodSelect,
|
||||
disabled = false
|
||||
}: SplitMethodSelectorProps) => {
|
||||
@ -32,65 +21,6 @@ const SplitMethodSelector = ({
|
||||
return tooltipContent?.tips || [];
|
||||
};
|
||||
|
||||
const methodOptions: MethodOption[] = [
|
||||
{
|
||||
method: SPLIT_METHODS.BY_PAGES,
|
||||
icon: "format-list-numbered-rounded",
|
||||
prefixKey: "split.methods.prefix.splitAt",
|
||||
nameKey: "split.methods.byPages.name",
|
||||
descKey: "split.methods.byPages.desc",
|
||||
tooltipKey: "split.methods.byPages.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_CHAPTERS,
|
||||
icon: "bookmark-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.byChapters.name",
|
||||
descKey: "split.methods.byChapters.desc",
|
||||
tooltipKey: "split.methods.byChapters.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_SECTIONS,
|
||||
icon: "grid-on-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.bySections.name",
|
||||
descKey: "split.methods.bySections.desc",
|
||||
tooltipKey: "split.methods.bySections.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_SIZE,
|
||||
icon: "storage-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.bySize.name",
|
||||
descKey: "split.methods.bySize.desc",
|
||||
tooltipKey: "split.methods.bySize.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_PAGE_COUNT,
|
||||
icon: "numbers-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.byPageCount.name",
|
||||
descKey: "split.methods.byPageCount.desc",
|
||||
tooltipKey: "split.methods.byPageCount.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_DOC_COUNT,
|
||||
icon: "content-copy-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.byDocCount.name",
|
||||
descKey: "split.methods.byDocCount.desc",
|
||||
tooltipKey: "split.methods.byDocCount.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_PAGE_DIVIDER,
|
||||
icon: "auto-awesome-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.byPageDivider.name",
|
||||
descKey: "split.methods.byPageDivider.desc",
|
||||
tooltipKey: "split.methods.byPageDivider.tooltip"
|
||||
}
|
||||
];
|
||||
|
||||
const handleMethodClick = (method: SplitMethod) => {
|
||||
if (!disabled) {
|
||||
onMethodSelect(method);
|
||||
@ -98,67 +28,66 @@ const SplitMethodSelector = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
{methodOptions.map((option) => (
|
||||
<Grid.Col key={option.method} span={{ base: 12, sm: 6 }}>
|
||||
<Stack gap="sm">
|
||||
{METHOD_OPTIONS.map((option) => (
|
||||
<Tooltip
|
||||
key={option.method}
|
||||
sidebarTooltip
|
||||
tips={getMethodTooltip(option.method)}
|
||||
>
|
||||
<Card
|
||||
shadow="sm"
|
||||
radius="md"
|
||||
withBorder
|
||||
|
||||
h={120}
|
||||
w="100%"
|
||||
h={'3.5rem'}
|
||||
style={{
|
||||
cursor: disabled ? 'default' : 'pointer',
|
||||
backgroundColor: selectedMethod === option.method ? 'var(--mantine-color-blue-light)' : 'var(--mantine-color-gray-2)',
|
||||
borderColor: selectedMethod === option.method ? 'var(--mantine-color-blue-filled)' : 'var(--mantine-color-gray-3)',
|
||||
backgroundColor: 'var(--mantine-color-gray-2)',
|
||||
borderColor: 'var(--mantine-color-gray-3)',
|
||||
opacity: disabled ? 0.6 : 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
flexDirection: 'row',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!disabled) {
|
||||
e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-3)';
|
||||
e.currentTarget.style.transform = 'translateY(-1px)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!disabled) {
|
||||
e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-2)';
|
||||
e.currentTarget.style.transform = 'translateY(0px)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}
|
||||
}}
|
||||
onClick={() => handleMethodClick(option.method)}
|
||||
>
|
||||
<Stack align="center" gap={0} p="xs" h="100%" justify="Center">
|
||||
{/* Prefix section */}
|
||||
<Stack align="center" style={{ justifyContent: 'center' }}>
|
||||
<Text
|
||||
size="xs"
|
||||
c="dimmed"
|
||||
ta="center"
|
||||
fw={400}
|
||||
>
|
||||
<div style={{ width: '100%', position: 'relative', display: 'flex', flexDirection: 'row' }}>
|
||||
{/* Prefix in top left corner */}
|
||||
<Text size="xs" c="dimmed" ta="center" fw={400} style={{
|
||||
|
||||
}}>
|
||||
{t(option.prefixKey, "Split by")}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
{/* Title section */}
|
||||
<Stack align="center" style={{ justifyContent: 'center' }}>
|
||||
<div style={{ }}>
|
||||
<Text
|
||||
fw={selectedMethod === option.method ? 600 : 500}
|
||||
fw={500}
|
||||
size="sm"
|
||||
c={undefined}
|
||||
ta="center"
|
||||
c={selectedMethod === option.method ? 'blue' : undefined}
|
||||
style={{ lineHeight: 1.2 }}
|
||||
style={{ marginLeft: '0.25rem' }}
|
||||
>
|
||||
{t(option.nameKey, "Method Name")}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
{/* Description section - fixed height
|
||||
<Stack align="center" style={{ height: '60px', justifyContent: 'flex-start' }}>
|
||||
<Text size="xs" c="dimmed" ta="center" style={{ lineHeight: 1.3 }}>
|
||||
{t(option.descKey, "Method description")}
|
||||
</Text>
|
||||
</Stack> */}
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Tooltip>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -24,4 +24,72 @@ export const isSplitMethod = (value: string | null): value is SplitMethod => {
|
||||
return Object.values(SPLIT_METHODS).includes(value as SplitMethod);
|
||||
}
|
||||
|
||||
export interface MethodOption {
|
||||
method: SplitMethod;
|
||||
icon: string;
|
||||
prefixKey: string;
|
||||
nameKey: string;
|
||||
descKey: string;
|
||||
tooltipKey: string;
|
||||
}
|
||||
|
||||
export const METHOD_OPTIONS: MethodOption[] = [
|
||||
{
|
||||
method: SPLIT_METHODS.BY_PAGES,
|
||||
icon: "format-list-numbered-rounded",
|
||||
prefixKey: "split.methods.prefix.splitAt",
|
||||
nameKey: "split.methods.byPages.name",
|
||||
descKey: "split.methods.byPages.desc",
|
||||
tooltipKey: "split.methods.byPages.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_CHAPTERS,
|
||||
icon: "bookmark-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.byChapters.name",
|
||||
descKey: "split.methods.byChapters.desc",
|
||||
tooltipKey: "split.methods.byChapters.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_SECTIONS,
|
||||
icon: "grid-on-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.bySections.name",
|
||||
descKey: "split.methods.bySections.desc",
|
||||
tooltipKey: "split.methods.bySections.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_SIZE,
|
||||
icon: "storage-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.bySize.name",
|
||||
descKey: "split.methods.bySize.desc",
|
||||
tooltipKey: "split.methods.bySize.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_PAGE_COUNT,
|
||||
icon: "numbers-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.byPageCount.name",
|
||||
descKey: "split.methods.byPageCount.desc",
|
||||
tooltipKey: "split.methods.byPageCount.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_DOC_COUNT,
|
||||
icon: "content-copy-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.byDocCount.name",
|
||||
descKey: "split.methods.byDocCount.desc",
|
||||
tooltipKey: "split.methods.byDocCount.tooltip"
|
||||
},
|
||||
{
|
||||
method: SPLIT_METHODS.BY_PAGE_DIVIDER,
|
||||
icon: "auto-awesome-rounded",
|
||||
prefixKey: "split.methods.prefix.splitBy",
|
||||
nameKey: "split.methods.byPageDivider.name",
|
||||
descKey: "split.methods.byPageDivider.desc",
|
||||
tooltipKey: "split.methods.byPageDivider.tooltip"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
@ -77,7 +77,6 @@ const Split = (props: BaseToolProps) => {
|
||||
tooltip: methodTips,
|
||||
content: (
|
||||
<SplitMethodSelector
|
||||
selectedMethod={base.params.parameters.method}
|
||||
onMethodSelect={(method) => base.params.updateParameter('method', method)}
|
||||
disabled={base.endpointLoading}
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user