feat: enhance text properties panel with additional styling#469
feat: enhance text properties panel with additional styling#469dipanshurdev wants to merge 2 commits into
Conversation
👷 Deploy request for appcut pending review.Visit the deploys page to approve it
|
|
@dipanshurdev is attempting to deploy a commit to the OpenCut OSS Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TextProperties
participant updateTextElement
User->>TextProperties: Interacts with UI controls (e.g., toggles, sliders, inputs)
TextProperties->>updateTextElement: Calls with updated property and value
updateTextElement-->>TextProperties: Updates text element state
TextProperties-->>User: Reflects changes in UI
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/web/src/components/editor/properties-panel/text-properties.tsx (3)
13-24: Consider cleaning up commented imports.The new imports are correctly structured and necessary for the enhanced functionality. However, consider removing the commented imports if they're not planned for immediate implementation, or document them with a TODO comment explaining the planned usage.
- // AlignLeft, - // AlignCenter, - // AlignRight, - // RotateCw, - // Eye, + // TODO: Add alignment and visibility controls + // AlignLeft, AlignCenter, AlignRight, RotateCw, Eye,
149-163: Consider adding rotation value validation.The rotation input implementation is correct with proper fallback and type conversion. However, consider adding validation to constrain rotation values to a meaningful range (e.g., 0-360 degrees) to prevent unexpected behavior.
onChange={(e) => updateTextElement(trackId, element.id, { - rotation: parseInt(e.target.value), + rotation: Math.max(0, Math.min(360, parseInt(e.target.value) || 0)), }) }
178-214: Good position control implementation with minor styling suggestions.The position inputs are well-implemented with proper fallback handling and visual clarity. Consider these minor improvements:
- <PropertyItemValue className="flex gap-2 "> - <div className="flex w-2/4 flex-row items-center justify-center"> + <PropertyItemValue className="flex gap-2"> + <div className="flex w-1/2 flex-row items-center justify-center"> <span> <TbLetterX className="text-base font-bold text-primary" /> </span> <Input type="number" value={element.x ?? 0} onChange={(e) => updateTextElement(trackId, element.id, { x: parseInt(e.target.value), }) } className="w-14" placeholder="X" /> </div> - <div className="flex w-2/4 flex-row items-center justify-center"> + <div className="flex w-1/2 flex-row items-center justify-center">
- Use
w-1/2instead ofw-2/4for better semantic clarity- Remove trailing space in className
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/components/editor/properties-panel/text-properties.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: simonorzel26
PR: OpenCut-app/OpenCut#324
File: apps/web/src/components/editor/snap-indicator.tsx:43-43
Timestamp: 2025-07-17T08:26:10.961Z
Learning: In the timeline refactor PR #324, the snap indicator component in apps/web/src/components/editor/snap-indicator.tsx requires the hard-coded `ml-48` class in addition to the calculated `leftPosition` for proper alignment. This is intentional and needed for the new timeline layout.
apps/web/src/components/editor/properties-panel/text-properties.tsx (1)
Learnt from: simonorzel26
PR: #324
File: apps/web/src/components/editor/snap-indicator.tsx:43-43
Timestamp: 2025-07-17T08:26:10.961Z
Learning: In the timeline refactor PR #324, the snap indicator component in apps/web/src/components/editor/snap-indicator.tsx requires the hard-coded ml-48 class in addition to the calculated leftPosition for proper alignment. This is intentional and needed for the new timeline layout.
🔇 Additional comments (5)
apps/web/src/components/editor/properties-panel/text-properties.tsx (5)
68-68: Good UX improvement.Adding
cursor-pointerto the slider improves the user experience by providing visual feedback for interactivity.
87-98: Excellent UX improvements for text color control.The changes enhance both clarity and usability:
- More descriptive label "Text color" vs "Color"
- Better visual styling with
cursor-pointerandrounded-full- Proper fallback handling with
#ffffff
99-113: Well-implemented background color control.The implementation is consistent with the existing text color control and uses appropriate defaults:
- Transparent fallback (
#00000000) is suitable for background color- Consistent styling and update pattern
- Proper integration with the timeline store
164-177: Excellent opacity control implementation.The opacity slider is well-implemented:
- Appropriate range (0-1) matching CSS opacity values
- Good precision with 0.01 step for fine control
- Proper fallback to 1 (fully opaque)
- Consistent update pattern
114-148: Text style toggles implementation approvedI’ve verified that the
TextElementinterface (apps/web/src/types/timeline.ts:23–33) includes
• fontWeight: "normal" | "bold"
• fontStyle: "normal" | "italic"
• textDecoration: "none" | "underline" | "line-through"No further changes required here. Great work!
|
this has been resolved in #467 :) |
|
the scale/rotation/position will come after export by the way |
2 participants
Description
This PR introduces a significant enhancement to the
TextPropertiespanel, enabling users to customize a wide range of text styles directly from the sidebar UI. This improvement provides a more complete and flexible editing experience.Key Changes:
Added support for updating the following text properties:
backgroundColorfontStyle,textDecorationopacityx,yandrotationupdateTextElementfunction from timeline-store to ensure centralized state updates.Screenshot
Notes:
Summary by CodeRabbit
New Features
Style