saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-09-18 01:19:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix colours

Browse Source
This commit is contained in:
Reece Browne 2025-09-17 12:07:44 +01:00
parent 41e5a7fbd6
commit dac176f0c6
3 changed files with 25 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/viewer/EmbedPdfViewer.tsx
View File

@ -175,7 +175,6 @@ const EmbedPdfViewerContent = ({
<LocalEmbedPDF <LocalEmbedPDF
file={effectiveFile.file} file={effectiveFile.file}
url={effectiveFile.url} url={effectiveFile.url}
colorScheme={colorScheme}
/> />
</Box> </Box>
</> </>
@ -219,7 +218,6 @@ const EmbedPdfViewerContent = ({
<ThumbnailSidebar <ThumbnailSidebar
visible={isThumbnailSidebarVisible} visible={isThumbnailSidebarVisible}
onToggle={toggleThumbnailSidebar} onToggle={toggleThumbnailSidebar}
colorScheme={colorScheme}
/> />
</Box> </Box>
); );

21
frontend/src/components/viewer/LocalEmbedPDF.tsx
View File

@ -31,15 +31,12 @@ import { RotateAPIBridge } from './RotateAPIBridge';
interface LocalEmbedPDFProps { interface LocalEmbedPDFProps {
file?: File | Blob; file?: File | Blob;
url?: string | null; url?: string | null;
colorScheme: 'light' | 'dark' | 'auto'; colorScheme?: 'light' | 'dark' | 'auto'; // Optional since we use CSS variables
} }
export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) { export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {
const [pdfUrl, setPdfUrl] = useState<string | null>(null); const [pdfUrl, setPdfUrl] = useState<string | null>(null);
// Convert color scheme (handle 'auto' mode by defaulting to 'light')
const actualColorScheme = colorScheme === 'auto' ? 'light' : colorScheme;
// Convert File to URL if needed // Convert File to URL if needed
useEffect(() => { useEffect(() => {
if (file) { if (file) {
@ -129,8 +126,8 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
height: '100%', height: '100%',
background: actualColorScheme === 'dark' ? '#1a1b1e' : '#f8f9fa', background: 'var(--bg-surface)',
color: actualColorScheme === 'dark' ? '#ffffff' : '#666666', color: 'var(--text-secondary)',
}}> }}>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<div style={{ fontSize: '24px', marginBottom: '16px' }}>📄</div> <div style={{ fontSize: '24px', marginBottom: '16px' }}>📄</div>
@ -147,8 +144,8 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
height: '100%', height: '100%',
background: actualColorScheme === 'dark' ? '#1a1b1e' : '#f1f3f5', background: 'var(--bg-surface)',
color: actualColorScheme === 'dark' ? '#ffffff' : '#666666', color: 'var(--text-secondary)',
}}> }}>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<div style={{ fontSize: '24px', marginBottom: '16px' }}>⏳</div> <div style={{ fontSize: '24px', marginBottom: '16px' }}>⏳</div>
@ -165,8 +162,8 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
height: '100%', height: '100%',
background: actualColorScheme === 'dark' ? '#1a1b1e' : '#f1f3f5', background: 'var(--bg-surface)',
color: '#ff6b6b', color: 'var(--color-red-500)',
}}> }}>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<div style={{ fontSize: '24px', marginBottom: '16px' }}>❌</div> <div style={{ fontSize: '24px', marginBottom: '16px' }}>❌</div>
@ -199,7 +196,7 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
<GlobalPointerProvider> <GlobalPointerProvider>
<Viewport <Viewport
style={{ style={{
backgroundColor: actualColorScheme === 'dark' ? '#1a1b1e' : '#f1f3f5', backgroundColor: 'var(--bg-surface)',
height: '100%', height: '100%',
width: '100%', width: '100%',
maxHeight: '100%', maxHeight: '100%',

35
frontend/src/components/viewer/ThumbnailSidebar.tsx
View File

@ -6,19 +6,16 @@ import '../../types/embedPdf';
interface ThumbnailSidebarProps { interface ThumbnailSidebarProps {
visible: boolean; visible: boolean;
onToggle: () => void; onToggle: () => void;
colorScheme: 'light' | 'dark' | 'auto'; colorScheme?: 'light' | 'dark' | 'auto'; // Optional since we use CSS variables
} }
export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }: ThumbnailSidebarProps) { export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSidebarProps) {
const { getScrollState, scrollActions, getThumbnailAPI } = useViewer(); const { getScrollState, scrollActions, getThumbnailAPI } = useViewer();
const [thumbnails, setThumbnails] = useState<{ [key: number]: string }>({}); const [thumbnails, setThumbnails] = useState<{ [key: number]: string }>({});
const scrollState = getScrollState(); const scrollState = getScrollState();
const thumbnailAPI = getThumbnailAPI(); const thumbnailAPI = getThumbnailAPI();
// Convert color scheme
const actualColorScheme = colorScheme === 'auto' ? 'light' : colorScheme;
// Generate thumbnails when sidebar becomes visible // Generate thumbnails when sidebar becomes visible
useEffect(() => { useEffect(() => {
if (!visible || scrollState.totalPages === 0) return; if (!visible || scrollState.totalPages === 0) return;
@ -100,8 +97,8 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
top: 0, top: 0,
bottom: 0, bottom: 0,
width: '15rem', width: '15rem',
backgroundColor: actualColorScheme === 'dark' ? '#1a1b1e' : '#f8f9fa', backgroundColor: 'var(--bg-surface)',
borderLeft: `1px solid ${actualColorScheme === 'dark' ? '#373A40' : '#e9ecef'}`, borderLeft: '1px solid var(--border-subtle)',
zIndex: 998, zIndex: 998,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@ -125,10 +122,10 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
borderRadius: '8px', borderRadius: '8px',
padding: '8px', padding: '8px',
backgroundColor: scrollState.currentPage === pageIndex + 1 backgroundColor: scrollState.currentPage === pageIndex + 1
? (actualColorScheme === 'dark' ? '#364FC7' : '#e7f5ff') ? 'var(--color-primary-100)'
: 'transparent', : 'transparent',
border: scrollState.currentPage === pageIndex + 1 border: scrollState.currentPage === pageIndex + 1
? '2px solid #1c7ed6' ? '2px solid var(--color-primary-500)'
: '2px solid transparent', : '2px solid transparent',
transition: 'all 0.2s ease', transition: 'all 0.2s ease',
display: 'flex', display: 'flex',
@ -138,7 +135,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
if (scrollState.currentPage !== pageIndex + 1) { if (scrollState.currentPage !== pageIndex + 1) {
e.currentTarget.style.backgroundColor = actualColorScheme === 'dark' ? '#25262b' : '#f1f3f5'; e.currentTarget.style.backgroundColor = 'var(--hover-bg)';
} }
}} }}
onMouseLeave={(e) => { onMouseLeave={(e) => {
@ -157,20 +154,20 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
height: 'auto', height: 'auto',
borderRadius: '4px', borderRadius: '4px',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
border: `1px solid ${actualColorScheme === 'dark' ? '#373A40' : '#e9ecef'}` border: '1px solid var(--border-subtle)'
}} }}
/> />
) : thumbnails[pageIndex] === 'error' ? ( ) : thumbnails[pageIndex] === 'error' ? (
<div style={{ <div style={{
width: '11.5rem', width: '11.5rem',
height: '15rem', height: '15rem',
backgroundColor: actualColorScheme === 'dark' ? '#2d1b1b' : '#ffebee', backgroundColor: 'var(--color-red-50)',
border: `1px solid ${actualColorScheme === 'dark' ? '#5d3737' : '#ffcdd2'}`, border: '1px solid var(--color-red-200)',
borderRadius: '4px', borderRadius: '4px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
color: '#d32f2f', color: 'var(--color-red-500)',
fontSize: '12px' fontSize: '12px'
}}> }}>
Failed Failed
@ -179,13 +176,13 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
<div style={{ <div style={{
width: '11.5rem', width: '11.5rem',
height: '15rem', height: '15rem',
backgroundColor: actualColorScheme === 'dark' ? '#25262b' : '#f8f9fa', backgroundColor: 'var(--bg-muted)',
border: `1px solid ${actualColorScheme === 'dark' ? '#373A40' : '#e9ecef'}`, border: '1px solid var(--border-subtle)',
borderRadius: '4px', borderRadius: '4px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
color: actualColorScheme === 'dark' ? '#adb5bd' : '#6c757d', color: 'var(--text-muted)',
fontSize: '12px' fontSize: '12px'
}}> }}>
Loading... Loading...
@ -197,8 +194,8 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
fontSize: '12px', fontSize: '12px',
fontWeight: 500, fontWeight: 500,
color: scrollState.currentPage === pageIndex + 1 color: scrollState.currentPage === pageIndex + 1
? (actualColorScheme === 'dark' ? '#ffffff' : '#1c7ed6') ? 'var(--color-primary-500)'
: (actualColorScheme === 'dark' ? '#adb5bd' : '#6c757d') : 'var(--text-muted)'
}}> }}>
Page {pageIndex + 1} Page {pageIndex + 1}
</div> </div>