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

Ux cleanup

Browse Source
This commit is contained in:
Reece 2025-11-03 18:20:27 +00:00
parent a86ece0473
commit 75ff6ed441
2 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/core/components/annotation/shared/TextInputWithFont.tsx
View File

@ -34,12 +34,18 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
const [fontSizeInput, setFontSizeInput] = useState(fontSize.toString()); const [fontSizeInput, setFontSizeInput] = useState(fontSize.toString());
const fontSizeCombobox = useCombobox(); const fontSizeCombobox = useCombobox();
const [isColorPickerOpen, setIsColorPickerOpen] = useState(false); const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
const [colorInput, setColorInput] = useState(textColor);
// Sync font size input with prop changes // Sync font size input with prop changes
useEffect(() => { useEffect(() => {
setFontSizeInput(fontSize.toString()); setFontSizeInput(fontSize.toString());
}, [fontSize]); }, [fontSize]);
// Sync color input with prop changes
useEffect(() => {
setColorInput(textColor);
}, [textColor]);
const fontOptions = [ const fontOptions = [
{ value: 'Helvetica', label: 'Helvetica' }, { value: 'Helvetica', label: 'Helvetica' },
{ value: 'Times-Roman', label: 'Times' }, { value: 'Times-Roman', label: 'Times' },
@ -50,6 +56,11 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
const fontSizeOptions = ['8', '12', '16', '20', '24', '28', '32', '36', '40', '48', '56', '64', '72', '80', '96', '112', '128', '144', '160', '176', '192', '200']; const fontSizeOptions = ['8', '12', '16', '20', '24', '28', '32', '36', '40', '48', '56', '64', '72', '80', '96', '112', '128', '144', '160', '176', '192', '200'];
// Validate hex color
const isValidHexColor = (color: string): boolean => {
return /^#[0-9A-Fa-f]{6}$/.test(color);
};
return ( return (
<Stack gap="sm"> <Stack gap="sm">
<TextInput <TextInput
@ -136,13 +147,28 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
<Box> <Box>
<TextInput <TextInput
label={t('sign.text.colorLabel', 'Text colour')} label={t('sign.text.colorLabel', 'Text colour')}
value={textColor} value={colorInput}
readOnly placeholder="#000000"
disabled={disabled} disabled={disabled}
onClick={() => !disabled && setIsColorPickerOpen(true)} onChange={(e) => {
style={{ cursor: disabled ? 'default' : 'pointer', width: '100%' }} const value = e.currentTarget.value;
setColorInput(value);
// Update color if valid hex
if (isValidHexColor(value)) {
onTextColorChange(value);
}
}}
onBlur={() => {
// Revert to valid color on blur if invalid
if (!isValidHexColor(colorInput)) {
setColorInput(textColor);
}
}}
style={{ width: '100%' }}
rightSection={ rightSection={
<Box <Box
onClick={() => !disabled && setIsColorPickerOpen(true)}
style={{ style={{
width: 24, width: 24,
height: 24, height: 24,

26
frontend/src/core/components/tools/sign/SignSettings.tsx
View File

@ -1,6 +1,6 @@
import { useState, useEffect, useMemo, useRef } from 'react'; import { useState, useEffect, useMemo, useRef } from 'react';
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Stack, Button, Text, Alert, SegmentedControl, Divider, ActionIcon, Tooltip } from '@mantine/core'; import { Stack, Button, Text, Alert, SegmentedControl, Divider, ActionIcon, Tooltip, Group, Box } from '@mantine/core';
import { SignParameters } from "@app/hooks/tools/sign/useSignParameters"; import { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
import { SuggestedToolsSection } from "@app/components/tools/shared/SuggestedToolsSection"; import { SuggestedToolsSection } from "@app/components/tools/shared/SuggestedToolsSection";
import { useSignature } from "@app/contexts/SignatureContext"; import { useSignature } from "@app/contexts/SignatureContext";
@ -582,16 +582,20 @@ const SignSettings = ({
{t('sign.step.placeDesc', 'Position the signature on your PDF')} {t('sign.step.placeDesc', 'Position the signature on your PDF')}
</Text> </Text>
<DrawingControls <Group gap="xs" wrap="nowrap" align="center">
onUndo={onUndo} <DrawingControls
onRedo={onRedo} onUndo={onUndo}
canUndo={historyAvailability.canUndo} onRedo={onRedo}
canRedo={historyAvailability.canRedo} canUndo={historyAvailability.canUndo}
hasSignatureData={hasAnySignature} canRedo={historyAvailability.canRedo}
disabled={disabled} hasSignatureData={hasAnySignature}
showPlaceButton={false} disabled={disabled}
additionalControls={placementToggleControl} showPlaceButton={false}
/> />
<Box style={{ marginLeft: 'auto' }}>
{placementToggleControl}
</Box>
</Group>
<Alert color={placementAlert.color} title={placementAlert.title}> <Alert color={placementAlert.color} title={placementAlert.title}>
<Text size="sm"> <Text size="sm">