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

Show movers next to block switcher #22673

Merged
merged 15 commits into from
Jun 9, 2020
Merged

Show movers next to block switcher #22673

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9e22137
Initial work on unhiding movers.
jasmussen May 27, 2020
5eaf7cd
Make parent button 48x48
jasmussen May 28, 2020
b12f5c2
Handle focus styles.
jasmussen May 28, 2020
ea8f2a2
Horizontal mover polish.
jasmussen May 28, 2020
593240b
Polish drag and drop.
jasmussen May 28, 2020
368a566
Fix issue with just one block.
jasmussen May 29, 2020
b654825
Small refactor.
jasmussen May 29, 2020
c561d70
Switcher + Movers draggable
youknowriad May 29, 2020
9cb984b
Update syntax.
jasmussen May 29, 2020
fd18667
Move the dragging handle to the block toolbar styles.
jasmussen May 29, 2020
1ecb964
specific block clone className
youknowriad May 29, 2020
d0bb0bb
Fix centering when lonesome.
jasmussen May 29, 2020
27e548a
Fix tab-order test
jasmussen Jun 3, 2020
ffe28be
Simplify handle positioning variables.
Jun 8, 2020
cce712f
Remove rounding on drop target.
Jun 8, 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
Prev Previous commit
Next Next commit
Move the dragging handle to the block toolbar styles.
  • Loading branch information
@jasmussen
jasmussen authored and Joen Asmussen committed Jun 8, 2020
commit fd186673bf7452228ab9a69e294027deed2c273d
23 changes: 23 additions & 0 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,3 +103,26 @@
display: block;
}
}

// Show a draggable handle when you're dragging using the toolbar component.
.components-draggable__clone {
margin-top: -$block-toolbar-height; // This puts it closer to the drag handle.

&::before {
content: "";
display: block;
position: absolute;
top: 0;
width: $button-size * 2;
height: $block-toolbar-height;
border-radius: $radius-block-ui;
background-color: $dark-gray-primary;
border: $border-width solid $dark-gray-primary;

// This should be reconsidered if successful.
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgMTYuNWgxMFYxNUg3djEuNXptMC05VjloMTBWNy41SDd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
background-size: $icon-size;
background-repeat: no-repeat;
background-position: center center;
}
}
19 changes: 0 additions & 19 deletions packages/components/src/draggable/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ body.is-dragging-components-draggable {
}

.components-draggable__clone {
margin-top: -$block-toolbar-height; // This puts it closer to the drag handle.
position: fixed;
padding: 20px;
background: transparent;
Expand All @@ -21,22 +20,4 @@ body.is-dragging-components-draggable {
> * {
opacity: 0.8;
}

&::before {
content: "";
display: block;
position: absolute;
top: 0;
width: $button-size * 2;
height: $block-toolbar-height;
border-radius: $radius-block-ui;
background-color: $dark-gray-primary;
border: $border-width solid $dark-gray-primary;

// This should be reconsidered if successful.
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgMTYuNWgxMFYxNUg3djEuNXptMC05VjloMTBWNy41SDd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
background-size: $icon-size;
background-repeat: no-repeat;
background-position: center center;
}
}