RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: properties panel

This commit is contained in:
Maze Winther 2025-08-27 11:26:28 +02:00
parent 88c4d160e0
commit ebe1b38bdf
3 changed files with 85 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -129,14 +129,14 @@ export function TextProperties({
<Textarea
placeholder="Name"
defaultValue={element.content}
className="min-h-18 resize-none bg-background/50"
className="min-h-18 resize-none bg-panel-accent"
onChange={(e) =>
updateTextElement(trackId, element.id, {
content: e.target.value,
})
}
/>
<PropertyItem direction="row">
<PropertyItem direction="column">
<PropertyItemLabel>Font</PropertyItemLabel>
<PropertyItemValue>
<FontPicker
@ -150,83 +150,83 @@ export function TextProperties({
</PropertyItemValue>
</PropertyItem>
<PropertyItem direction="column">
<PropertyItem direction="row">
<PropertyItemLabel>Style</PropertyItemLabel>
<PropertyItemValue>
<div className="flex items-center gap-2">
<Button
variant={
element.fontWeight === "bold" ? "default" : "outline"
}
size="sm"
onClick={() =>
updateTextElement(trackId, element.id, {
fontWeight:
element.fontWeight === "bold" ? "normal" : "bold",
})
}
className="h-8 px-3 font-bold"
>
B
</Button>
<Button
variant={
element.fontStyle === "italic" ? "default" : "outline"
}
size="sm"
onClick={() =>
updateTextElement(trackId, element.id, {
fontStyle:
element.fontStyle === "italic"
? "normal"
: "italic",
})
}
className="h-8 px-3 italic"
>
I
</Button>
<Button
variant={
element.textDecoration === "underline"
? "default"
: "outline"
}
size="sm"
onClick={() =>
updateTextElement(trackId, element.id, {
textDecoration:
element.textDecoration === "underline"
? "none"
: "underline",
})
}
className="h-8 px-3 underline"
>
U
</Button>
<Button
variant={
element.textDecoration === "line-through"
? "default"
: "outline"
}
size="sm"
onClick={() =>
updateTextElement(trackId, element.id, {
textDecoration:
element.textDecoration === "line-through"
? "none"
: "line-through",
})
}
className="h-8 px-3 line-through"
>
S
</Button>
</div>
</PropertyItemValue>
</PropertyItem>
<PropertyItemLabel>Style</PropertyItemLabel>
<PropertyItemValue>
<div className="flex items-center gap-2">
<Button
variant={
element.fontWeight === "bold" ? "default" : "outline"
}
size="sm"
onClick={() =>
updateTextElement(trackId, element.id, {
fontWeight:
element.fontWeight === "bold" ? "normal" : "bold",
})
}
className="h-8 px-3 font-bold"
>
B
</Button>
<Button
variant={
element.fontStyle === "italic" ? "default" : "outline"
}
size="sm"
onClick={() =>
updateTextElement(trackId, element.id, {
fontStyle:
element.fontStyle === "italic"
? "normal"
: "italic",
})
}
className="h-8 px-3 italic"
>
I
</Button>
<Button
variant={
element.textDecoration === "underline"
? "default"
: "outline"
}
size="sm"
onClick={() =>
updateTextElement(trackId, element.id, {
textDecoration:
element.textDecoration === "underline"
? "none"
: "underline",
})
}
className="h-8 px-3 underline"
>
U
</Button>
<Button
variant={
element.textDecoration === "line-through"
? "default"
: "outline"
}
size="sm"
onClick={() =>
updateTextElement(trackId, element.id, {
textDecoration:
element.textDecoration === "line-through"
? "none"
: "line-through",
})
}
className="h-8 px-3 line-through"
>
S
</Button>
</div>
</PropertyItemValue>
</PropertyItem>
<PropertyItem direction="column">
<PropertyItemLabel>Font size</PropertyItemLabel>
<PropertyItemValue>
<div className="flex items-center gap-2">
@ -250,7 +250,7 @@ export function TextProperties({
max={300}
onChange={(e) => handleFontSizeChange(e.target.value)}
onBlur={handleFontSizeBlur}
className="w-12 !text-xs h-7 rounded-sm text-center
className="w-12 px-2 !text-xs h-7 rounded-sm text-center
[appearance:textfield]
[&::-webkit-outer-spin-button]:appearance-none
[&::-webkit-inner-spin-button]:appearance-none"
@ -258,7 +258,7 @@ export function TextProperties({
</div>
</PropertyItemValue>
</PropertyItem>
<PropertyItem direction="row">
<PropertyItem direction="column">
<PropertyItemLabel>Color</PropertyItemLabel>
<PropertyItemValue>
<Input

2
apps/web/src/components/ui/font-picker.tsx
View File

@ -20,7 +20,7 @@ export function FontPicker({
}: FontPickerProps) {
return (
<Select defaultValue={defaultValue} onValueChange={onValueChange}>
<SelectTrigger className={`w-full text-xs ${className || ""}`}>
<SelectTrigger className={`w-full bg-panel-accent h-8 text-xs ${className || ""}`}>
<SelectValue placeholder="Select a font" />
</SelectTrigger>
<SelectContent>

4
apps/web/src/components/ui/textarea.tsx
View File

@ -9,7 +9,9 @@ const Textarea = React.forwardRef<
return (
<textarea
className={cn(
"flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-xs",
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-[60px] w-full rounded-md border bg-accent/50 px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className
)}
ref={ref}