nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
nils
2025-10-31 00:38:52 +01:00
parent 39d1d80383
commit 5ca7dc9678
2 changed files with 98 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/documents/DocumentsTable.jsx
+77 -58
View File
@@ -665,6 +665,36 @@ const DocumentsTable = ({
const cardClasses = ['document-card', 'document']; const cardClasses = ['document-card', 'document'];
if (isSelected) cardClasses.push('selected'); if (isSelected) cardClasses.push('selected');
if (isDraggingDoc) cardClasses.push('is-dragging'); if (isDraggingDoc) cardClasses.push('is-dragging');
const titleText = doc.title || doc.original_name;
const documentTypeNode = documentType
? (
<span
className={`doc-type-inline${
isDocumentTypeActive ? ' active' : ''
}`}
role={canToggleDocumentType ? 'button' : undefined}
tabIndex={canToggleDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
({documentType.name})
</span>
)
: null;
return ( return (
<div <div
key={doc.id} key={doc.id}
@@ -688,47 +718,27 @@ const DocumentsTable = ({
document={doc} document={doc}
ensureAssetUrl={ensureAssetUrl} ensureAssetUrl={ensureAssetUrl}
getDocumentAsset={getDocumentAsset} getDocumentAsset={getDocumentAsset}
alt={`Thumbnail for ${doc.title || doc.original_name}`} alt={`Thumbnail for ${titleText}`}
maxSize={gridIconSize} maxSize={gridIconSize}
scrollRootRef={scrollRef} scrollRootRef={scrollRef}
/> />
<div className="document-card__meta"> <div className="document-card__meta">
<div <div
className="document-card__title" className="document-card__title"
title={doc.title || doc.original_name} title={titleText}
> >
{documentType ? (
<span
className={`doc-type-label${
isDocumentTypeActive ? ' active' : ''
}`}
role={canToggleDocumentType ? 'button' : undefined}
tabIndex={canToggleDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
{documentType.name}
</span>
) : null}
{correspondents.length > 0 ? ( {correspondents.length > 0 ? (
<span className="doc-correspondents"> <span className="doc-correspondents">
{renderCorrespondentLinks(correspondents)} {renderCorrespondentLinks(correspondents)}
</span> </span>
) : null} ) : null}
<span>{doc.title || doc.original_name}</span> <span className="doc-name__primary">{titleText}</span>
{documentTypeNode ? (
<>
{' '}
{documentTypeNode}
</>
) : null}
</div> </div>
{visibleTags.length > 0 && ( {visibleTags.length > 0 && (
<div className="document-card__tags"> <div className="document-card__tags">
@@ -917,6 +927,35 @@ const DocumentsTable = ({
const documentType = resolveDocumentType(doc); const documentType = resolveDocumentType(doc);
const isRowDocumentTypeActive = documentType?.id != null && activeDocumentTypeIdSet.has(documentType.id); const isRowDocumentTypeActive = documentType?.id != null && activeDocumentTypeIdSet.has(documentType.id);
const canToggleRowDocumentType = documentType?.id != null && typeof onDocumentTypeClick === 'function'; const canToggleRowDocumentType = documentType?.id != null && typeof onDocumentTypeClick === 'function';
const titleText = doc.title || doc.original_name;
const documentTypeNode = documentType
? (
<span
className={`doc-type-inline${
isRowDocumentTypeActive ? ' active' : ''
}`}
role={canToggleRowDocumentType ? 'button' : undefined}
tabIndex={canToggleRowDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
({documentType.name})
</span>
)
: null;
return ( return (
<tr <tr
@@ -938,7 +977,7 @@ const DocumentsTable = ({
document={doc} document={doc}
ensureAssetUrl={ensureAssetUrl} ensureAssetUrl={ensureAssetUrl}
getDocumentAsset={getDocumentAsset} getDocumentAsset={getDocumentAsset}
alt={`Thumbnail for ${doc.title || doc.original_name}`} alt={`Thumbnail for ${titleText}`}
scrollRootRef={scrollRef} scrollRootRef={scrollRef}
/> />
</td> </td>
@@ -946,38 +985,18 @@ const DocumentsTable = ({
<div className="doc-name"> <div className="doc-name">
<div className="doc-list__name-content"> <div className="doc-list__name-content">
<span className="doc-name__title"> <span className="doc-name__title">
{documentType ? (
<span
className={`doc-type-label${
isRowDocumentTypeActive ? ' active' : ''
}`}
role={canToggleRowDocumentType ? 'button' : undefined}
tabIndex={canToggleRowDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
{documentType.name}
</span>
) : null}
{correspondents.length > 0 ? ( {correspondents.length > 0 ? (
<span className="doc-correspondents"> <span className="doc-correspondents">
{renderCorrespondentLinks(correspondents)} {renderCorrespondentLinks(correspondents)}
</span> </span>
) : null} ) : null}
<span>{doc.title || doc.original_name}</span> <span className="doc-name__primary">{titleText}</span>
{documentTypeNode ? (
<>
{' '}
{documentTypeNode}
</>
) : null}
</span> </span>
</div> </div>
{(doc.tags || []).length > 0 && ( {(doc.tags || []).length > 0 && (
@@ -1058,7 +1077,7 @@ const DocumentsTable = ({
type="button" type="button"
className="icon-button" className="icon-button"
title="Rename" title="Rename"
aria-label={`Rename document ${doc.title || doc.original_name}`} aria-label={`Rename document ${titleText}`}
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
const nextName = window.prompt( const nextName = window.prompt(
frontend/src/styles.css
+21 -28
View File
@@ -2012,43 +2012,36 @@ button.danger:hover:not([disabled]) {
color: inherit; color: inherit;
} }
.doc-type-label { .doc-name__primary {
display: inline-flex; font-weight: 600;
align-items: center; }
padding: 0.05rem 0.4rem;
margin-right: 0.35rem; .doc-type-inline {
border-radius: 999px;
background: var(--surface-subtle);
color: var(--muted); color: var(--muted);
font-size: 0.75rem; font-size: 0.85em;
line-height: 1.2; line-height: 1.2;
cursor: default; cursor: default;
gap: 0.25rem;
} }
.doc-type-label[role='button'] { .doc-type-inline.active {
cursor: pointer;
color: var(--accent);
background: color-mix(in oklch, var(--accent) 12%, transparent);
}
.doc-type-label[role='button']:hover,
.doc-type-label[role='button']:focus-visible {
color: var(--accent-strong, var(--accent));
background: color-mix(in oklch, var(--accent) 20%, transparent);
}
.doc-type-label[role='button']:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.doc-type-label.active {
background: color-mix(in oklch, var(--accent) 28%, transparent);
color: var(--accent-strong, var(--accent)); color: var(--accent-strong, var(--accent));
font-weight: 600; font-weight: 600;
} }
.doc-type-inline[role='button'] {
cursor: pointer;
}
.doc-type-inline[role='button']:hover,
.doc-type-inline[role='button']:focus-visible {
color: var(--accent-strong, var(--accent));
}
.doc-type-inline[role='button']:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.doc-correspondent-link { .doc-correspondent-link {
background: none; background: none;
background-color: transparent; background-color: transparent;