Skip to content

Reorderable drag and drop component#709

Merged
wassgha merged 6 commits intomasterfrom
refactor/reorder
Mar 27, 2020
Merged

Reorderable drag and drop component#709
wassgha merged 6 commits intomasterfrom
refactor/reorder

Conversation

@wassgha
Copy link
Copy Markdown
Contributor

@wassgha wassgha commented Mar 23, 2020

Closes #764
Partial to #746
Partial to #332
Partial to #517

This refactors/rethinks the layer re-ordering component into three generic components: <Reorderable> (a container of sortable elements), <ReorderableSeparator> and <ReorderableItem>. The refactor is currently only used in the layers panel, in a second PR it will be used for the GridView and the carousel thumbnails in order to deprecate the current DropZone component.

/cc @dvoytenko @barklund

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 23, 2020

Size Change: +222 B (0%)

Total Size: 499 kB

Filename Size Change
assets/js/edit-story.js 429 kB +222 B (0%)
ℹ️ View Unchanged
Filename Size Change
assets/css/edit-story.css 3.01 kB 0 B
assets/css/stories-dashboard.css 206 B 0 B
assets/js/stories-dashboard.js 66.4 kB 0 B

compressed-size-action

@swissspidy swissspidy added the Type: Enhancement New feature or improvement of an existing feature label Mar 23, 2020
Copy link
Copy Markdown
Contributor

@dvoytenko dvoytenko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only question is whether we should get #551 in for this.

@wassgha
Copy link
Copy Markdown
Contributor Author

wassgha commented Mar 24, 2020

Up to @barklund

Copy link
Copy Markdown
Contributor

@barklund barklund left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great, just a few nits. Let's get this in first, I'll rework #551 in this new generalized context.

<Panel name="layers" initialHeight={DEFAULT_LAYERS_VISIBLE * LAYER_HEIGHT}>
<Panel
name="layers"
initialHeight={(layers?.length || DEFAULT_LAYERS_VISIBLE) * LAYER_HEIGHT}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this aligned with @samitron7? The design originally called for always 6 initial rows. We have #227 too, by the way, which is then fixed by this issue?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tagging @samitron7 here but from our discussion it seemed like she wanted it to vary by number of items more than page size

Copy link
Copy Markdown
Contributor

@barklund barklund left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@wassgha wassgha merged commit a55c31c into master Mar 27, 2020
@wassgha wassgha deleted the refactor/reorder branch March 27, 2020 18:25
obetomuniz added a commit that referenced this pull request Mar 30, 2020
* 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Type: Enhancement New feature or improvement of an existing feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Issue when reordering layers

5 participants