new release #190

Merged
b merged 68 commits from staging into main 2024-09-06 18:59:34 +00:00
5 changed files with 140 additions and 117 deletions
Showing only changes of commit f8533b0ffd - Show all commits

View File

@ -1,7 +1,5 @@
import { Close } from '@mui/icons-material' import { Close } from '@mui/icons-material'
import { import {
Box,
CircularProgress,
FormControl, FormControl,
InputLabel, InputLabel,
ListItemIcon, ListItemIcon,
@ -22,6 +20,7 @@ import { ExtensionFileBox } from '../ExtensionFileBox'
import { inPx } from '../../utils/pdf' import { inPx } from '../../utils/pdf'
import { useScale } from '../../hooks/useScale' import { useScale } from '../../hooks/useScale'
import { AvatarIconButton } from '../UserAvatarIconButton' import { AvatarIconButton } from '../UserAvatarIconButton'
import { LoadingSpinner } from '../LoadingSpinner'
PDFJS.GlobalWorkerOptions.workerSrc = new URL( PDFJS.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs', 'pdfjs-dist/build/pdf.worker.min.mjs',
@ -530,11 +529,7 @@ export const DrawPDFFields = (props: Props) => {
} }
if (parsingPdf) { if (parsingPdf) {
return ( return <LoadingSpinner variant="small" />
<Box sx={{ width: '100%', textAlign: 'center' }}>
<CircularProgress />
</Box>
)
} }
if (!sigitFiles.length) { if (!sigitFiles.length) {

View File

@ -1,12 +1,24 @@
import styles from './style.module.scss' import styles from './style.module.scss'
interface Props { interface Props {
desc: string desc?: string
variant?: 'small' | 'default'
} }
export const LoadingSpinner = (props: Props) => { export const LoadingSpinner = (props: Props) => {
const { desc } = props const { desc, variant = 'default' } = props
switch (variant) {
case 'small':
return (
<div
className={`${styles.loadingSpinnerContainer} ${styles.withHeight}`}
>
<div className={styles.loadingSpinner}></div>
</div>
)
default:
return ( return (
<div className={styles.loadingSpinnerOverlay}> <div className={styles.loadingSpinnerOverlay}>
<div className={styles.loadingSpinnerContainer}> <div className={styles.loadingSpinnerContainer}>
@ -15,4 +27,5 @@ export const LoadingSpinner = (props: Props) => {
</div> </div>
</div> </div>
) )
}
} }

View File

@ -11,20 +11,24 @@
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-index: 9999; z-index: 9999;
}
.loadingSpinnerContainer { .loadingSpinnerContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
.loadingSpinner { &.withHeight {
min-height: 250px;
}
}
.loadingSpinner {
background: url('/favicon.png') no-repeat center / cover; background: url('/favicon.png') no-repeat center / cover;
width: 40px; width: 40px;
height: 40px; height: 40px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
}
} }
.loadingSpinnerDesc { .loadingSpinnerDesc {

View File

@ -4,6 +4,7 @@ import { CurrentUserFile } from '../../types/file.ts'
import { useEffect, useRef } from 'react' import { useEffect, useRef } from 'react'
import { FileDivider } from '../FileDivider.tsx' import { FileDivider } from '../FileDivider.tsx'
import React from 'react' import React from 'react'
import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
interface PdfViewProps { interface PdfViewProps {
currentFile: CurrentUserFile | null currentFile: CurrentUserFile | null
@ -48,7 +49,8 @@ const PdfView = ({
index !== files.length - 1 index !== files.length - 1
return ( return (
<div className="files-wrapper"> <div className="files-wrapper">
{files.map((currentUserFile, index, arr) => { {files.length > 0 ? (
files.map((currentUserFile, index, arr) => {
const { hash, file, id } = currentUserFile const { hash, file, id } = currentUserFile
if (!hash) return if (!hash) return
@ -71,7 +73,10 @@ const PdfView = ({
{isNotLastPdfFile(index, arr) && <FileDivider />} {isNotLastPdfFile(index, arr) && <FileDivider />}
</React.Fragment> </React.Fragment>
) )
})} })
) : (
<LoadingSpinner variant="small" />
)}
</div> </div>
) )
} }

View File

@ -79,7 +79,8 @@ const SlimPdfView = ({
}, [currentFile]) }, [currentFile])
return ( return (
<div className="files-wrapper"> <div className="files-wrapper">
{files.map((currentUserFile, i) => { {files.length > 0 ? (
files.map((currentUserFile, i) => {
const { hash, file, id } = currentUserFile const { hash, file, id } = currentUserFile
const signatureEvents = Object.keys(parsedSignatureEvents) const signatureEvents = Object.keys(parsedSignatureEvents)
if (!hash) return if (!hash) return
@ -120,7 +121,9 @@ const SlimPdfView = ({
left: inPx(from(page.width, m.location.left)), left: inPx(from(page.width, m.location.left)),
top: inPx(from(page.width, m.location.top)), top: inPx(from(page.width, m.location.top)),
width: inPx(from(page.width, m.location.width)), width: inPx(from(page.width, m.location.width)),
height: inPx(from(page.width, m.location.height)), height: inPx(
from(page.width, m.location.height)
),
fontFamily: FONT_TYPE, fontFamily: FONT_TYPE,
fontSize: inPx(from(page.width, FONT_SIZE)) fontSize: inPx(from(page.width, FONT_SIZE))
}} }}
@ -146,7 +149,10 @@ const SlimPdfView = ({
{i < files.length - 1 && <FileDivider />} {i < files.length - 1 && <FileDivider />}
</React.Fragment> </React.Fragment>
) )
})} })
) : (
<LoadingSpinner variant="small" />
)}
</div> </div>
) )
} }