Skip to content

fix(tree-view-table-layout): point the collapsed-row chevron right, not left#320

Open
seltzdesign wants to merge 1 commit into
directus-labs:mainfrom
seltzdesign:fix/collapsed-chevron-direction
Open

fix(tree-view-table-layout): point the collapsed-row chevron right, not left#320
seltzdesign wants to merge 1 commit into
directus-labs:mainfrom
seltzdesign:fix/collapsed-chevron-direction

Conversation

@seltzdesign

Copy link
Copy Markdown

Problem

When a row's children are collapsed, the expand chevron points left. The near-universal convention in tree UIs is that a collapsed node points right ("there is hidden content this way, click to expand"), and rotates down to point at the revealed children when expanded. The current direction reads backwards and makes the affordance ambiguous.

Root cause

The base icon is Material's expand_more, which points down. The .children-collapsed state rotates it with transform: rotate(90deg). A positive 90deg rotation (clockwise) takes a down-pointing arrow to point left, which is the wrong direction for "expand me".

Fix

Change the rotation on .children-collapsed from rotate(90deg) to rotate(-90deg) in src/components/table-row.vue. -90deg (counter-clockwise) takes the down-pointing expand_more to point right, matching the standard expand affordance. A comment next to the rule records the intent so the sign is not "corrected" back later.

Verification

Loaded a collection with nested rows: collapsed rows now show a right-pointing chevron, and expanding a row rotates it back down toward the now-visible children. No change to expand/collapse logic, hit area, or any other styling.

Note for reviewers

This PR touches src/components/table-row.vue, but only the CSS transform hunk in the <style> block (the .children-collapsed rule). A separate PR ("feat: shift-click to expand/collapse the entire subtree") also touches this file, but in a different, non-overlapping hunk — the @click emit in the <template>. The two changes are independent and do not conflict.

…ot left

The expand_more icon points down; the .children-collapsed state rotated it +90deg
(clockwise), which points it LEFT. Collapsed nodes should point RIGHT (the universal
'expand me' affordance). Use rotate(-90deg) so it points right; expanding rotates it back
down toward the revealed children.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant