Skip to content

Commit

Permalink
Grid alignment buttons (#6413)
Browse files Browse the repository at this point in the history
**Problem:**

The alignment buttons at the top of the inspector could be repurposed to
also be useful when dealing with self align/justify for grids and flex.

**Fix:**

This PR does a bunch of things:

1. Rename the `T` and `L` labels in the frame positioning to `X` and `Y`
2. Move the alignment buttons from the top of the editor to above the
`X` and `Y` controls, splitting them into two chain controls
3. Make those buttons control the positioning for flow elements, as well
as controlling justify self/align self for flex or grid children
4. Make those buttons display the current state of the property they're
controlling
5. Make those buttons unset the property if they are clicked again while
active
6. Add a context menu to the right of the buttons to unset the values
(the entry will only show if there _are_ set values) as well as
distribute horizontally/vertically
7. Adjust the radix dropdown menu items so that they are less opaque
when disabled



https://github.com/user-attachments/assets/e749df9a-a94c-4844-ad0e-cbfecf81d08e

## 👀 For the kind reviewers 👀
The actual meat of this PR is in
`editor/src/components/editor/actions/actions.tsx` and
`editor/src/components/inspector/alignment-buttons.tsx`.

Fixes #6412
  • Loading branch information
ruggi authored Sep 26, 2024
1 parent 26dcb89 commit cb8c0f2
Show file tree
Hide file tree
Showing 18 changed files with 1,678 additions and 212 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ Object {
"specialSizeMeasurements": Object {
"alignContent": null,
"alignItems": null,
"alignSelf": null,
"borderRadius": null,
"clientHeight": 0,
"clientWidth": 0,
Expand Down Expand Up @@ -219,6 +220,7 @@ Object {
},
"immediateParentProvidesLayout": true,
"justifyContent": null,
"justifySelf": null,
"layoutSystemForChildren": null,
"margin": Object {},
"naturalHeight": null,
Expand Down Expand Up @@ -307,6 +309,7 @@ Object {
"specialSizeMeasurements": Object {
"alignContent": null,
"alignItems": null,
"alignSelf": null,
"borderRadius": null,
"clientHeight": 0,
"clientWidth": 0,
Expand Down Expand Up @@ -366,6 +369,7 @@ Object {
},
"immediateParentProvidesLayout": true,
"justifyContent": null,
"justifySelf": null,
"layoutSystemForChildren": null,
"margin": Object {},
"naturalHeight": null,
Expand Down
Loading

0 comments on commit cb8c0f2

Please sign in to comment.