ux
This commit is contained in:
@@ -5030,7 +5030,7 @@ const AppLayout = () => {
|
|||||||
onExit: handleDeskExit,
|
onExit: handleDeskExit,
|
||||||
onRefresh: refreshCurrentFolder,
|
onRefresh: refreshCurrentFolder,
|
||||||
onDocumentOpen: handleDeskDocumentOpen,
|
onDocumentOpen: handleDeskDocumentOpen,
|
||||||
onInspectDocument: null,
|
onInspectDocument: inspectDocument,
|
||||||
onEntryPointer: handleEntryPointerCore,
|
onEntryPointer: handleEntryPointerCore,
|
||||||
onDocumentStackSelect: handleDeskDocumentStackSelect,
|
onDocumentStackSelect: handleDeskDocumentStackSelect,
|
||||||
onPromoteSelection: promoteSelectionOrder,
|
onPromoteSelection: promoteSelectionOrder,
|
||||||
@@ -5088,6 +5088,7 @@ const AppLayout = () => {
|
|||||||
detailPanelOpen,
|
detailPanelOpen,
|
||||||
handleDetailPanelClose,
|
handleDetailPanelClose,
|
||||||
handleDeskDocumentOpen,
|
handleDeskDocumentOpen,
|
||||||
|
inspectDocument,
|
||||||
resolveThumbnailUrlForDoc,
|
resolveThumbnailUrlForDoc,
|
||||||
handleDocumentTagDrop,
|
handleDocumentTagDrop,
|
||||||
handleTagRemove,
|
handleTagRemove,
|
||||||
|
|||||||
@@ -703,7 +703,6 @@ const DesktopWorkspace = ({
|
|||||||
onDocumentOpen,
|
onDocumentOpen,
|
||||||
onDocumentStackSelect,
|
onDocumentStackSelect,
|
||||||
onEntryPointer,
|
onEntryPointer,
|
||||||
onInspectDocument,
|
|
||||||
onPromoteSelection,
|
onPromoteSelection,
|
||||||
openOverlayForDoc,
|
openOverlayForDoc,
|
||||||
overlayDisplay,
|
overlayDisplay,
|
||||||
@@ -717,6 +716,7 @@ const DesktopWorkspace = ({
|
|||||||
setDraggingId,
|
setDraggingId,
|
||||||
selectedDocumentIds,
|
selectedDocumentIds,
|
||||||
detailPanelOpen,
|
detailPanelOpen,
|
||||||
|
onInspectDocument,
|
||||||
markLayoutDirty,
|
markLayoutDirty,
|
||||||
tagDropTargetId,
|
tagDropTargetId,
|
||||||
visibleDocIds,
|
visibleDocIds,
|
||||||
@@ -804,7 +804,7 @@ const DesktopWorkspaceView = ({
|
|||||||
markLayoutDirty,
|
markLayoutDirty,
|
||||||
});
|
});
|
||||||
|
|
||||||
const { getCardPointerHandlers, handleShellKeyDown } = useDeskPointer({
|
const { getCardPointerHandlers, handleShellKeyDown, focusShell } = useDeskPointer({
|
||||||
containerRef,
|
containerRef,
|
||||||
items,
|
items,
|
||||||
layoutRef,
|
layoutRef,
|
||||||
@@ -819,11 +819,27 @@ const DesktopWorkspaceView = ({
|
|||||||
onPromoteSelection,
|
onPromoteSelection,
|
||||||
onDocumentOpen,
|
onDocumentOpen,
|
||||||
selectedDocumentIds,
|
selectedDocumentIds,
|
||||||
onClearSelection,
|
|
||||||
detailPanelOpen,
|
detailPanelOpen,
|
||||||
onCloseDetailPanel,
|
onCloseDetailPanel,
|
||||||
|
openOverlayForDoc,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
focusShell();
|
||||||
|
}, [focusShell]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedDocumentIds.length) {
|
||||||
|
focusShell();
|
||||||
|
}
|
||||||
|
}, [focusShell, selectedDocumentIds.length]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!detailPanelOpen) {
|
||||||
|
focusShell();
|
||||||
|
}
|
||||||
|
}, [detailPanelOpen, focusShell]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const allSizesReady = items.every((doc) => ensureDocumentSize(doc));
|
const allSizesReady = items.every((doc) => ensureDocumentSize(doc));
|
||||||
@@ -834,6 +850,7 @@ const DesktopWorkspaceView = ({
|
|||||||
if (event.target === event.currentTarget && typeof onClearSelection === 'function') {
|
if (event.target === event.currentTarget && typeof onClearSelection === 'function') {
|
||||||
onClearSelection();
|
onClearSelection();
|
||||||
}
|
}
|
||||||
|
focusShell();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@@ -848,6 +865,7 @@ const DesktopWorkspaceView = ({
|
|||||||
if (event.target === event.currentTarget && typeof onClearSelection === 'function') {
|
if (event.target === event.currentTarget && typeof onClearSelection === 'function') {
|
||||||
onClearSelection();
|
onClearSelection();
|
||||||
}
|
}
|
||||||
|
focusShell();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{!allSizesReady ? (
|
{!allSizesReady ? (
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ export const createPointerIntent = ({
|
|||||||
clickAction = CLICK_ACTIONS.addStack;
|
clickAction = CLICK_ACTIONS.addStack;
|
||||||
dragAction = DRAG_ACTIONS.dragSelectStack;
|
dragAction = DRAG_ACTIONS.dragSelectStack;
|
||||||
} else if (alreadySelected) {
|
} else if (alreadySelected) {
|
||||||
clickAction = CLICK_ACTIONS.openDetail;
|
clickAction = CLICK_ACTIONS.selectSingle;
|
||||||
dragAction = selectionCount > 1 ? DRAG_ACTIONS.dragSelection : DRAG_ACTIONS.dragSelectSingle;
|
dragAction = selectionCount > 1 ? DRAG_ACTIONS.dragSelection : DRAG_ACTIONS.dragSelectSingle;
|
||||||
} else {
|
} else {
|
||||||
clickAction = CLICK_ACTIONS.selectSingle;
|
clickAction = CLICK_ACTIONS.selectSingle;
|
||||||
|
|||||||
@@ -37,9 +37,9 @@ export const useDeskPointer = ({
|
|||||||
onPromoteSelection,
|
onPromoteSelection,
|
||||||
onDocumentOpen,
|
onDocumentOpen,
|
||||||
selectedDocumentIds,
|
selectedDocumentIds,
|
||||||
onClearSelection,
|
|
||||||
detailPanelOpen,
|
detailPanelOpen,
|
||||||
onCloseDetailPanel,
|
onCloseDetailPanel,
|
||||||
|
openOverlayForDoc = null,
|
||||||
}) => {
|
}) => {
|
||||||
const pointerIntentRef = useRef(null);
|
const pointerIntentRef = useRef(null);
|
||||||
const pointerStartRef = useRef({ x: 0, y: 0 });
|
const pointerStartRef = useRef({ x: 0, y: 0 });
|
||||||
@@ -401,9 +401,16 @@ export const useDeskPointer = ({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (Array.isArray(selectedDocumentIds) && selectedDocumentIds.length > 0) {
|
if (
|
||||||
|
typeof openOverlayForDoc === 'function'
|
||||||
|
&& Array.isArray(selectedDocumentIds)
|
||||||
|
&& selectedDocumentIds.length > 0
|
||||||
|
) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
onClearSelection?.();
|
const targetId = selectedDocumentIds[selectedDocumentIds.length - 1];
|
||||||
|
if (targetId) {
|
||||||
|
openOverlayForDoc(targetId);
|
||||||
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -412,12 +419,18 @@ export const useDeskPointer = ({
|
|||||||
safeInvoke(onCloseDetailPanel);
|
safeInvoke(onCloseDetailPanel);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[detailPanelOpen, onClearSelection, onCloseDetailPanel, selectedDocumentIds],
|
[detailPanelOpen, onCloseDetailPanel, openOverlayForDoc, selectedDocumentIds],
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
getCardPointerHandlers,
|
getCardPointerHandlers,
|
||||||
handleShellKeyDown,
|
handleShellKeyDown,
|
||||||
|
focusShell: () => {
|
||||||
|
const shell = containerRef.current;
|
||||||
|
if (shell && typeof shell.focus === 'function') {
|
||||||
|
shell.focus({ preventScroll: true });
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -54,25 +54,18 @@ const useDocumentDrag = (options = {}) => {
|
|||||||
|
|
||||||
const tapHandler = usePointerTap({
|
const tapHandler = usePointerTap({
|
||||||
delay: 220,
|
delay: 220,
|
||||||
onSingle: ({ data, event }) => {
|
onSingle: () => {},
|
||||||
if (!data || !data.docId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (event && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (typeof onInspectDocument === 'function') {
|
|
||||||
onInspectDocument(data.docId);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onDouble: ({ data, event }) => {
|
onDouble: ({ data, event }) => {
|
||||||
if (!data || !data.docId) {
|
if (!data || !data.docId) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (event && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
|
if (event?.altKey) {
|
||||||
|
openOverlayForDoc(data.docId, data.originInfo);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
openOverlayForDoc(data.docId, data.originInfo);
|
if (typeof onInspectDocument === 'function') {
|
||||||
|
onInspectDocument(data.docId, event);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const dragStateRef = useRef(null);
|
const dragStateRef = useRef(null);
|
||||||
|
|||||||
@@ -204,6 +204,9 @@ const DocumentsPanel = ({
|
|||||||
|
|
||||||
const handleDocumentActivate = useCallback(
|
const handleDocumentActivate = useCallback(
|
||||||
(doc, event) => {
|
(doc, event) => {
|
||||||
|
if (!doc) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (event) {
|
if (event) {
|
||||||
if (typeof event.preventDefault === 'function') {
|
if (typeof event.preventDefault === 'function') {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@@ -212,9 +215,13 @@ const DocumentsPanel = ({
|
|||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
handleDocumentPreviewZoom(doc);
|
if (event?.altKey) {
|
||||||
|
handleDocumentPreviewZoom(doc);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onInspectDocument?.(doc.id, event);
|
||||||
},
|
},
|
||||||
[handleDocumentPreviewZoom],
|
[handleDocumentPreviewZoom, onInspectDocument],
|
||||||
);
|
);
|
||||||
|
|
||||||
const selectedRowKeySet = useMemo(() => new Set(selectedEntries || []), [selectedEntries]);
|
const selectedRowKeySet = useMemo(() => new Set(selectedEntries || []), [selectedEntries]);
|
||||||
@@ -318,8 +325,7 @@ const DocumentsPanel = ({
|
|||||||
} else {
|
} else {
|
||||||
const entry = getEntryByKey(activeRow.key);
|
const entry = getEntryByKey(activeRow.key);
|
||||||
if (entry?.document) {
|
if (entry?.document) {
|
||||||
handleDocumentActivate(entry.document, event);
|
handleDocumentPreviewZoom(entry.document);
|
||||||
onInspectDocument?.(entry.document.id, event);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -355,14 +361,13 @@ const DocumentsPanel = ({
|
|||||||
[
|
[
|
||||||
focusedRowKey,
|
focusedRowKey,
|
||||||
getEntryByKey,
|
getEntryByKey,
|
||||||
handleDocumentActivate,
|
|
||||||
navigableRowKeys,
|
navigableRowKeys,
|
||||||
navigableRows,
|
navigableRows,
|
||||||
onEntrySelection,
|
onEntrySelection,
|
||||||
onFocusedRowChange,
|
onFocusedRowChange,
|
||||||
onFolderSelect,
|
onFolderSelect,
|
||||||
onInspectDocument,
|
|
||||||
selectedEntries,
|
selectedEntries,
|
||||||
|
handleDocumentPreviewZoom,
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -500,16 +505,8 @@ const DocumentsPanel = ({
|
|||||||
event,
|
event,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
|
||||||
typeof onInspectDocument === 'function'
|
|
||||||
&& !isPointerModifierEvent(event)
|
|
||||||
&& isPrimaryPointerEvent(event)
|
|
||||||
) {
|
|
||||||
onInspectDocument(doc.id, event);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
[onEntryPointer, onInspectDocument],
|
[onEntryPointer],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleFolderClick = useCallback(
|
const handleFolderClick = useCallback(
|
||||||
@@ -980,6 +977,7 @@ export const createDocumentsSurface = ({
|
|||||||
onMoveDocumentsToFolder,
|
onMoveDocumentsToFolder,
|
||||||
searchIncludeDescendants,
|
searchIncludeDescendants,
|
||||||
onToggleSearchIncludeDescendants,
|
onToggleSearchIncludeDescendants,
|
||||||
|
onInspectDocument,
|
||||||
} = tableProps;
|
} = tableProps;
|
||||||
|
|
||||||
const title = Array.isArray(searchResults) ? 'Search results' : currentFolderName;
|
const title = Array.isArray(searchResults) ? 'Search results' : currentFolderName;
|
||||||
@@ -1044,7 +1042,13 @@ export const createDocumentsSurface = ({
|
|||||||
breadcrumbs,
|
breadcrumbs,
|
||||||
selectionLabel: null,
|
selectionLabel: null,
|
||||||
floatingActions,
|
floatingActions,
|
||||||
content: <DocumentsPanel {...tableProps} showHeader={false} />,
|
content: (
|
||||||
|
<DocumentsPanel
|
||||||
|
{...tableProps}
|
||||||
|
showHeader={false}
|
||||||
|
onInspectDocument={onInspectDocument}
|
||||||
|
/>
|
||||||
|
),
|
||||||
detail,
|
detail,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -38,6 +38,7 @@ import {
|
|||||||
IconLoader,
|
IconLoader,
|
||||||
IconSortAscendingLetters,
|
IconSortAscendingLetters,
|
||||||
IconSortDescendingLetters,
|
IconSortDescendingLetters,
|
||||||
|
IconFileInfo,
|
||||||
} from '@tabler/icons-react';
|
} from '@tabler/icons-react';
|
||||||
import FolderSvg from '../assets/folder.svg';
|
import FolderSvg from '../assets/folder.svg';
|
||||||
|
|
||||||
@@ -176,6 +177,15 @@ export const InfoIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) =>
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const FileInfoIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
||||||
|
<IconFileInfo
|
||||||
|
className={composeClassName('icon', className)}
|
||||||
|
size={size}
|
||||||
|
stroke={stroke}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
export const DetailPanelCollapseIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
export const DetailPanelCollapseIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
|
||||||
<IconLayoutSidebarRightCollapse
|
<IconLayoutSidebarRightCollapse
|
||||||
className={composeClassName('icon', className)}
|
className={composeClassName('icon', className)}
|
||||||
|
|||||||
Reference in New Issue
Block a user