feat(create-page): new create page design #153
@ -16,7 +16,7 @@ import {
|
||||
Select
|
||||
} from '@mui/material'
|
||||
import styles from './style.module.scss'
|
||||
import { useEffect, useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import * as PDFJS from 'pdfjs-dist'
|
||||
import { ProfileMetadata, User, UserRole } from '../../types'
|
||||
@ -535,17 +535,14 @@ export const DrawPDFFields = (props: Props) => {
|
||||
<div className={styles.view}>
|
||||
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
|
||||
return (
|
||||
<>
|
||||
<React.Fragment key={pdfFile.file.name}>
|
||||
<div
|
||||
key={pdfFile.file.name}
|
||||
className={`${styles.fileWrapper} ${styles.scrollTarget}`}
|
||||
id={`file-${pdfFile.file.name}`}
|
||||
>
|
||||
{getPdfPages(pdfFile, pdfFileIndex)}
|
||||
</div>
|
||||
{pdfFileIndex < pdfFiles.length - 1 && (
|
||||
<Divider
|
||||
key={pdfFile.file.name + `-divider`}
|
||||
sx={{
|
||||
fontSize: '12px',
|
||||
color: 'rgba(0,0,0,0.15)'
|
||||
@ -554,7 +551,8 @@ export const DrawPDFFields = (props: Props) => {
|
||||
File Separator
|
||||
</Divider>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
|
||||
|
@ -52,6 +52,7 @@ import {
|
||||
} from '../../utils'
|
||||
import { Container } from '../../components/Container'
|
||||
import styles from './style.module.scss'
|
||||
import fileListStyles from '../../components/FileList/style.module.scss'
|
||||
import { PdfFile } from '../../types/drawing'
|
||||
import { DrawPDFFields } from '../../components/DrawPDFFields'
|
||||
import { Mark } from '../../types/mark.ts'
|
||||
@ -69,6 +70,8 @@ export const CreatePage = () => {
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const { uploadedFiles } = location.state || {}
|
||||
const [currentFile, setCurrentFile] = useState<File>()
|
||||
const isActive = (file: File) => file.name === currentFile?.name
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||
@ -281,8 +284,8 @@ export const CreatePage = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileClick = (name: string) => {
|
||||
document.getElementById(name)?.scrollIntoView({ behavior: 'smooth' })
|
||||
const handleFileClick = (id: string) => {
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
|
||||
const handleRemoveFile = (
|
||||
@ -737,13 +740,16 @@ export const CreatePage = () => {
|
||||
<ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
|
||||
{selectedFiles.length > 0 &&
|
||||
selectedFiles.map((file, index) => (
|
||||
<Button
|
||||
<div
|
||||
key={index}
|
||||
className={styles.file}
|
||||
onClick={() => handleFileClick('file-' + file.name)}
|
||||
className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
|
||||
onClick={() => {
|
||||
handleFileClick('file-' + file.name)
|
||||
setCurrentFile(file)
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<span>{file.name}</span>
|
||||
<span className={styles.fileName}>{file.name}</span>
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={(event) => handleRemoveFile(event, file)}
|
||||
@ -754,7 +760,7 @@ export const CreatePage = () => {
|
||||
<FontAwesomeIcon icon={faTrash} />
|
||||
</Button>
|
||||
</>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</ol>
|
||||
<Button variant="contained" onClick={handleUploadButtonClick}>
|
||||
|
@ -24,10 +24,6 @@
|
||||
cursor: pointer;
|
||||
gap: 10px;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&::before {
|
||||
content: counter(item) ' ';
|
||||
counter-increment: item;
|
||||
@ -113,3 +109,10 @@
|
||||
margin-left: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.fileName {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user