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

Lay groundwork for Tailwind v4 upgrade

Browse Source
This commit is contained in:
Brandon McConnell
2025-07-30 13:15:09 -04:00
parent 1c20027d33
commit df1e80b528
65 changed files with 318 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/media-panel/tabbar.tsx
+3 -3
View File
@@ -82,7 +82,7 @@ export function TabBar() {
onClick={() => setActiveTab(tabKey)}
key={tabKey}
>
<tab.icon className="!size-[1.1rem]" />
<tab.icon className="size-[1.1rem]!" />
<span className="text-[0.65rem]">{tab.label}</span>
</div>
);
@@ -114,10 +114,10 @@ function ScrollButton({
<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"
className="rounded-[0.4rem] w-4 h-7 bg-foreground/10!"
onClick={onClick}
>
<Icon className="!size-4 text-foreground" />
<Icon className="size-4! text-foreground" />
</Button>
</div>
);
apps/web/src/components/editor/media-panel/views/media.tsx
+1 -1
View File
@@ -169,7 +169,7 @@ export function MediaView() {
if (item.type === "audio") {
return (
<div className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">
<div className="w-full h-full bg-linear-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">
<Music className="h-6 w-6 mb-1" />
<span className="text-xs">Audio</span>
{item.duration && (
apps/web/src/components/editor/preview-panel.tsx
+13 -13
View File
@@ -274,7 +274,7 @@ export function PreviewPanel() {
const renderBlurBackground = () => {
if (
!activeProject?.backgroundType ||
activeProject.backgroundType !== "blur" ||
activeProject.backgroundType !== "blur-sm" ||
blurBackgroundElements.length === 0
) {
return null;
@@ -392,7 +392,7 @@ export function PreviewPanel() {
return (
<div
key={element.id}
className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
className="absolute inset-0 bg-linear-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
>
<div className="text-center">
<div className="text-2xl mb-2">🎬</div>
@@ -474,7 +474,7 @@ export function PreviewPanel() {
width: previewDimensions.width,
height: previewDimensions.height,
backgroundColor:
activeProject?.backgroundType === "blur"
activeProject?.backgroundType === "blur-sm"
? "transparent"
: activeProject?.backgroundColor || "#000000",
}}
@@ -489,7 +489,7 @@ export function PreviewPanel() {
renderElement(elementData, index)
)
)}
{activeProject?.backgroundType === "blur" &&
{activeProject?.backgroundType === "blur-sm" &&
blurBackgroundElements.length === 0 &&
activeElements.length > 0 && (
<div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
@@ -675,7 +675,7 @@ function FullscreenToolbar({
style={{ width: `${progress}%` }}
/>
<div
className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-sm bg-white border border-black/20"
className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-xs bg-white border border-black/20"
style={{ left: `${progress}%` }}
/>
</div>
@@ -684,11 +684,11 @@ function FullscreenToolbar({
<Button
variant="text"
size="icon"
className="!size-4 text-white/80 hover:text-white"
className="size-4! text-white/80 hover:text-white"
onClick={onToggleExpanded}
title="Exit fullscreen (Esc)"
>
<Expand className="!size-4" />
<Expand className="size-4!" />
</Button>
</div>
);
@@ -722,7 +722,7 @@ function FullscreenPreview({
getTotalDuration: () => number;
}) {
return (
<div className="fixed inset-0 z-[9999] flex flex-col">
<div className="fixed inset-0 z-9999 flex flex-col">
<div className="flex-1 flex items-center justify-center bg-background">
<div
className="relative overflow-hidden border border-border m-3"
@@ -730,7 +730,7 @@ function FullscreenPreview({
width: previewDimensions.width,
height: previewDimensions.height,
backgroundColor:
activeProject?.backgroundType === "blur"
activeProject?.backgroundType === "blur-sm"
? "#1a1a1a"
: activeProject?.backgroundColor || "#1a1a1a",
}}
@@ -745,7 +745,7 @@ function FullscreenPreview({
renderElement(elementData, index)
)
)}
{activeProject?.backgroundType === "blur" &&
{activeProject?.backgroundType === "blur-sm" &&
blurBackgroundElements.length === 0 &&
activeElements.length > 0 && (
<div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
@@ -868,7 +868,7 @@ function PreviewToolbar({
<DropdownMenuTrigger asChild>
<Button
size="sm"
className="!bg-panel-accent text-foreground/85 text-[0.70rem] h-4 rounded-none border border-muted-foreground px-0.5 py-0 font-light"
className="bg-panel-accent! text-foreground/85 text-[0.70rem] h-4 rounded-none border border-muted-foreground px-0.5 py-0 font-light"
disabled={!hasAnyElements}
>
{getDisplayName()}
@@ -899,11 +899,11 @@ function PreviewToolbar({
<Button
variant="text"
size="icon"
className="!size-4 text-muted-foreground"
className="size-4! text-muted-foreground"
onClick={onToggleExpanded}
title="Enter fullscreen"
>
<Expand className="!size-4" />
<Expand className="size-4!" />
</Button>
</div>
</div>
apps/web/src/components/editor/properties-panel/text-properties.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ export function TextProperties({
<Textarea
placeholder="Name"
defaultValue={element.content}
className="min-h-[4.5rem] resize-none bg-background/50"
className="min-h-18 resize-none bg-background/50"
onChange={(e) =>
updateTextElement(trackId, element.id, { content: e.target.value })
}
@@ -63,7 +63,7 @@ export function TextProperties({
fontSize: parseInt(e.target.value),
})
}
className="w-12 !text-xs h-7 rounded-sm text-center
className="w-12 text-xs! h-7 rounded-sm text-center
[appearance:textfield]
[&::-webkit-outer-spin-button]:appearance-none
[&::-webkit-inner-spin-button]:appearance-none"
apps/web/src/components/editor/snap-indicator.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ export function SnapIndicator({
return (
<div
className="absolute pointer-events-none z-[90]"
className="absolute pointer-events-none z-90"
style={{
left: `${leftPosition}px`,
top: 0,
apps/web/src/components/editor/speed-control.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export function SpeedControl() {
{SPEED_PRESETS.map((preset) => (
<Button
key={preset.value}
variant={speed === preset.value ? "default" : "outline"}
variant={speed === preset.value ? "default" : "outline-solid"}
className="flex-1"
onClick={() => setSpeed(preset.value)}
>
apps/web/src/components/editor/timeline/index.tsx
+7 -7
View File
@@ -543,7 +543,7 @@ export function Timeline() {
{/* Timeline Header with Ruler */}
<div className="flex bg-panel sticky top-0 z-10">
{/* Track Labels Header */}
<div className="w-48 flex-shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
<div className="w-48 shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
{/* Empty space */}
<span className="text-sm font-medium text-muted-foreground opacity-0">
.
@@ -652,7 +652,7 @@ export function Timeline() {
{tracks.length > 0 && (
<div
ref={trackLabelsRef}
className="w-48 flex-shrink-0 border-r border-black overflow-y-auto z-[200] bg-panel"
className="w-48 shrink-0 border-r border-black overflow-y-auto z-200 bg-panel"
data-track-labels
>
<ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
@@ -667,7 +667,7 @@ export function Timeline() {
<TrackIcon track={track} />
</div>
{track.muted && (
<span className="ml-2 text-xs text-red-500 font-semibold flex-shrink-0">
<span className="ml-2 text-xs text-red-500 font-semibold shrink-0">
Muted
</span>
)}
@@ -745,7 +745,7 @@ export function Timeline() {
/>
</div>
</ContextMenuTrigger>
<ContextMenuContent className="z-[200]">
<ContextMenuContent className="z-200">
<ContextMenuItem
onClick={(e) => {
e.stopPropagation();
@@ -775,13 +775,13 @@ function TrackIcon({ track }: { track: TimelineTrack }) {
return (
<>
{track.type === "media" && (
<Video className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
<Video className="w-4 h-4 shrink-0 text-muted-foreground" />
)}
{track.type === "text" && (
<TypeIcon className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
<TypeIcon className="w-4 h-4 shrink-0 text-muted-foreground" />
)}
{track.type === "audio" && (
<Music className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
<Music className="w-4 h-4 shrink-0 text-muted-foreground" />
)}
</>
);
apps/web/src/components/editor/timeline/timeline-element.tsx
+1 -1
View File
@@ -358,7 +358,7 @@ export function TimelineElement({
</div>
</div>
</ContextMenuTrigger>
<ContextMenuContent className="z-[200]">
<ContextMenuContent className="z-200">
<ContextMenuItem onClick={handleElementSplitContext}>
<Scissors className="h-4 w-4 mr-2" />
Split at playhead
apps/web/src/components/editor/timeline/timeline-playhead.tsx
+2 -2
View File
@@ -126,7 +126,7 @@ export function TimelinePlayhead({
return (
<div
ref={playheadRef}
className="absolute pointer-events-auto z-[150]"
className="absolute pointer-events-auto z-150"
style={{
left: `${leftPosition}px`,
top: 0,
@@ -142,7 +142,7 @@ export function TimelinePlayhead({
{/* Playhead dot indicator at the top (in ruler area) */}
<div
className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-xs ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
/>
</div>
);