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

fix

Browse Source
This commit is contained in:
nils
2025-11-13 13:22:10 +01:00
parent 98165f71b0
commit dfbd47f219
12 changed files with 93 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/desktop/DesktopDocumentCard.tsx
+3 -3
View File
@@ -30,7 +30,7 @@ interface DesktopDocumentCardProps {
getDocumentAsset?: (...args: any[]) => unknown; getDocumentAsset?: (...args: any[]) => unknown;
handleNavigatorSnapshot?: (...args: any[]) => void; handleNavigatorSnapshot?: (...args: any[]) => void;
cardPointerHandlers?: React.HTMLAttributes<HTMLDivElement>; cardPointerHandlers?: React.HTMLAttributes<HTMLDivElement>;
onDocumentOpen?: (id: string | number) => void; onInspectDocument?: (id: string | number) => void;
onTagDragEnter?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void; onTagDragEnter?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void;
onTagDragOver?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void; onTagDragOver?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void;
onTagDragLeave?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void; onTagDragLeave?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void;
@@ -57,7 +57,7 @@ const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
getDocumentAsset, getDocumentAsset,
handleNavigatorSnapshot, handleNavigatorSnapshot,
cardPointerHandlers, cardPointerHandlers,
onDocumentOpen, onInspectDocument,
onTagDragEnter, onTagDragEnter,
onTagDragOver, onTagDragOver,
onTagDragLeave, onTagDragLeave,
@@ -117,7 +117,7 @@ const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
onKeyDown={(event) => { onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') { if (event.key === 'Enter' || event.key === ' ') {
preventAll(event); preventAll(event);
onDocumentOpen?.(doc.id); onInspectDocument?.(doc.id);
} }
}} }}
> >
frontend/src/desktop/DesktopWorkspace.tsx
+2 -8
View File
@@ -119,7 +119,6 @@ type WorkspaceSnapshotState = {
interface DesktopWorkspaceProps { interface DesktopWorkspaceProps {
documents?: DeskDocument[]; documents?: DeskDocument[];
searchResults?: DeskDocument[] | null; searchResults?: DeskDocument[] | null;
onDocumentOpen?: (docId: Identifier | null, options?: Record<string, unknown>) => void;
onInspectDocument?: (...args: unknown[]) => void; onInspectDocument?: (...args: unknown[]) => void;
onEntryPointer?: (...args: unknown[]) => void; onEntryPointer?: (...args: unknown[]) => void;
onDocumentStackSelect?: (docIds: Identifier[]) => void; onDocumentStackSelect?: (docIds: Identifier[]) => void;
@@ -154,7 +153,6 @@ interface DesktopWorkspaceViewProps {
tagDropTargetId: string | null; tagDropTargetId: string | null;
pendingTagDocId: string | null; pendingTagDocId: string | null;
pendingRemovalTag: unknown; pendingRemovalTag: unknown;
onDocumentOpen?: DesktopWorkspaceProps['onDocumentOpen'];
ensureAssetUrl?: DesktopWorkspaceProps['ensureAssetUrl']; ensureAssetUrl?: DesktopWorkspaceProps['ensureAssetUrl'];
getDocumentAsset?: DesktopWorkspaceProps['getDocumentAsset']; getDocumentAsset?: DesktopWorkspaceProps['getDocumentAsset'];
handleNavigatorSnapshot: (docId: Identifier | null, snapshot: NavigatorSnapshot | null) => void; handleNavigatorSnapshot: (docId: Identifier | null, snapshot: NavigatorSnapshot | null) => void;
@@ -199,7 +197,6 @@ const DEBUG_FOCUS = false;
const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
documents = [], documents = [],
searchResults = null, searchResults = null,
onDocumentOpen,
onInspectDocument = null, onInspectDocument = null,
onEntryPointer = null, onEntryPointer = null,
onDocumentStackSelect = null, onDocumentStackSelect = null,
@@ -717,7 +714,6 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
tagDropTargetId, tagDropTargetId,
pendingTagDocId, pendingTagDocId,
pendingRemovalTag, pendingRemovalTag,
onDocumentOpen,
ensureAssetUrl, ensureAssetUrl,
getDocumentAsset, getDocumentAsset,
handleNavigatorSnapshot, handleNavigatorSnapshot,
@@ -783,7 +779,6 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
layoutSnapshot, layoutSnapshot,
onClearSelection, onClearSelection,
onCloseDetailPanel, onCloseDetailPanel,
onDocumentOpen,
onDocumentStackSelect, onDocumentStackSelect,
onEntryPointer, onEntryPointer,
onPromoteSelection, onPromoteSelection,
@@ -824,7 +819,6 @@ function DesktopWorkspaceView({
tagDropTargetId, tagDropTargetId,
pendingTagDocId, pendingTagDocId,
pendingRemovalTag, pendingRemovalTag,
onDocumentOpen,
ensureAssetUrl, ensureAssetUrl,
getDocumentAsset, getDocumentAsset,
handleNavigatorSnapshot, handleNavigatorSnapshot,
@@ -900,7 +894,7 @@ function DesktopWorkspaceView({
onEntryPointer, onEntryPointer,
onDocumentStackSelect, onDocumentStackSelect,
onPromoteSelection, onPromoteSelection,
onDocumentOpen, onInspectDocument,
selectedDocumentIds, selectedDocumentIds,
detailPanelOpen, detailPanelOpen,
onCloseDetailPanel, onCloseDetailPanel,
@@ -1041,7 +1035,7 @@ function DesktopWorkspaceView({
getDocumentAsset={getDocumentAsset} getDocumentAsset={getDocumentAsset}
handleNavigatorSnapshot={handleNavigatorSnapshot} handleNavigatorSnapshot={handleNavigatorSnapshot}
cardPointerHandlers={cardPointerHandlers} cardPointerHandlers={cardPointerHandlers}
onDocumentOpen={onDocumentOpen} onInspectDocument={onInspectDocument}
onTagDragEnter={handleTagDragEnterDoc} onTagDragEnter={handleTagDragEnterDoc}
onTagDragOver={handleTagDragOverDoc} onTagDragOver={handleTagDragOverDoc}
onTagDragLeave={handleTagDragLeaveDoc} onTagDragLeave={handleTagDragLeaveDoc}
frontend/src/desktop/pointer/useDeskPointer.js
+3 -4
View File
@@ -35,7 +35,7 @@ export const useDeskPointer = ({
onEntryPointer, onEntryPointer,
onDocumentStackSelect, onDocumentStackSelect,
onPromoteSelection, onPromoteSelection,
onDocumentOpen, onInspectDocument,
selectedDocumentIds, selectedDocumentIds,
detailPanelOpen, detailPanelOpen,
onCloseDetailPanel, onCloseDetailPanel,
@@ -327,8 +327,7 @@ export const useDeskPointer = ({
const stillSelected = Array.isArray(selectedDocumentIds) const stillSelected = Array.isArray(selectedDocumentIds)
&& selectedDocumentIds.includes(doc.id); && selectedDocumentIds.includes(doc.id);
if (isPrimaryRelease && stillSelected) { if (isPrimaryRelease && stillSelected) {
const useSelection = pointerState.selectedAtDown && pointerState.selectionCountAtDown > 0; safeInvoke(onInspectDocument, doc.id);
safeInvoke(onDocumentOpen, doc.id, { useSelection });
} }
} }
} }
@@ -338,7 +337,7 @@ export const useDeskPointer = ({
}, },
[ [
handlePointerUp, handlePointerUp,
onDocumentOpen, onInspectDocument,
onDocumentStackSelect, onDocumentStackSelect,
onEntryPointer, onEntryPointer,
resetLongPressState, resetLongPressState,
frontend/src/desktop/useDeskWorkspaceProps.ts
-28
View File
@@ -62,7 +62,6 @@ interface UseDeskWorkspacePropsArgs {
searchQuery?: string; searchQuery?: string;
activeCorrespondentFilters?: Identifier[]; activeCorrespondentFilters?: Identifier[];
selectedFolder?: Identifier | string | null; selectedFolder?: Identifier | string | null;
openDetailPanel?: (args: { documentIds: Identifier[] }) => void;
} }
const useDeskWorkspaceProps = ({ const useDeskWorkspaceProps = ({
@@ -111,7 +110,6 @@ const useDeskWorkspaceProps = ({
searchQuery = '', searchQuery = '',
activeCorrespondentFilters = [], activeCorrespondentFilters = [],
selectedFolder, selectedFolder,
openDetailPanel,
}: UseDeskWorkspacePropsArgs) => { }: UseDeskWorkspacePropsArgs) => {
const handleDeskDocumentStackSelect: DeskDocumentStackSelectHandler = useCallback( const handleDeskDocumentStackSelect: DeskDocumentStackSelectHandler = useCallback(
(docIds) => { (docIds) => {
@@ -146,30 +144,6 @@ const useDeskWorkspaceProps = ({
[applySelection, resolveDocumentRowKey, selectedEntries, selectionAnchorRef], [applySelection, resolveDocumentRowKey, selectedEntries, selectionAnchorRef],
); );
const handleDeskDocumentOpen = useCallback(
(docId: Identifier | undefined, { useSelection = false }: { useSelection?: boolean } = {}) => {
const selectionDocIds = Array.isArray(selectedDocumentIds)
? selectedDocumentIds
: [];
let targetIds: Identifier[] = [];
if ((useSelection || selectionDocIds.includes(docId as Identifier)) && selectionDocIds.length) {
targetIds = selectionDocIds;
} else if (selectionDocIds.length) {
targetIds = selectionDocIds;
} else if (docId) {
targetIds = [docId];
}
if (!targetIds.length) {
return;
}
openDetailPanel?.({ documentIds: targetIds });
},
[openDetailPanel, selectedDocumentIds],
);
const deskViewId = useMemo(() => { const deskViewId = useMemo(() => {
if (showingSearchResults) { if (showingSearchResults) {
const trimmedQuery = searchQuery.trim(); const trimmedQuery = searchQuery.trim();
@@ -198,7 +172,6 @@ const useDeskWorkspaceProps = ({
onViewModeChange: handleDocumentsViewModeChange, onViewModeChange: handleDocumentsViewModeChange,
onExit: handleDeskExit, onExit: handleDeskExit,
onRefresh: refreshCurrentFolder, onRefresh: refreshCurrentFolder,
onDocumentOpen: handleDeskDocumentOpen,
onInspectDocument: inspectDocument, onInspectDocument: inspectDocument,
onEntryPointer: handleEntryPointerCore, onEntryPointer: handleEntryPointerCore,
onDocumentStackSelect: handleDeskDocumentStackSelect, onDocumentStackSelect: handleDeskDocumentStackSelect,
@@ -240,7 +213,6 @@ const useDeskWorkspaceProps = ({
handleDocumentsViewModeChange, handleDocumentsViewModeChange,
handleDeskExit, handleDeskExit,
refreshCurrentFolder, refreshCurrentFolder,
handleDeskDocumentOpen,
inspectDocument, inspectDocument,
handleEntryPointerCore, handleEntryPointerCore,
handleDeskDocumentStackSelect, handleDeskDocumentStackSelect,
frontend/src/documents/SelectionFloatingActions.tsx
+8 -7
View File
@@ -509,14 +509,13 @@ const SelectionFloatingActions: React.FC<SelectionFloatingActionsProps> = ({
<SelectionAssignmentMenu <SelectionAssignmentMenu
label="Move" label="Move"
triggerContent={( triggerContent={(
<span className="quick-add__chip-label"> <span className="quick-add__chip-label" title="Move">
{loadingFolders ? ( {loadingFolders ? (
<LoaderIcon className="icon-inline icon--spin" aria-hidden="true" /> <LoaderIcon className="icon-inline icon--spin" aria-hidden="true" />
) : ( ) : (
<FolderOutlineIcon className="icon-inline" aria-hidden="true" /> <FolderOutlineIcon className="icon-inline" aria-hidden="true" />
)} )}
{' '} <span className="quick-add__chip-text" aria-hidden="true">Move</span>
Move
</span> </span>
)} )}
items={moveAssignments} items={moveAssignments}
@@ -582,8 +581,9 @@ const SelectionFloatingActions: React.FC<SelectionFloatingActionsProps> = ({
<SelectionAssignmentMenu <SelectionAssignmentMenu
label="Tags" label="Tags"
triggerContent={( triggerContent={(
<span className="quick-add__chip-label"> <span className="quick-add__chip-label" title="Tags">
<TagIcon className="icon-inline" aria-hidden="true" /> Tags <TagIcon className="icon-inline" aria-hidden="true" />
<span className="quick-add__chip-text" aria-hidden="true">Tags</span>
</span> </span>
)} )}
items={tagAssignments} items={tagAssignments}
@@ -597,8 +597,9 @@ const SelectionFloatingActions: React.FC<SelectionFloatingActionsProps> = ({
<SelectionAssignmentMenu <SelectionAssignmentMenu
label="Correspondents" label="Correspondents"
triggerContent={( triggerContent={(
<span className="quick-add__chip-label"> <span className="quick-add__chip-label" title="Correspondents">
<CorrespondentIcon className="icon-inline" aria-hidden="true" /> Correspondents <CorrespondentIcon className="icon-inline" aria-hidden="true" />
<span className="quick-add__chip-text" aria-hidden="true">Correspondents</span>
</span> </span>
)} )}
items={correspondentAssignments} items={correspondentAssignments}
frontend/src/hooks/documents/useDocumentsWorkspace.ts
-1
View File
@@ -1538,7 +1538,6 @@ const useDocumentsWorkspace = ({
searchQuery, searchQuery,
activeCorrespondentFilters, activeCorrespondentFilters,
selectedFolder, selectedFolder,
openDetailPanel,
}); });
const contextValue = useMemo( const contextValue = useMemo(
frontend/src/preview/DocumentViewerPanel.tsx
+6 -2
View File
@@ -65,7 +65,7 @@ interface DocumentViewerPanelProps extends DocumentSummarySectionProps {
resolveFolderPath?: (doc: DocumentLike | null) => Array<{ id?: string | number; name?: string }>; resolveFolderPath?: (doc: DocumentLike | null) => Array<{ id?: string | number; name?: string }>;
variant?: 'viewer' | 'sidebar'; variant?: 'viewer' | 'sidebar';
onCollapsePanel?: () => void; onCollapsePanel?: () => void;
onMaximizePanel?: () => void; onMaximizePanel?: (args: { documentIds: Array<string | number> }) => void;
} }
@@ -418,7 +418,11 @@ const panelRef = useRef<HTMLDivElement | HTMLFormElement | HTMLElement | null>(n
className="icon-button" className="icon-button"
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
onMaximizePanel?.(document?.id); const targetId = document?.id;
if (targetId == null) {
return;
}
onMaximizePanel?.({ documentIds: [targetId] });
}} }}
aria-label="Maximize" aria-label="Maximize"
title="Maximize" title="Maximize"
frontend/src/sidebar/SidebarContext.tsx
+2 -2
View File
@@ -33,8 +33,8 @@ const SidebarContext = createContext<SidebarContextValue | null>(null);
const THEME_STORAGE_KEY = 'papercrate_theme_settings'; const THEME_STORAGE_KEY = 'papercrate_theme_settings';
const DEFAULT_NEUTRAL_HUE = 35; const DEFAULT_NEUTRAL_HUE = 35;
const DEFAULT_NEUTRAL_CHROMA = 0.1; const DEFAULT_NEUTRAL_CHROMA = 0.5;
const DEFAULT_NEUTRAL_CONTRAST = 0.3; const DEFAULT_NEUTRAL_CONTRAST = 0.5;
const DEFAULT_THEME_MODE = 'system'; const DEFAULT_THEME_MODE = 'system';
const THEME_MODES = ['system', 'light', 'dark']; const THEME_MODES = ['system', 'light', 'dark'];
frontend/src/styles/base/theme.css
+30 -23
View File
@@ -7,22 +7,29 @@
--accent-hue-offset: 0deg; --accent-hue-offset: 0deg;
--dark-hue-offset: 40deg; --dark-hue-offset: 40deg;
--dark-foreground-hue-offset: 20deg; --dark-foreground-hue-offset: 20deg;
--neutral-chroma: 0.15; --neutral-chroma: 0.5;
--neutral-chroma-min: 0.01;
--neutral-chroma-max: 0.20;
--neutral-chroma-range: calc(var(--neutral-chroma-max) - var(--neutral-chroma-min));
--neutral-chroma-effective: calc(
var(--neutral-chroma-min)
+ clamp(0, var(--neutral-chroma), 1) * var(--neutral-chroma-range)
);
--neutral-contrast: 0.5; --neutral-contrast: 0.5;
--neutral-contrast-amount: calc(0.85 + var(--neutral-contrast) * 0.55); --neutral-contrast-amount: calc(0.85 + var(--neutral-contrast) * 0.55);
--neutral-contrast-baseline: 1.125; --neutral-contrast-baseline: 1.125;
--neutral-contrast-delta: calc(var(--neutral-contrast-amount) - var(--neutral-contrast-baseline)); --neutral-contrast-delta: calc(var(--neutral-contrast-amount) - var(--neutral-contrast-baseline));
--neutral-chroma-scale: calc(clamp(0.0001, var(--neutral-chroma), 1) / 0.1); --neutral-chroma-scale: calc(clamp(0.0001, var(--neutral-chroma-effective), 1) / 0.1);
/* --- Neutrals --- */ /* --- Neutrals --- */
--bg: oklch(calc(0.97 + var(--neutral-contrast-delta) * 0.12) calc(var(--neutral-chroma) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift))); --bg: oklch(calc(0.97 + var(--neutral-contrast-delta) * 0.12) calc(var(--neutral-chroma-effective) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
--surface: oklch(calc(0.985 + var(--neutral-contrast-delta) * 0.1) calc(var(--neutral-chroma) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift))); --surface: oklch(calc(0.995 + var(--neutral-contrast-delta) * 0.1) calc(var(--neutral-chroma-effective) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
--surface-subtle: oklch(calc(0.96 + var(--neutral-contrast-delta) * 0.16) calc(var(--neutral-chroma) * 0.002) calc(var(--neutral-hue) + var(--surface-hue-shift))); --surface-subtle: oklch(calc(0.96 + var(--neutral-contrast-delta) * 0.16) calc(var(--neutral-chroma-effective) * 0.002) calc(var(--neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(calc(0.32 - var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset))); --fg: oklch(calc(0.32 - var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma-effective) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--muted: oklch(calc(0.54 - var(--neutral-contrast-delta) * 0.05) calc(var(--neutral-chroma) * 0.005) calc(var(--neutral-hue) + var(--foreground-hue-offset))); --muted: oklch(calc(0.54 - var(--neutral-contrast-delta) * 0.05) calc(var(--neutral-chroma-effective) * 0.005) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--muted-subtle: color-mix(in oklch, var(--muted) 55%, var(--border)); --muted-subtle: color-mix(in oklch, var(--muted) 55%, var(--border));
--sidebar-fg: oklch(calc(0.56 + var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset))); --sidebar-fg: oklch(calc(0.56 + var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma-effective) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--border: oklch(calc(0.92 + var(--neutral-contrast-delta) * 0.15) calc(var(--neutral-chroma) * 0.0015) calc(var(--neutral-hue) + var(--foreground-hue-offset))); --border: oklch(calc(0.92 + var(--neutral-contrast-delta) * 0.15) calc(var(--neutral-chroma-effective) * 0.0015) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
/* --- Accent (primary) --- */ /* --- Accent (primary) --- */
--accent: oklch(0.61 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset))); --accent: oklch(0.61 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
@@ -114,14 +121,14 @@
--dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset)); --dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset));
--dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset)); --dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset));
--bg: oklch(calc(0.18 - var(--neutral-contrast-delta) * 0.015) calc(var(--neutral-chroma) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift))); --bg: oklch(calc(0.18 - var(--neutral-contrast-delta) * 0.015) calc(var(--neutral-chroma-effective) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface: oklch(calc(0.22 - var(--neutral-contrast-delta) * 0.012) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift))); --surface: oklch(calc(0.22 - var(--neutral-contrast-delta) * 0.012) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface-subtle: oklch(calc(0.26 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift))); --surface-subtle: oklch(calc(0.26 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(calc(0.9 + var(--neutral-contrast-delta) * 0.02) calc(var(--neutral-chroma) * 0.04) var(--dark-foreground-hue)); --fg: oklch(calc(0.9 + var(--neutral-contrast-delta) * 0.02) calc(var(--neutral-chroma-effective) * 0.04) var(--dark-foreground-hue));
--muted: oklch(calc(0.72 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue)); --muted: oklch(calc(0.72 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
--muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border)); --muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border));
--sidebar-fg: oklch(calc(0.78 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue)); --sidebar-fg: oklch(calc(0.78 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
--border: oklch(calc(0.33 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.03) var(--dark-foreground-hue)); --border: oklch(calc(0.33 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.03) var(--dark-foreground-hue));
--accent: oklch(0.75 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset))); --accent: oklch(0.75 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
--accent-hover: oklch(0.82 calc(0.13 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset))); --accent-hover: oklch(0.82 calc(0.13 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
@@ -191,14 +198,14 @@
--dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset)); --dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset));
--dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset)); --dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset));
--bg: oklch(calc(0.5 - 0.35 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift))); --bg: oklch(calc(0.5 - 0.35 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface: oklch(calc(0.5 - 0.31 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift))); --surface: oklch(calc(0.5 - 0.31 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface-subtle: oklch(calc(0.5 - 0.27 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift))); --surface-subtle: oklch(calc(0.5 - 0.27 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(calc(0.5 + 0.39 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.04) var(--dark-foreground-hue)); --fg: oklch(calc(0.5 + 0.39 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.04) var(--dark-foreground-hue));
--muted: oklch(calc(0.5 + 0.22 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue)); --muted: oklch(calc(0.5 + 0.22 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
--muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border)); --muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border));
--sidebar-fg: oklch(calc(0.5 + 0.28 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue)); --sidebar-fg: oklch(calc(0.5 + 0.28 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
--border: oklch(calc(0.5 - 0.17 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.03) var(--dark-foreground-hue)); --border: oklch(calc(0.5 - 0.17 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.03) var(--dark-foreground-hue));
--accent: oklch(0.75 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset))); --accent: oklch(0.75 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
--accent-hover: oklch(0.82 calc(0.13 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset))); --accent-hover: oklch(0.82 calc(0.13 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
frontend/src/styles/detail/detail-panels.css
+24 -2
View File
@@ -149,10 +149,9 @@
} }
.quick-add__chip { .quick-add__chip {
display: inline-flex; display: flex;
align-items: center; align-items: center;
gap: 0.35rem; gap: 0.35rem;
white-space: nowrap;
border: 1px dashed var(--border); border: 1px dashed var(--border);
border-radius: 999px; border-radius: 999px;
padding: 0.18rem 0.6rem; padding: 0.18rem 0.6rem;
@@ -161,6 +160,10 @@
color: var(--muted); color: var(--muted);
cursor: pointer; cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
min-width: 0;
flex: 1 1 9rem;
max-width: 12rem;
overflow: hidden;
} }
.quick-add__chip:hover, .quick-add__chip:hover,
@@ -180,6 +183,25 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1 1 0;
}
.quick-add__chip-label .icon-inline {
flex-shrink: 0;
}
.quick-add__chip-text {
display: inline-block;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.quick-add__form { .quick-add__form {
frontend/src/styles/documents/listing.css
+14 -26
View File
@@ -69,6 +69,8 @@
pointer-events: none; pointer-events: none;
z-index: 6; z-index: 6;
height: 0; height: 0;
width: calc(100% - 2rem);
margin: 0 1rem;
} }
.panel-floating { .panel-floating {
@@ -88,30 +90,29 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: nowrap;
gap: 0.75rem; gap: 0.75rem;
z-index: 950000; z-index: 950000;
width: auto; width: auto;
max-width: min(640px, calc(100% - 2rem));
margin: 0 auto; margin: 0 auto;
min-width: 0;
overflow: hidden;
} }
.panel-floating__buttons { .panel-floating__buttons {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
order: 2;
pointer-events: auto; pointer-events: auto;
} }
.panel-floating__label {
order: 0;
}
.panel-floating__label { .panel-floating__label {
white-space: nowrap; white-space: nowrap;
pointer-events: none; pointer-events: none;
font-size: 0.95rem; font-size: 0.95rem;
color: var(--fg); color: var(--fg);
min-width: 0;
} }
.selection-summary { .selection-summary {
@@ -150,15 +151,19 @@
gap: 0.4rem; gap: 0.4rem;
flex-wrap: nowrap; flex-wrap: nowrap;
pointer-events: auto; pointer-events: auto;
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
} }
.panel-floating-actions--assignments { .panel-floating-actions--assignments {
display: flex; display: flex;
order: 1;
flex-wrap: nowrap; flex-wrap: nowrap;
width: auto; flex: 1 1 auto;
min-width: 0;
white-space: nowrap; white-space: nowrap;
justify-content: center; justify-content: flex-start;
overflow: hidden;
} }
.panel-floating-actions .quick-add { .panel-floating-actions .quick-add {
@@ -195,23 +200,6 @@
gap: 0.5rem; gap: 0.5rem;
} }
.panel-floating__label {
order: 0;
flex: 1 1 auto;
text-align: left;
}
.panel-floating__buttons {
order: 1;
flex: 0 0 auto;
justify-content: flex-end;
}
.panel-floating-actions--assignments {
order: 2;
width: 100%;
justify-content: center;
}
.panel-floating-actions__button { .panel-floating-actions__button {
font-size: 1.15rem; font-size: 1.15rem;
frontend/src/styles/documents/viewer.css
+1 -1
View File
@@ -3,7 +3,7 @@
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
background: var(--bg); background: var(--surface);
} }
.document-viewer-panel__body { .document-viewer-panel__body {