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