Releasing new design #161

Merged
b merged 241 commits from staging into main 2024-08-21 11:38:25 +00:00
3 changed files with 33 additions and 26 deletions
Showing only changes of commit 1caeb48e6c - Show all commits

View File

@ -16,7 +16,7 @@ import {
Select Select
} from '@mui/material' } from '@mui/material'
import styles from './style.module.scss' import styles from './style.module.scss'
import { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import * as PDFJS from 'pdfjs-dist' import * as PDFJS from 'pdfjs-dist'
import { ProfileMetadata, User, UserRole } from '../../types' import { ProfileMetadata, User, UserRole } from '../../types'
@ -535,26 +535,24 @@ export const DrawPDFFields = (props: Props) => {
<div className={styles.view}> <div className={styles.view}>
{pdfFiles.map((pdfFile, pdfFileIndex: number) => { {pdfFiles.map((pdfFile, pdfFileIndex: number) => {
return ( return (
<> <React.Fragment key={pdfFile.file.name}>
<div <div
key={pdfFile.file.name}
className={`${styles.fileWrapper} ${styles.scrollTarget}`} className={`${styles.fileWrapper} ${styles.scrollTarget}`}
id={`file-${pdfFile.file.name}`} id={`file-${pdfFile.file.name}`}
> >
{getPdfPages(pdfFile, pdfFileIndex)} {getPdfPages(pdfFile, pdfFileIndex)}
{pdfFileIndex < pdfFiles.length - 1 && (
<Divider
sx={{
fontSize: '12px',
color: 'rgba(0,0,0,0.15)'
}}
>
File Separator
</Divider>
)}
</div> </div>
{pdfFileIndex < pdfFiles.length - 1 && ( </React.Fragment>
<Divider
key={pdfFile.file.name + `-divider`}
sx={{
fontSize: '12px',
color: 'rgba(0,0,0,0.15)'
}}
>
File Separator
</Divider>
)}
</>
) )
})} })}

View File

@ -52,6 +52,7 @@ import {
} from '../../utils' } from '../../utils'
import { Container } from '../../components/Container' import { Container } from '../../components/Container'
import styles from './style.module.scss' import styles from './style.module.scss'
import fileListStyles from '../../components/FileList/style.module.scss'
import { PdfFile } from '../../types/drawing' import { PdfFile } from '../../types/drawing'
import { DrawPDFFields } from '../../components/DrawPDFFields' import { DrawPDFFields } from '../../components/DrawPDFFields'
import { Mark } from '../../types/mark.ts' import { Mark } from '../../types/mark.ts'
@ -69,6 +70,8 @@ export const CreatePage = () => {
const navigate = useNavigate() const navigate = useNavigate()
const location = useLocation() const location = useLocation()
const { uploadedFiles } = location.state || {} const { uploadedFiles } = location.state || {}
const [currentFile, setCurrentFile] = useState<File>()
const isActive = (file: File) => file.name === currentFile?.name
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('') const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@ -281,8 +284,8 @@ export const CreatePage = () => {
} }
} }
const handleFileClick = (name: string) => { const handleFileClick = (id: string) => {
document.getElementById(name)?.scrollIntoView({ behavior: 'smooth' }) document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
} }
const handleRemoveFile = ( const handleRemoveFile = (
@ -737,13 +740,16 @@ export const CreatePage = () => {
<ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}> <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
{selectedFiles.length > 0 && {selectedFiles.length > 0 &&
selectedFiles.map((file, index) => ( selectedFiles.map((file, index) => (
<Button <div
key={index} key={index}
className={styles.file} className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
onClick={() => handleFileClick('file-' + file.name)} onClick={() => {
handleFileClick('file-' + file.name)
setCurrentFile(file)
}}
> >
<> <>
<span>{file.name}</span> <span className={styles.fileName}>{file.name}</span>
<Button <Button
variant="text" variant="text"
onClick={(event) => handleRemoveFile(event, file)} onClick={(event) => handleRemoveFile(event, file)}
@ -754,7 +760,7 @@ export const CreatePage = () => {
<FontAwesomeIcon icon={faTrash} /> <FontAwesomeIcon icon={faTrash} />
</Button> </Button>
</> </>
</Button> </div>
))} ))}
</ol> </ol>
<Button variant="contained" onClick={handleUploadButtonClick}> <Button variant="contained" onClick={handleUploadButtonClick}>

View File

@ -24,10 +24,6 @@
cursor: pointer; cursor: pointer;
gap: 10px; gap: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&::before { &::before {
content: counter(item) ' '; content: counter(item) ' ';
counter-increment: item; counter-increment: item;
@ -113,3 +109,10 @@
margin-left: 34px; margin-left: 34px;
} }
} }
.fileName {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-grow: 1;
}