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
+5 -5
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,7 +150,6 @@ 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">
@@ -227,6 +226,7 @@ export function TextProperties({
</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}