diff options
Diffstat (limited to 'src/ui')
| -rw-r--r-- | src/ui/Note.js | 14 |
1 files changed, 10 insertions, 4 deletions
diff --git a/src/ui/Note.js b/src/ui/Note.js index b7387a8..36691d4 100644 --- a/src/ui/Note.js +++ b/src/ui/Note.js @@ -2,6 +2,7 @@ import { render, h, Fragment } from 'preact'; import { useRef, useLayoutEffect } from 'preact/hooks'; import ColorHash from 'color-hash'; import { formatRelative } from 'date-fns'; +import cn from 'classnames'; import css from './css'; const now = new Date(); @@ -121,7 +122,7 @@ section.collapsed > main { const colors = new ColorHash({ lightness: 0.8 }); export const Note = ({ id, type, attributedTo, published, content, - smallHeader = false, position, + smallHeader = false, collapsed = false, position, onHide, onSize, }) => { const backgroundColor = attributedTo.color || colors.hex(attributedTo.id); @@ -131,6 +132,11 @@ export const Note = ({ onSize(id, root.current.offsetWidth, root.current.offsetHeight); }); + const onClickHeader = (e) => { + e.preventDefault(); + onHide(id); + }; + return ( <section style={{ @@ -139,13 +145,13 @@ export const Note = ({ 'top': position && `${position[1] - root.current.offsetHeight / 2}px`, 'visibility': position ? 'visible' : 'hidden', }} - className={`type-${type}`} + class={cn(`type-${type}`, collapsed && 'collapsed')} data-id={id} ref={root} > {smallHeader - ? <header className="small" onClick={onHide} /> - : <Header onClick={onHide} user={attributedTo} published={published} /> + ? <header className="small" onClick={onClickHeader} /> + : <Header onClick={onClickHeader} user={attributedTo} published={published} /> } <main> {content} |