remove desktop help modal
This commit is contained in:
@@ -31,8 +31,6 @@ const AppLayout = () => {
|
|||||||
onToggleSearchIncludeDescendants: documentsPreferences.toggleSearchIncludeDescendants,
|
onToggleSearchIncludeDescendants: documentsPreferences.toggleSearchIncludeDescendants,
|
||||||
onSetSearchIncludeDescendants: documentsPreferences.setSearchIncludeDescendants,
|
onSetSearchIncludeDescendants: documentsPreferences.setSearchIncludeDescendants,
|
||||||
sortRefreshReadyRef: documentsPreferences.sortRefreshReadyRef,
|
sortRefreshReadyRef: documentsPreferences.sortRefreshReadyRef,
|
||||||
deskHelpOpen: documentsPreferences.deskHelpOpen,
|
|
||||||
setDeskHelpOpen: documentsPreferences.setDeskHelpOpen,
|
|
||||||
handleDeskExit: documentsPreferences.handleDeskExit,
|
handleDeskExit: documentsPreferences.handleDeskExit,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -42,17 +42,8 @@ export const useDocumentsPreferences = () => {
|
|||||||
return 'list';
|
return 'list';
|
||||||
});
|
});
|
||||||
|
|
||||||
const [deskHelpOpen, setDeskHelpOpen] = useState(false);
|
|
||||||
const lastNonDeskViewRef = useRef(documentsViewMode === 'desk' ? 'list' : documentsViewMode);
|
const lastNonDeskViewRef = useRef(documentsViewMode === 'desk' ? 'list' : documentsViewMode);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (documentsViewMode !== 'desk') {
|
|
||||||
lastNonDeskViewRef.current = documentsViewMode;
|
|
||||||
} else if (deskHelpOpen) {
|
|
||||||
setDeskHelpOpen(false);
|
|
||||||
}
|
|
||||||
}, [documentsViewMode, deskHelpOpen]);
|
|
||||||
|
|
||||||
const setDocumentsViewMode = useCallback((mode) => {
|
const setDocumentsViewMode = useCallback((mode) => {
|
||||||
const next = mode === 'grid' ? 'grid' : mode === 'desk' ? 'desk' : 'list';
|
const next = mode === 'grid' ? 'grid' : mode === 'desk' ? 'desk' : 'list';
|
||||||
setDocumentsViewModeState((previous) => {
|
setDocumentsViewModeState((previous) => {
|
||||||
@@ -122,8 +113,6 @@ export const useDocumentsPreferences = () => {
|
|||||||
documentsViewMode,
|
documentsViewMode,
|
||||||
handleDocumentsViewModeChange: setDocumentsViewMode,
|
handleDocumentsViewModeChange: setDocumentsViewMode,
|
||||||
handleDeskExit,
|
handleDeskExit,
|
||||||
deskHelpOpen,
|
|
||||||
setDeskHelpOpen,
|
|
||||||
documentsSortField,
|
documentsSortField,
|
||||||
documentsSortDirection,
|
documentsSortDirection,
|
||||||
documentsSortFieldRef,
|
documentsSortFieldRef,
|
||||||
|
|||||||
@@ -7,9 +7,7 @@ import React, {
|
|||||||
useState,
|
useState,
|
||||||
useSyncExternalStore,
|
useSyncExternalStore,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import { createPortal } from 'react-dom';
|
|
||||||
import { resolveDocumentAssetUrl } from '../asset_manager';
|
import { resolveDocumentAssetUrl } from '../asset_manager';
|
||||||
import { CloseIcon } from '../ui/icons';
|
|
||||||
import { formatTransform } from './math';
|
import { formatTransform } from './math';
|
||||||
import useDocumentDrag from './useDocumentDrag';
|
import useDocumentDrag from './useDocumentDrag';
|
||||||
import PreviewZoomOverlay from '../detail/PreviewZoomOverlay';
|
import PreviewZoomOverlay from '../detail/PreviewZoomOverlay';
|
||||||
@@ -29,7 +27,6 @@ import usePreviewMetadata from './hooks/usePreviewMetadata';
|
|||||||
import '../styles/workspace/workspace-layout.css';
|
import '../styles/workspace/workspace-layout.css';
|
||||||
import '../styles/workspace/workspace-items.css';
|
import '../styles/workspace/workspace-items.css';
|
||||||
import '../styles/workspace/workspace-cards.css';
|
import '../styles/workspace/workspace-cards.css';
|
||||||
import '../styles/workspace/workspace-overlays.css';
|
|
||||||
|
|
||||||
const DEBUG_DRAG = false;
|
const DEBUG_DRAG = false;
|
||||||
const DEBUG_FOCUS = false;
|
const DEBUG_FOCUS = false;
|
||||||
@@ -50,8 +47,6 @@ const DesktopWorkspace = ({
|
|||||||
onClearSelection = null,
|
onClearSelection = null,
|
||||||
detailPanelOpen = false,
|
detailPanelOpen = false,
|
||||||
onCloseDetailPanel = null,
|
onCloseDetailPanel = null,
|
||||||
helpOpen = false,
|
|
||||||
onHelpClose = null,
|
|
||||||
tenantId = null,
|
tenantId = null,
|
||||||
viewId = 'default',
|
viewId = 'default',
|
||||||
}) => {
|
}) => {
|
||||||
@@ -641,12 +636,7 @@ const DesktopWorkspace = ({
|
|||||||
visibleDocIds,
|
visibleDocIds,
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
return (
|
return <DesktopWorkspaceView {...viewProps} />;
|
||||||
<>
|
|
||||||
<DesktopWorkspaceView {...viewProps} />
|
|
||||||
<DesktopHelpOverlay open={helpOpen} onClose={onHelpClose} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const DesktopWorkspaceView = ({
|
const DesktopWorkspaceView = ({
|
||||||
@@ -897,107 +887,3 @@ const DesktopWorkspaceView = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default DesktopWorkspace;
|
export default DesktopWorkspace;
|
||||||
|
|
||||||
const DesktopHelpOverlay = ({ open = false, onClose = null }) => {
|
|
||||||
const portalTarget = typeof document !== 'undefined' ? document.body : null;
|
|
||||||
const closeButtonRef = useRef(null);
|
|
||||||
const previousFocusRef = useRef(null);
|
|
||||||
|
|
||||||
const handleClose = useCallback(() => {
|
|
||||||
if (typeof onClose === 'function') {
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
}, [onClose]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open || typeof window === 'undefined') {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleKeyDown = (event) => {
|
|
||||||
if (!event) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (event.key === 'Escape') {
|
|
||||||
event.preventDefault();
|
|
||||||
handleClose();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('keydown', handleKeyDown, true);
|
|
||||||
return () => window.removeEventListener('keydown', handleKeyDown, true);
|
|
||||||
}, [open, handleClose]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) {
|
|
||||||
const previous = previousFocusRef.current;
|
|
||||||
if (previous && typeof previous.focus === 'function') {
|
|
||||||
previous.focus();
|
|
||||||
}
|
|
||||||
previousFocusRef.current = null;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof document !== 'undefined') {
|
|
||||||
previousFocusRef.current = document.activeElement instanceof HTMLElement
|
|
||||||
? document.activeElement
|
|
||||||
: null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (closeButtonRef.current && typeof closeButtonRef.current.focus === 'function') {
|
|
||||||
closeButtonRef.current.focus();
|
|
||||||
}
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
if (!open || !portalTarget) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return createPortal(
|
|
||||||
<div className="desk-help-overlay" role="dialog" aria-modal="true" aria-labelledby="desk-help-title">
|
|
||||||
<div className="desk-help-overlay__backdrop" onClick={handleClose} />
|
|
||||||
<div className="desk-help-overlay__content">
|
|
||||||
<div className="desk-help-overlay__header">
|
|
||||||
<h2 id="desk-help-title">Desk view tips</h2>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="icon-button"
|
|
||||||
onClick={handleClose}
|
|
||||||
aria-label="Close desk view tips"
|
|
||||||
ref={closeButtonRef}
|
|
||||||
>
|
|
||||||
<CloseIcon />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="desk-help-overlay__body">
|
|
||||||
<p>Use the desk as a freeform workspace for triage and quick comparisons.</p>
|
|
||||||
<ul className="desk-help-overlay__list">
|
|
||||||
<li><strong>Single-click</strong> a document to open it in the detail panel.</li>
|
|
||||||
<li><strong>Double-click</strong> to open the zoomed preview.</li>
|
|
||||||
<li>
|
|
||||||
<strong>Drag</strong> selected cards to reposition them; build a selection with
|
|
||||||
{' '}
|
|
||||||
<kbd>Cmd</kbd>/<kbd>Ctrl</kbd>
|
|
||||||
{' '}+ click or Shift-click.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Cmd/Ctrl + click</strong> with an empty selection scoops up the stack under
|
|
||||||
{' '}the pointer.
|
|
||||||
</li>
|
|
||||||
<li><strong>Space</strong> clears the current selection.</li>
|
|
||||||
<li>
|
|
||||||
<strong>Drag tags</strong> from the sidebar onto a card to assign them, or fling a
|
|
||||||
{' '}tag away to remove it.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="desk-help-overlay__footer">
|
|
||||||
<button type="button" className="button primary" onClick={handleClose}>
|
|
||||||
Got it
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
portalTarget,
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|||||||
@@ -54,7 +54,6 @@ const createDesktopSurface = ({
|
|||||||
viewMode: viewMode || 'desk',
|
viewMode: viewMode || 'desk',
|
||||||
onViewModeChange,
|
onViewModeChange,
|
||||||
onRefresh,
|
onRefresh,
|
||||||
onShowDeskHelp: viewMode === 'desk' ? workspaceProps?.onOpenHelp : null,
|
|
||||||
includeDescendants: searchIncludeDescendants,
|
includeDescendants: searchIncludeDescendants,
|
||||||
onToggleIncludeDescendants: onToggleSearchIncludeDescendants,
|
onToggleIncludeDescendants: onToggleSearchIncludeDescendants,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -46,8 +46,6 @@ const useDeskWorkspaceProps = ({
|
|||||||
searchQuery,
|
searchQuery,
|
||||||
activeCorrespondentFilters,
|
activeCorrespondentFilters,
|
||||||
selectedFolder,
|
selectedFolder,
|
||||||
setDeskHelpOpen,
|
|
||||||
deskHelpOpen,
|
|
||||||
openDetailPanel,
|
openDetailPanel,
|
||||||
}) => {
|
}) => {
|
||||||
const handleDeskDocumentStackSelect = useCallback(
|
const handleDeskDocumentStackSelect = useCallback(
|
||||||
@@ -107,14 +105,6 @@ const useDeskWorkspaceProps = ({
|
|||||||
[openDetailPanel, selectedDocumentIds],
|
[openDetailPanel, selectedDocumentIds],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleDeskHelpOpen = useCallback(() => {
|
|
||||||
setDeskHelpOpen(true);
|
|
||||||
}, [setDeskHelpOpen]);
|
|
||||||
|
|
||||||
const handleDeskHelpClose = useCallback(() => {
|
|
||||||
setDeskHelpOpen(false);
|
|
||||||
}, [setDeskHelpOpen]);
|
|
||||||
|
|
||||||
const deskViewId = useMemo(() => {
|
const deskViewId = useMemo(() => {
|
||||||
if (showingSearchResults) {
|
if (showingSearchResults) {
|
||||||
const trimmedQuery = searchQuery.trim();
|
const trimmedQuery = searchQuery.trim();
|
||||||
@@ -148,9 +138,6 @@ const useDeskWorkspaceProps = ({
|
|||||||
onEntryPointer: handleEntryPointerCore,
|
onEntryPointer: handleEntryPointerCore,
|
||||||
onDocumentStackSelect: handleDeskDocumentStackSelect,
|
onDocumentStackSelect: handleDeskDocumentStackSelect,
|
||||||
onPromoteSelection: promoteSelectionOrder,
|
onPromoteSelection: promoteSelectionOrder,
|
||||||
onOpenHelp: handleDeskHelpOpen,
|
|
||||||
helpOpen: deskHelpOpen,
|
|
||||||
onHelpClose: handleDeskHelpClose,
|
|
||||||
tenantId: currentTenantId,
|
tenantId: currentTenantId,
|
||||||
viewId: deskViewId,
|
viewId: deskViewId,
|
||||||
selectedDocumentIds,
|
selectedDocumentIds,
|
||||||
@@ -193,9 +180,6 @@ const useDeskWorkspaceProps = ({
|
|||||||
handleEntryPointerCore,
|
handleEntryPointerCore,
|
||||||
handleDeskDocumentStackSelect,
|
handleDeskDocumentStackSelect,
|
||||||
promoteSelectionOrder,
|
promoteSelectionOrder,
|
||||||
handleDeskHelpOpen,
|
|
||||||
deskHelpOpen,
|
|
||||||
handleDeskHelpClose,
|
|
||||||
currentTenantId,
|
currentTenantId,
|
||||||
deskViewId,
|
deskViewId,
|
||||||
selectedDocumentIds,
|
selectedDocumentIds,
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import {
|
|||||||
IconFileStack,
|
IconFileStack,
|
||||||
RefreshIcon,
|
RefreshIcon,
|
||||||
MinusVerticalIcon,
|
MinusVerticalIcon,
|
||||||
InfoIcon,
|
|
||||||
FoldersIcon,
|
FoldersIcon,
|
||||||
FoldersOffIcon,
|
FoldersOffIcon,
|
||||||
SortAscendingLettersIcon,
|
SortAscendingLettersIcon,
|
||||||
@@ -17,7 +16,6 @@ export const createDocumentsTableHeaderActions = ({
|
|||||||
viewMode,
|
viewMode,
|
||||||
onViewModeChange,
|
onViewModeChange,
|
||||||
onRefresh,
|
onRefresh,
|
||||||
onShowDeskHelp = null,
|
|
||||||
sortField = 'title',
|
sortField = 'title',
|
||||||
onSortFieldChange = null,
|
onSortFieldChange = null,
|
||||||
sortDirection = 'asc',
|
sortDirection = 'asc',
|
||||||
@@ -78,22 +76,6 @@ export const createDocumentsTableHeaderActions = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isDeskView && typeof onShowDeskHelp === 'function' ? (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="icon-button"
|
|
||||||
onClick={onShowDeskHelp}
|
|
||||||
aria-label="Show desk view tips"
|
|
||||||
title="Show desk view tips"
|
|
||||||
>
|
|
||||||
<InfoIcon />
|
|
||||||
</button>
|
|
||||||
<span className="main-content__actions-divider" aria-hidden="true">
|
|
||||||
<MinusVerticalIcon />
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
{includeDescendantsToggle ? (
|
{includeDescendantsToggle ? (
|
||||||
<>
|
<>
|
||||||
{includeDescendantsToggle}
|
{includeDescendantsToggle}
|
||||||
|
|||||||
@@ -65,8 +65,6 @@ const useDocumentsWorkspace = ({
|
|||||||
onToggleSearchIncludeDescendants,
|
onToggleSearchIncludeDescendants,
|
||||||
onSetSearchIncludeDescendants,
|
onSetSearchIncludeDescendants,
|
||||||
sortRefreshReadyRef,
|
sortRefreshReadyRef,
|
||||||
deskHelpOpen = false,
|
|
||||||
setDeskHelpOpen,
|
|
||||||
handleDeskExit,
|
handleDeskExit,
|
||||||
} = {}) => {
|
} = {}) => {
|
||||||
const handleDocumentsViewModeChange = onDocumentsViewModeChange || noop;
|
const handleDocumentsViewModeChange = onDocumentsViewModeChange || noop;
|
||||||
@@ -74,7 +72,6 @@ const useDocumentsWorkspace = ({
|
|||||||
const handleDocumentsSortDirectionToggle = onDocumentsSortDirectionToggle || noop;
|
const handleDocumentsSortDirectionToggle = onDocumentsSortDirectionToggle || noop;
|
||||||
const toggleSearchIncludeDescendants = onToggleSearchIncludeDescendants || noop;
|
const toggleSearchIncludeDescendants = onToggleSearchIncludeDescendants || noop;
|
||||||
const setSearchIncludeDescendants = onSetSearchIncludeDescendants || noop;
|
const setSearchIncludeDescendants = onSetSearchIncludeDescendants || noop;
|
||||||
const setDeskHelpOpenSafe = setDeskHelpOpen || noop;
|
|
||||||
const handleDeskExitSafe = handleDeskExit || noop;
|
const handleDeskExitSafe = handleDeskExit || noop;
|
||||||
|
|
||||||
const fallbackSortFieldRef = useRef(documentsSortField);
|
const fallbackSortFieldRef = useRef(documentsSortField);
|
||||||
@@ -1446,8 +1443,6 @@ const useDocumentsWorkspace = ({
|
|||||||
searchQuery,
|
searchQuery,
|
||||||
activeCorrespondentFilters,
|
activeCorrespondentFilters,
|
||||||
selectedFolder,
|
selectedFolder,
|
||||||
setDeskHelpOpen: setDeskHelpOpenSafe,
|
|
||||||
deskHelpOpen,
|
|
||||||
openDetailPanel,
|
openDetailPanel,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -365,9 +365,6 @@ const ApiTokensSection = ({
|
|||||||
const selectedSet = token?.capability_set_id
|
const selectedSet = token?.capability_set_id
|
||||||
? capabilitySetMap[token.capability_set_id]
|
? capabilitySetMap[token.capability_set_id]
|
||||||
: null;
|
: null;
|
||||||
const capabilityList = Array.isArray(token?.capabilities) && token.capabilities.length
|
|
||||||
? token.capabilities
|
|
||||||
: selectedSet?.capabilities || [];
|
|
||||||
const capabilitySetLabel = selectedSet?.label
|
const capabilitySetLabel = selectedSet?.label
|
||||||
|| selectedSet?.slug
|
|| selectedSet?.slug
|
||||||
|| token.capability_set_id
|
|| token.capability_set_id
|
||||||
|
|||||||
@@ -1,94 +0,0 @@
|
|||||||
/* Workspace overlays (help, guidance, etc.) */
|
|
||||||
.desk-help-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 2000000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: clamp(1.5rem, 4vw, 3rem);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__backdrop {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: var(--surface-overlay);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__content {
|
|
||||||
position: relative;
|
|
||||||
width: min(640px, 92vw);
|
|
||||||
max-height: min(80vh, 640px);
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
box-shadow: 0 24px 64px var(--shadow-strong);
|
|
||||||
border-radius: 1.25rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
pointer-events: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__header,
|
|
||||||
.desk-help-overlay__footer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 1rem 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__header {
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__header h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.15rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__body {
|
|
||||||
padding: 1rem 1.25rem 1.5rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.75rem;
|
|
||||||
line-height: 1.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__body p {
|
|
||||||
margin: 0;
|
|
||||||
color: var(--muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__list {
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 1.1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__list li {
|
|
||||||
color: var(--fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__body kbd {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.15rem 0.4rem;
|
|
||||||
border-radius: 0.4rem;
|
|
||||||
border: 1px solid var(--border-strong);
|
|
||||||
background: var(--surface-subtle);
|
|
||||||
font-size: 0.85em;
|
|
||||||
line-height: 1;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desk-help-overlay__footer {
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user