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

style: properties panel

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/properties-panel/text-properties.tsx
+81 -81
View File
@@ -129,14 +129,14 @@ export function TextProperties({
<Textarea <Textarea
placeholder="Name" placeholder="Name"
defaultValue={element.content} defaultValue={element.content}
className="min-h-18 resize-none bg-background/50" className="min-h-18 resize-none bg-panel-accent"
onChange={(e) => onChange={(e) =>
updateTextElement(trackId, element.id, { updateTextElement(trackId, element.id, {
content: e.target.value, content: e.target.value,
}) })
} }
/> />
<PropertyItem direction="row"> <PropertyItem direction="column">
<PropertyItemLabel>Font</PropertyItemLabel> <PropertyItemLabel>Font</PropertyItemLabel>
<PropertyItemValue> <PropertyItemValue>
<FontPicker <FontPicker
@@ -150,83 +150,83 @@ export function TextProperties({
</PropertyItemValue> </PropertyItemValue>
</PropertyItem> </PropertyItem>
<PropertyItem direction="column"> <PropertyItem direction="column">
<PropertyItem direction="row"> <PropertyItemLabel>Style</PropertyItemLabel>
<PropertyItemLabel>Style</PropertyItemLabel> <PropertyItemValue>
<PropertyItemValue> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <Button
<Button variant={
variant={ element.fontWeight === "bold" ? "default" : "outline"
element.fontWeight === "bold" ? "default" : "outline" }
} size="sm"
size="sm" onClick={() =>
onClick={() => updateTextElement(trackId, element.id, {
updateTextElement(trackId, element.id, { fontWeight:
fontWeight: element.fontWeight === "bold" ? "normal" : "bold",
element.fontWeight === "bold" ? "normal" : "bold", })
}) }
} className="h-8 px-3 font-bold"
className="h-8 px-3 font-bold" >
> B
B </Button>
</Button> <Button
<Button variant={
variant={ element.fontStyle === "italic" ? "default" : "outline"
element.fontStyle === "italic" ? "default" : "outline" }
} size="sm"
size="sm" onClick={() =>
onClick={() => updateTextElement(trackId, element.id, {
updateTextElement(trackId, element.id, { fontStyle:
fontStyle: element.fontStyle === "italic"
element.fontStyle === "italic" ? "normal"
? "normal" : "italic",
: "italic", })
}) }
} className="h-8 px-3 italic"
className="h-8 px-3 italic" >
> I
I </Button>
</Button> <Button
<Button variant={
variant={ element.textDecoration === "underline"
element.textDecoration === "underline" ? "default"
? "default" : "outline"
: "outline" }
} size="sm"
size="sm" onClick={() =>
onClick={() => updateTextElement(trackId, element.id, {
updateTextElement(trackId, element.id, { textDecoration:
textDecoration: element.textDecoration === "underline"
element.textDecoration === "underline" ? "none"
? "none" : "underline",
: "underline", })
}) }
} className="h-8 px-3 underline"
className="h-8 px-3 underline" >
> U
U </Button>
</Button> <Button
<Button variant={
variant={ element.textDecoration === "line-through"
element.textDecoration === "line-through" ? "default"
? "default" : "outline"
: "outline" }
} size="sm"
size="sm" onClick={() =>
onClick={() => updateTextElement(trackId, element.id, {
updateTextElement(trackId, element.id, { textDecoration:
textDecoration: element.textDecoration === "line-through"
element.textDecoration === "line-through" ? "none"
? "none" : "line-through",
: "line-through", })
}) }
} className="h-8 px-3 line-through"
className="h-8 px-3 line-through" >
> S
S </Button>
</Button> </div>
</div> </PropertyItemValue>
</PropertyItemValue> </PropertyItem>
</PropertyItem> <PropertyItem direction="column">
<PropertyItemLabel>Font size</PropertyItemLabel> <PropertyItemLabel>Font size</PropertyItemLabel>
<PropertyItemValue> <PropertyItemValue>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -250,7 +250,7 @@ export function TextProperties({
max={300} max={300}
onChange={(e) => handleFontSizeChange(e.target.value)} onChange={(e) => handleFontSizeChange(e.target.value)}
onBlur={handleFontSizeBlur} 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] [appearance:textfield]
[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none
[&::-webkit-inner-spin-button]:appearance-none" [&::-webkit-inner-spin-button]:appearance-none"
@@ -258,7 +258,7 @@ export function TextProperties({
</div> </div>
</PropertyItemValue> </PropertyItemValue>
</PropertyItem> </PropertyItem>
<PropertyItem direction="row"> <PropertyItem direction="column">
<PropertyItemLabel>Color</PropertyItemLabel> <PropertyItemLabel>Color</PropertyItemLabel>
<PropertyItemValue> <PropertyItemValue>
<Input <Input
apps/web/src/components/ui/font-picker.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export function FontPicker({
}: FontPickerProps) { }: FontPickerProps) {
return ( return (
<Select defaultValue={defaultValue} onValueChange={onValueChange}> <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" /> <SelectValue placeholder="Select a font" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
apps/web/src/components/ui/textarea.tsx
+3 -1
View File
@@ -9,7 +9,9 @@ const Textarea = React.forwardRef<
return ( return (
<textarea <textarea
className={cn( 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 className
)} )}
ref={ref} ref={ref}