mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-21 11:57:34 +00:00
Improve filepreview
This commit is contained in:
Connor Yoh
parent
fcf7fcd9a3
commit
c650f07a70
@ -12,7 +12,7 @@ interface CompactFileDetailsProps {
|
||||
thumbnail: string | null;
|
||||
selectedFiles: FileWithUrl[];
|
||||
currentFileIndex: number;
|
||||
hasMultipleFiles: boolean;
|
||||
numberOfFiles: number;
|
||||
isAnimating: boolean;
|
||||
onPrevious: () => void;
|
||||
onNext: () => void;
|
||||
@ -24,7 +24,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
|
||||
thumbnail,
|
||||
selectedFiles,
|
||||
currentFileIndex,
|
||||
hasMultipleFiles,
|
||||
numberOfFiles,
|
||||
isAnimating,
|
||||
onPrevious,
|
||||
onNext,
|
||||
@ -32,6 +32,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const hasSelection = selectedFiles.length > 0;
|
||||
const hasMultipleFiles = numberOfFiles > 1;
|
||||
|
||||
return (
|
||||
<Stack gap="xs" style={{ height: '100%' }}>
|
||||
|
||||
@ -64,7 +64,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
|
||||
thumbnail={getCurrentThumbnail()}
|
||||
selectedFiles={selectedFiles}
|
||||
currentFileIndex={currentFileIndex}
|
||||
hasMultipleFiles={hasMultipleFiles}
|
||||
numberOfFiles={selectedFiles.length}
|
||||
isAnimating={isAnimating}
|
||||
onPrevious={handlePrevious}
|
||||
onNext={handleNext}
|
||||
@ -79,7 +79,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
|
||||
<FilePreview
|
||||
currentFile={currentFile}
|
||||
thumbnail={getCurrentThumbnail()}
|
||||
hasMultipleFiles={hasMultipleFiles}
|
||||
numberOfFiles={selectedFiles.length}
|
||||
isAnimating={isAnimating}
|
||||
modalHeight={modalHeight}
|
||||
onPrevious={handlePrevious}
|
||||
|
||||
@ -8,7 +8,7 @@ import { FileWithUrl } from '../../types/file';
|
||||
interface FilePreviewProps {
|
||||
currentFile: FileWithUrl | null;
|
||||
thumbnail: string | null;
|
||||
hasMultipleFiles: boolean;
|
||||
numberOfFiles: number;
|
||||
isAnimating: boolean;
|
||||
modalHeight: string;
|
||||
onPrevious: () => void;
|
||||
@ -18,12 +18,39 @@ interface FilePreviewProps {
|
||||
const FilePreview: React.FC<FilePreviewProps> = ({
|
||||
currentFile,
|
||||
thumbnail,
|
||||
hasMultipleFiles,
|
||||
numberOfFiles,
|
||||
isAnimating,
|
||||
modalHeight,
|
||||
onPrevious,
|
||||
onNext
|
||||
}) => {
|
||||
const hasMultipleFiles = numberOfFiles > 1;
|
||||
// Common style objects
|
||||
const navigationArrowStyle = {
|
||||
position: 'absolute' as const,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
zIndex: 10
|
||||
};
|
||||
|
||||
const stackDocumentBaseStyle = {
|
||||
position: 'absolute' as const,
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
};
|
||||
|
||||
const animationStyle = {
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transform: isAnimating ? 'scale(0.95) translateX(1.25rem)' : 'scale(1) translateX(0)',
|
||||
opacity: isAnimating ? 0.7 : 1
|
||||
};
|
||||
|
||||
const mainDocumentShadow = '0 6px 16px rgba(0, 0, 0, 0.2)';
|
||||
const stackDocumentShadows = {
|
||||
back: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
middle: '0 3px 10px rgba(0, 0, 0, 0.12)'
|
||||
};
|
||||
|
||||
return (
|
||||
<Box p="xs" style={{ textAlign: 'center', flexShrink: 0 }}>
|
||||
<Box style={{ position: 'relative', width: "100%", height: `calc(${modalHeight} * 0.5 - 2rem)`, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
@ -36,11 +63,8 @@ const FilePreview: React.FC<FilePreviewProps> = ({
|
||||
color="blue"
|
||||
disabled={isAnimating}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '0',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
zIndex: 10
|
||||
...navigationArrowStyle,
|
||||
left: '0'
|
||||
}}
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
@ -50,34 +74,30 @@ const FilePreview: React.FC<FilePreviewProps> = ({
|
||||
{/* Document Stack Container */}
|
||||
<Box style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
{/* Background documents (stack effect) */}
|
||||
{hasMultipleFiles && (
|
||||
<>
|
||||
{/* Third document (furthest back) */}
|
||||
<Box
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: 'var(--mantine-color-gray-2)',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
transform: 'translate(0.75rem, 0.75rem) rotate(2deg)',
|
||||
zIndex: 1
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Second document */}
|
||||
<Box
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: 'var(--mantine-color-gray-1)',
|
||||
boxShadow: '0 3px 10px rgba(0, 0, 0, 0.12)',
|
||||
transform: 'translate(0.375rem, 0.375rem) rotate(1deg)',
|
||||
zIndex: 2
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
{/* Show 2 shadow pages for 3+ files */}
|
||||
{numberOfFiles >= 3 && (
|
||||
<Box
|
||||
style={{
|
||||
...stackDocumentBaseStyle,
|
||||
backgroundColor: 'var(--mantine-color-gray-3)',
|
||||
boxShadow: stackDocumentShadows.back,
|
||||
transform: 'translate(0.75rem, 0.75rem) rotate(2deg)',
|
||||
zIndex: 1
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Show 1 shadow page for 2+ files */}
|
||||
{numberOfFiles >= 2 && (
|
||||
<Box
|
||||
style={{
|
||||
...stackDocumentBaseStyle,
|
||||
backgroundColor: 'var(--mantine-color-gray-2)',
|
||||
boxShadow: stackDocumentShadows.middle,
|
||||
transform: 'translate(0.375rem, 0.375rem) rotate(1deg)',
|
||||
zIndex: 2
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Main document */}
|
||||
@ -91,13 +111,10 @@ const FilePreview: React.FC<FilePreviewProps> = ({
|
||||
maxHeight: '100%',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)',
|
||||
borderRadius: '0.5rem',
|
||||
boxShadow: mainDocumentShadow,
|
||||
position: 'relative',
|
||||
zIndex: 3,
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transform: isAnimating ? 'scale(0.95) translateX(1.25rem)' : 'scale(1) translateX(0)',
|
||||
opacity: isAnimating ? 0.7 : 1
|
||||
...animationStyle
|
||||
}}
|
||||
/>
|
||||
) : currentFile ? (
|
||||
@ -105,12 +122,10 @@ const FilePreview: React.FC<FilePreviewProps> = ({
|
||||
width: '80%',
|
||||
height: '80%',
|
||||
backgroundColor: 'var(--mantine-color-gray-1)',
|
||||
boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)',
|
||||
boxShadow: mainDocumentShadow,
|
||||
position: 'relative',
|
||||
zIndex: 3,
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transform: isAnimating ? 'scale(0.95) translateX(1.25rem)' : 'scale(1) translateX(0)',
|
||||
opacity: isAnimating ? 0.7 : 1
|
||||
...animationStyle
|
||||
}}>
|
||||
<PictureAsPdfIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-6)' }} />
|
||||
</Center>
|
||||
@ -126,11 +141,8 @@ const FilePreview: React.FC<FilePreviewProps> = ({
|
||||
color="blue"
|
||||
disabled={isAnimating}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '0',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
zIndex: 10
|
||||
...navigationArrowStyle,
|
||||
right: '0'
|
||||
}}
|
||||
>
|
||||
<ChevronRightIcon />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user