Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix OfficeHome syntax error and add theme toggle to OnlyOfficeEditor header
All checks were successful
Automated Container Build / build-and-push (push) Successful in 40s
Details

Browse source
This commit is contained in:
Elijah 2026-05-24 19:54:55 -07:00
parent a5dc61a1b4
commit 2cd6bb7ee7
3 changed files with 30 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/FileExplorer.tsx
View file

@ -1901,6 +1901,8 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
onRename={(oldPath, newName, newPath) => {
setEditingFile(prev => prev ? { ...prev, name: newName, path: newPath } : null);
}}
theme={theme as 'light' | 'dark'}
toggleTheme={toggleTheme}
/>
) : (appMode === 'docs' || appMode === 'slides') && activeSection === 'files' ? (
<OfficeHome

2
frontend/src/components/OfficeHome.tsx
View file

@ -271,7 +271,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
</div>
</div>
</div>
</div>
{/* Recent Documents */}

30
frontend/src/components/OnlyOfficeEditor.tsx
View file

@ -1,5 +1,6 @@
import React, { useEffect, useState, useRef } from 'react';
import { DocumentEditor } from '@onlyoffice/document-editor-react';
import { Sun, Moon } from 'lucide-react';
import api from '@/lib/api';
interface FileItem {
@ -18,9 +19,11 @@ interface OnlyOfficeEditorProps {
type: 'word' | 'cell' | 'slide';
onClose: () => void;
onRename?: (oldPath: string, newName: string, newPath: string) => void;
theme: 'light' | 'dark';
toggleTheme: () => void;
}
export default function OnlyOfficeEditor({ file, type, onClose, onRename }: OnlyOfficeEditorProps) {
export default function OnlyOfficeEditor({ file, type, onClose, onRename, theme, toggleTheme }: OnlyOfficeEditorProps) {
const [downloadToken, setDownloadToken] = useState<string | null>(null);
const [loadError, setLoadError] = useState<string | null>(null);
const [config, setConfig] = useState<any>(null);
@ -103,6 +106,7 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename }: Only
mode: 'edit',
customization: {
forcesave: true,
uiTheme: theme === 'dark' ? 'id-dark' : 'id-light',
goback: {
url: '',
}
@ -123,13 +127,13 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename }: Only
setConfig(baseConfig);
});
}, [downloadToken, file, type]);
}, [downloadToken, file, type, theme]);
if (!config) {
return (
<div className="flex-1 flex flex-col items-center justify-center" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
<div className="text-sm" style={{ color: 'var(--color-text-tertiary)' }}>Loading Editor...</div>
{loadError && <div className="mt-4 text-red-500 font-medium">Error: {loadError}</div>}
{loadError && <div className="mt-4 text-red-500 dark:text-red-400 font-medium">Error: {loadError}</div>}
</div>
);
}
@ -146,8 +150,8 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename }: Only
};
return (
<div className="flex-1 w-full h-full flex flex-col" style={{ backgroundColor: '#fff' }}>
<div className="flex items-center justify-between px-4 py-2 bg-gray-100 border-b border-gray-200">
<div className="flex-1 w-full h-full flex flex-col" style={{ backgroundColor: 'var(--color-bg-primary, #fff)' }}>
<div className="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-[#1e1e1e] border-b border-gray-200 dark:border-white/10 transition-colors">
{isRenaming ? (
<input
ref={renameInputRef}
@ -158,7 +162,7 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename }: Only
if (e.key === 'Enter') handleRename();
if (e.key === 'Escape') { setRenameValue(baseName); setIsRenaming(false); }
}}
className="font-medium text-sm text-gray-700 bg-white border border-blue-400 rounded px-2 py-0.5 outline-none w-1/3 min-w-[300px] max-w-[600px]"
className="font-medium text-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-[#2d2d2d] border border-blue-400 dark:border-blue-500 rounded px-2 py-0.5 outline-none w-1/3 min-w-[300px] max-w-[600px]"
autoFocus
/>
) : (
@ -173,19 +177,29 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename }: Only
}
}, 50);
}}
className="font-medium text-sm text-gray-700 hover:text-blue-600 hover:underline cursor-pointer transition-colors truncate max-w-[500px]"
className="font-medium text-sm text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline cursor-pointer transition-colors truncate max-w-[500px]"
title="Click to rename"
>
{baseName}
</button>
)}
<div className="flex items-center gap-3">
<button
onClick={toggleTheme}
className="p-1.5 rounded-lg transition-colors hover:bg-black/5 dark:hover:bg-white/5"
style={{ color: 'var(--color-text-secondary)' }}
title={theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
>
{theme === 'dark' ? <Sun className="w-4.5 h-4.5" /> : <Moon className="w-4.5 h-4.5" />}
</button>
<button
onClick={onClose}
className="px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded text-sm transition-colors"
className="px-3 py-1 bg-gray-200 dark:bg-white/10 hover:bg-gray-300 dark:hover:bg-white/20 text-gray-700 dark:text-gray-200 rounded text-sm transition-colors"
>
Close Document
</button>
</div>
</div>
<div className="flex-1 relative">
{loadError ? (
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 text-red-600 p-8 text-center flex-col">