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

Icon redesign and xlsx aspect ratio update
All checks were successful
Automated Container Build / build-and-push (push) Successful in 1m13s
Details

Browse source
This commit is contained in:
Elijah 2026-05-25 10:07:04 -07:00
parent 709c13995c
commit 9454ad28ea
3 changed files with 18 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
backend/test.xlsx Normal file
View file

Binary file not shown.

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

@ -8,7 +8,7 @@ import {
MoreVertical, Star, Download, Pencil, Copy, Move,
FolderPlus, ArrowUp, X, Check, RefreshCw, Info, Link as LinkIcon, Image as ImageIcon, Film as FilmIcon, Home,
Sun, Moon, Music as MusicIcon, Code as CodeIcon, Archive as ArchiveIcon, CornerDownRight,
CheckCircle, AlertCircle, Menu, FileText, Presentation
CheckCircle, AlertCircle, Menu, FileText, Presentation, FileSpreadsheet
} from 'lucide-react';
import api from '@/lib/api';
import { useIsMobile } from '@/hooks/useIsMobile';
@ -1172,7 +1172,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
if (ext === 'docx' || ext === 'doc') {
return (
<div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#2B579A]`}>
W
<FileText className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
</div>
);
}
@ -1180,15 +1180,15 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
if (ext === 'pptx' || ext === 'ppt') {
return (
<div className={`${large ? 'w-28 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#D24726]`}>
P
<Presentation className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
</div>
);
}
if (ext === 'xlsx' || ext === 'xls') {
return (
<div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#107C41]`}>
X
<div className={`${large ? 'w-28 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#107C41]`}>
<FileSpreadsheet className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
</div>
);
}
@ -1951,7 +1951,10 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
<OfficeHome
type={appMode}
onFileSelect={(file) => setEditingFile(file)}
onCreateBlank={(file) => setEditingFile(file)}
onCreateBlank={(file) => {
setEditingFile(file);
loadFiles();
}}
onPinChange={() => setPinnedRefreshCounter(c => c + 1)}
/>
) : (

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

@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef } from 'react';
import { Plus, Pencil, Trash2, Pin } from 'lucide-react';
import { Plus, Pencil, Trash2, Pin, FileText, Presentation, FileSpreadsheet } from 'lucide-react';
import api from '@/lib/api';
interface FileItem {
@ -23,8 +23,8 @@ interface OfficeHomeProps {
// Custom Word icon (blue)
function WordIcon({ className }: { className?: string }) {
return (
<div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#2B579A] rounded-lg ${className || ''}`}>
W
<div className={`flex items-center justify-center text-white bg-[#2B579A] rounded-lg ${className || ''}`}>
<FileText className="w-[55%] h-[55%]" />
</div>
);
}
@ -32,8 +32,8 @@ function WordIcon({ className }: { className?: string }) {
// Custom PowerPoint icon (orange)
function PptIcon({ className }: { className?: string }) {
return (
<div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#D24726] rounded-lg ${className || ''}`}>
P
<div className={`flex items-center justify-center text-white bg-[#D24726] rounded-lg ${className || ''}`}>
<Presentation className="w-[55%] h-[55%]" />
</div>
);
}
@ -41,8 +41,8 @@ function PptIcon({ className }: { className?: string }) {
// Custom Excel icon (green)
function SheetIcon({ className }: { className?: string }) {
return (
<div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#107C41] rounded-lg ${className || ''}`}>
X
<div className={`flex items-center justify-center text-white bg-[#107C41] rounded-lg ${className || ''}`}>
<FileSpreadsheet className="w-[55%] h-[55%]" />
</div>
);
}
@ -229,7 +229,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
<button
onClick={() => !isRenaming && onFileSelect(file)}
onContextMenu={(e) => handleContextMenu(e, file)}
className={`w-full ${type === 'slides' ? 'aspect-[1.4/1]' : 'aspect-[1/1.4]'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative`}
className={`w-full ${type === 'docs' ? 'aspect-[1/1.4]' : 'aspect-[1.4/1]'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative`}
style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
>
<Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />
@ -273,7 +273,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
<div className="flex flex-col gap-3">
<button
onClick={handleCreateBlank}
className={`${type === 'slides' ? 'w-52 h-40' : 'w-40 h-52'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group`}
className={`${type === 'docs' ? 'w-40 h-52' : 'w-52 h-40'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group`}
style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
>
<Plus className="w-12 h-12 text-gray-300 group-hover:text-blue-500 transition-colors" />