saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-09-20 02:29:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvements

Browse Source
This commit is contained in:
Reece Browne 2025-09-19 11:14:58 +01:00
parent b574cef54a
commit a970c44d03
3 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/viewer/CustomSearchLayer.tsx
View File

@ -1,6 +1,7 @@
import React, { useState, useEffect, useMemo } from 'react'; import React, { useState, useEffect, useMemo } from 'react';
import { useSearch } from '@embedpdf/plugin-search/react'; import { useSearch } from '@embedpdf/plugin-search/react';
import { useViewer } from '../../contexts/ViewerContext'; import { useViewer } from '../../contexts/ViewerContext';
import { SEARCH_CONSTANTS } from './constants/search';
interface SearchLayerProps { interface SearchLayerProps {
pageIndex: number; pageIndex: number;
@ -26,10 +27,10 @@ interface SearchResultState {
export function CustomSearchLayer({ export function CustomSearchLayer({
pageIndex, pageIndex,
scale, scale,
highlightColor = 'var(--search-highlight-bg)', highlightColor = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.BACKGROUND,
activeHighlightColor = 'var(--search-highlight-active-bg)', activeHighlightColor = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.ACTIVE_BACKGROUND,
opacity = 0.6, opacity = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.OPACITY,
padding = 2, padding = SEARCH_CONSTANTS.UI.HIGHLIGHT_PADDING,
borderRadius = 4 borderRadius = 4
}: SearchLayerProps) { }: SearchLayerProps) {
const { provides: searchProvides } = useSearch(); const { provides: searchProvides } = useSearch();
@ -104,10 +105,10 @@ export function CustomSearchLayer({
borderRadius: `${borderRadius}px`, borderRadius: `${borderRadius}px`,
transform: 'scale(1.02)', transform: 'scale(1.02)',
transformOrigin: 'center', transformOrigin: 'center',
transition: 'opacity 0.3s ease-in-out, background-color 0.2s ease-in-out', transition: 'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out',
pointerEvents: 'none', pointerEvents: 'none',
boxShadow: originalIndex === searchResultState?.activeResultIndex boxShadow: originalIndex === searchResultState?.activeResultIndex
? '0 0 0 1px var(--search-highlight-active-border)' ? `0 0 0 1px ${SEARCH_CONSTANTS.HIGHLIGHT_COLORS.ACTIVE_BACKGROUND}80`
: 'none' : 'none'
}} }}
/> />

15
frontend/src/components/viewer/constants/search.ts Normal file
View File

@ -0,0 +1,15 @@
export const SEARCH_CONSTANTS = {
HIGHLIGHT_COLORS: {
BACKGROUND: '#ffff00',
ACTIVE_BACKGROUND: '#ff6b35',
OPACITY: 0.4,
},
TIMING: {
DEBOUNCE_DELAY: 300,
},
UI: {
HIGHLIGHT_PADDING: 2,
MIN_SEARCH_LENGTH: 1,
MAX_RESULTS_DISPLAY: 100,
}
} as const;

8
frontend/src/styles/theme.css
View File

@ -152,10 +152,6 @@
--text-brand: var(--color-gray-700); --text-brand: var(--color-gray-700);
--text-brand-accent: #DC2626; --text-brand-accent: #DC2626;
/* Search highlight colors */
--search-highlight-bg: #FFFF00;
--search-highlight-active-bg: #FFBF00;
--search-highlight-active-border: rgba(255, 191, 0, 0.8);
/* Placeholder text colors */ /* Placeholder text colors */
--search-text-and-icon-color: #6B7382; --search-text-and-icon-color: #6B7382;
@ -342,10 +338,6 @@
--tool-subcategory-text-color: #9CA3AF; /* lighter text in dark mode as well */ --tool-subcategory-text-color: #9CA3AF; /* lighter text in dark mode as well */
--tool-subcategory-rule-color: #3A4047; /* doubly lighter (relative) line in dark */ --tool-subcategory-rule-color: #3A4047; /* doubly lighter (relative) line in dark */
/* Search highlight colors (dark mode) */
--search-highlight-bg: #FFF700;
--search-highlight-active-bg: #FFD700;
--search-highlight-active-border: rgba(255, 215, 0, 0.8);
/* Placeholder text colors (dark mode) */ /* Placeholder text colors (dark mode) */
--search-text-and-icon-color: #FFFFFF !important; --search-text-and-icon-color: #FFFFFF !important;