From 033026f57cd0d4571cee7eee79a76e4fc0ccd123 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Mon, 1 Dec 2025 11:45:58 +0100 Subject: [PATCH] feat: Introduce configurable icon and card sizes for document views and desktop workspace. --- frontend/src/constants/documents.ts | 2 ++ frontend/src/desktop/DesktopWorkspace.tsx | 18 +++++++++++------- frontend/src/desktop/LayoutSystem.ts | 3 ++- frontend/src/documents/DocumentsView.tsx | 7 ++++--- .../documents/components/DocumentsGridCard.tsx | 8 ++++---- .../components/DocumentsGridContainer.tsx | 8 ++++---- .../documents/components/DocumentsListRow.tsx | 6 ++++-- .../src/documents/panel/DocumentsPanel.tsx | 12 ++++++++---- frontend/src/styles/documents/listing.css | 2 -- 9 files changed, 39 insertions(+), 27 deletions(-) diff --git a/frontend/src/constants/documents.ts b/frontend/src/constants/documents.ts index c1872a5..e3616b6 100644 --- a/frontend/src/constants/documents.ts +++ b/frontend/src/constants/documents.ts @@ -4,6 +4,8 @@ export const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate- export const TAG_TEXT_MIME_TYPE = 'text/plain'; export const DEFAULT_GRID_ICON_SIZE = 144; +export const DEFAULT_LIST_ICON_SIZE = 48; +export const DEFAULT_DESKTOP_CARD_SIZE = 300; export const SORT_OPTIONS = [ { value: 'title', label: 'Title' }, diff --git a/frontend/src/desktop/DesktopWorkspace.tsx b/frontend/src/desktop/DesktopWorkspace.tsx index c806acc..e3c5c25 100644 --- a/frontend/src/desktop/DesktopWorkspace.tsx +++ b/frontend/src/desktop/DesktopWorkspace.tsx @@ -38,8 +38,9 @@ interface DocumentSizeInfo { } // Fallback size computation -const computeFallbackCardSize = (_doc: DeskDocument): DocumentSizeInfo => { - return { width: 200, height: 200, source: 'fallback' }; +const computeFallbackCardSize = (_doc: DeskDocument, defaultSize: number = 200): DocumentSizeInfo => { + const size = Math.round(defaultSize * (1 / Math.SQRT2)); + return { width: size, height: size, source: 'fallback' }; }; export interface DesktopWorkspaceProps { @@ -52,6 +53,7 @@ export interface DesktopWorkspaceProps { onDocumentTagDetach?: (docId: Identifier, tagId: Identifier) => void; tenantId?: Identifier | null; viewId?: string | null; + defaultCardSize?: number; } // Wrapper to handle hooks per card @@ -86,6 +88,7 @@ const DesktopWorkspaceContent: React.FC = ({ onDocumentTagDetach, tenantId, viewId, + defaultCardSize = 200, }) => { const { openPreview } = usePreviewContext(); const { addPointer, removePointer } = usePointerTracking(); @@ -179,8 +182,8 @@ const DesktopWorkspaceContent: React.FC = ({ return { width: meta.width, height: meta.height, source: 'metadata' }; } - return computeFallbackCardSize(doc); - }, [metadataMap]); + return computeFallbackCardSize(doc, defaultCardSize); + }, [metadataMap, defaultCardSize]); // Sync LayoutStore to layoutRef useEffect(() => { @@ -371,9 +374,10 @@ const DesktopWorkspaceContent: React.FC = ({ const pageCount = metadata?.page_count ?? 1; const layoutCard = layoutStore.initialize(docId, null, { - width: Number.isFinite(size.width) && size.width > 0 ? size.width : 200, - height: Number.isFinite(size.height) && size.height > 0 ? size.height : 200, - pageCount + width: size.width, + height: size.height, + pageCount, + maxSize: defaultCardSize }); return ( diff --git a/frontend/src/desktop/LayoutSystem.ts b/frontend/src/desktop/LayoutSystem.ts index deaeb0a..f8ba85c 100644 --- a/frontend/src/desktop/LayoutSystem.ts +++ b/frontend/src/desktop/LayoutSystem.ts @@ -355,13 +355,14 @@ export class LayoutStore { width: number; height: number; pageCount: number; + maxSize?: number; }) { let card = this.items.get(id); const { width, height } = constrainDimensions( config.width, config.height, - 320 + config.maxSize || 320 ); if (!card) { diff --git a/frontend/src/documents/DocumentsView.tsx b/frontend/src/documents/DocumentsView.tsx index 002cee4..a95f855 100644 --- a/frontend/src/documents/DocumentsView.tsx +++ b/frontend/src/documents/DocumentsView.tsx @@ -112,23 +112,24 @@ const AbstractDocumentsView = void; chil ); }; -export const DocumentsList: React.FC = (props) => { +export const DocumentsList: React.FC = (props) => { return ( ); }; -export const DocumentsGrid: React.FC = (props) => { +export const DocumentsGrid: React.FC = (props) => { return ( diff --git a/frontend/src/documents/components/DocumentsGridCard.tsx b/frontend/src/documents/components/DocumentsGridCard.tsx index f791f4a..4d9259f 100644 --- a/frontend/src/documents/components/DocumentsGridCard.tsx +++ b/frontend/src/documents/components/DocumentsGridCard.tsx @@ -14,11 +14,11 @@ import DocumentEntry from './DocumentEntry'; interface DocumentsGridCardProps extends DocumentsViewProps { entry: DocumentsListEntry; viewLogic: DocumentViewLogic; - gridIconSize?: number; + iconSize?: number; } const DocumentsGridCard: React.FC = (props) => { - const { entry, gridIconSize } = props; + const { entry, iconSize } = props; if (entry.type === 'folder') { const folder = entry.folder; @@ -35,7 +35,7 @@ const DocumentsGridCard: React.FC = (props) => { {(logic) => ( <>
- +
@@ -82,7 +82,7 @@ const DocumentsGridCard: React.FC = (props) => { ensureAssetUrl={props.ensureAssetUrl} getDocumentAsset={props.getDocumentAsset} alt={`Thumbnail for ${doc.title}`} - maxSize={gridIconSize} + maxSize={iconSize} scrollRootRef={props.scrollRef} />
diff --git a/frontend/src/documents/components/DocumentsGridContainer.tsx b/frontend/src/documents/components/DocumentsGridContainer.tsx index 394e34e..8b0b1ea 100644 --- a/frontend/src/documents/components/DocumentsGridContainer.tsx +++ b/frontend/src/documents/components/DocumentsGridContainer.tsx @@ -3,14 +3,14 @@ import React from 'react'; interface DocumentsGridContainerProps { children: React.ReactNode; clearSelection: () => void; - gridIconSize?: number; + iconSize?: number; [key: string]: any; } const DocumentsGridContainer: React.FC = ({ children, clearSelection, - gridIconSize, + iconSize, ...props }) => { return ( @@ -19,8 +19,8 @@ const DocumentsGridContainer: React.FC = ({ role="list" {...props} style={ - gridIconSize - ? ({ '--documents-grid-icon-size': `${gridIconSize}px` } as React.CSSProperties) + iconSize + ? ({ '--documents-grid-icon-size': `${iconSize}px` } as React.CSSProperties) : undefined } onClick={(event) => { diff --git a/frontend/src/documents/components/DocumentsListRow.tsx b/frontend/src/documents/components/DocumentsListRow.tsx index 3539005..47f8436 100644 --- a/frontend/src/documents/components/DocumentsListRow.tsx +++ b/frontend/src/documents/components/DocumentsListRow.tsx @@ -15,10 +15,11 @@ import DocumentEntry from './DocumentEntry'; interface DocumentsListRowProps extends DocumentsViewProps { entry: DocumentsListEntry; viewLogic: DocumentViewLogic; + iconSize?: number; } const DocumentsListRow: React.FC = (props) => { - const { entry } = props; + const { entry, iconSize } = props; if (entry.type === 'folder') { const folder = entry.folder; @@ -35,7 +36,7 @@ const DocumentsListRow: React.FC = (props) => { <>
- +
@@ -92,6 +93,7 @@ const DocumentsListRow: React.FC = (props) => { getDocumentAsset={props.getDocumentAsset} alt={`Thumbnail for ${doc.title}`} scrollRootRef={props.scrollRef} + maxSize={props.iconSize} /> diff --git a/frontend/src/documents/panel/DocumentsPanel.tsx b/frontend/src/documents/panel/DocumentsPanel.tsx index 345a09b..6f67633 100644 --- a/frontend/src/documents/panel/DocumentsPanel.tsx +++ b/frontend/src/documents/panel/DocumentsPanel.tsx @@ -24,7 +24,11 @@ import DocumentsPanelHeader, { import { SelectionFloatingPanel } from '../SelectionFloatingActions'; import { createDocumentsTableHeaderActions } from './DocumentsToolbar'; import { useDocumentsFilter } from '../context/DocumentsFilterContext'; -import { DEFAULT_GRID_ICON_SIZE } from '../../constants/documents'; +import { + DEFAULT_GRID_ICON_SIZE, + DEFAULT_LIST_ICON_SIZE, + DEFAULT_DESKTOP_CARD_SIZE, +} from '../../constants/documents'; import type { Identifier } from '../../types/identifiers'; const EntryType = { @@ -490,12 +494,12 @@ const DocumentsPanelInner: React.FC = ({ switch (viewMode) { case 'desk': - return ; + return ; case 'grid': - return ; + return ; case 'list': default: - return ; + return ; } }; diff --git a/frontend/src/styles/documents/listing.css b/frontend/src/styles/documents/listing.css index 7095eda..0c8d587 100644 --- a/frontend/src/styles/documents/listing.css +++ b/frontend/src/styles/documents/listing.css @@ -346,8 +346,6 @@ } .thumb-icon__image { - width: 32px; - height: 32px; display: block; }