Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-08-06 13:48:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Rem instead of px

Browse Source 
Close on escape and click externally
This commit is contained in:
Connor Yoh 2025-07-23 14:52:54 +01:00
parent 537e71cfb9
commit 0defce9883
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/tools/convert/ConvertSettings.tsx
View File

@ -64,7 +64,7 @@ const ConvertSettings = ({
options={FROM_FORMAT_OPTIONS} options={FROM_FORMAT_OPTIONS}
onChange={handleFromExtensionChange} onChange={handleFromExtensionChange}
disabled={disabled} disabled={disabled}
minWidth="350px" minWidth="21.875rem"
/> />
</Stack> </Stack>
@ -75,8 +75,8 @@ const ConvertSettings = ({
{!parameters.fromExtension ? ( {!parameters.fromExtension ? (
<UnstyledButton <UnstyledButton
style={{ style={{
padding: '8px 12px', padding: '0.5rem 0.75rem',
border: `1px solid ${theme.colors.gray[4]}`, border: `0.0625rem solid ${theme.colors.gray[4]}`,
borderRadius: theme.radius.sm, borderRadius: theme.radius.sm,
backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1], backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6], color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
@ -87,7 +87,7 @@ const ConvertSettings = ({
<Text size="sm">Select a source format first</Text> <Text size="sm">Select a source format first</Text>
<KeyboardArrowDownIcon <KeyboardArrowDownIcon
style={{ style={{
fontSize: 16, fontSize: '1rem',
color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6] color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
}} }}
/> />
@ -100,7 +100,7 @@ const ConvertSettings = ({
options={getAvailableToExtensions(parameters.fromExtension) || []} options={getAvailableToExtensions(parameters.fromExtension) || []}
onChange={handleToExtensionChange} onChange={handleToExtensionChange}
disabled={disabled} disabled={disabled}
minWidth="350px" minWidth="21.875rem"
/> />
)} )}
</Stack> </Stack>

20
frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
View File

@ -23,7 +23,7 @@ const GroupedFormatDropdown = ({
options, options,
onChange, onChange,
disabled = false, disabled = false,
minWidth = "300px" minWidth = "18.75rem"
}: GroupedFormatDropdownProps) => { }: GroupedFormatDropdownProps) => {
const [dropdownOpened, setDropdownOpened] = useState(false); const [dropdownOpened, setDropdownOpened] = useState(false);
const theme = useMantineTheme(); const theme = useMantineTheme();
@ -58,19 +58,21 @@ const GroupedFormatDropdown = ({
return ( return (
<Popover <Popover
opened={dropdownOpened} opened={dropdownOpened}
onClose={() => setDropdownOpened(false)} onDismiss={() => setDropdownOpened(false)}
position="bottom-start" position="bottom-start"
withArrow withArrow
shadow="sm" shadow="sm"
disabled={disabled} disabled={disabled}
closeOnEscape={true}
trapFocus
> >
<Popover.Target> <Popover.Target>
<UnstyledButton <UnstyledButton
onClick={() => setDropdownOpened(!dropdownOpened)} onClick={() => setDropdownOpened(!dropdownOpened)}
disabled={disabled} disabled={disabled}
style={{ style={{
padding: '8px 12px', padding: '0.5rem 0.75rem',
border: `1px solid ${theme.colors.gray[4]}`, border: `0.0625rem solid ${theme.colors.gray[4]}`,
borderRadius: theme.radius.sm, borderRadius: theme.radius.sm,
backgroundColor: disabled backgroundColor: disabled
? theme.colors.gray[1] ? theme.colors.gray[1]
@ -88,7 +90,7 @@ const GroupedFormatDropdown = ({
</Text> </Text>
<KeyboardArrowDownIcon <KeyboardArrowDownIcon
style={{ style={{
fontSize: 16, fontSize: '1rem',
transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)', transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',
transition: 'transform 0.2s ease', transition: 'transform 0.2s ease',
color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6] color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
@ -101,7 +103,7 @@ const GroupedFormatDropdown = ({
style={{ style={{
minWidth, minWidth,
backgroundColor: colorScheme === 'dark' ? theme.colors.dark[7] : theme.white, backgroundColor: colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
border: `1px solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`, border: `0.0625rem solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,
}} }}
> >
<Stack gap="md"> <Stack gap="md">
@ -123,9 +125,9 @@ const GroupedFormatDropdown = ({
size="sm" size="sm"
onClick={() => handleOptionSelect(option.value)} onClick={() => handleOptionSelect(option.value)}
style={{ style={{
fontSize: '12px', fontSize: '0.75rem',
height: '32px', height: '2rem',
padding: '0 12px' padding: '0 0.75rem'
}} }}
> >
{option.label} {option.label}