xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: completely fresh ui in editor

Browse Source
This commit is contained in:
Maze Winther
2025-07-09 21:45:25 +02:00
parent 3d685f57dd
commit 5e1f780fff
12 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/src/app/editor/[project_id]/page.tsx
View File

@ -58,7 +58,7 @@ export default function Editor() {
<div className="h-screen w-screen flex flex-col bg-background overflow-hidden">
<EditorHeader />
<div className="flex-1 min-h-0 min-w-0">
<ResizablePanelGroup direction="vertical" className="h-full w-full">
<ResizablePanelGroup direction="vertical" className="h-full w-full gap-2">
<ResizablePanel
defaultSize={mainContent}
minSize={30}
@ -69,7 +69,7 @@ export default function Editor() {
{/* Main content area */}
<ResizablePanelGroup
direction="horizontal"
className="h-full w-full"
className="h-full w-full gap-2 px-2"
>
{/* Tools Panel */}
<ResizablePanel
@ -96,7 +96,6 @@ export default function Editor() {
<ResizableHandle withHandle />
<ResizablePanel
defaultSize={propertiesPanel}
minSize={15}
@ -117,7 +116,7 @@ export default function Editor() {
minSize={15}
maxSize={70}
onResize={setTimeline}
className="min-h-0"
className="min-h-0 px-2 pb-2"
>
<Timeline />
</ResizablePanel>

4
apps/web/src/app/globals.css
View File

@ -39,7 +39,7 @@
--sidebar-ring: 0 0% 3.9%;
}
.dark {
--background: 0 0% 8%;
--background: 0 0% 4%;
--foreground: 0 0% 89%;
--card: 0 0% 14.9%;
--card-foreground: 0 0% 98%;
@ -71,6 +71,8 @@
--sidebar-accent-foreground: 0 0% 98%;
--sidebar-border: 0 0% 14.9%;
--sidebar-ring: 0 0% 83.1%;
--panel-background: 0 0% 11%;
--panel-accent: 0 0% 15%;
}
}

6
apps/web/src/components/editor-header.tsx
View File

@ -30,14 +30,14 @@ export function EditorHeader() {
);
const centerContent = (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<div className="flex items-center gap-2 text-xs">
<span>{formatTimeCode(getTotalDuration(), "HH:MM:SS:CS")}</span>
</div>
);
const rightContent = (
<nav className="flex items-center gap-2">
<Button size="sm" variant="primary" onClick={handleExport}>
<Button size="sm" variant="primary" className="h-7 text-xs" onClick={handleExport}>
<Download className="h-4 w-4" />
<span className="text-sm">Export</span>
</Button>
@ -49,7 +49,7 @@ export function EditorHeader() {
leftContent={leftContent}
centerContent={centerContent}
rightContent={rightContent}
className="bg-background border-b"
className="bg-background h-[3.2rem] px-4"
/>
);
}

2
apps/web/src/components/editor/media-panel/index.tsx
View File

@ -47,7 +47,7 @@ export function MediaPanel() {
};
return (
<div className="h-full flex flex-col">
<div className="h-full flex flex-col bg-panel rounded-sm overflow-hidden">
<TabBar />
<div className="flex-1">{viewMap[activeTab]}</div>
</div>

4
apps/web/src/components/editor/media-panel/tabbar.tsx
View File

@ -69,7 +69,7 @@ export function TabBar() {
/>
<div
ref={scrollContainerRef}
className="h-12 bg-accent/50 px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative"
className="h-12 bg-panel-accent px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative"
>
{(Object.keys(tabs) as Tab[]).map((tabKey) => {
const tab = tabs[tabKey];
@ -111,7 +111,7 @@ function ScrollButton({
const Icon = direction === "left" ? ChevronLeft : ChevronRight;
return (
<div className="bg-accent/50 w-12 h-full flex items-center justify-center">
<div className="bg-panel-accent w-12 h-full flex items-center justify-center">
<Button
size="icon"
className="rounded-[0.4rem] w-4 h-7 !bg-foreground/10"

2
apps/web/src/components/editor/media-panel/views/media.tsx
View File

@ -235,7 +235,7 @@ export function MediaView() {
size="sm"
onClick={handleFileSelect}
disabled={isProcessing}
className="flex-none 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"
>
{isProcessing ? (
<>

9
apps/web/src/components/editor/preview-panel.tsx
View File

@ -230,10 +230,10 @@ export function PreviewPanel() {
};
return (
<div className="h-full w-full flex flex-col min-h-0 min-w-0">
<div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm">
<div
ref={containerRef}
className="flex-1 flex flex-col items-start justify-center p-3 min-h-0 min-w-0"
className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0"
>
<div className="flex-1"></div>
{hasAnyElements ? (
@ -289,7 +289,7 @@ function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
return (
<div
data-toolbar
className="flex items-end justify-between gap-2 p-1 pt-2 bg-background-500 w-full"
className="flex items-end justify-between gap-2 p-1 pt-2 w-full"
>
<div>
<p
@ -307,6 +307,7 @@ function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
size="icon"
onClick={toggle}
disabled={!hasAnyElements}
className="h-auto p-0"
>
{isPlaying ? (
<Pause className="h-3 w-3" />
@ -319,7 +320,7 @@ function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
<DropdownMenuTrigger asChild>
<Button
size="sm"
className="!bg-background text-foreground/85 text-xs h-auto rounded-none border border-muted-foreground px-0.5 py-0 font-light"
className="!bg-panel-accent text-foreground/85 text-xs h-auto rounded-none border border-muted-foreground px-0.5 py-0 font-light"
disabled={!hasAnyElements}
>
{getDisplayName()}

2
apps/web/src/components/editor/properties-panel.tsx
View File

@ -10,7 +10,7 @@ export function PropertiesPanel() {
const { getDisplayName, canvasSize } = useAspectRatio();
return (
<ScrollArea className="h-full">
<ScrollArea className="h-full bg-panel rounded-sm">
<div className="space-y-4 p-5">
{/* Media Properties */}
<div className="flex flex-col gap-3">

8
apps/web/src/components/editor/timeline.tsx
View File

@ -749,7 +749,7 @@ export function Timeline() {
return (
<div
className={`h-full flex flex-col transition-colors duration-200 relative`}
className={`h-full flex flex-col transition-colors duration-200 relative bg-panel rounded-sm overflow-hidden`}
{...dragProps}
onMouseEnter={() => setIsInTimeline(true)}
onMouseLeave={() => setIsInTimeline(false)}
@ -911,7 +911,7 @@ export function Timeline() {
{/* Timeline Container */}
<div className="flex-1 flex flex-col overflow-hidden">
{/* Timeline Header with Ruler */}
<div className="flex border-b bg-background sticky top-0 z-10">
<div className="flex border-b bg-panel-accent sticky top-0 z-10">
{/* Track Labels Header */}
<div className="w-48 flex-shrink-0 bg-muted/30 border-r flex items-center justify-between px-3 py-2">
<span className="text-sm font-medium text-muted-foreground">
@ -1019,12 +1019,12 @@ export function Timeline() {
<div className="flex-1 flex overflow-hidden">
{/* Track Labels */}
{tracks.length > 0 && (
<div className="w-48 flex-shrink-0 border-r bg-background overflow-y-auto">
<div className="w-48 flex-shrink-0 border-r bg-panel-accent overflow-y-auto">
<div className="flex flex-col">
{tracks.map((track) => (
<div
key={track.id}
className="flex items-center px-3 border-b border-muted/30 bg-background group"
className="flex items-center px-3 border-b border-muted/30 group"
style={{ height: `${getTrackHeight(track.type)}px` }}
>
<div className="flex items-center flex-1 min-w-0">

2
apps/web/src/components/ui/button.tsx
View File

@ -24,7 +24,7 @@ const buttonVariants = cva(
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
sm: "h-8 rounded-sm px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-7 w-7",
},

7
apps/web/src/components/ui/resizable.tsx
View File

@ -29,16 +29,11 @@ const ResizableHandle = ({
}) => (
<ResizablePrimitive.PanelResizeHandle
className={cn(
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
"hidden",
className
)}
{...props}
>
{withHandle && (
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
<GripVertical className="h-2.5 w-2.5" />
</div>
)}
</ResizablePrimitive.PanelResizeHandle>
);

7
apps/web/tailwind.config.ts
View File

@ -5,6 +5,7 @@ export default {
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./src/lib/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
@ -68,11 +69,15 @@ export default {
border: "hsl(var(--sidebar-border))",
ring: "hsl(var(--sidebar-ring))",
},
panel: {
DEFAULT: "hsl(var(--panel-background))",
accent: "hsl(var(--panel-accent))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 6px)",
sm: "calc(var(--radius) - 8px)",
},
keyframes: {
"accordion-down": {