ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(studio): match the group caret to the property panel's

Browse Source 
The group row's disclosure was an 11px `▸` rotated 90° when open. The
property panel's preset runs disclose the same way and draw it at 13px in
the mono family, swapping `▸`/`▾` rather than rotating
(`hf-fx-preset-run-caret`). Same gesture, so the same glyph at the same
size instead of a smaller one unique to this row.

Swapped rather than rotated for a second reason: `▸` is not square, so
rotating it leaves the glyph off-centre in its 24px box.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-08-20 16:40:25 -07:00
co-authored by Claude Opus 5
parent db1b81357d
commit 6b4b91eb8d
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/player/components/TimelineGroupHeader.tsx
+7 -4
View File
@@ -116,7 +116,10 @@ export function TimelineGroupHeader({
aria-expanded={isExpanded}
aria-label={`${isExpanded ? "Hide" : "Show"} ${label} tracks`}
title={`${isExpanded ? "Hide" : "Show"} tracks`}
className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[11px] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
// 13px mono, matching the property panel's preset-run caret
// (`hf-fx-preset-run-caret`) — the same disclosure, so the same glyph
// at the same size rather than a smaller one unique to this row.
className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 font-mono text-[13px] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
isExpanded ? "text-white" : "text-white/55 hover:text-white"
}`}
onPointerDown={(event) => event.stopPropagation()}
@@ -125,9 +128,9 @@ export function TimelineGroupHeader({
onToggleExpanded();
}}
>
<span aria-hidden="true" style={{ transform: isExpanded ? "rotate(90deg)" : undefined }}>
▸
</span>
{/* Swapped, not rotated: the panel's caret swaps too, and a rotated
▸ sits off-centre in its box because the glyph is not square. */}
<span aria-hidden="true">{isExpanded ? "▾" : "▸"}</span>
</button>
<GroupNameButton label={label} memberCount={memberCount} onOpenFxRack={onOpenFxRack} />
</div>