diff --git a/.eslintignore b/.eslintignore index 40fbb18335..569cda587d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -312,6 +312,7 @@ packages/app-desktop/gui/NoteList/utils/useItemCss.js packages/app-desktop/gui/NoteList/utils/useMoveNote.js packages/app-desktop/gui/NoteList/utils/useOnKeyDown.js packages/app-desktop/gui/NoteList/utils/useOnNoteClick.js +packages/app-desktop/gui/NoteList/utils/useOnNoteDoubleClick.js packages/app-desktop/gui/NoteList/utils/useScroll.js packages/app-desktop/gui/NoteList/utils/useVisibleRange.test.js packages/app-desktop/gui/NoteList/utils/useVisibleRange.js diff --git a/.gitignore b/.gitignore index 833f714abb..8145c35252 100644 --- a/.gitignore +++ b/.gitignore @@ -287,6 +287,7 @@ packages/app-desktop/gui/NoteList/utils/useItemCss.js packages/app-desktop/gui/NoteList/utils/useMoveNote.js packages/app-desktop/gui/NoteList/utils/useOnKeyDown.js packages/app-desktop/gui/NoteList/utils/useOnNoteClick.js +packages/app-desktop/gui/NoteList/utils/useOnNoteDoubleClick.js packages/app-desktop/gui/NoteList/utils/useScroll.js packages/app-desktop/gui/NoteList/utils/useVisibleRange.test.js packages/app-desktop/gui/NoteList/utils/useVisibleRange.js diff --git a/packages/app-desktop/gui/MultiNoteActions.tsx b/packages/app-desktop/gui/MultiNoteActions.tsx index cd426f7518..5103650063 100644 --- a/packages/app-desktop/gui/MultiNoteActions.tsx +++ b/packages/app-desktop/gui/MultiNoteActions.tsx @@ -32,6 +32,14 @@ function styles_(props: MultiNoteActionsProps) { display: 'flex', flexDirection: 'column', }, + divider: { + borderTopWidth: 1, + borderTopStyle: 'solid', + borderTopColor: theme.dividerColor, + width: '100%', + height: 1, + marginBottom: 10, + }, button: { ...theme.buttonStyle, marginBottom: 10, @@ -68,11 +76,17 @@ export default function MultiNoteActions(props: MultiNoteActionsProps) { const item = menuItems[i]; if (!item.enabled) continue; - itemComps.push( - , - ); + if (item.type === 'separator') { + itemComps.push( +
, + ); + } else { + itemComps.push( + , + ); + } } return ( diff --git a/packages/app-desktop/gui/NoteList/NoteList2.tsx b/packages/app-desktop/gui/NoteList/NoteList2.tsx index 225258ee9e..db09d1b08e 100644 --- a/packages/app-desktop/gui/NoteList/NoteList2.tsx +++ b/packages/app-desktop/gui/NoteList/NoteList2.tsx @@ -29,6 +29,7 @@ import getNoteElementIdFromJoplinId from '../NoteListItem/utils/getNoteElementId import useFocusVisible from './utils/useFocusVisible'; import { stateUtils } from '@joplin/lib/reducer'; import { connect } from 'react-redux'; +import useOnNoteDoubleClick from './utils/useOnNoteDoubleClick'; const commands = { focusElementNoteList, @@ -103,6 +104,8 @@ const NoteList = (props: Props) => { const onNoteClick = useOnNoteClick(props.dispatch, focusNote); + const onNoteDoubleClick = useOnNoteDoubleClick(); + const onKeyDown = useOnKeyDown( activeNoteId, props.selectedNoteIds, @@ -226,6 +229,7 @@ const NoteList = (props: Props) => { itemSize={itemSize} onChange={listRenderer.onChange} onClick={onNoteClick} + onDoubleClick={onNoteDoubleClick} onContextMenu={onItemContextMenu} onDragStart={onDragStart} onDragOver={onDragOver} diff --git a/packages/app-desktop/gui/NoteList/utils/useOnNoteDoubleClick.ts b/packages/app-desktop/gui/NoteList/utils/useOnNoteDoubleClick.ts new file mode 100644 index 0000000000..863f3d0c3f --- /dev/null +++ b/packages/app-desktop/gui/NoteList/utils/useOnNoteDoubleClick.ts @@ -0,0 +1,10 @@ +import * as React from 'react'; +import { useCallback } from 'react'; +import CommandService from '@joplin/lib/services/CommandService'; + +export default () => { + return useCallback((event: React.MouseEvent) => { + const noteId = event.currentTarget.getAttribute('data-id'); + void CommandService.instance().execute('openNoteInNewWindow', noteId); + }, []); +}; diff --git a/packages/app-desktop/gui/NoteListItem/NoteListItem.tsx b/packages/app-desktop/gui/NoteListItem/NoteListItem.tsx index 887150771c..eb22391e7e 100644 --- a/packages/app-desktop/gui/NoteListItem/NoteListItem.tsx +++ b/packages/app-desktop/gui/NoteListItem/NoteListItem.tsx @@ -22,6 +22,7 @@ interface NoteItemProps { noteCount: number; onChange: OnChangeHandler; onClick: MouseEventHandler; + onDoubleClick: MouseEventHandler; onContextMenu: MouseEventHandler; onDragOver: DragEventHandler; onDragStart: DragEventHandler; @@ -79,6 +80,7 @@ const NoteListItem = (props: NoteItemProps, ref: LegacyRef) => { props.style, props.itemSize, props.onClick, + props.onDoubleClick, props.flow, ); diff --git a/packages/app-desktop/gui/NoteListItem/utils/useItemElement.ts b/packages/app-desktop/gui/NoteListItem/utils/useItemElement.ts index 109671ca84..cc06ac20b7 100644 --- a/packages/app-desktop/gui/NoteListItem/utils/useItemElement.ts +++ b/packages/app-desktop/gui/NoteListItem/utils/useItemElement.ts @@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'; import { ItemFlow } from '@joplin/lib/services/plugins/api/noteListType'; const useItemElement = ( - rootElement: HTMLDivElement, noteId: string, noteHtml: string, focusVisible: boolean, style: React.CSSProperties, itemSize: Size, onClick: React.MouseEventHandler, flow: ItemFlow, + rootElement: HTMLDivElement, noteId: string, noteHtml: string, focusVisible: boolean, style: React.CSSProperties, itemSize: Size, onClick: React.MouseEventHandler, onDoubleClick: React.MouseEventHandler, flow: ItemFlow, ) => { const [itemElement, setItemElement] = useState(null); @@ -21,8 +21,10 @@ const useItemElement = ( if (flow === ItemFlow.LeftToRight) element.style.width = `${itemSize.width}px`; element.style.height = `${itemSize.height}px`; element.innerHTML = noteHtml; - // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied + // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're mixing React synthetic events with DOM events which ideally should not be done but it is fine in this particular case element.addEventListener('click', onClick as any); + // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're mixing React synthetic events with DOM events which ideally should not be done but it is fine in this particular case + element.addEventListener('dblclick', onDoubleClick as any); rootElement.appendChild(element); @@ -31,7 +33,7 @@ const useItemElement = ( return () => { element.remove(); }; - }, [rootElement, itemSize, noteHtml, noteId, style, onClick, flow]); + }, [rootElement, itemSize, noteHtml, noteId, style, onClick, onDoubleClick, flow]); useEffect(() => { if (!itemElement) return;