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

Add more resizing handles #3023

Merged
merged 30 commits into from
Aug 21, 2019
Merged

Add more resizing handles #3023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
6539dc8
Make resizable-box styles more explicit
swissspidy Aug 13, 2019
4b8d90a
Enable all resizing handles for testing
swissspidy Aug 13, 2019
5ebb4ba
Update width/height calculation when resizing from top or left
swissspidy Aug 13, 2019
32c040d
Fix typo in docblock
swissspidy Aug 13, 2019
3f2a6ee
Merge branch 'develop' into add/more-rotation-handles
swissspidy Aug 13, 2019
666fd92
Move some resize helpers to separate file closer to the component
swissspidy Aug 14, 2019
3726456
Handle all edges when not rotated.
miina Aug 16, 2019
c4349a4
Start adding logic for handling rotation.
miina Aug 16, 2019
905d732
Merge branch 'develop' into add/more-rotation-handles
swissspidy Aug 16, 2019
31944ca
Resolve merge conflicts.
miina Aug 16, 2019
0d64be1
Merge branch 'add/more-rotation-handles' of github.com:ampproject/amp…
miina Aug 16, 2019
05d0795
Move constants to contsants.
miina Aug 16, 2019
9e30d6e
Fix style issues from merge.
miina Aug 16, 2019
46a1326
Adjust logic for topRight corner
miina Aug 19, 2019
fbdf271
Move blockPositioning helper to resizing helpers file.
miina Aug 19, 2019
5c3e7db
Add bottomLeft corner resizing logic.
miina Aug 19, 2019
45e91b4
Move position calculation logic to helpers file.
miina Aug 19, 2019
8045e5a
Improve styling for rotatable and resizable boxes
swissspidy Aug 19, 2019
0729544
Restrict block positioning when min height/width have been reached.
miina Aug 19, 2019
c64462c
Fix odd behavior when resizing small.
miina Aug 19, 2019
7f91e80
Start adding tests.
miina Aug 20, 2019
5b4fa2d
Add test for resizing to min width and height.
miina Aug 20, 2019
fd98b22
Add test for keeping the position when trying to resize with min width.
miina Aug 20, 2019
b6b17c7
Add test for resizing from topleft corner.
miina Aug 20, 2019
a831e1c
Add tests for rotated Text block.
miina Aug 20, 2019
1a68a61
Add a few tests for Author block, too.
miina Aug 20, 2019
680c731
Update tests and test config
swissspidy Aug 20, 2019
1a72f09
Don’t import from React
swissspidy Aug 20, 2019
d259361
Extract and rename test helpers
swissspidy Aug 20, 2019
38f1ead
Merge branch 'develop' into add/more-rotation-handles
swissspidy Aug 20, 2019
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
11 changes: 8 additions & 3 deletions assets/src/stories-editor/blocks/amp-story-page/edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,13 +107,18 @@
z-index: 100;
}

.block-editor-block-list__layout .block-editor-block-list__block.amp-page-inactive > .block-editor-block-list__block-edit::before {
.block-editor-block-list__block.amp-page-inactive > .block-editor-block-list__block-edit::before {
box-shadow: none;
border: 1px solid #e3e5e7;
}

.block-editor-block-list__layout .block-editor-block-list__block.amp-page-active > .block-editor-block-list__block-edit::before,
.block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit::before {
/* todo: show border also when is-resizing */
.block-editor-block-list__block.amp-page-active > .block-editor-block-list__block-edit::before,
.block-editor-block-list__block.amp-page-active.is-selected > .block-editor-block-list__block-edit::before,
.block-editor-block-list__block.amp-page-active.has-child-selected > .block-editor-block-list__block-edit::before,
.block-editor-inner-blocks .wp-block:hover .block-editor-block-list__block-edit::before,
.block-editor-inner-blocks .wp-block.is-rotating .block-editor-block-list__block-edit::before,
.block-editor-inner-blocks .wp-block.is-selected .block-editor-block-list__block-edit::before {
box-shadow: none;
border: 1px solid rgba(66, 88, 99, .4);
}
Expand Down
29 changes: 0 additions & 29 deletions assets/src/stories-editor/blocks/amp-story-text/edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,39 +34,10 @@
opacity: 0.62;
}

.wp-block[data-type="amp/amp-story-text"] .amp-story-resize-container .components-resizable-box__handle-right {
right: -13px;
}

.wp-block[data-type="amp/amp-story-text"] .amp-story-resize-container .components-resizable-box__handle-right::before {
margin: 0;
}

.wp-block[data-type="amp/amp-story-text"] .amp-story-resize-container .components-resizable-box__handle-bottom {
width: 50px;
left: calc(50% - 25px);
}

.amp-story-text__resize-container .components-resizable-box__handle-bottom::before {
margin: 0 auto;
}

.editor-styles-wrapper #amp-story-editor .wp-block .wp-block[data-type="amp/amp-story-text"] {
width: initial;
}

.wp-block[data-type="amp/amp-story-text"] .components-resizable-box__handle,
.wp-block.is-typing[data-type="amp/amp-story-text"] .components-resizable-box__handle {
display: block;
opacity: 0;
transition: opacity .3s;
}

.wp-block[data-type="amp/amp-story-text"]:hover .components-resizable-box__handle,
.wp-block[data-type="amp/amp-story-text"] .components-resizable-box__handle:hover {
opacity: 100;
}

