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, MoreVertical, Star, Download, Pencil, Copy, Move,
FolderPlus, ArrowUp, X, Check, RefreshCw, Info, Link as LinkIcon, Image as ImageIcon, Film as FilmIcon, Home, 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, 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'; } from 'lucide-react';
import api from '@/lib/api'; import api from '@/lib/api';
import { useIsMobile } from '@/hooks/useIsMobile'; import { useIsMobile } from '@/hooks/useIsMobile';
@ -1172,7 +1172,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
if (ext === 'docx' || ext === 'doc') { if (ext === 'docx' || ext === 'doc') {
return ( 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]`}> <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> </div>
); );
} }
@ -1180,15 +1180,15 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
if (ext === 'pptx' || ext === 'ppt') { if (ext === 'pptx' || ext === 'ppt') {
return ( 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]`}> <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> </div>
); );
} }
if (ext === 'xlsx' || ext === 'xls') { if (ext === 'xlsx' || ext === 'xls') {
return ( 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]`}> <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]`}>
X <FileSpreadsheet className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
</div> </div>
); );
} }
@ -1951,7 +1951,10 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
<OfficeHome <OfficeHome
type={appMode} type={appMode}
onFileSelect={(file) => setEditingFile(file)} onFileSelect={(file) => setEditingFile(file)}
onCreateBlank={(file) => setEditingFile(file)} onCreateBlank={(file) => {
setEditingFile(file);
loadFiles();
}}
onPinChange={() => setPinnedRefreshCounter(c => c + 1)} 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 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'; import api from '@/lib/api';
interface FileItem { interface FileItem {
@ -23,8 +23,8 @@ interface OfficeHomeProps {
// Custom Word icon (blue) // Custom Word icon (blue)
function WordIcon({ className }: { className?: string }) { function WordIcon({ className }: { className?: string }) {
return ( return (
<div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#2B579A] rounded-lg ${className || ''}`}> <div className={`flex items-center justify-center text-white bg-[#2B579A] rounded-lg ${className || ''}`}>
W <FileText className="w-[55%] h-[55%]" />
</div> </div>
); );
} }
@ -32,8 +32,8 @@ function WordIcon({ className }: { className?: string }) {
// Custom PowerPoint icon (orange) // Custom PowerPoint icon (orange)
function PptIcon({ className }: { className?: string }) { function PptIcon({ className }: { className?: string }) {
return ( return (
<div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#D24726] rounded-lg ${className || ''}`}> <div className={`flex items-center justify-center text-white bg-[#D24726] rounded-lg ${className || ''}`}>
P <Presentation className="w-[55%] h-[55%]" />
</div> </div>
); );
} }
@ -41,8 +41,8 @@ function PptIcon({ className }: { className?: string }) {
// Custom Excel icon (green) // Custom Excel icon (green)
function SheetIcon({ className }: { className?: string }) { function SheetIcon({ className }: { className?: string }) {
return ( return (
<div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#107C41] rounded-lg ${className || ''}`}> <div className={`flex items-center justify-center text-white bg-[#107C41] rounded-lg ${className || ''}`}>
X <FileSpreadsheet className="w-[55%] h-[55%]" />
</div> </div>
); );
} }
@ -229,7 +229,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
<button <button
onClick={() => !isRenaming && onFileSelect(file)} onClick={() => !isRenaming && onFileSelect(file)}
onContextMenu={(e) => handleContextMenu(e, 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)' }} 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" /> <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"> <div className="flex flex-col gap-3">
<button <button
onClick={handleCreateBlank} 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)' }} 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" /> <Plus className="w-12 h-12 text-gray-300 group-hover:text-blue-500 transition-colors" />