Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try: Don't show a clone when dragging. #23024

Merged
merged 10 commits into from
Jun 25, 2020
+188 −53
Merged

Try: Don't show a clone when dragging. #23024

Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
430b3f4
Try: Don't show a clone when dragging.
jasmussen Jun 9, 2020
1f1e7f1
Hide the block being moved.
jasmussen Jun 9, 2020
4f33631
Remove clone, add shadow, polish comments.
jasmussen Jun 22, 2020
5833bd8
Add DraggableChip experience to block-draggable
Jun 22, 2020
5b2804c
Hide dragging block to emulate a "lift" effect
Jun 22, 2020
5ea0934
Only show the grab cursor when drag and drop is possible.
jasmussen Jun 23, 2020
8b58379
Remove dead JS.
jasmussen Jun 23, 2020
5b124ee
Polish chip.
Jun 25, 2020
646274d
Polish DraggableChip
ellatrix Jun 25, 2020
75ee742
Leave clone logic
ellatrix Jun 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions packages/components/src/draggable/style.scss
View file
Original file line number Diff line number Diff line change
@@ -18,9 +18,13 @@ body.is-dragging-components-draggable {
z-index: z-index(".components-draggable__clone");
opacity: 0.7;

// Hide the actual clone. If this experiment is successful, we'll want to actually remove the clone entirely.
> * {
// This needs specificity as a theme is meant to define these by default.
margin-top: 0 !important;
margin-bottom: 0 !important;
display: none;
}
}

// This is only for testing.
.is-dragging.is-selected {
display: none !important;
Copy link

Choose a reason for hiding this comment

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

did you try with opacity: .5 instead here? Would work much better with for example reordering columns.

Copy link
Contributor Author

@jasmussen jasmussen Jun 25, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

We tried with opacity: 0.7.

As I see it, there are two paths forward:

  1. Go with the more radical solution of pulling the block out of the flow, literally lifting it off the page. This benefits very big blocks which take up a lot of vertical space, but can cause jumpiness.
  2. Go with the opacity change, and the chip, which is still an improvement over what we're shipping, but does not have the space saving benefits.

Honestly I think we should get option 1 in good shape, try it in the plugin, and then go with option 2 if we find after using it that the jump is jarring.

}