refactor document viewer UI buttons and props.

This commit is contained in:
2025-12-03 22:48:18 +01:00
parent e46318aee5
commit dad6f1e0b8
3 changed files with 41 additions and 58 deletions
+1 -1
View File
@@ -118,7 +118,7 @@ export const useWorkspaceSurface = ({
<DocumentViewerPanel
variant="sidebar"
sidebarMode={sidebarMode}
onCollapsePanel={onClose}
onClosePanel={onClose}
onMaximizePanel={onOpenPreview}
tagOptions={tagOptions}
{...restDetailProps}
+21 -19
View File
@@ -312,14 +312,27 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
className="panel-header--dark"
title={documentTitle}
leading={
<button
onClick={onClose}
className="icon-button"
aria-label="Close preview"
type="button"
>
<IconX />
</button>
<>
<button
onClick={onClose}
className="icon-button"
aria-label="Close preview"
type="button"
>
<IconX />
</button>
{onMaximize && (
<button
onClick={onMaximize}
className="icon-button"
aria-label="Open document info"
title="Open document info"
type="button"
>
<FileInfoIcon />
</button>
)}
</>
}
actions={
<>
@@ -335,17 +348,6 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
<DownloadIcon />
</a>
)}
{onMaximize && (
<button
onClick={onMaximize}
className="icon-button"
aria-label="Open document info"
title="Open document info"
type="button"
>
<FileInfoIcon />
</button>
)}
</>
}
/>
+19 -38
View File
@@ -9,7 +9,6 @@ import {
DownloadIcon,
CloseIcon,
IconZoomInArea,
IconX,
WindowMaximizeIcon,
} from '../ui/icons';
import {
@@ -42,7 +41,6 @@ interface DocumentViewerPanelProps extends DocumentSummarySectionProps {
onClosePanel?: () => void;
resolveFolderPath?: (doc: Document | null) => Array<{ id?: string; name?: string }>;
variant?: 'viewer' | 'sidebar';
onCollapsePanel?: () => void;
onMaximizePanel?: (args: { documentIds: Array<string> }) => void;
sidebarMode?: SidebarMode;
}
@@ -76,17 +74,6 @@ export const createDocumentViewerHeaderActions = ({
<DownloadIcon />
</a>
) : null}
{canZoom && onZoom ? (
<button
type="button"
className="icon-button"
onClick={onZoom}
aria-label="Open zoom preview"
title="Open zoom preview"
>
<IconZoomInArea />
</button>
) : null}
</>
);
};
@@ -110,7 +97,6 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
onClosePanel,
resolveFolderPath,
variant = 'viewer',
onCollapsePanel,
onMaximizePanel,
sidebarMode = 'overlay',
}) => {
@@ -330,20 +316,6 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
canZoom: Boolean(document),
});
const collapseButton = isSidebarVariant && onCollapsePanel
? (
<button
type="button"
className="icon-button"
onClick={() => onCollapsePanel?.()}
aria-label="Close detail panel"
title="Close detail panel"
>
<IconX />
</button>
)
: null;
const maximizeButton = isSidebarVariant && onMaximizePanel
? (
<button
@@ -365,7 +337,7 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
)
: null;
const closeButton = !isSidebarVariant && onClosePanel
const closeButton = onClosePanel
? (
<button
type="button"
@@ -379,15 +351,24 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
)
: null;
const headerLeadingButtons = isSidebarVariant
? [
collapseButton ? <React.Fragment key="collapse-button">{collapseButton}</React.Fragment> : null,
maximizeButton ? <React.Fragment key="maximize-button">{maximizeButton}</React.Fragment> : null,
].filter(Boolean)
: [
sidebarToggle ? <React.Fragment key="sidebar-toggle">{sidebarToggle}</React.Fragment> : null,
closeButton ? <React.Fragment key="close-button">{closeButton}</React.Fragment> : null,
].filter(Boolean);
const previewZoomButton = (
<button
type="button"
className="icon-button"
onClick={handleZoomOpen}
aria-label="Open zoom preview"
title="Open zoom preview"
>
<IconZoomInArea />
</button>
);
const headerLeadingButtons = [
sidebarToggle ? <React.Fragment key="sidebar-toggle">{sidebarToggle}</React.Fragment> : null,
closeButton ? <React.Fragment key="close-button">{closeButton}</React.Fragment> : null,
maximizeButton ? <React.Fragment key="maximize-button">{maximizeButton}</React.Fragment> : null,
previewZoomButton ? <React.Fragment key="preview-zoom-button">{previewZoomButton}</React.Fragment> : null,
].filter(Boolean);
const headerLeadingContent = headerLeadingButtons.length ? headerLeadingButtons : null;
const resizeHandle = isSidebarVariant ? (