refactor(create-page): update designs and add files navigation

2024-08-19 08:30:22 +02:00 · 2024-08-19 08:30:22 +02:00 · b8dde24ad1
commit b8dde24ad1
parent cfa8e3f14e
5 changed files with 361 additions and 195 deletions
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@ -535,12 +535,17 @@ export const DrawPDFFields = (props: Props) => {
    <div className={styles.view}>
      {pdfFiles.map((pdfFile, pdfFileIndex: number) => {
        return (
-          <div key={pdfFile.file.name + pdfFileIndex}>
-            <div className={styles.fileWrapper}>
+          <>
+            <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)'
@ -549,7 +554,7 @@ export const DrawPDFFields = (props: Props) => {
                File Separator
              </Divider>
            )}
-          </div>
+          </>
        )
      })}

--- 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 {
--- 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 {
--- 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<string>()

  const [title, setTitle] = useState(`sigit_${formatTimestamp(Date.now())}`)
+
  const [selectedFiles, setSelectedFiles] = useState<File[]>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const handleUploadButtonClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click()
+    }
+  }

  const [userInput, setUserInput] = useState('')
  const [userRole, setUserRole] = useState<UserRole>(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<HTMLInputElement>) => {
+    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<HTMLButtonElement, MouseEvent>,
+    fileToRemove: File
+  ) => {
+    event.stopPropagation()
+
    setSelectedFiles((prevFiles) =>
      prevFiles.filter((file) => file.name !== fileToRemove.name)
    )
@ -705,71 +715,134 @@ export const CreatePage = () => {
        <StickySideColumns
          left={
            <div className={styles.flexWrap}>
+              <div className={styles.inputWrapper}>
                <TextField
-                label="Title"
+                  placeholder="Title"
+                  size="small"
+                  type="text"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
-                variant="outlined"
+                  sx={{
+                    width: '100%',
+                    fontSize: '16px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px'
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      display: 'none'
+                    }
+                  }}
                />
-              <ul className={styles.paperGroup}>
+              </div>
+              <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
                {selectedFiles.length > 0 &&
                  selectedFiles.map((file, index) => (
-                    <li key={index}>
-                      <Typography component="label">{file.name}</Typography>
-                      <IconButton onClick={() => handleRemoveFile(file)}>
-                        <Clear style={{ color: 'red' }} />{' '}
-                      </IconButton>
-                    </li>
+                    <Button
+                      key={index}
+                      className={styles.file}
+                      onClick={() => handleFileClick('file-' + file.name)}
+                    >
+                      <>
+                        <span>{file.name}</span>
+                        <Button
+                          variant="text"
+                          onClick={(event) => handleRemoveFile(event, file)}
+                          sx={{
+                            minWidth: '44px'
+                          }}
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </Button>
+                      </>
+                    </Button>
                  ))}
-              </ul>
-              <MuiFileInput
-                fullWidth
-                multiple
-                placeholder="Choose Files"
-                value={selectedFiles}
-                onChange={(value) => handleSelectFiles(value)}
+              </ol>
+              <Button variant="contained" onClick={handleUploadButtonClick}>
+                <FontAwesomeIcon icon={faUpload} />
+                Upload new files
+                <input
+                  ref={fileInputRef}
+                  hidden={true}
+                  multiple={true}
+                  type="file"
+                  onChange={handleSelectFiles}
                />
+              </Button>
            </div>
          }
          right={
            <div className={styles.flexWrap}>
-              <Typography component="label" variant="h6">
-                Add Counterparts
-              </Typography>
-              <Box className={styles.paperGroup}>
+              <div className={styles.inputWrapper}>
                <TextField
-                  label="nip05 / npub"
+                  placeholder="User (nip05 / npub)"
                  value={userInput}
                  onChange={(e) => setUserInput(e.target.value)}
                  helperText={error}
                  error={!!error}
+                  fullWidth
+                  sx={{
+                    fontSize: '16px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px'
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      display: 'none'
+                    }
+                  }}
                />
-                <FormControl fullWidth>
-                  <InputLabel id="select-role-label">Role</InputLabel>
                <Select
-                    labelId="select-role-label"
-                    id="demo-simple-select"
+                  aria-label="role"
                  value={userRole}
-                    label="Role"
+                  variant="filled"
+                  // Hide arrow for dropdown
+                  IconComponent={() => null}
+                  renderValue={(value) => (
+                    <FontAwesomeIcon
+                      icon={value === UserRole.signer ? faPen : faEye}
+                    />
+                  )}
                  onChange={(e) => setUserRole(e.target.value as UserRole)}
+                  sx={{
+                    fontSize: '16px',
+                    minWidth: '44px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px!important',
+                      textOverflow: 'unset!important'
+                    }
+                  }}
                >
                  <MenuItem value={UserRole.signer}>
-                      {UserRole.signer}
+                    <ListItem>
+                      <ListItemIcon>
+                        <FontAwesomeIcon icon={faPen} />
+                      </ListItemIcon>
+                      <ListItemText>{UserRole.signer}</ListItemText>
+                    </ListItem>
                  </MenuItem>
                  <MenuItem value={UserRole.viewer}>
