Releasing new design #161

Merged
b merged 241 commits from staging into main 2024-08-21 11:38:25 +00:00
6 changed files with 50 additions and 20 deletions
Showing only changes of commit d41d577c29 - Show all commits

View File

@ -50,6 +50,7 @@
.pdfImageWrapper {
position: relative;
user-select: none;
margin-bottom: 10px;
&.drawing {
cursor: crosshair;

View File

@ -17,20 +17,21 @@ const FileList = ({
}: FileListProps) => {
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
return (
<div className={styles.container}>
<div className={styles.files}></div>
<ul>
{files.map((file: CurrentUserFile) => (
<li
key={file.id}
className={`${styles.fileItem} ${isActive(file) && styles.active}`}
onClick={() => setCurrentFile(file)}
>
<span className={styles.fileNumber}>{file.id}</span>
<span className={styles.fileName}>{file.filename}</span>
</li>
))}
</ul>
<div className={styles.wrap}>
<div className={styles.container}>
<ul className={styles.files}>
{files.map((file: CurrentUserFile) => (
<li
key={file.id}
className={`${styles.fileItem} ${isActive(file) && styles.active}`}
onClick={() => setCurrentFile(file)}
>
<span className={styles.fileNumber}>{file.id}</span>
<span className={styles.fileName}>{file.filename}</span>
</li>
))}
</ul>
</div>
<Button variant="contained" fullWidth onClick={handleDownload}>
Download Files
</Button>

View File

@ -7,6 +7,29 @@
grid-gap: 0px;
}
.filesPageContainer {
width: 100%;
display: grid;
grid-template-columns: 0.75fr 1.5fr 0.75fr;
grid-gap: 30px;
flex-grow: 1;
}
ul {
list-style-type: none; /* Removes bullet points */
margin: 0; /* Removes default margin */
padding: 0; /* Removes default padding */
}
.wrap {
position: sticky;
top: 15px;
display: flex;
flex-direction: column;
grid-gap: 15px;
}
.files {
display: flex;
flex-direction: column;
@ -33,6 +56,10 @@
cursor: grab;
}
.wrap {
margin-top: 5px;
}
.fileItem {
transition: ease 0.2s;
display: flex;
@ -49,6 +76,7 @@
font-size: 16px;
font-weight: 500;
&.active {
background: #4c82a3;
color: white;

View File

@ -34,9 +34,7 @@ const PdfPageItem = ({
<div
className={styles.pdfImageWrapper}
style={{
border: '1px solid #c4c4c4',
marginBottom: '10px',
marginTop: '10px'
border: '1px solid #c4c4c4'
}}
>
<img draggable="false" src={page.image} style={{ width: '100%' }} />

View File

@ -42,9 +42,9 @@ const PdfView = ({
)
}
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
!(index !== files.length - 1)
index !== files.length - 1
return (
<Box sx={{ width: '100%' }}>
<>
{files.map((currentUserFile, index, arr) => {
const { hash, pdfFile, filename, id } = currentUserFile
if (!hash) return
@ -65,7 +65,7 @@ const PdfView = ({
</div>
)
})}
</Box>
</>
)
}

View File

@ -19,6 +19,7 @@
display: flex;
width: 100%;
flex-direction: column;
}
.pdfView {
@ -26,4 +27,5 @@
flex-direction: column;
width: 100%;
height: 100%;
gap: 10px;
}