Counterparts section design update, touch dnd support, marks scrolling #182

Merged
enes merged 9 commits from 174-add-users-updates into staging 2024-09-06 10:22:56 +00:00
3 changed files with 49 additions and 40 deletions
Showing only changes of commit 82b7b9f7ce - Show all commits

View File

@ -141,6 +141,8 @@ li {
color: black; color: black;
letter-spacing: normal; letter-spacing: normal;
border: 1px solid transparent; border: 1px solid transparent;
scroll-margin-top: $header-height + $body-vertical-padding;
} }
[data-dev='true'] { [data-dev='true'] {

View File

@ -2,6 +2,8 @@ import { CurrentUserMark } from '../../types/mark.ts'
import styles from '../DrawPDFFields/style.module.scss' import styles from '../DrawPDFFields/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'
import { forwardRef } from 'react'
import { npubToHex } from '../../utils/nostr.ts'
interface PdfMarkItemProps { interface PdfMarkItemProps {
userMark: CurrentUserMark userMark: CurrentUserMark
@ -14,13 +16,11 @@ interface PdfMarkItemProps {
/** /**
* Responsible for display an individual Pdf Mark. * Responsible for display an individual Pdf Mark.
*/ */
const PdfMarkItem = ({ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
selectedMark, (
handleMarkClick, { selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
selectedMarkValue, ref
userMark, ) => {
pageWidth
}: PdfMarkItemProps) => {
const { location } = userMark.mark const { location } = userMark.mark
const handleClick = () => handleMarkClick(userMark.mark.id) const handleClick = () => handleMarkClick(userMark.mark.id)
const isEdited = () => selectedMark?.mark.id === userMark.mark.id const isEdited = () => selectedMark?.mark.id === userMark.mark.id
@ -29,9 +29,16 @@ const PdfMarkItem = ({
const { from } = useScale() const { from } = useScale()
return ( return (
<div <div
ref={ref}
onClick={handleClick} onClick={handleClick}
className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`} className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
style={{ style={{
backgroundColor: selectedMark?.mark.npub
? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
: undefined,
borderColor: selectedMark?.mark.npub
? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
: undefined,
left: inPx(from(pageWidth, location.left)), left: inPx(from(pageWidth, location.left)),
top: inPx(from(pageWidth, location.top)), top: inPx(from(pageWidth, location.top)),
width: inPx(from(pageWidth, location.width)), width: inPx(from(pageWidth, location.width)),
@ -44,5 +51,6 @@ const PdfMarkItem = ({
</div> </div>
) )
} }
)
export default PdfMarkItem export default PdfMarkItem

View File

@ -48,16 +48,15 @@ const PdfPageItem = ({
alt={`page ${pageIndex + 1} of ${fileName}`} alt={`page ${pageIndex + 1} of ${fileName}`}
/> />
{currentUserMarks.map((m, i) => ( {currentUserMarks.map((m, i) => (
<div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
<PdfMarkItem <PdfMarkItem
key={i} key={i}
ref={(el) => (markRefs.current[m.id] = el)}
handleMarkClick={handleMarkClick} handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue} selectedMarkValue={selectedMarkValue}
userMark={m} userMark={m}
selectedMark={selectedMark} selectedMark={selectedMark}
pageWidth={page.width} pageWidth={page.width}
/> />
</div>
))} ))}
{otherUserMarks.map((m, i) => { {otherUserMarks.map((m, i) => {
return ( return (