-                      {UserRole.viewer}
+                    <ListItem>
+                      <ListItemIcon>
+                        <FontAwesomeIcon icon={faEye} />
+                      </ListItemIcon>
+                      <ListItemText>{UserRole.viewer}</ListItemText>
+                    </ListItem>
                  </MenuItem>
                </Select>
-                </FormControl>
-
                <Button
                  disabled={!userInput}
                  onClick={handleAddUser}
                  variant="contained"
+                  aria-label="Add"
+                  sx={{
+                    minWidth: '44px',
+                    padding: '11.5px 12px',
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0
+                  }}
                >
-                  Add
+                  <FontAwesomeIcon icon={faPlus} />
                </Button>
-              </Box>
+              </div>

              <div className={styles.paperGroup}>
                <DisplayUser
@ -779,12 +852,12 @@ export const CreatePage = () => {
                  handleRemoveUser={handleRemoveUser}
                  moveSigner={moveSigner}
                />
+              </div>

              <Button onClick={handleCreate} variant="contained">
-                  Create
+                Publish
              </Button>
            </div>
-            </div>
          }
        >
          <DrawPDFFields
@ -815,16 +888,7 @@ const DisplayUser = ({
  moveSigner
 }: DisplayUsersProps) => {
  return (
-    <TableContainer>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell className={styles.tableHeaderCell}>User</TableCell>
-            <TableCell className={styles.tableHeaderCell}>Role</TableCell>
-            <TableCell>Action</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
+    <>
      <DndProvider backend={HTML5Backend}>
        {users
          .filter((user) => user.role === UserRole.signer)
@ -845,8 +909,8 @@ const DisplayUser = ({
        .map((user, index) => {
          const userMeta = metadata[user.pubkey]
          return (
-                <TableRow key={index}>
-                  <TableCell className={styles.tableCell}>
+            <div className={styles.user} key={index}>
+              <div className={styles.avatar}>
                <UserAvatar
                  pubkey={user.pubkey}
                  name={
@ -856,39 +920,44 @@ const DisplayUser = ({
                  }
                  image={userMeta?.picture}
                />
-                  </TableCell>
-                  <TableCell className={styles.tableCell}>
+              </div>
              <Select
-                      fullWidth
+                aria-label="role"
                value={user.role}
+                variant="outlined"
+                IconComponent={() => null}
+                renderValue={(value) => (
+                  <FontAwesomeIcon
+                    icon={value === UserRole.signer ? faPen : faEye}
+                  />
+                )}
                onChange={(e) =>
-                        handleUserRoleChange(
-                          e.target.value as UserRole,
-                          user.pubkey
-                        )
+                  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'
+                  }
+                }}
              >
-                      <MenuItem value={UserRole.signer}>
-                        {UserRole.signer}
-                      </MenuItem>
-                      <MenuItem value={UserRole.viewer}>
-                        {UserRole.viewer}
-                      </MenuItem>
+                <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
+                <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
              </Select>
-                  </TableCell>
-                  <TableCell>
              <Tooltip title="Remove User" arrow>
                <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
-                        <Clear style={{ color: 'red' }} />
+                  <FontAwesomeIcon icon={faTrash} />
                </IconButton>
              </Tooltip>
-                  </TableCell>
-                </TableRow>
+            </div>
          )
        })}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    </>
  )
 }

@ -992,16 +1061,14 @@ const SignerRow = ({
  drag(drop(ref))

  return (
-    <TableRow
-      sx={{ cursor: 'move', opacity }}
+    <div
+      className={styles.user}
+      style={{ cursor: 'move', opacity }}
      data-handler-id={handlerId}
      ref={ref}
-    >
-      <TableCell
-        className={styles.tableCell}
-        sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}
    >
      <DragHandle />
+      <div className={styles.avatar}>
        <UserAvatar
          pubkey={user.pubkey}
          name={
@ -1011,26 +1078,38 @@ const SignerRow = ({
          }
          image={userMeta?.picture}
        />
-      </TableCell>
-      <TableCell className={styles.tableCell}>
+      </div>
      <Select
-          fullWidth
+        aria-label="role"
        value={user.role}
+        variant="outlined"
+        IconComponent={() => null}
+        renderValue={(value) => (
+          <FontAwesomeIcon icon={value === UserRole.signer ? faPen : faEye} />
+        )}
        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'
+          }
+        }}
      >
        <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
        <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
      </Select>
-      </TableCell>
-      <TableCell>
      <Tooltip title="Remove User" arrow>
        <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
-            <Clear style={{ color: 'red' }} />
+          <FontAwesomeIcon icon={faTrash} />
        </IconButton>
      </Tooltip>
-      </TableCell>
-    </TableRow>
+    </div>
  )
 }
--- 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;
-}
-
-.tableHeaderCell {
-  border-right: 1px solid rgba(224, 224, 224, 1);
-}
-
-.tableCell {
-  border-right: 1px solid rgba(224, 224, 224, 1);
-  height: 56px;
-
-  .user {
+.inputWrapper {
  display: flex;
  align-items: center;
-    gap: 10px;

-    .name {
-      text-align: center;
-      cursor: pointer;
-    }
+  height: 34px;
+  overflow: hidden;
+  border-radius: 4px;
+  outline: solid 1px #dddddd;
+  background: white;
+
+  width: 100%;
+
+  &: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;
  }
 }