Minimize layer panel height + fixes for expanding/collapsing#704
Minimize layer panel height + fixes for expanding/collapsing#704
Conversation
|
Size Change: +296 B (0%) Total Size: 499 kB
ℹ️ View Unchanged
|
swissspidy
left a comment
There was a problem hiding this comment.
Works well!
One thought:
Does it make sense to support cancelling the manually set height again somehow? I was thinking that a double click on the drag handle could set setManuallyChanged(false) again.
Thoughts?
|
Created #717 for my double click suggestion. |
|
this is cool! |
barklund
left a comment
There was a problem hiding this comment.
Looks good, just a minor concern.
| useEffect(() => { | ||
| if (height === 0 && isCollapsed === false) { | ||
| collapse(); | ||
| } | ||
| }, [collapse, height, isCollapsed]); |
There was a problem hiding this comment.
This seems a bit disruptive. When you drag it too low, you can't drag it back up again, as the drag handle is now completely missing. Could we maybe only do this on release in the drag handler?
There was a problem hiding this comment.
Rethought the entire interaction, please see last commit
|
@dvoytenko @barklund I've re-thought the collapse/expand interaction and introduced a new state that preserves the height before collapsing, which should make the experience better for both tapping the collapse button or manually collapsing by dragging. |
|
Tests failing due to: |
Awesome that the test caught that! Fixed :)) |
barklund
left a comment
There was a problem hiding this comment.
One minor comment and needs testing. Otherwise looks and feels good.
| `; | ||
|
|
||
| function Panel({ initialHeight, name, children }) { | ||
| function Panel({ resizeable, initialHeight, name, children }) { |
There was a problem hiding this comment.
I'd really like to see all this new functionality integration tested in a functioning panel with clicks, drags, etc.
There was a problem hiding this comment.
Filed #840 for this since it might take some time and this PR is blocking two others
* master: Update list of Google Fonts Bump babel-jest from 25.2.3 to 25.2.4 (#851) Resize video while resizing (#804) Bump @wordpress/components from 9.2.5 to 9.2.6 (#839) Bump eslint-plugin-testing-library from 2.2.3 to 3.0.0 (#849) Bump react-moveable from 0.18.1 to 0.19.0 (#850) Bump lint-staged from 10.0.9 to 10.0.10 Bump eslint-plugin-import from 2.20.1 to 2.20.2 (#846) Auto-select entire input field on focus (#811) Disallow masking for background. (#827) Reduce timing difference for entering edit mode. (#829) Clicking on media in the gallery should never insert as background (#841) Bump @testing-library/dom from 7.1.2 to 7.1.3 (#843) Reorderable drag and drop component (#709) Minimize layer panel height + fixes for expanding/collapsing (#704) remove lingering extra styled component import comment adding tests for which icon is present on chip bookmark some clean up bookmark chip ui component. 2 sizes controlled by constants.js. Storybook + a very basic test Template Animations: Added float-on animation (#618)
|
Added to alpha branch |
* Adapt initial layer panel height to layer numbers * Support double click on layer panel drag handle to reset height (#717) * Added maximum initial layer number to show * Rethink collapse/expand logic * Fixed issue that broke tests * Double click expands the panel Co-authored-by: Pascal Birchler <pascalb@google.com>
Following a discussion with @samitron7 the layer panel should occupy as little space as possible.
Changes
Before:
After:
