mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-27 14:49:23 +00:00
Split file editor and page editor styling, Restore Ethans changes (sorry Ethan)
This commit is contained in:
Reece Browne
parent
1513aba546
commit
75f9cd81d1
276
frontend/src/components/fileEditor/FileEditor.module.css
Normal file
276
frontend/src/components/fileEditor/FileEditor.module.css
Normal file
@ -0,0 +1,276 @@
|
|||||||
|
/* =========================
|
||||||
|
FileEditor Card UI Styles
|
||||||
|
========================= */
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--file-card-bg);
|
||||||
|
border-radius: 0.0625rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: box-shadow 0.18s ease, outline-color 0.18s ease, transform 0.18s ease;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card[data-selected="true"] {
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* While dragging */
|
||||||
|
.card.dragging,
|
||||||
|
.card:global(.dragging) {
|
||||||
|
outline: 1px solid var(--border-strong);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------- Header -------- */
|
||||||
|
.header {
|
||||||
|
height: 2.25rem;
|
||||||
|
border-radius: 0.0625rem 0.0625rem 0 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 44px 1fr 44px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 6px;
|
||||||
|
user-select: none;
|
||||||
|
background: var(--bg-toolbar);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-bottom: 1px solid var(--border-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerResting {
|
||||||
|
background: #3B4B6E; /* dark blue for unselected in light mode */
|
||||||
|
color: #FFFFFF;
|
||||||
|
border-bottom: 1px solid var(--border-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerSelected {
|
||||||
|
background: var(--header-selected-bg);
|
||||||
|
color: var(--header-selected-fg);
|
||||||
|
border-bottom: 1px solid var(--header-selected-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selected border color in light mode */
|
||||||
|
:global([data-mantine-color-scheme="light"]) .card[data-selected="true"] {
|
||||||
|
outline-color: var(--card-selected-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reserve space for checkbox instead of logo */
|
||||||
|
.logoMark {
|
||||||
|
margin-left: 8px;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerIndex {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kebab {
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu dropdown */
|
||||||
|
.menuDropdown {
|
||||||
|
min-width: 210px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------- Title / Meta -------- */
|
||||||
|
.title {
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
margin-top: 2px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------- Preview area -------- */
|
||||||
|
.previewBox {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--file-card-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.previewPaper {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 6px);
|
||||||
|
min-height: 9rem;
|
||||||
|
justify-content: center;
|
||||||
|
display: grid;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--file-card-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Thumbnail fallback */
|
||||||
|
.previewPaper[data-thumb-missing="true"]::after {
|
||||||
|
content: "No preview";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Drag handle grip */
|
||||||
|
.dragHandle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 6px;
|
||||||
|
right: 6px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
z-index: 1;
|
||||||
|
cursor: grab;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Actions Overlay */
|
||||||
|
.actionsOverlay {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 44px; /* just below header */
|
||||||
|
background: var(--bg-toolbar);
|
||||||
|
border-bottom: 1px solid var(--border-default);
|
||||||
|
z-index: 20;
|
||||||
|
overflow: hidden;
|
||||||
|
animation: slideDown 140ms ease-out;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionRow {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionRow:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionDanger {
|
||||||
|
color: var(--text-brand-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionsDivider {
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border-default);
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pin indicator */
|
||||||
|
.pinIndicator {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 4px;
|
||||||
|
left: 4px;
|
||||||
|
z-index: 1;
|
||||||
|
color: rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Unsupported file indicator */
|
||||||
|
.unsupportedPill {
|
||||||
|
margin-left: 1.75rem;
|
||||||
|
background: #6B7280;
|
||||||
|
color: white;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 80px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse {
|
||||||
|
animation: pulse 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced motion */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.card,
|
||||||
|
.menuDropdown {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
DARK MODE OVERRIDES
|
||||||
|
========================= */
|
||||||
|
:global([data-mantine-color-scheme="dark"]) .card {
|
||||||
|
outline-color: #3A4047; /* deselected stroke */
|
||||||
|
}
|
||||||
|
|
||||||
|
:global([data-mantine-color-scheme="dark"]) .card[data-selected="true"] {
|
||||||
|
outline-color: #4B525A; /* selected stroke (subtle grey) */
|
||||||
|
}
|
||||||
|
|
||||||
|
:global([data-mantine-color-scheme="dark"]) .headerResting {
|
||||||
|
background: #1F2329; /* requested default unselected color */
|
||||||
|
color: var(--tool-header-text); /* #D0D6DC */
|
||||||
|
border-bottom-color: var(--tool-header-border); /* #3A4047 */
|
||||||
|
}
|
||||||
|
|
||||||
|
:global([data-mantine-color-scheme="dark"]) .headerSelected {
|
||||||
|
background: var(--tool-header-border); /* #3A4047 */
|
||||||
|
color: var(--tool-header-text); /* #D0D6DC */
|
||||||
|
border-bottom-color: var(--tool-header-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global([data-mantine-color-scheme="dark"]) .title {
|
||||||
|
color: #D0D6DC; /* title text */
|
||||||
|
}
|
||||||
|
|
||||||
|
:global([data-mantine-color-scheme="dark"]) .meta {
|
||||||
|
color: #6B7280; /* subtitle text */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light mode selected header stroke override */
|
||||||
|
:global([data-mantine-color-scheme="light"]) .card[data-selected="true"] {
|
||||||
|
outline-color: #3B4B6E;
|
||||||
|
}
|
||||||
@ -12,8 +12,8 @@ import { fileStorage } from '../../services/fileStorage';
|
|||||||
import { generateThumbnailForFile } from '../../utils/thumbnailUtils';
|
import { generateThumbnailForFile } from '../../utils/thumbnailUtils';
|
||||||
import { zipFileService } from '../../services/zipFileService';
|
import { zipFileService } from '../../services/zipFileService';
|
||||||
import { detectFileExtension } from '../../utils/fileUtils';
|
import { detectFileExtension } from '../../utils/fileUtils';
|
||||||
import styles from '../pageEditor/PageEditor.module.css';
|
import styles from './FileEditor.module.css';
|
||||||
import FileThumbnail from '../pageEditor/FileThumbnail';
|
import FileEditorThumbnail from './FileEditorThumbnail';
|
||||||
import FilePickerModal from '../shared/FilePickerModal';
|
import FilePickerModal from '../shared/FilePickerModal';
|
||||||
import SkeletonLoader from '../shared/SkeletonLoader';
|
import SkeletonLoader from '../shared/SkeletonLoader';
|
||||||
|
|
||||||
@ -527,7 +527,7 @@ const FileEditor = ({
|
|||||||
if (!fileItem) return null;
|
if (!fileItem) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FileThumbnail
|
<FileEditorThumbnail
|
||||||
key={record.id}
|
key={record.id}
|
||||||
file={fileItem}
|
file={fileItem}
|
||||||
index={index}
|
index={index}
|
||||||
|
|||||||
407
frontend/src/components/fileEditor/FileEditorThumbnail.tsx
Normal file
407
frontend/src/components/fileEditor/FileEditorThumbnail.tsx
Normal file
@ -0,0 +1,407 @@
|
|||||||
|
import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
|
||||||
|
import { Text, ActionIcon, CheckboxIndicator } from '@mantine/core';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||||
|
import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
|
||||||
|
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
|
||||||
|
import PushPinIcon from '@mui/icons-material/PushPin';
|
||||||
|
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
|
||||||
|
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
|
||||||
|
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
||||||
|
|
||||||
|
import styles from './FileEditor.module.css';
|
||||||
|
import { useFileContext } from '../../contexts/FileContext';
|
||||||
|
|
||||||
|
interface FileItem {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
pageCount: number;
|
||||||
|
thumbnail: string | null;
|
||||||
|
size: number;
|
||||||
|
modifiedAt?: number | string | Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FileEditorThumbnailProps {
|
||||||
|
file: FileItem;
|
||||||
|
index: number;
|
||||||
|
totalFiles: number;
|
||||||
|
selectedFiles: string[];
|
||||||
|
selectionMode: boolean;
|
||||||
|
onToggleFile: (fileId: string) => void;
|
||||||
|
onDeleteFile: (fileId: string) => void;
|
||||||
|
onViewFile: (fileId: string) => void;
|
||||||
|
onSetStatus: (status: string) => void;
|
||||||
|
onReorderFiles?: (sourceFileId: string, targetFileId: string, selectedFileIds: string[]) => void;
|
||||||
|
onDownloadFile?: (fileId: string) => void;
|
||||||
|
toolMode?: boolean;
|
||||||
|
isSupported?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const FileEditorThumbnail = ({
|
||||||
|
file,
|
||||||
|
index,
|
||||||
|
selectedFiles,
|
||||||
|
onToggleFile,
|
||||||
|
onDeleteFile,
|
||||||
|
onViewFile,
|
||||||
|
onSetStatus,
|
||||||
|
onReorderFiles,
|
||||||
|
onDownloadFile,
|
||||||
|
isSupported = true,
|
||||||
|
}: FileEditorThumbnailProps) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { pinFile, unpinFile, isFilePinned, activeFiles } = useFileContext();
|
||||||
|
|
||||||
|
// ---- Drag state ----
|
||||||
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
|
const dragElementRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const [actionsWidth, setActionsWidth] = useState<number | undefined>(undefined);
|
||||||
|
const [showActions, setShowActions] = useState(false);
|
||||||
|
|
||||||
|
// Resolve the actual File object for pin/unpin operations
|
||||||
|
const actualFile = useMemo(() => {
|
||||||
|
return activeFiles.find((f: File) => f.name === file.name && f.size === file.size);
|
||||||
|
}, [activeFiles, file.name, file.size]);
|
||||||
|
const isPinned = actualFile ? isFilePinned(actualFile) : false;
|
||||||
|
|
||||||
|
const downloadSelectedFile = useCallback(() => {
|
||||||
|
// Prefer parent-provided handler if available
|
||||||
|
if (typeof onDownloadFile === 'function') {
|
||||||
|
onDownloadFile(file.id);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback: attempt to download using the File object if provided
|
||||||
|
const maybeFile = (file as unknown as { file?: File }).file;
|
||||||
|
if (maybeFile instanceof File) {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = URL.createObjectURL(maybeFile);
|
||||||
|
link.download = maybeFile.name || file.name || 'download';
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
URL.revokeObjectURL(link.href);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If we can't find a way to download, surface a status message
|
||||||
|
onSetStatus?.(typeof t === 'function' ? t('downloadUnavailable', 'Download unavailable for this item') : 'Download unavailable for this item');
|
||||||
|
}, [file, onDownloadFile, onSetStatus, t]);
|
||||||
|
const handleRef = useRef<HTMLSpanElement | null>(null);
|
||||||
|
|
||||||
|
// ---- Selection ----
|
||||||
|
const isSelected = selectedFiles.includes(file.id);
|
||||||
|
|
||||||
|
// ---- Meta formatting ----
|
||||||
|
const prettySize = useMemo(() => {
|
||||||
|
const bytes = file.size ?? 0;
|
||||||
|
if (bytes === 0) return '0 B';
|
||||||
|
const k = 1024;
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
|
||||||
|
}, [file.size]);
|
||||||
|
|
||||||
|
const extUpper = useMemo(() => {
|
||||||
|
const m = /\.([a-z0-9]+)$/i.exec(file.name ?? '');
|
||||||
|
return (m?.[1] || '').toUpperCase();
|
||||||
|
}, [file.name]);
|
||||||
|
|
||||||
|
const pageLabel = useMemo(
|
||||||
|
() =>
|
||||||
|
file.pageCount > 0
|
||||||
|
? `${file.pageCount} ${file.pageCount === 1 ? 'Page' : 'Pages'}`
|
||||||
|
: '',
|
||||||
|
[file.pageCount]
|
||||||
|
);
|
||||||
|
|
||||||
|
const dateLabel = useMemo(() => {
|
||||||
|
const d =
|
||||||
|
file.modifiedAt != null ? new Date(file.modifiedAt) : new Date(); // fallback
|
||||||
|
if (Number.isNaN(d.getTime())) return '';
|
||||||
|
return new Intl.DateTimeFormat(undefined, {
|
||||||
|
month: 'short',
|
||||||
|
day: '2-digit',
|
||||||
|
year: 'numeric',
|
||||||
|
}).format(d);
|
||||||
|
}, [file.modifiedAt]);
|
||||||
|
|
||||||
|
// ---- Drag & drop wiring ----
|
||||||
|
const fileElementRef = useCallback((element: HTMLDivElement | null) => {
|
||||||
|
if (!element) return;
|
||||||
|
|
||||||
|
dragElementRef.current = element;
|
||||||
|
|
||||||
|
const dragCleanup = draggable({
|
||||||
|
element,
|
||||||
|
getInitialData: () => ({
|
||||||
|
type: 'file',
|
||||||
|
fileId: file.id,
|
||||||
|
fileName: file.name,
|
||||||
|
selectedFiles: [file.id] // Always drag only this file, ignore selection state
|
||||||
|
}),
|
||||||
|
onDragStart: () => {
|
||||||
|
setIsDragging(true);
|
||||||
|
},
|
||||||
|
onDrop: () => {
|
||||||
|
setIsDragging(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const dropCleanup = dropTargetForElements({
|
||||||
|
element,
|
||||||
|
getData: () => ({
|
||||||
|
type: 'file',
|
||||||
|
fileId: file.id
|
||||||
|
}),
|
||||||
|
canDrop: ({ source }) => {
|
||||||
|
const sourceData = source.data;
|
||||||
|
return sourceData.type === 'file' && sourceData.fileId !== file.id;
|
||||||
|
},
|
||||||
|
onDrop: ({ source }) => {
|
||||||
|
const sourceData = source.data;
|
||||||
|
if (sourceData.type === 'file' && onReorderFiles) {
|
||||||
|
const sourceFileId = sourceData.fileId as string;
|
||||||
|
const selectedFileIds = sourceData.selectedFiles as string[];
|
||||||
|
onReorderFiles(sourceFileId, file.id, selectedFileIds);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
dragCleanup();
|
||||||
|
dropCleanup();
|
||||||
|
};
|
||||||
|
}, [file.id, file.name, selectedFiles, onReorderFiles]);
|
||||||
|
|
||||||
|
// Update dropdown width on resize
|
||||||
|
useEffect(() => {
|
||||||
|
const update = () => {
|
||||||
|
if (dragElementRef.current) setActionsWidth(dragElementRef.current.offsetWidth);
|
||||||
|
};
|
||||||
|
update();
|
||||||
|
window.addEventListener('resize', update);
|
||||||
|
return () => window.removeEventListener('resize', update);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Close the actions dropdown when hovering outside this file card (and its dropdown)
|
||||||
|
useEffect(() => {
|
||||||
|
if (!showActions) return;
|
||||||
|
|
||||||
|
const isInsideCard = (target: EventTarget | null) => {
|
||||||
|
const container = dragElementRef.current;
|
||||||
|
if (!container) return false;
|
||||||
|
return target instanceof Node && container.contains(target);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseMove = (e: MouseEvent) => {
|
||||||
|
if (!isInsideCard(e.target)) {
|
||||||
|
setShowActions(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTouchStart = (e: TouchEvent) => {
|
||||||
|
// On touch devices, close if the touch target is outside the card
|
||||||
|
if (!isInsideCard(e.target)) {
|
||||||
|
setShowActions(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', handleMouseMove);
|
||||||
|
document.addEventListener('touchstart', handleTouchStart, { passive: true });
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousemove', handleMouseMove);
|
||||||
|
document.removeEventListener('touchstart', handleTouchStart);
|
||||||
|
};
|
||||||
|
}, [showActions]);
|
||||||
|
|
||||||
|
// ---- Card interactions ----
|
||||||
|
const handleCardClick = () => {
|
||||||
|
if (!isSupported) return;
|
||||||
|
onToggleFile(file.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={fileElementRef}
|
||||||
|
data-file-id={file.id}
|
||||||
|
data-testid="file-thumbnail"
|
||||||
|
data-selected={isSelected}
|
||||||
|
data-supported={isSupported}
|
||||||
|
className={`${styles.card} w-[18rem] h-[22rem] select-none flex flex-col shadow-sm transition-all relative`}
|
||||||
|
style={{
|
||||||
|
opacity: isSupported ? (isDragging ? 0.9 : 1) : 0.5,
|
||||||
|
filter: isSupported ? 'none' : 'grayscale(50%)',
|
||||||
|
}}
|
||||||
|
tabIndex={0}
|
||||||
|
role="listitem"
|
||||||
|
aria-selected={isSelected}
|
||||||
|
onClick={handleCardClick}
|
||||||
|
>
|
||||||
|
{/* Header bar */}
|
||||||
|
<div
|
||||||
|
className={`${styles.header} ${
|
||||||
|
isSelected ? styles.headerSelected : styles.headerResting
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* Logo/checkbox area */}
|
||||||
|
<div className={styles.logoMark}>
|
||||||
|
{isSupported ? (
|
||||||
|
<CheckboxIndicator
|
||||||
|
checked={isSelected}
|
||||||
|
onChange={() => onToggleFile(file.id)}
|
||||||
|
color="var(--checkbox-checked-bg)"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className={styles.unsupportedPill}>
|
||||||
|
<span>
|
||||||
|
{t('unsupported', 'Unsupported')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Centered index */}
|
||||||
|
<div className={styles.headerIndex} aria-label={`Position ${index + 1}`}>
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kebab menu */}
|
||||||
|
<ActionIcon
|
||||||
|
aria-label={t('moreOptions', 'More options')}
|
||||||
|
variant="subtle"
|
||||||
|
className={styles.kebab}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowActions((v) => !v);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MoreVertIcon fontSize="small" />
|
||||||
|
</ActionIcon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions overlay */}
|
||||||
|
{showActions && (
|
||||||
|
<div
|
||||||
|
className={styles.actionsOverlay}
|
||||||
|
style={{ width: actionsWidth }}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className={styles.actionRow}
|
||||||
|
onClick={() => {
|
||||||
|
if (actualFile) {
|
||||||
|
if (isPinned) {
|
||||||
|
unpinFile(actualFile);
|
||||||
|
onSetStatus?.(`Unpinned ${file.name}`);
|
||||||
|
} else {
|
||||||
|
pinFile(actualFile);
|
||||||
|
onSetStatus?.(`Pinned ${file.name}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setShowActions(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
|
||||||
|
<span>{isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className={styles.actionRow}
|
||||||
|
onClick={() => { downloadSelectedFile(); setShowActions(false); }}
|
||||||
|
>
|
||||||
|
<DownloadOutlinedIcon fontSize="small" />
|
||||||
|
<span>{t('download', 'Download')}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className={styles.actionsDivider} />
|
||||||
|
|
||||||
|
<button
|
||||||
|
className={`${styles.actionRow} ${styles.actionDanger}`}
|
||||||
|
onClick={() => {
|
||||||
|
onDeleteFile(file.id);
|
||||||
|
onSetStatus(`Deleted ${file.name}`);
|
||||||
|
setShowActions(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteOutlineIcon fontSize="small" />
|
||||||
|
<span>{t('delete', 'Delete')}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Title + meta line */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: '0.5rem',
|
||||||
|
textAlign: 'center',
|
||||||
|
background: 'var(--file-card-bg)',
|
||||||
|
marginTop: '0.5rem',
|
||||||
|
marginBottom: '0.5rem',
|
||||||
|
}}>
|
||||||
|
<Text size="lg" fw={700} className={styles.title} lineClamp={2}>
|
||||||
|
{file.name}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
size="sm"
|
||||||
|
c="dimmed"
|
||||||
|
className={styles.meta}
|
||||||
|
lineClamp={3}
|
||||||
|
title={`${extUpper || 'FILE'} • ${prettySize}`}
|
||||||
|
>
|
||||||
|
{/* e.g., Jan 29, 2025 - PDF file - 3 Pages */}
|
||||||
|
{dateLabel}
|
||||||
|
{extUpper ? ` - ${extUpper} file` : ''}
|
||||||
|
{pageLabel ? ` - ${pageLabel}` : ''}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Preview area */}
|
||||||
|
<div className={`${styles.previewBox} mx-6 mb-4 relative flex-1`}>
|
||||||
|
<div className={styles.previewPaper}>
|
||||||
|
{file.thumbnail && (
|
||||||
|
<img
|
||||||
|
src={file.thumbnail}
|
||||||
|
alt={file.name}
|
||||||
|
draggable={false}
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
onError={(e) => {
|
||||||
|
const img = e.currentTarget;
|
||||||
|
img.style.display = 'none';
|
||||||
|
img.parentElement?.setAttribute('data-thumb-missing', 'true');
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
maxWidth: '80%',
|
||||||
|
maxHeight: '80%',
|
||||||
|
objectFit: 'contain',
|
||||||
|
borderRadius: 0,
|
||||||
|
background: '#ffffff',
|
||||||
|
border: '1px solid var(--border-default)',
|
||||||
|
display: 'block',
|
||||||
|
marginLeft: 'auto',
|
||||||
|
marginRight: 'auto',
|
||||||
|
alignSelf: 'start'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pin indicator (bottom-left) */}
|
||||||
|
{isPinned && (
|
||||||
|
<span className={styles.pinIndicator} aria-hidden>
|
||||||
|
<PushPinIcon fontSize="small" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Drag handle (span wrapper so we can attach a ref reliably) */}
|
||||||
|
<span ref={handleRef} className={styles.dragHandle} aria-hidden>
|
||||||
|
<DragIndicatorIcon fontSize="small" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(FileEditorThumbnail);
|
||||||
@ -57,9 +57,25 @@
|
|||||||
0%, 100% {
|
0%, 100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.actionRow:hover { background: var(--hover-bg); }
|
50% {
|
||||||
.actionDanger { color: var(--text-brand-accent); }
|
opacity: 0.5;
|
||||||
.actionsDivider { height: 1px; background: var(--border-default); margin: 4px 0; }
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Action styles */
|
||||||
|
.actionRow:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionDanger {
|
||||||
|
color: var(--text-brand-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionsDivider {
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border-default);
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.pinIndicator {
|
.pinIndicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user