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

remove inline styling

Browse Source
This commit is contained in:
EthanHealy01 2025-10-06 21:46:43 +01:00
parent 33383f7ee4
commit a10c21bb77
2 changed files with 59 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/tools/overlayPdfs/OverlayPdfsSettings.module.css Normal file
View File

@ -0,0 +1,50 @@
.fileListContainer {
max-height: 16.25rem;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
}
.fileItem {
border: 1px solid var(--mantine-color-gray-3);
border-radius: var(--mantine-radius-sm);
align-items: center;
width: 100%;
}
.fileNameContainer {
flex: 1;
min-width: 0;
}
.fileName {
font-size: var(--mantine-font-size-sm);
font-weight: 400;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
word-break: break-word;
}
.fileSize {
flex-shrink: 0;
}
.removeButton {
flex-shrink: 0;
}
.countLabel {
width: 140px;
flex-shrink: 0;
}
.fileGroup {
flex: 1;
min-width: 0;
align-items: center;
}

43
frontend/src/components/tools/overlayPdfs/OverlayPdfsSettings.tsx
View File

@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
import { type OverlayPdfsParameters, type OverlayMode } from '../../../hooks/tools/overlayPdfs/useOverlayPdfsParameters';
import LocalIcon from '../../shared/LocalIcon';
import { useFilesModalContext } from '../../../contexts/FilesModalContext';
import styles from './OverlayPdfsSettings.module.css';
interface OverlayPdfsSettingsProps {
parameters: OverlayPdfsParameters;
@ -82,7 +83,7 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
<Stack gap="xs">
{parameters.overlayFiles.map((_, index) => (
<Group key={index} gap="xs" wrap="nowrap">
<Text size="sm" style={{ width: 140, flexShrink: 0 }}>
<Text size="sm" className={styles.countLabel}>
{t('overlay-pdfs.counts.item', 'Count for file')} {index + 1}
</Text>
<NumberInput
@ -126,52 +127,26 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
</Button>
{parameters.overlayFiles?.length > 0 && (() => {
const FILE_ROW_REM = 2.5;
const VISIBLE_ROWS = 6.5;
const maxHeightRem = Math.round(FILE_ROW_REM * VISIBLE_ROWS * 4) / 4;
return (
<div
style={{
maxHeight: `${maxHeightRem}rem`,
overflowY: 'auto',
overflowX: 'hidden',
width: '100%'
}}
>
<div className={styles.fileListContainer}>
<Stack gap="xs">
{parameters.overlayFiles.map((file, index) => (
<Group
key={index}
justify="space-between"
p="xs"
style={{
border: '1px solid var(--mantine-color-gray-3)',
borderRadius: 'var(--mantine-radius-sm)',
alignItems: 'center',
width: '100%'
}}
className={styles.fileItem}
>
<Group gap="xs" style={{ flex: 1, minWidth: 0, alignItems: 'center' }}>
<div style={{ flex: 1, minWidth: 0 }}>
<Group gap="xs" className={styles.fileGroup}>
<div className={styles.fileNameContainer}>
<div
style={{
fontSize: 'var(--mantine-font-size-sm)',
fontWeight: 400,
lineHeight: 1.2,
display: '-webkit-box',
WebkitLineClamp: 1 as any,
WebkitBoxOrient: 'vertical' as any,
overflow: 'hidden',
whiteSpace: 'normal',
wordBreak: 'break-word'
}}
className={styles.fileName}
title={file.name}
>
{file.name}
</div>
</div>
<Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
<Text size="xs" c="dimmed" className={styles.fileSize}>
({(file.size / 1024).toFixed(1)} KB)
</Text>
</Group>
@ -179,7 +154,7 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
size="sm"
variant="subtle"
color="red"
style={{ flexShrink: 0 }}
className={styles.removeButton}
onClick={() => {
const next = (parameters.overlayFiles || []).filter((_, i) => i !== index);
handleOverlayFilesChange(next);