External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move the add button below the placeholder text

Browse Source
This commit is contained in:
Nizav
2025-07-14 22:46:28 +07:00
parent b54c5443a0
commit acd42a29f6
1 changed files with 23 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/media-panel/views/media.tsx
+17 -20
View File
@@ -207,9 +207,8 @@ export function MediaView() {
<DragOverlay isVisible={isDragOver} /> <DragOverlay isVisible={isDragOver} />
<div className="p-3 pb-2"> <div className="p-3 pb-2">
{/* Button to add/upload media */} {/* Search and filter controls (removed old Add button) */}
<div className="flex gap-2"> <div className="flex gap-2">
{/* Search and filter controls */}
<Select value={mediaFilter} onValueChange={setMediaFilter}> <Select value={mediaFilter} onValueChange={setMediaFilter}>
<SelectTrigger className="w-[80px] h-full text-xs"> <SelectTrigger className="w-[80px] h-full text-xs">
<SelectValue /> <SelectValue />
@@ -228,14 +227,28 @@ export function MediaView() {
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
</div>
</div>
{/* Add media button */} <div className="flex-1 overflow-y-auto p-3 pt-0">
{/* Show message if no media, otherwise show media grid */}
{filteredMediaItems.length === 0 ? (
<div className="flex flex-col items-center justify-center py-8 text-center h-full">
<div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
<Image className="h-8 w-8 text-muted-foreground" />
</div>
<p className="text-sm text-muted-foreground">
No media in project
</p>
<p className="text-xs text-muted-foreground/70 mt-1">
Drag files here or use the button below
</p>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={handleFileSelect} onClick={handleFileSelect}
disabled={isProcessing} disabled={isProcessing}
className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center" className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center mt-2"
> >
{isProcessing ? ( {isProcessing ? (
<> <>
@@ -252,22 +265,6 @@ export function MediaView() {
)} )}
</Button> </Button>
</div> </div>
</div>
<div className="flex-1 overflow-y-auto p-3 pt-0">
{/* Show message if no media, otherwise show media grid */}
{filteredMediaItems.length === 0 ? (
<div className="flex flex-col items-center justify-center py-8 text-center h-full">
<div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
<Image className="h-8 w-8 text-muted-foreground" />
</div>
<p className="text-sm text-muted-foreground">
No media in project
</p>
<p className="text-xs text-muted-foreground/70 mt-1">
Drag files here or use the button above
</p>
</div>
) : ( ) : (
<div <div
className="grid gap-2" className="grid gap-2"