Responsiveness and tabs #179

Merged
enes merged 23 commits from 177-sticky-side-columns into staging 2024-09-05 07:30:55 +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 {
Box,
CircularProgress,
FormControl,
InputLabel,
ListItemIcon,
@ -22,6 +20,7 @@ import { ExtensionFileBox } from '../ExtensionFileBox'
import { inPx } from '../../utils/pdf'
import { useScale } from '../../hooks/useScale'
import { AvatarIconButton } from '../UserAvatarIconButton'
import { LoadingSpinner } from '../LoadingSpinner'
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
@ -530,11 +529,7 @@ export const DrawPDFFields = (props: Props) => {
}
if (parsingPdf) {
return (
<Box sx={{ width: '100%', textAlign: 'center' }}>
<CircularProgress />
</Box>
)
return <LoadingSpinner variant="small" />
}
if (!sigitFiles.length) {

View File

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

View File

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

View File

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

View File

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