diff --git a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx index 622d13831..5544fa7cb 100644 --- a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx +++ b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx @@ -45,7 +45,7 @@ function NoteEvent(props: Props) { copy( `${window.location.origin}/${window.location.pathname.split('/')[1]}${session( props.note.sessionId - )}${props.note.timestamp > 0 ? '?jumpto=' + props.note.timestamp : ''}` + )}${props.note.timestamp > 0 ? `?jumpto=${props.note.timestamp}¬e=${props.note.noteId}` : `?note=${props.note.noteId}`}` ); toast.success('Note URL copied to clipboard'); }; diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx index 33108c0fe..4afda2e4f 100644 --- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx +++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx @@ -24,7 +24,7 @@ function NoteItem(props: Props) { copy( `${window.location.origin}/${window.location.pathname.split('/')[1]}${session( props.note.sessionId - )}${props.note.timestamp > 0 ? '?jumpto=' + props.note.timestamp : ''}` + )}${props.note.timestamp > 0 ? `?jumpto=${props.note.timestamp}¬e=${props.note.noteId}` : `?note=${props.note.noteId}`}` ); toast.success('Note URL copied to clipboard'); }; @@ -49,7 +49,7 @@ function NoteItem(props: Props) { session(props.note.sessionId) + (props.note.timestamp > 0 ? `?jumpto=${props.note.timestamp}¬e=${props.note.noteId}` - : '') + : `?note=${props.note.noteId}`) } >
@@ -60,9 +60,6 @@ function NoteItem(props: Props) { style={{ // @ts-ignore background: tagProps[props.note.tag], - // userSelect: 'none', - // width: 'fit-content', - // fontSize: 11, padding: '1px 6px', }} className="rounded-full text-white text-xs select-none w-fit" diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx new file mode 100644 index 000000000..ee9876503 --- /dev/null +++ b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx @@ -0,0 +1,128 @@ +import React from 'react'; +import { Icon } from 'UI'; +import styles from './itemMenu.module.css'; +import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv'; +import cn from 'classnames'; + +interface Item { + icon: string; + text: string; + onClick: (args: any) => void; + hidden?: boolean; + disabled?: boolean; +} + +interface Props { + bold?: boolean; + flat?: boolean; + items: Item[]; + label?: React.ReactNode; + onToggle?: (args: any) => void; +} + +export default class ItemMenu extends React.PureComponent { + menuBtnRef: HTMLDivElement = null; + + state = { + displayed: false, + }; + + handleEsc = (e: KeyboardEvent) => e.key === 'Escape' && this.closeMenu(); + + componentDidMount() { + document.addEventListener('keydown', this.handleEsc, false); + } + componentWillUnmount() { + document.removeEventListener('keydown', this.handleEsc, false); + } + + onClick = (callback: Function) => (e: React.MouseEvent) => { + e.stopPropagation(); + callback(e); + }; + + toggleMenu = () => { + const shouldDisplay = !this.state.displayed; + this.setState({ displayed: shouldDisplay }); + this.props.onToggle?.(shouldDisplay); + }; + + closeMenu = () => { + this.setState({ displayed: false }); + this.props.onToggle?.(false); + }; + + render() { + const { items, label = '', bold } = this.props; + const { displayed } = this.state; + const parentStyles = label ? 'rounded px-2 py-2 hover:bg-gray-light' : ''; + + return ( +
+ +
+ {label && ( + + {label} + + )} + {this.props.flat ? null : ( +
{ + this.menuBtnRef = ref; + }} + className={cn('rounded-full flex items-center justify-center', { + 'bg-gray-light': displayed, + 'w-10 h-10': !label, + })} + role="button" + > + +
+ )} +
+
+
+ {items + .filter(({ hidden }) => !hidden) + .map(({ onClick, text, icon, disabled = false }) => ( +
{}} + className={disabled ? 'cursor-not-allowed' : ''} + role="menuitem" + > +
+ {icon && ( +
+ {/* @ts-ignore */} + +
+ )} +
{text}
+
+
+ ))} +
+
+ ); + } +}