From 48f54d8568f86f205859b2bd9ef5fd3491c8448b Mon Sep 17 00:00:00 2001 From: enes Date: Mon, 19 Aug 2024 08:30:22 +0200 Subject: [PATCH] refactor(create-page): update designs and add files navigation --- src/components/DrawPDFFields/index.tsx | 11 +- .../DrawPDFFields/style.module.scss | 4 + src/layouts/StickySideColumns.module.scss | 3 + src/pages/create/index.tsx | 427 +++++++++++------- src/pages/create/style.module.scss | 111 ++++- 5 files changed, 361 insertions(+), 195 deletions(-) diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index 99d8b78..992f273 100644 --- a/src/components/DrawPDFFields/index.tsx +++ b/src/components/DrawPDFFields/index.tsx @@ -535,12 +535,17 @@ export const DrawPDFFields = (props: Props) => {
{pdfFiles.map((pdfFile, pdfFileIndex: number) => { return ( -
-
+ <> +
{getPdfPages(pdfFile, pdfFileIndex)}
{pdfFileIndex < pdfFiles.length - 1 && ( { File Separator )} -
+ ) })} diff --git a/src/components/DrawPDFFields/style.module.scss b/src/components/DrawPDFFields/style.module.scss index 249b66c..e0a09dc 100644 --- a/src/components/DrawPDFFields/style.module.scss +++ b/src/components/DrawPDFFields/style.module.scss @@ -1,3 +1,5 @@ +@import '../../styles/sizes.scss'; + .pdfFieldItem { background: white; padding: 10px; @@ -135,6 +137,8 @@ display: flex; flex-direction: column; gap: 15px; + position: relative; + scroll-margin-top: $header-height + $body-vertical-padding; } .view { diff --git a/src/layouts/StickySideColumns.module.scss b/src/layouts/StickySideColumns.module.scss index 7690822..7495cad 100644 --- a/src/layouts/StickySideColumns.module.scss +++ b/src/layouts/StickySideColumns.module.scss @@ -10,6 +10,9 @@ .sidesWrap { position: relative; + + // HACK: Stop grid column from growing + min-width: 0; } .sides { diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx index 4d292b2..57e41b0 100644 --- a/src/pages/create/index.tsx +++ b/src/pages/create/index.tsx @@ -1,26 +1,18 @@ -import { Clear, DragHandle } from '@mui/icons-material' +import { DragHandle } from '@mui/icons-material' import { - Box, Button, - FormControl, IconButton, - InputLabel, + ListItem, + ListItemIcon, + ListItemText, MenuItem, Select, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, TextField, - Tooltip, - Typography + Tooltip } from '@mui/material' import type { Identifier, XYCoord } from 'dnd-core' import saveAs from 'file-saver' import JSZip from 'jszip' -import { MuiFileInput } from 'mui-file-input' import { Event, kinds } from 'nostr-tools' import { useEffect, useRef, useState } from 'react' import { DndProvider, useDrag, useDrop } from 'react-dnd' @@ -64,6 +56,14 @@ import { PdfFile } from '../../types/drawing' import { DrawPDFFields } from '../../components/DrawPDFFields' import { Mark } from '../../types/mark.ts' import { StickySideColumns } from '../../layouts/StickySideColumns.tsx' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { + faEye, + faPen, + faPlus, + faTrash, + faUpload +} from '@fortawesome/free-solid-svg-icons' export const CreatePage = () => { const navigate = useNavigate() @@ -76,7 +76,14 @@ export const CreatePage = () => { const [authUrl, setAuthUrl] = useState() const [title, setTitle] = useState(`sigit_${formatTimestamp(Date.now())}`) + const [selectedFiles, setSelectedFiles] = useState([]) + const fileInputRef = useRef(null) + const handleUploadButtonClick = () => { + if (fileInputRef.current) { + fileInputRef.current.click() + } + } const [userInput, setUserInput] = useState('') const [userRole, setUserRole] = useState(UserRole.signer) @@ -268,19 +275,22 @@ export const CreatePage = () => { }) } - const handleSelectFiles = (files: File[]) => { - setSelectedFiles((prev) => { - const prevFileNames = prev.map((file) => file.name) - - const newFiles = files.filter( - (file) => !prevFileNames.includes(file.name) - ) - - return [...prev, ...newFiles] - }) + const handleSelectFiles = (event: React.ChangeEvent) => { + if (event.target.files) { + setSelectedFiles(Array.from(event.target.files)) + } } - const handleRemoveFile = (fileToRemove: File) => { + const handleFileClick = (name: string) => { + document.getElementById(name)?.scrollIntoView({ behavior: 'smooth' }) + } + + const handleRemoveFile = ( + event: React.MouseEvent, + fileToRemove: File + ) => { + event.stopPropagation() + setSelectedFiles((prevFiles) => prevFiles.filter((file) => file.name !== fileToRemove.name) ) @@ -705,71 +715,134 @@ export const CreatePage = () => { - setTitle(e.target.value)} - variant="outlined" - /> -
    +
    + setTitle(e.target.value)} + sx={{ + width: '100%', + fontSize: '16px', + '& .MuiInputBase-input': { + padding: '7px 14px' + }, + '& .MuiOutlinedInput-notchedOutline': { + display: 'none' + } + }} + /> +
    +
      {selectedFiles.length > 0 && selectedFiles.map((file, index) => ( -
    1. - {file.name} - handleRemoveFile(file)}> - {' '} - -
      2. + + + ))} -
- handleSelectFiles(value)} - /> + +
} right={
- - Add Counterparts - - +
setUserInput(e.target.value)} helperText={error} error={!!error} + fullWidth + sx={{ + fontSize: '16px', + '& .MuiInputBase-input': { + padding: '7px 14px' + }, + '& .MuiOutlinedInput-notchedOutline': { + display: 'none' + } + }} /> - - Role - - - + - +
{ handleRemoveUser={handleRemoveUser} moveSigner={moveSigner} /> - -
+ +
} > @@ -815,80 +888,76 @@ const DisplayUser = ({ moveSigner }: DisplayUsersProps) => { return ( - - - - - User - Role - Action - - - - - {users - .filter((user) => user.role === UserRole.signer) - .map((user, index) => ( - + + {users + .filter((user) => user.role === UserRole.signer) + .map((user, index) => ( + + ))} + + {users + .filter((user) => user.role === UserRole.viewer) + .map((user, index) => { + const userMeta = metadata[user.pubkey] + return ( +
+
+ - ))} - - {users - .filter((user) => user.role === UserRole.viewer) - .map((user, index) => { - const userMeta = metadata[user.pubkey] - return ( - - - - - - - - - - handleRemoveUser(user.pubkey)}> - - - - - - ) - })} - -
- +
+ + + handleRemoveUser(user.pubkey)}> + + + + + ) + })} + ) } @@ -992,16 +1061,14 @@ const SignerRow = ({ drag(drop(ref)) return ( - - - + +
- - - null} + renderValue={(value) => ( + + )} + onChange={(e) => + handleUserRoleChange(e.target.value as UserRole, user.pubkey) + } + sx={{ + fontSize: '16px', + minWidth: '44px', + '& .MuiInputBase-input': { + padding: '7px 14px!important', + textOverflow: 'unset!important' + }, + '& .MuiOutlinedInput-notchedOutline': { + display: 'none' } - > - {UserRole.signer} - {UserRole.viewer} - - - - - handleRemoveUser(user.pubkey)}> - - - - - + }} + > + {UserRole.signer} + {UserRole.viewer} + + + handleRemoveUser(user.pubkey)}> + + + +
) } diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss index 527ef5c..f838f67 100644 --- a/src/pages/create/style.module.scss +++ b/src/pages/create/style.module.scss @@ -6,6 +6,60 @@ gap: 15px; } +.orderedFilesList { + counter-reset: item; + list-style-type: none; + margin: 0; + + li { + display: flex; + align-items: center; + + transition: ease 0.4s; + border-radius: 4px; + background: #ffffff; + padding: 7px 10px; + color: rgba(0, 0, 0, 0.5); + min-height: 45px; + cursor: pointer; + gap: 10px; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + &::before { + content: counter(item) ' '; + counter-increment: item; + font-size: 14px; + } + :nth-child(1) { + flex-grow: 1; + + font-size: 16px; + + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + button { + color: $primary-main; + } + + &:hover, + &.active, + &:focus-within { + background: $primary-main; + color: white; + + button { + color: white; + } + } + } +} + .paperGroup { border-radius: 4px; background: white; @@ -13,28 +67,49 @@ display: flex; flex-direction: column; gap: 15px; + + // Automatic scrolling if paper-group gets large enough + // used for files on the left and users on the right + max-height: 350px; + overflow-x: hidden; + overflow-y: auto; } -.subHeader { - border-bottom: 0.5px solid; -} +.inputWrapper { + display: flex; + align-items: center; -.tableHeaderCell { - border-right: 1px solid rgba(224, 224, 224, 1); -} + height: 34px; + overflow: hidden; + border-radius: 4px; + outline: solid 1px #dddddd; + background: white; -.tableCell { - border-right: 1px solid rgba(224, 224, 224, 1); - height: 56px; + width: 100%; - .user { - display: flex; - align-items: center; - gap: 10px; - - .name { - text-align: center; - cursor: pointer; - } + &:focus-within { + outline-color: $primary-main; + } +} + +.user { + display: flex; + gap: 10px; + + font-size: 14px; + text-align: start; + justify-content: center; + align-items: center; + + a:hover { + text-decoration: none; + } +} + +.avatar { + flex-grow: 1; + + &:first-child { + margin-left: 34px; } }