Responsiveness and tabs #179
13
src/App.scss
13
src/App.scss
@ -41,6 +41,7 @@ p {
|
||||
|
||||
body {
|
||||
color: $text-color;
|
||||
background: $body-background-color;
|
||||
font-family: $font-familiy;
|
||||
letter-spacing: $letter-spacing;
|
||||
font-size: $body-font-size;
|
||||
@ -70,6 +71,18 @@ input {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none; /* Removes bullet points */
|
||||
margin: 0; /* Removes default margin */
|
||||
padding: 0; /* Removes default padding */
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none; /* Removes the bullets */
|
||||
margin: 0; /* Removes any default margin */
|
||||
padding: 0; /* Removes any default padding */
|
||||
|
||||
}
|
||||
|
||||
// Shared styles for center content (Create, Sign, Verify)
|
||||
.files-wrapper {
|
||||
display: flex;
|
||||
|
@ -1,7 +1,5 @@
|
||||
import { Close } from '@mui/icons-material'
|
||||
import {
|
||||
Box,
|
||||
CircularProgress,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
ListItemIcon,
|
||||
@ -11,7 +9,6 @@ import {
|
||||
} from '@mui/material'
|
||||
import styles from './style.module.scss'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import * as PDFJS from 'pdfjs-dist'
|
||||
import { ProfileMetadata, User, UserRole } from '../../types'
|
||||
import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
|
||||
import { truncate } from 'lodash'
|
||||
@ -22,11 +19,12 @@ import { ExtensionFileBox } from '../ExtensionFileBox'
|
||||
import { inPx } from '../../utils/pdf'
|
||||
import { useScale } from '../../hooks/useScale'
|
||||
import { AvatarIconButton } from '../UserAvatarIconButton'
|
||||
import { LoadingSpinner } from '../LoadingSpinner'
|
||||
|
||||
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
import.meta.url
|
||||
).toString()
|
||||
const DEFAULT_START_SIZE = {
|
||||
width: 140,
|
||||
height: 40
|
||||
} as const
|
||||
|
||||
interface Props {
|
||||
selectedFiles: File[]
|
||||
@ -47,6 +45,8 @@ export const DrawPDFFields = (props: Props) => {
|
||||
clicked: false
|
||||
})
|
||||
|
||||
const [activeDrawField, setActiveDrawField] = useState<number>()
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedFiles) {
|
||||
/**
|
||||
@ -78,10 +78,12 @@ export const DrawPDFFields = (props: Props) => {
|
||||
* Drawing events
|
||||
*/
|
||||
useEffect(() => {
|
||||
window.addEventListener('mouseup', onMouseUp)
|
||||
window.addEventListener('pointerup', handlePointerUp)
|
||||
window.addEventListener('pointercancel', handlePointerUp)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mouseup', onMouseUp)
|
||||
window.removeEventListener('pointerup', handlePointerUp)
|
||||
window.removeEventListener('pointercancel', handlePointerUp)
|
||||
}
|
||||
}, [])
|
||||
|
||||
@ -90,17 +92,14 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}
|
||||
|
||||
/**
|
||||
* Fired only when left click and mouse over pdf page
|
||||
* Fired only on when left (primary pointer interaction) clicking page image
|
||||
* Creates new drawnElement and pushes in the array
|
||||
* It is re rendered and visible right away
|
||||
*
|
||||
* @param event Mouse event
|
||||
* @param event Pointer event
|
||||
* @param page PdfPage where press happened
|
||||
*/
|
||||
const onMouseDown = (
|
||||
event: React.MouseEvent<HTMLDivElement>,
|
||||
page: PdfPage
|
||||
) => {
|
||||
const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
|
||||
// Proceed only if left click
|
||||
if (event.button !== 0) return
|
||||
|
||||
@ -108,13 +107,13 @@ export const DrawPDFFields = (props: Props) => {
|
||||
return
|
||||
}
|
||||
|
||||
const { mouseX, mouseY } = getMouseCoordinates(event)
|
||||
const { x, y } = getPointerCoordinates(event)
|
||||
|
||||
const newField: DrawnField = {
|
||||
left: to(page.width, mouseX),
|
||||
top: to(page.width, mouseY),
|
||||
width: 0,
|
||||
height: 0,
|
||||
left: to(page.width, x),
|
||||
top: to(page.width, y),
|
||||
width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
|
||||
height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
|
||||
counterpart: '',
|
||||
type: selectedTool.identifier
|
||||
}
|
||||
@ -131,9 +130,9 @@ export const DrawPDFFields = (props: Props) => {
|
||||
|
||||
/**
|
||||
* Drawing is finished, resets all the variables used to draw
|
||||
* @param event Mouse event
|
||||
* @param event Pointer event
|
||||
*/
|
||||
const onMouseUp = () => {
|
||||
const handlePointerUp = () => {
|
||||
setMouseState((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
@ -145,16 +144,13 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}
|
||||
|
||||
/**
|
||||
* After {@link onMouseDown} create an drawing element, this function gets called on every pixel moved
|
||||
* which alters the newly created drawing element, resizing it while mouse move
|
||||
* @param event Mouse event
|
||||
* After {@link handlePointerDown} create an drawing element, this function gets called on every pixel moved
|
||||
* which alters the newly created drawing element, resizing it while pointer moves
|
||||
* @param event Pointer event
|
||||
* @param page PdfPage where moving is happening
|
||||
*/
|
||||
const onMouseMove = (
|
||||
event: React.MouseEvent<HTMLDivElement>,
|
||||
page: PdfPage
|
||||
) => {
|
||||
if (mouseState.clicked && selectedTool) {
|
||||
const handlePointerMove = (event: React.PointerEvent, page: PdfPage) => {
|
||||
if (mouseState.clicked && selectedTool && event.pointerType === 'mouse') {
|
||||
const lastElementIndex = page.drawnFields.length - 1
|
||||
|
||||
const lastDrawnField = page.drawnFields[lastElementIndex]
|
||||
@ -164,10 +160,10 @@ export const DrawPDFFields = (props: Props) => {
|
||||
// to the page below (without releaseing mouse click)
|
||||
if (!lastDrawnField) return
|
||||
|
||||
const { mouseX, mouseY } = getMouseCoordinates(event)
|
||||
const { x, y } = getPointerCoordinates(event)
|
||||
|
||||
const width = to(page.width, mouseX) - lastDrawnField.left
|
||||
const height = to(page.width, mouseY) - lastDrawnField.top
|
||||
const width = to(page.width, x) - lastDrawnField.left
|
||||
const height = to(page.width, y) - lastDrawnField.top
|
||||
|
||||
lastDrawnField.width = width
|
||||
lastDrawnField.height = height
|
||||
@ -182,55 +178,60 @@ export const DrawPDFFields = (props: Props) => {
|
||||
|
||||
/**
|
||||
* Fired when event happens on the drawn element which will be moved
|
||||
* mouse coordinates relative to drawn element will be stored
|
||||
* pointer coordinates relative to drawn element will be stored
|
||||
* so when we start moving, offset can be calculated
|
||||
* mouseX - offsetX
|
||||
* mouseY - offsetY
|
||||
* x - offsetX
|
||||
* y - offsetY
|
||||
*
|
||||
* @param event Mouse event
|
||||
* @param drawnField Which we are moving
|
||||
* @param event Pointer event
|
||||
* @param drawnFieldIndex Which we are moving
|
||||
*/
|
||||
const onDrawnFieldMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
const handleDrawnFieldPointerDown = (
|
||||
event: React.PointerEvent,
|
||||
drawnFieldIndex: number
|
||||
) => {
|
||||
event.stopPropagation()
|
||||
|
||||
// Proceed only if left click
|
||||
if (event.button !== 0) return
|
||||
|
||||
const drawingRectangleCoords = getMouseCoordinates(event)
|
||||
const drawingRectangleCoords = getPointerCoordinates(event)
|
||||
|
||||
setActiveDrawField(drawnFieldIndex)
|
||||
setMouseState({
|
||||
dragging: true,
|
||||
clicked: false,
|
||||
coordsInWrapper: {
|
||||
mouseX: drawingRectangleCoords.mouseX,
|
||||
mouseY: drawingRectangleCoords.mouseY
|
||||
x: drawingRectangleCoords.x,
|
||||
y: drawingRectangleCoords.y
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Moves the drawnElement by the mouse position (mouse can grab anywhere on the drawn element)
|
||||
* @param event Mouse event
|
||||
* Moves the drawnElement by the pointer position (pointer can grab anywhere on the drawn element)
|
||||
* @param event Pointer event
|
||||
* @param drawnField which we are moving
|
||||
* @param pageWidth pdf value which is used to calculate scaled offset
|
||||
*/
|
||||
const onDrawnFieldMouseMove = (
|
||||
event: React.MouseEvent<HTMLDivElement>,
|
||||
const handleDrawnFieldPointerMove = (
|
||||
event: React.PointerEvent,
|
||||
drawnField: DrawnField,
|
||||
pageWidth: number
|
||||
) => {
|
||||
if (mouseState.dragging) {
|
||||
const { mouseX, mouseY, rect } = getMouseCoordinates(
|
||||
const { x, y, rect } = getPointerCoordinates(
|
||||
event,
|
||||
event.currentTarget.parentElement
|
||||
)
|
||||
const coordsOffset = mouseState.coordsInWrapper
|
||||
|
||||
if (coordsOffset) {
|
||||
let left = to(pageWidth, mouseX - coordsOffset.mouseX)
|
||||
let top = to(pageWidth, mouseY - coordsOffset.mouseY)
|
||||
let left = to(pageWidth, x - coordsOffset.x)
|
||||
let top = to(pageWidth, y - coordsOffset.y)
|
||||
|
||||
const rightLimit = to(pageWidth, rect.width) - drawnField.width - 3
|
||||
const bottomLimit = to(pageWidth, rect.height) - drawnField.height - 3
|
||||
const rightLimit = to(pageWidth, rect.width) - drawnField.width
|
||||
const bottomLimit = to(pageWidth, rect.height) - drawnField.height
|
||||
|
||||
if (left < 0) left = 0
|
||||
if (top < 0) top = 0
|
||||
@ -247,17 +248,18 @@ export const DrawPDFFields = (props: Props) => {
|
||||
|
||||
/**
|
||||
* Fired when clicked on the resize handle, sets the state for a resize action
|
||||
* @param event Mouse event
|
||||
* @param drawnField which we are resizing
|
||||
* @param event Pointer event
|
||||
* @param drawnFieldIndex which we are resizing
|
||||
*/
|
||||
const onResizeHandleMouseDown = (
|
||||
event: React.MouseEvent<HTMLSpanElement>
|
||||
const handleResizePointerDown = (
|
||||
event: React.PointerEvent,
|
||||
drawnFieldIndex: number
|
||||
) => {
|
||||
// Proceed only if left click
|
||||
if (event.button !== 0) return
|
||||
|
||||
event.stopPropagation()
|
||||
|
||||
setActiveDrawField(drawnFieldIndex)
|
||||
setMouseState({
|
||||
resizing: true
|
||||
})
|
||||
@ -265,16 +267,17 @@ export const DrawPDFFields = (props: Props) => {
|
||||
|
||||
/**
|
||||
* Resizes the drawn element by the mouse position
|
||||
* @param event Mouse event
|
||||
* @param event Pointer event
|
||||
* @param drawnField which we are resizing
|
||||
* @param pageWidth pdf value which is used to calculate scaled offset
|
||||
*/
|
||||
const onResizeHandleMouseMove = (
|
||||
event: React.MouseEvent<HTMLSpanElement>,
|
||||
const handleResizePointerMove = (
|
||||
event: React.PointerEvent,
|
||||
drawnField: DrawnField,
|
||||
pageWidth: number
|
||||
) => {
|
||||
if (mouseState.resizing) {
|
||||
const { mouseX, mouseY } = getMouseCoordinates(
|
||||
const { x, y } = getPointerCoordinates(
|
||||
event,
|
||||
// currentTarget = span handle
|
||||
// 1st parent = drawnField
|
||||
@ -282,8 +285,8 @@ export const DrawPDFFields = (props: Props) => {
|
||||
event.currentTarget.parentElement?.parentElement
|
||||
)
|
||||
|
||||
const width = to(pageWidth, mouseX) - drawnField.left
|
||||
const height = to(pageWidth, mouseY) - drawnField.top
|
||||
const width = to(pageWidth, x) - drawnField.left
|
||||
const height = to(pageWidth, y) - drawnField.top
|
||||
|
||||
drawnField.width = width
|
||||
drawnField.height = height
|
||||
@ -294,13 +297,13 @@ export const DrawPDFFields = (props: Props) => {
|
||||
|
||||
/**
|
||||
* Removes the drawn element using the indexes in the params
|
||||
* @param event Mouse event
|
||||
* @param event Pointer event
|
||||
* @param pdfFileIndex pdf file index
|
||||
* @param pdfPageIndex pdf page index
|
||||
* @param drawnFileIndex drawn file index
|
||||
*/
|
||||
const onRemoveHandleMouseDown = (
|
||||
event: React.MouseEvent<HTMLSpanElement>,
|
||||
const handleRemovePointerDown = (
|
||||
event: React.PointerEvent,
|
||||
pdfFileIndex: number,
|
||||
pdfPageIndex: number,
|
||||
drawnFileIndex: number
|
||||
@ -314,40 +317,37 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}
|
||||
|
||||
/**
|
||||
* Used to stop mouse click propagating to the parent elements
|
||||
* Used to stop pointer click propagating to the parent elements
|
||||
* so select can work properly
|
||||
* @param event Mouse event
|
||||
* @param event Pointer event
|
||||
*/
|
||||
const onUserSelectHandleMouseDown = (
|
||||
event: React.MouseEvent<HTMLDivElement>
|
||||
) => {
|
||||
const handleUserSelectPointerDown = (event: React.PointerEvent) => {
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the mouse coordinates relative to a element in the `event` param
|
||||
* @param event MouseEvent
|
||||
* @param customTarget mouse coordinates relative to this element, if not provided
|
||||
* Gets the pointer coordinates relative to a element in the `event` param
|
||||
* @param event PointerEvent
|
||||
* @param customTarget coordinates relative to this element, if not provided
|
||||
* event.target will be used
|
||||
*/
|
||||
const getMouseCoordinates = (
|
||||
event: React.MouseEvent<HTMLElement>,
|
||||
const getPointerCoordinates = (
|
||||
event: React.PointerEvent,
|
||||
customTarget?: HTMLElement | null
|
||||
) => {
|
||||
const target = customTarget ? customTarget : event.currentTarget
|
||||
const rect = target.getBoundingClientRect()
|
||||
|
||||
// Clamp X Y within the target
|
||||
const mouseX = Math.min(event.clientX, rect.right) - rect.left //x position within the element.
|
||||
const mouseY = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
|
||||
const x = Math.min(event.clientX, rect.right) - rect.left //x position within the element.
|
||||
const y = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
|
||||
|
||||
return {
|
||||
mouseX,
|
||||
mouseY,
|
||||
x,
|
||||
y,
|
||||
rect
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the pdf pages and drawing elements
|
||||
*/
|
||||
@ -364,43 +364,67 @@ export const DrawPDFFields = (props: Props) => {
|
||||
className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
|
||||
>
|
||||
<img
|
||||
onMouseMove={(event) => {
|
||||
onMouseMove(event, page)
|
||||
onPointerMove={(event) => {
|
||||
handlePointerMove(event, page)
|
||||
}}
|
||||
onMouseDown={(event) => {
|
||||
onMouseDown(event, page)
|
||||
onPointerDown={(event) => {
|
||||
handlePointerDown(event, page)
|
||||
}}
|
||||
draggable="false"
|
||||
src={page.image}
|
||||
alt={`page ${pageIndex + 1} of ${file.name}`}
|
||||
/>
|
||||
|
||||
{page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
|
||||
return (
|
||||
<div
|
||||
key={drawnFieldIndex}
|
||||
onMouseDown={onDrawnFieldMouseDown}
|
||||
onMouseMove={(event) => {
|
||||
onDrawnFieldMouseMove(event, drawnField, page.width)
|
||||
onPointerDown={(event) =>
|
||||
handleDrawnFieldPointerDown(event, drawnFieldIndex)
|
||||
}
|
||||
onPointerMove={(event) => {
|
||||
handleDrawnFieldPointerMove(event, drawnField, page.width)
|
||||
}}
|
||||
className={styles.drawingRectangle}
|
||||
style={{
|
||||
backgroundColor: drawnField.counterpart
|
||||
? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}4b`
|
||||
: undefined,
|
||||
borderColor: drawnField.counterpart
|
||||
? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}`
|
||||
: undefined,
|
||||
left: inPx(from(page.width, drawnField.left)),
|
||||
top: inPx(from(page.width, drawnField.top)),
|
||||
width: inPx(from(page.width, drawnField.width)),
|
||||
height: inPx(from(page.width, drawnField.height)),
|
||||
pointerEvents: mouseState.clicked ? 'none' : 'all'
|
||||
pointerEvents: mouseState.clicked ? 'none' : 'all',
|
||||
touchAction: 'none',
|
||||
opacity:
|
||||
mouseState.dragging &&
|
||||
activeDrawField === drawnFieldIndex
|
||||
? 0.8
|
||||
: undefined
|
||||
}}
|
||||
>
|
||||
<span
|
||||
onMouseDown={onResizeHandleMouseDown}
|
||||
onMouseMove={(event) => {
|
||||
onResizeHandleMouseMove(event, drawnField, page.width)
|
||||
onPointerDown={(event) =>
|
||||
handleResizePointerDown(event, drawnFieldIndex)
|
||||
}
|
||||
onPointerMove={(event) => {
|
||||
handleResizePointerMove(event, drawnField, page.width)
|
||||
}}
|
||||
className={styles.resizeHandle}
|
||||
style={{
|
||||
background:
|
||||
mouseState.resizing &&
|
||||
activeDrawField === drawnFieldIndex
|
||||
? 'var(--primary-main)'
|
||||
: undefined
|
||||
}}
|
||||
></span>
|
||||
<span
|
||||
onMouseDown={(event) => {
|
||||
onRemoveHandleMouseDown(
|
||||
onPointerDown={(event) => {
|
||||
handleRemovePointerDown(
|
||||
event,
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
@ -412,7 +436,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
<Close fontSize="small" />
|
||||
</span>
|
||||
<div
|
||||
onMouseDown={onUserSelectHandleMouseDown}
|
||||
onPointerDown={handleUserSelectPointerDown}
|
||||
className={styles.userSelect}
|
||||
>
|
||||
<FormControl fullWidth size="small">
|
||||
@ -529,11 +553,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}
|
||||
|
||||
if (parsingPdf) {
|
||||
return (
|
||||
<Box sx={{ width: '100%', textAlign: 'center' }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)
|
||||
return <LoadingSpinner variant="small" />
|
||||
}
|
||||
|
||||
if (!sigitFiles.length) {
|
||||
|
@ -22,7 +22,6 @@ const FileList = ({
|
||||
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<div className={styles.container}>
|
||||
<ul className={styles.files}>
|
||||
{files.map((currentUserFile: CurrentUserFile) => (
|
||||
<li
|
||||
@ -32,9 +31,7 @@ const FileList = ({
|
||||
>
|
||||
<div className={styles.fileNumber}>{currentUserFile.id}</div>
|
||||
<div className={styles.fileInfo}>
|
||||
<div className={styles.fileName}>
|
||||
{currentUserFile.file.name}
|
||||
</div>
|
||||
<div className={styles.fileName}>{currentUserFile.file.name}</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.fileVisual}>
|
||||
@ -45,7 +42,6 @@ const FileList = ({
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Button variant="contained" fullWidth onClick={handleDownload}>
|
||||
{downloadLabel || 'Download Files'}
|
||||
</Button>
|
||||
|
@ -1,12 +1,3 @@
|
||||
.container {
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 0px;
|
||||
}
|
||||
|
||||
.filesPageContainer {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
@ -15,18 +6,6 @@
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none; /* Removes bullet points */
|
||||
margin: 0; /* Removes default margin */
|
||||
padding: 0; /* Removes default padding */
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none; /* Removes the bullets */
|
||||
margin: 0; /* Removes any default margin */
|
||||
padding: 0; /* Removes any default padding */
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -34,14 +13,16 @@ li {
|
||||
}
|
||||
|
||||
.files {
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
grid-gap: 15px;
|
||||
max-height: 350px;
|
||||
overflow: auto;
|
||||
padding: 0 5px 0 0;
|
||||
margin: 0 -5px 0 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: none;
|
||||
}
|
||||
|
||||
.files::-webkit-scrollbar {
|
||||
|
@ -4,8 +4,10 @@ import styles from './style.module.scss'
|
||||
import { Container } from '../Container'
|
||||
import nostrImage from '../../assets/images/nostr.gif'
|
||||
import { appPublicRoutes } from '../../routes'
|
||||
import { createPortal } from 'react-dom'
|
||||
|
||||
export const Footer = () => (
|
||||
export const Footer = () =>
|
||||
createPortal(
|
||||
<footer className={`${styles.borderTop} ${styles.footer}`}>
|
||||
<Container
|
||||
style={{
|
||||
@ -124,5 +126,6 @@ export const Footer = () => (
|
||||
</a>{' '}
|
||||
2024.
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
</footer>,
|
||||
document.getElementById('root')!
|
||||
)
|
||||
|
@ -1,18 +1,35 @@
|
||||
import styles from './style.module.scss'
|
||||
|
||||
interface Props {
|
||||
desc: string
|
||||
desc?: string
|
||||
variant?: 'small' | 'default'
|
||||
}
|
||||
|
||||
export const LoadingSpinner = (props: Props) => {
|
||||
const { desc } = props
|
||||
const { desc, variant = 'default' } = props
|
||||
|
||||
switch (variant) {
|
||||
case 'small':
|
||||
return (
|
||||
<div
|
||||
className={`${styles.loadingSpinnerContainer}`}
|
||||
data-variant={variant}
|
||||
>
|
||||
<div className={styles.loadingSpinner}></div>
|
||||
</div>
|
||||
)
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className={styles.loadingSpinnerOverlay}>
|
||||
<div className={styles.loadingSpinnerContainer}>
|
||||
<div
|
||||
className={styles.loadingSpinnerContainer}
|
||||
data-variant={variant}
|
||||
>
|
||||
<div className={styles.loadingSpinner}></div>
|
||||
{desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
|
||||
{desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -2,34 +2,48 @@
|
||||
|
||||
.loadingSpinnerOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.loadingSpinnerContainer {
|
||||
.loadingSpinnerContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loadingSpinner {
|
||||
background: url('/favicon.png') no-repeat center / cover;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
&[data-variant='default'] {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin: 25px 20px;
|
||||
background: $overlay-background-color;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
&[data-variant='small'] {
|
||||
min-height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.loadingSpinner {
|
||||
background: url('/favicon.png') no-repeat center / cover;
|
||||
margin: 40px 25px;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.loadingSpinnerDesc {
|
||||
color: white;
|
||||
margin-top: 13px;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
|
@ -1,11 +1,19 @@
|
||||
@import '../../styles/sizes.scss';
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
bottom: $tabs-height + 5px;
|
||||
right: 5px;
|
||||
left: 5px;
|
||||
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
|
||||
@ -107,7 +115,7 @@
|
||||
.actions {
|
||||
background: white;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
|
@ -36,6 +36,8 @@ const PdfItem = ({
|
||||
return file.pages?.map((page, i) => {
|
||||
return (
|
||||
<PdfPageItem
|
||||
fileName={file.name}
|
||||
pageIndex={i}
|
||||
page={page}
|
||||
key={i}
|
||||
currentUserMarks={filterByPage(currentUserMarks, i)}
|
||||
|
@ -15,6 +15,11 @@ import FileList from '../FileList'
|
||||
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
||||
import { UsersDetails } from '../UsersDetails.tsx'
|
||||
import { Meta } from '../../types'
|
||||
import {
|
||||
faCircleInfo,
|
||||
faFileDownload,
|
||||
faPen
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
interface PdfMarkingProps {
|
||||
currentUserMarks: CurrentUserMark[]
|
||||
@ -132,6 +137,9 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
||||
</div>
|
||||
}
|
||||
right={meta !== null && <UsersDetails meta={meta} />}
|
||||
leftIcon={faFileDownload}
|
||||
centerIcon={faPen}
|
||||
rightIcon={faCircleInfo}
|
||||
>
|
||||
{currentUserMarks?.length > 0 && (
|
||||
<PdfView
|
||||
|
@ -7,6 +7,8 @@ import pdfViewStyles from './style.module.scss'
|
||||
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
|
||||
import { useScale } from '../../hooks/useScale.tsx'
|
||||
interface PdfPageProps {
|
||||
fileName: string
|
||||
pageIndex: number
|
||||
currentUserMarks: CurrentUserMark[]
|
||||
handleMarkClick: (id: number) => void
|
||||
otherUserMarks: Mark[]
|
||||
@ -19,6 +21,8 @@ interface PdfPageProps {
|
||||
* Responsible for rendering a single Pdf Page and its Marks
|
||||
*/
|
||||
const PdfPageItem = ({
|
||||
fileName,
|
||||
pageIndex,
|
||||
page,
|
||||
currentUserMarks,
|
||||
handleMarkClick,
|
||||
@ -38,7 +42,11 @@ const PdfPageItem = ({
|
||||
|
||||
return (
|
||||
<div className={`image-wrapper ${styles.pdfImageWrapper}`}>
|
||||
<img draggable="false" src={page.image} />
|
||||
<img
|
||||
draggable="false"
|
||||
src={page.image}
|
||||
alt={`page ${pageIndex + 1} of ${fileName}`}
|
||||
/>
|
||||
{currentUserMarks.map((m, i) => (
|
||||
<div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
|
||||
<PdfMarkItem
|
||||
|
@ -4,6 +4,7 @@ import { CurrentUserFile } from '../../types/file.ts'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { FileDivider } from '../FileDivider.tsx'
|
||||
import React from 'react'
|
||||
import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
|
||||
|
||||
interface PdfViewProps {
|
||||
currentFile: CurrentUserFile | null
|
||||
@ -48,7 +49,8 @@ const PdfView = ({
|
||||
index !== files.length - 1
|
||||
return (
|
||||
<div className="files-wrapper">
|
||||
{files.map((currentUserFile, index, arr) => {
|
||||
{files.length > 0 ? (
|
||||
files.map((currentUserFile, index, arr) => {
|
||||
const { hash, file, id } = currentUserFile
|
||||
|
||||
if (!hash) return
|
||||
@ -71,7 +73,10 @@ const PdfView = ({
|
||||
{isNotLastPdfFile(index, arr) && <FileDivider />}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
})
|
||||
) : (
|
||||
<LoadingSpinner variant="small" />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -118,6 +118,14 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
||||
</Tooltip>
|
||||
)
|
||||
})}
|
||||
</UserAvatarGroup>
|
||||
</div>
|
||||
|
||||
{viewers.length > 0 && (
|
||||
<>
|
||||
<p>Viewers</p>
|
||||
<div className={styles.users}>
|
||||
<UserAvatarGroup max={20}>
|
||||
{viewers.map((signer) => {
|
||||
const pubkey = npubToHex(signer)!
|
||||
const profile = profiles[pubkey]
|
||||
@ -126,7 +134,9 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
||||
<Tooltip
|
||||
key={signer}
|
||||
title={
|
||||
profile?.display_name || profile?.name || shorten(pubkey)
|
||||
profile?.display_name ||
|
||||
profile?.name ||
|
||||
shorten(pubkey)
|
||||
}
|
||||
placement="top"
|
||||
arrow
|
||||
@ -144,6 +154,8 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
||||
})}
|
||||
</UserAvatarGroup>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.section}>
|
||||
<p>Details</p>
|
||||
|
@ -26,7 +26,6 @@ import {
|
||||
} from '../utils'
|
||||
import { useAppSelector } from '../hooks'
|
||||
import styles from './style.module.scss'
|
||||
import { Footer } from '../components/Footer/Footer'
|
||||
|
||||
export const MainLayout = () => {
|
||||
const dispatch: Dispatch = useDispatch()
|
||||
@ -160,7 +159,6 @@ export const MainLayout = () => {
|
||||
>
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -3,9 +3,33 @@
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
gap: 20px;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
|
||||
// Hide Scrollbar and let's use tabs to navigate
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
&::-webkit-scrollbar {
|
||||
display: none; /* Safari and Chrome */
|
||||
}
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-inline: contain;
|
||||
scroll-snap-type: inline mandatory;
|
||||
|
||||
> * {
|
||||
scroll-margin-top: $header-height + $body-vertical-padding;
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always; // Touch devices will always stop on each element
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
||||
grid-gap: 30px;
|
||||
flex-grow: 1;
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidesWrap {
|
||||
@ -16,17 +40,58 @@
|
||||
}
|
||||
|
||||
.sides {
|
||||
@media only screen and (min-width: 768px) {
|
||||
position: sticky;
|
||||
top: $header-height + $body-vertical-padding;
|
||||
}
|
||||
> :first-child {
|
||||
max-height: calc(
|
||||
100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.files {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 15px;
|
||||
.scrollAdjust {
|
||||
@media only screen and (max-width: 767px) {
|
||||
max-height: calc(
|
||||
100svh - $header-height - $body-vertical-padding * 2 - $tabs-height
|
||||
);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@media only screen and (min-width: 768px) {
|
||||
padding: 10px;
|
||||
border: 10px solid $overlay-background-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.navTabs {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: $tabs-height;
|
||||
z-index: 2;
|
||||
background: $overlay-background-color;
|
||||
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
|
||||
|
||||
padding: 5px;
|
||||
gap: 5px;
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> li {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $primary-main !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
@ -1,30 +1,147 @@
|
||||
import { PropsWithChildren, ReactNode } from 'react'
|
||||
import {
|
||||
PropsWithChildren,
|
||||
ReactNode,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react'
|
||||
|
||||
import styles from './StickySideColumns.module.scss'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
|
||||
import { Button } from '@mui/material'
|
||||
|
||||
interface StickySideColumnsProps {
|
||||
left?: ReactNode
|
||||
right?: ReactNode
|
||||
left: ReactNode
|
||||
right: ReactNode
|
||||
leftIcon: IconDefinition
|
||||
centerIcon: IconDefinition
|
||||
rightIcon: IconDefinition
|
||||
}
|
||||
|
||||
const DEFAULT_TAB = 'nav-content'
|
||||
export const StickySideColumns = ({
|
||||
left,
|
||||
right,
|
||||
leftIcon,
|
||||
centerIcon,
|
||||
rightIcon,
|
||||
children
|
||||
}: PropsWithChildren<StickySideColumnsProps>) => {
|
||||
const [tab, setTab] = useState(DEFAULT_TAB)
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const tabsRefs = useRef<{ [id: string]: HTMLDivElement | null }>({})
|
||||
const handleNavClick = (id: string) => {
|
||||
if (ref.current && tabsRefs.current) {
|
||||
const x = tabsRefs.current[id]?.offsetLeft
|
||||
ref.current.scrollTo({
|
||||
left: x,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}
|
||||
const isActive = (id: string) => id === tab
|
||||
|
||||
useEffect(() => {
|
||||
setTab(DEFAULT_TAB)
|
||||
handleNavClick(DEFAULT_TAB)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const tabs = tabsRefs.current
|
||||
// Set up the observer
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setTab(entry.target.id)
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
root: ref.current,
|
||||
threshold: 0.5,
|
||||
rootMargin: '-20px'
|
||||
}
|
||||
)
|
||||
|
||||
if (tabs) {
|
||||
Object.values(tabs).forEach((tab) => {
|
||||
if (tab) observer.observe(tab)
|
||||
})
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (tabs) {
|
||||
Object.values(tabs).forEach((tab) => {
|
||||
if (tab) observer.unobserve(tab)
|
||||
})
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={`${styles.sidesWrap} ${styles.files}`}>
|
||||
<>
|
||||
<div className={styles.container} ref={ref}>
|
||||
<div
|
||||
id="nav-left"
|
||||
className={styles.sidesWrap}
|
||||
ref={(tab) => (tabsRefs.current['nav-left'] = tab)}
|
||||
>
|
||||
<div className={styles.sides}>{left}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
id="nav-content"
|
||||
className={styles.scrollAdjust}
|
||||
ref={(tab) => (tabsRefs.current['nav-content'] = tab)}
|
||||
>
|
||||
<div id="content-preview" className={styles.content}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.sidesWrap}>
|
||||
<div
|
||||
id="nav-right"
|
||||
className={styles.sidesWrap}
|
||||
ref={(tab) => (tabsRefs.current['nav-right'] = tab)}
|
||||
>
|
||||
<div className={styles.sides}>{right}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul className={styles.navTabs}>
|
||||
<li>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="text"
|
||||
onClick={() => handleNavClick('nav-left')}
|
||||
className={`${isActive('nav-left') && styles.active}`}
|
||||
aria-label="nav left"
|
||||
>
|
||||
<FontAwesomeIcon icon={leftIcon} />
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="text"
|
||||
onClick={() => handleNavClick('nav-content')}
|
||||
className={`${isActive('nav-content') && styles.active}`}
|
||||
aria-label="nav middle"
|
||||
>
|
||||
<FontAwesomeIcon icon={centerIcon} />
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="text"
|
||||
onClick={() => handleNavClick('nav-right')}
|
||||
className={`${isActive('nav-right') && styles.active}`}
|
||||
aria-label="nav right"
|
||||
>
|
||||
<FontAwesomeIcon icon={rightIcon} />
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -4,5 +4,4 @@
|
||||
.main {
|
||||
flex-grow: 1;
|
||||
padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
@ -66,6 +66,8 @@ import {
|
||||
faCreditCard,
|
||||
faEllipsis,
|
||||
faEye,
|
||||
faFile,
|
||||
faFileCirclePlus,
|
||||
faGripLines,
|
||||
faHeading,
|
||||
faIdCard,
|
||||
@ -80,6 +82,7 @@ import {
|
||||
faStamp,
|
||||
faT,
|
||||
faTableCellsLarge,
|
||||
faToolbox,
|
||||
faTrash,
|
||||
faUpload
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
@ -132,109 +135,109 @@ export const CreatePage = () => {
|
||||
const [toolbox] = useState<DrawTool[]>([
|
||||
{
|
||||
identifier: MarkType.TEXT,
|
||||
icon: <FontAwesomeIcon icon={faT} />,
|
||||
icon: faT,
|
||||
label: 'Text',
|
||||
active: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.SIGNATURE,
|
||||
icon: <FontAwesomeIcon icon={faSignature} />,
|
||||
icon: faSignature,
|
||||
label: 'Signature',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.JOBTITLE,
|
||||
icon: <FontAwesomeIcon icon={faBriefcase} />,
|
||||
icon: faBriefcase,
|
||||
label: 'Job Title',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.FULLNAME,
|
||||
icon: <FontAwesomeIcon icon={faIdCard} />,
|
||||
icon: faIdCard,
|
||||
label: 'Full Name',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.INITIALS,
|
||||
icon: <FontAwesomeIcon icon={faHeading} />,
|
||||
icon: faHeading,
|
||||
label: 'Initials',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.DATETIME,
|
||||
icon: <FontAwesomeIcon icon={faClock} />,
|
||||
icon: faClock,
|
||||
label: 'Date Time',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.DATE,
|
||||
icon: <FontAwesomeIcon icon={faCalendarDays} />,
|
||||
icon: faCalendarDays,
|
||||
label: 'Date',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.NUMBER,
|
||||
icon: <FontAwesomeIcon icon={fa1} />,
|
||||
icon: fa1,
|
||||
label: 'Number',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.IMAGES,
|
||||
icon: <FontAwesomeIcon icon={faImage} />,
|
||||
icon: faImage,
|
||||
label: 'Images',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.CHECKBOX,
|
||||
icon: <FontAwesomeIcon icon={faSquareCheck} />,
|
||||
icon: faSquareCheck,
|
||||
label: 'Checkbox',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.MULTIPLE,
|
||||
icon: <FontAwesomeIcon icon={faCheckDouble} />,
|
||||
icon: faCheckDouble,
|
||||
label: 'Multiple',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.FILE,
|
||||
icon: <FontAwesomeIcon icon={faPaperclip} />,
|
||||
icon: faPaperclip,
|
||||
label: 'File',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.RADIO,
|
||||
icon: <FontAwesomeIcon icon={faCircleDot} />,
|
||||
icon: faCircleDot,
|
||||
label: 'Radio',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.SELECT,
|
||||
icon: <FontAwesomeIcon icon={faSquareCaretDown} />,
|
||||
icon: faSquareCaretDown,
|
||||
label: 'Select',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.CELLS,
|
||||
icon: <FontAwesomeIcon icon={faTableCellsLarge} />,
|
||||
icon: faTableCellsLarge,
|
||||
label: 'Cells',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.STAMP,
|
||||
icon: <FontAwesomeIcon icon={faStamp} />,
|
||||
icon: faStamp,
|
||||
label: 'Stamp',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.PAYMENT,
|
||||
icon: <FontAwesomeIcon icon={faCreditCard} />,
|
||||
icon: faCreditCard,
|
||||
label: 'Payment',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.PHONE,
|
||||
icon: <FontAwesomeIcon icon={faPhone} />,
|
||||
icon: faPhone,
|
||||
label: 'Phone',
|
||||
active: false
|
||||
}
|
||||
@ -457,10 +460,8 @@ export const CreatePage = () => {
|
||||
return false
|
||||
}
|
||||
|
||||
if (users.length === 0) {
|
||||
toast.error(
|
||||
'No signer/viewer is provided. At least add one signer or viewer.'
|
||||
)
|
||||
if (!users.some((u) => u.role === UserRole.signer)) {
|
||||
toast.error('No signer is provided. At least add one signer.')
|
||||
return false
|
||||
}
|
||||
|
||||
@ -1001,7 +1002,7 @@ export const CreatePage = () => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className={styles.paperGroup}>
|
||||
<div className={`${styles.paperGroup} ${styles.users}`}>
|
||||
<DisplayUser
|
||||
metadata={metadata}
|
||||
users={users}
|
||||
@ -1020,20 +1021,16 @@ export const CreatePage = () => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
onClick={
|
||||
drawTool.active
|
||||
? () => {
|
||||
handleToolSelect(drawTool)
|
||||
}
|
||||
: () => null
|
||||
}
|
||||
{...(drawTool.active && {
|
||||
onClick: () => handleToolSelect(drawTool)
|
||||
})}
|
||||
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
|
||||
`}
|
||||
>
|
||||
{drawTool.icon}
|
||||
<FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
|
||||
{drawTool.label}
|
||||
{drawTool.active ? (
|
||||
<FontAwesomeIcon icon={faEllipsis} />
|
||||
<FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
|
||||
) : (
|
||||
<span
|
||||
style={{
|
||||
@ -1053,6 +1050,9 @@ export const CreatePage = () => {
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
leftIcon={faFileCirclePlus}
|
||||
centerIcon={faFile}
|
||||
rightIcon={faToolbox}
|
||||
>
|
||||
<DrawPDFFields
|
||||
metadata={metadata}
|
||||
|
@ -4,6 +4,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.orderedFilesList {
|
||||
@ -67,10 +69,6 @@
|
||||
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;
|
||||
}
|
||||
@ -78,6 +76,7 @@
|
||||
.inputWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
@ -92,6 +91,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.users {
|
||||
flex-shrink: 0;
|
||||
max-height: 33vh;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@ -130,26 +134,35 @@
|
||||
|
||||
.toolbox {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@container (min-width: 204px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@container (min-width: 309px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
gap: 15px;
|
||||
|
||||
max-height: 450px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.toolItem {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
|
||||
transition: ease 0.2s;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
border-radius: 4px;
|
||||
padding: 10px 5px 5px 5px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
@ -162,7 +175,7 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:not(.selected) {
|
||||
&:not(.selected, .comingSoon) {
|
||||
&:hover {
|
||||
background: $primary-light;
|
||||
color: white;
|
||||
|
@ -18,6 +18,7 @@ import {
|
||||
SigitCardDisplayInfo,
|
||||
SigitStatus
|
||||
} from '../../utils'
|
||||
import { Footer } from '../../components/Footer/Footer'
|
||||
|
||||
// Unsupported Filter options are commented
|
||||
const FILTERS = [
|
||||
@ -262,6 +263,7 @@ export const HomePage = () => {
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -19,6 +19,7 @@ import {
|
||||
faWifi
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack'
|
||||
import { Footer } from '../../components/Footer/Footer'
|
||||
|
||||
export const LandingPage = () => {
|
||||
const navigate = useNavigate()
|
||||
@ -162,6 +163,7 @@ export const LandingPage = () => {
|
||||
|
||||
<Outlet />
|
||||
</Container>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -20,6 +20,7 @@ import {
|
||||
} from '../../utils'
|
||||
import styles from './style.module.scss'
|
||||
import { Container } from '../../components/Container'
|
||||
import { Footer } from '../../components/Footer/Footer'
|
||||
|
||||
export const ProfilePage = () => {
|
||||
const navigate = useNavigate()
|
||||
@ -41,6 +42,16 @@ export const ProfilePage = () => {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
||||
|
||||
const profileName =
|
||||
pubkey &&
|
||||
profileMetadata &&
|
||||
truncate(
|
||||
profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
|
||||
{
|
||||
length: 16
|
||||
}
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (npub) {
|
||||
try {
|
||||
@ -165,7 +176,10 @@ export const ProfilePage = () => {
|
||||
className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
|
||||
>
|
||||
{profileMetadata && profileMetadata.banner ? (
|
||||
<img src={profileMetadata.banner} />
|
||||
<img
|
||||
src={profileMetadata.banner}
|
||||
alt={`banner image for ${profileName}`}
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
@ -185,6 +199,7 @@ export const ProfilePage = () => {
|
||||
<img
|
||||
className={styles['image-placeholder']}
|
||||
src={getProfileImage(profileMetadata!)}
|
||||
alt={profileName}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
@ -224,14 +239,7 @@ export const ProfilePage = () => {
|
||||
variant="h6"
|
||||
className={styles.bold}
|
||||
>
|
||||
{truncate(
|
||||
profileMetadata.display_name ||
|
||||
profileMetadata.name ||
|
||||
hexToNpub(pubkey),
|
||||
{
|
||||
length: 16
|
||||
}
|
||||
)}
|
||||
{profileName}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
@ -285,6 +293,7 @@ export const ProfilePage = () => {
|
||||
</Box>
|
||||
</Container>
|
||||
)}
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -13,6 +13,7 @@ import { useNavigate } from 'react-router-dom'
|
||||
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
|
||||
import { State } from '../../store/rootReducer'
|
||||
import { Container } from '../../components/Container'
|
||||
import { Footer } from '../../components/Footer/Footer'
|
||||
|
||||
export const SettingsPage = () => {
|
||||
const theme = useTheme()
|
||||
@ -43,6 +44,7 @@ export const SettingsPage = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container>
|
||||
<List
|
||||
sx={{
|
||||
@ -94,5 +96,7 @@ export const SettingsPage = () => {
|
||||
</ListItemButton>
|
||||
</List>
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
4
src/pages/settings/cache/index.tsx
vendored
4
src/pages/settings/cache/index.tsx
vendored
@ -14,6 +14,7 @@ import { toast } from 'react-toastify'
|
||||
import { localCache } from '../../../services'
|
||||
import { LoadingSpinner } from '../../../components/LoadingSpinner'
|
||||
import { Container } from '../../../components/Container'
|
||||
import { Footer } from '../../../components/Footer/Footer'
|
||||
|
||||
export const CacheSettingsPage = () => {
|
||||
const theme = useTheme()
|
||||
@ -50,6 +51,7 @@ export const CacheSettingsPage = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container>
|
||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||
<List
|
||||
@ -93,5 +95,7 @@ export const CacheSettingsPage = () => {
|
||||
</ListItemButton>
|
||||
</List>
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -32,6 +32,7 @@ import {
|
||||
unixNow
|
||||
} from '../../../utils'
|
||||
import { Container } from '../../../components/Container'
|
||||
import { Footer } from '../../../components/Footer/Footer'
|
||||
|
||||
export const ProfileSettingsPage = () => {
|
||||
const theme = useTheme()
|
||||
@ -385,6 +386,7 @@ export const ProfileSettingsPage = () => {
|
||||
</LoadingButton>
|
||||
)}
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -27,6 +27,7 @@ import {
|
||||
shorten
|
||||
} from '../../../utils'
|
||||
import styles from './style.module.scss'
|
||||
import { Footer } from '../../../components/Footer/Footer'
|
||||
|
||||
export const RelaysPage = () => {
|
||||
const usersPubkey = useAppSelector((state) => state.auth?.usersPubkey)
|
||||
@ -270,6 +271,7 @@ const RelayItem = ({
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box className={styles.relay}>
|
||||
<List>
|
||||
<ListItem>
|
||||
@ -426,5 +428,7 @@ const RelayItem = ({
|
||||
)}
|
||||
</List>
|
||||
</Box>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -53,6 +53,11 @@ import { convertToSigitFile, SigitFile } from '../../utils/file.ts'
|
||||
import { FileDivider } from '../../components/FileDivider.tsx'
|
||||
import { ExtensionFileBox } from '../../components/ExtensionFileBox.tsx'
|
||||
import { useScale } from '../../hooks/useScale.tsx'
|
||||
import {
|
||||
faCircleInfo,
|
||||
faFile,
|
||||
faFileDownload
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
interface PdfViewProps {
|
||||
files: CurrentUserFile[]
|
||||
@ -78,7 +83,8 @@ const SlimPdfView = ({
|
||||
}, [currentFile])
|
||||
return (
|
||||
<div className="files-wrapper">
|
||||
{files.map((currentUserFile, i) => {
|
||||
{files.length > 0 ? (
|
||||
files.map((currentUserFile, i) => {
|
||||
const { hash, file, id } = currentUserFile
|
||||
const signatureEvents = Object.keys(parsedSignatureEvents)
|
||||
if (!hash) return
|
||||
@ -105,7 +111,11 @@ const SlimPdfView = ({
|
||||
})
|
||||
return (
|
||||
<div className="image-wrapper" key={i}>
|
||||
<img draggable="false" src={page.image} />
|
||||
<img
|
||||
draggable="false"
|
||||
src={page.image}
|
||||
alt={`page ${i} of ${file.name}`}
|
||||
/>
|
||||
{marks.map((m) => {
|
||||
return (
|
||||
<div
|
||||
@ -115,7 +125,9 @@ const SlimPdfView = ({
|
||||
left: inPx(from(page.width, m.location.left)),
|
||||
top: inPx(from(page.width, m.location.top)),
|
||||
width: inPx(from(page.width, m.location.width)),
|
||||
height: inPx(from(page.width, m.location.height)),
|
||||
height: inPx(
|
||||
from(page.width, m.location.height)
|
||||
),
|
||||
fontFamily: FONT_TYPE,
|
||||
fontSize: inPx(from(page.width, FONT_SIZE))
|
||||
}}
|
||||
@ -141,7 +153,10 @@ const SlimPdfView = ({
|
||||
{i < files.length - 1 && <FileDivider />}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
})
|
||||
) : (
|
||||
<LoadingSpinner variant="small" />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -557,6 +572,9 @@ export const VerifyPage = () => {
|
||||
</>
|
||||
}
|
||||
right={<UsersDetails meta={meta} />}
|
||||
leftIcon={faFileDownload}
|
||||
centerIcon={faFile}
|
||||
rightIcon={faCircleInfo}
|
||||
>
|
||||
<SlimPdfView
|
||||
currentFile={currentFile}
|
||||
|
@ -2,3 +2,5 @@ $header-height: 65px;
|
||||
$body-vertical-padding: 25px;
|
||||
|
||||
$default-container-padding-inline: 10px;
|
||||
|
||||
$tabs-height: 40px;
|
||||
|
@ -1,3 +1,4 @@
|
||||
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
|
||||
import { MarkRect } from './mark'
|
||||
|
||||
export interface MouseState {
|
||||
@ -5,8 +6,8 @@ export interface MouseState {
|
||||
dragging?: boolean
|
||||
resizing?: boolean
|
||||
coordsInWrapper?: {
|
||||
mouseX: number
|
||||
mouseY: number
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,7 +28,7 @@ export interface DrawnField extends MarkRect {
|
||||
export interface DrawTool {
|
||||
identifier: MarkType
|
||||
label: string
|
||||
icon: JSX.Element
|
||||
icon: IconDefinition
|
||||
defaultValue?: string
|
||||
selected?: boolean
|
||||
active?: boolean
|
||||
|
@ -1,12 +1,14 @@
|
||||
import { PdfPage } from '../types/drawing.ts'
|
||||
import * as PDFJS from 'pdfjs-dist'
|
||||
import { PDFDocument } from 'pdf-lib'
|
||||
import { Mark } from '../types/mark.ts'
|
||||
|
||||
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
import.meta.url
|
||||
).toString()
|
||||
import * as PDFJS from 'pdfjs-dist'
|
||||
import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'
|
||||
if (!PDFJS.GlobalWorkerOptions.workerPort) {
|
||||
// Use workerPort and allow worker to be shared between all getDocument calls
|
||||
const worker = new PDFJSWorker()
|
||||
PDFJS.GlobalWorkerOptions.workerPort = worker
|
||||
}
|
||||
|
||||
/**
|
||||
* Defined font size used when generating a PDF. Currently it is difficult to fully
|
||||
|
Loading…
Reference in New Issue
Block a user
loving these comments