.wp-block[data-type="amp/amp-story-text"] .block-editor-rich-text__editable,
div[data-type="amp/amp-story-page"] .block-editor-inner-blocks .block-editor-block-list__block-edit {
display: inline-block;
Expand Down
2 changes: 0 additions & 2 deletions assets/src/stories-editor/components/higher-order/with-amp-story-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,6 @@ export default createHigherOrderComponent(
clientId,
name,
attributes,
isSelected,
isLast,
isFirst,
currentBlockPosition,
Expand Down Expand Up @@ -248,7 +247,6 @@ export default createHigherOrderComponent(
{ ( ! isMovableBlock ) && ( <BlockEdit { ...props } /> ) }
{ isMovableBlock && ! isEmptyImageBlock && needsResizing && (
<ResizableBox
isSelected={ isSelected }
width={ width }
height={ height }
angle={ rotationAngle }
Expand Down
12 changes: 12 additions & 0 deletions ...-editor/components/inserter/tests/menu.js → ...s-editor/components/inserter/test/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const textItem = {
category: 'common',
isDisabled: false,
utility: 1,
hasChildBlocksWithInserterSupport: false,
};

const advancedTextItem = {
Expand All @@ -28,6 +29,7 @@ const advancedTextItem = {
category: 'common',
isDisabled: false,
utility: 1,
hasChildBlocksWithInserterSupport: false,
};

const someOtherItem = {
Expand All @@ -38,6 +40,7 @@ const someOtherItem = {
category: 'common',
isDisabled: false,
utility: 1,
hasChildBlocksWithInserterSupport: false,
};

const moreItem = {
Expand All @@ -48,6 +51,7 @@ const moreItem = {
category: 'layout',
isDisabled: true,
utility: 0,
hasChildBlocksWithInserterSupport: false,
};

const youtubeItem = {
Expand All @@ -59,6 +63,7 @@ const youtubeItem = {
keywords: [ 'google' ],
isDisabled: false,
utility: 0,
hasChildBlocksWithInserterSupport: false,
};

const textEmbedItem = {
Expand All @@ -69,6 +74,7 @@ const textEmbedItem = {
category: 'embed',
isDisabled: false,
utility: 0,
hasChildBlocksWithInserterSupport: false,
};

const reusableItem = {
Expand All @@ -79,6 +85,7 @@ const reusableItem = {
category: 'reusable',
isDisabled: false,
utility: 0,
hasChildBlocksWithInserterSupport: false,
};

const items = [
Expand All @@ -92,11 +99,16 @@ const items = [
];

const DEFAULT_PROPS = {
instanceId: 1,
position: 'top center',
items,
onSelect: noop,
debouncedSpeak: noop,
fetchReusableBlocks: noop,
setTimeout: noop,
showInsertionPoint: noop,
hideInsertionPoint: noop,
rootChildBlocks: [],
};

const getWrapperForProps = ( propOverrides ) => {
Expand Down
58 changes: 29 additions & 29 deletions assets/src/stories-editor/components/resizable-box/edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,43 @@
.amp-story-resize-container .components-resizable-box__handle-right {
right: -14px;
height: 50px;
top: calc(50% - 25px);
.amp-story-resize-container .components-resizable-box__handle {
display: block;
opacity: 0;
transition: opacity .3s;
}

.amp-story-resize-container .components-resizable-box__handle-right::before {
margin: 0;
.block-editor-inner-blocks .wp-block.is-typing .amp-story-resize-container .components-resizable-box__handle {
opacity: 0;
}

.block-editor-inner-blocks .wp-block:hover .amp-story-resize-container .components-resizable-box__handle,
.block-editor-inner-blocks .wp-block.is-selected .amp-story-resize-container .components-resizable-box__handle,
.block-editor-inner-blocks .wp-block .amp-story-resize-container.is-resizing .components-resizable-box__handle {
opacity: 1;
}

.amp-story-resize-container .components-resizable-box__handle-top {
top: -14px !important;
}

.amp-story-resize-container .components-resizable-box__handle-right {
right: -14px !important;
}

.amp-story-resize-container .components-resizable-box__handle-bottom {
bottom: -14px;
width: 50px;
left: calc(50% - 25px);
bottom: -14px !important;
}

.amp-story-resize-container .components-resizable-box__handle-left {
left: -14px !important;
}

.amp-story-editor__rotate-container .components-resizable-box__handle {
display: none !important;
}

.amp-story-resize-container .amp-story-editor__rotate-container {
height: 100%;
}

.wp-block-image .components-resizable-box__container img {
height: 100%;
object-fit: cover;
Expand All @@ -30,23 +50,3 @@
.block-editor-block-list__block[data-type="core/image"] img {
-webkit-user-drag: none;
}

.amp-story-resize-container .components-resizable-box__handle-bottom::before {
margin: 0 auto;
}

.amp-story-resize-container .amp-story-editor__rotate-container {
height: 100%;
}

.wp-block .components-resizable-box__handle,
.wp-block.is-typing .components-resizable-box__handle {
display: block;
opacity: 0;
transition: opacity .3s;
}

.wp-block.amp-page-active .wp-block:hover .components-resizable-box__handle,
.wp-block.amp-page-active .wp-block .components-resizable-box__handle:hover {
opacity: 1;
}
Loading