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

[RNMobile] Adjust new borders implementations to columns PR #21073

Merged
merged 33 commits into from
Mar 26, 2020
Merged

[RNMobile] Adjust new borders implementations to columns PR #21073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
1acf841
first working version - w/o media text
dratwas Mar 10, 2020
ea78723
fix not visible borders
dratwas Mar 11, 2020
21f11c8
Merge branch 'master' into rnmobile/block-borders
dratwas Mar 12, 2020
db92a0c
TMP media-text
dratwas Mar 13, 2020
b337fb4
move inline styles to styles file
dratwas Mar 13, 2020
413e4a7
Working version with media text
dratwas Mar 13, 2020
cf924e8
Remove unused styles
dratwas Mar 16, 2020
cfca28e
fix toolbar styles
dratwas Mar 16, 2020
87e493a
use variable in floating toolbar style
dratwas Mar 16, 2020
5cc2190
fix cover block
dratwas Mar 16, 2020
89873ba
fix base variables
dratwas Mar 16, 2020
e14e8ca
add basic horizontal support
dratwas Mar 17, 2020
4268f57
change approach and use negative margins
dratwas Mar 19, 2020
69eec82
fix appender in empty group
dratwas Mar 19, 2020
67bb907
Merge branch 'rnmobile/block-borders' into rnmobile/column-block-borders
dratwas Mar 20, 2020
55c6e17
new approach of borders
dratwas Mar 23, 2020
a760d74
Fix appender
dratwas Mar 23, 2020
2f9ec61
fix toolbar margin
dratwas Mar 23, 2020
e966382
Merge branch 'master' into rnmobile/block-borders
dratwas Mar 24, 2020
39eb44a
add comment and move borders spacing val to consts
dratwas Mar 25, 2020
316f79d
fix media-text and remove unused props form withSelect in block
dratwas Mar 25, 2020
295c391
remove not needed overflow visible
dratwas Mar 25, 2020
9b27c32
Merge branch 'master' into rnmobile/block-borders
dratwas Mar 25, 2020
a1479e5
add style mock
dratwas Mar 25, 2020
9599f88
Merge remote-tracking branch 'origin/master' into rnmobile/column-block
jbinda Mar 25, 2020
f1b7c0f
Merge branch 'rnmobile/column-block' into rnmobile/column-block-borders
jbinda Mar 25, 2020
41fda77
Merge branch 'rnmobile/block-borders' into rnmobile/column-block-borders
jbinda Mar 25, 2020
be8b42c
remove block-mobile-toolbar
jbinda Mar 25, 2020
de9ad00
Merge branch 'rnmobile/column-block' into rnmobile/column-block-borders
jbinda Mar 25, 2020
58b1e39
Merge branch 'rnmobile/column-block' into rnmobile/column-block-borders
jbinda Mar 25, 2020
cba5e96
strech Column placeholder when parent is not selected
jbinda Mar 25, 2020
3047ea8
remove duplicate scss classes
jbinda Mar 26, 2020
7f6f069
fix crop borders on Android
jbinda Mar 26, 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
9 changes: 0 additions & 9 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,15 +91,6 @@ $block-selected-padding: 0;
$block-selected-child-margin: 5px;
$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;

$block-selected-child-border-width: 1px;
$block-selected-child-padding: 0;
$block-selected-child-to-content: $block-selected-to-content - $block-selected-child-margin - $block-selected-child-border-width;
$block-custom-appender-to-content: $block-selected-margin - $block-selected-border-width;
$block-media-container-to-content: $block-selected-child-margin + $block-selected-border-width;
$block-selected-vertical-margin-descendant: 2 * $block-selected-to-content;
$block-selected-vertical-margin-child: $block-edge-to-content;
$block-toolbar-margin: $block-selected-margin + $block-selected-border-width;
jbinda marked this conversation as resolved.
Show resolved Hide resolved

/**
* Border radii.
*/
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-list/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ export class BlockList extends Component {
keyboardShouldPersistTaps="always"
scrollViewStyle={ {
flex: isRootList ? 1 : 0,
...( ! isRootList && { overflow: 'visible' } ),
jbinda marked this conversation as resolved.
Show resolved Hide resolved
} }
data={ blockClientIds }
keyExtractor={ identity }
Expand Down
2 changes: 0 additions & 2 deletions packages/block-editor/src/components/block-mobile-toolbar/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
flex-direction: row;
height: $mobile-block-toolbar-height;
align-items: flex-start;
margin-left: $block-toolbar-margin;
margin-right: $block-toolbar-margin;
}

.spacer {
Expand Down
101 changes: 13 additions & 88 deletions packages/block-library/src/column/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,6 @@ function ColumnEdit( {
isSelected,
getStylesFromColorScheme,
isParentSelected,
isDescendantOfParentSelected,
isDescendantSelected,
isAncestorSelected,
customBlockProps,
} ) {
const { verticalAlignment } = attributes;
Expand All @@ -40,69 +37,11 @@ function ColumnEdit( {
const minWidth = Math.min( containerWidth, containerMaxWidth );
const columnBaseWidth = minWidth / Math.max( 1, columnsInRow );

const applyBlockStyle = ( placeholder = false ) => {
const pullWidths = ( names ) =>
names.map(
( name ) =>
( styles[ `column-${ name }-margin` ] || {} ).width || 0
);

const applyBlockStyle = () => {
let width = columnBaseWidth;
const names = [
'selected',
'parent-selected',
'descendant-selected',
'placeholder-selected',
'dashed-border',
];
const widths = pullWidths( names );
const [
emptyColumnSelected,
parentSelected,
columnSelected,
placeholderParentSelected,
dashedBorderWidth,
] = widths;

switch ( true ) {
case isSelected:
width = columnBaseWidth;
width -= ! hasChildren
? emptyColumnSelected
: columnSelected + dashedBorderWidth;
break;

case isParentSelected:
width -= placeholder
? placeholderParentSelected
: parentSelected;
break;

case isDescendantSelected:
width = columnBaseWidth;
break;

case isDescendantOfParentSelected:
width = columnBaseWidth;
if ( ! hasChildren ) width -= emptyColumnSelected;
break;

case isAncestorSelected:
width = columnBaseWidth;
if ( ! hasChildren ) width -= parentSelected;
break;

case placeholder:
width -=
columnsInRow === 1
? parentSelected
: placeholderParentSelected;
width -=
columnSelected +
( columnsInRow === 1 ? parentSelected : dashedBorderWidth );
break;

default:
if ( columnsInRow > 1 ) {
const margins = columnsInRow * 2 * styles.columnMargin.marginLeft;
width = ( minWidth - margins ) / Math.max( 1, columnsInRow );
Comment on lines +42 to +44
Copy link
Contributor

Choose a reason for hiding this comment

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

I have checked and this also works for more than 2 columnsInRow.

However we need to implement ideal version of FloatingToolbar because it breaks the layout when there is no enough space (it has minWIdth and the Column container is stretch to this sizes - see below screen). It's not something we need to change here just as reminder)

Unselected Columns layout

Selected Column with broken Columns layout

Selected Column with proper Columns layout after disable FloatingToolbar

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes it's known issue and exists also in buttons block

}

return { width };
Expand All @@ -121,11 +60,8 @@ function ColumnEdit( {
styles.columnPlaceholder,
styles.columnPlaceholderDark
),
applyBlockStyle( true ),
{
...styles.marginVerticalDense,
...styles.marginHorizontalNone,
},
applyBlockStyle(),
styles.columnPlaceholderNotSelected,
] }
></View>
);
Expand All @@ -140,10 +76,16 @@ function ColumnEdit( {
isCollapsed={ false }
/>
</BlockControls>
<View style={ applyBlockStyle() }>
<View
style={ [
applyBlockStyle(),
isSelected && hasChildren && styles.innerBlocksBottomSpace,
] }
>
<InnerBlocks
flatListProps={ {
scrollEnabled: false,
style: styles.innerBlocks,
} }
renderAppender={
isSelected && InnerBlocks.ButtonBlockAppender
Expand Down Expand Up @@ -175,7 +117,6 @@ function ColumnEditWrapper( props ) {
export default compose( [
withSelect( ( select, { clientId } ) => {
const {
getBlockParents,
getBlockCount,
getBlockRootClientId,
getSelectedBlockClientId,
Expand All @@ -190,26 +131,10 @@ export default compose( [
const isParentSelected =
selectedBlockClientId && selectedBlockClientId === parentId;

const selectedParents = selectedBlockClientId
? getBlockParents( selectedBlockClientId )
: [];
const isDescendantOfParentSelected = selectedParents.includes(
parentId
);

const parents = getBlockParents( clientId, true );

const isAncestorSelected =
selectedBlockClientId && parents.includes( selectedBlockClientId );
const isDescendantSelected = selectedParents.includes( clientId );

return {
hasChildren,
isParentSelected,
isSelected,
isDescendantOfParentSelected,
isAncestorSelected,
isDescendantSelected,
};
} ),
withPreferredColorScheme,
Expand Down
43 changes: 13 additions & 30 deletions packages/block-library/src/column/editor.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
.columnPlaceholderNotSelected {
padding-top: $block-selected-to-content;
}

.columnPlaceholder {
flex: 1;
padding: $block-selected-to-content;
background-color: $white;
border: $border-width dashed $gray;
Expand All @@ -10,44 +15,18 @@
border: $border-width dashed $gray-70;
}

.marginVerticalDense {
margin-top: $block-selected-child-to-content;
margin-bottom: $block-selected-child-to-content;
.innerBlocks {
overflow: visible;
}

.marginHorizontalNone {
margin-left: 0;
margin-right: 0;
.innerBlocksBottomSpace {
margin-bottom: $block-selected-to-content;
}

.columns-container {
max-width: $content-width;
}

.column-container-base {
max-width: $content-width - 2 * ( $block-selected-margin + $block-selected-border-width );
}

.column-placeholder-selected-margin {
width: 2 * $block-selected-to-content;
}

.column-parent-selected-margin {
width: $block-selected-to-content;
}

.column-selected-margin {
width: 2 * $block-edge-to-content;
}

.column-descendant-selected-margin {
width: 2 * $block-selected-margin;
}

.column-dashed-border-margin {
width: 2 * $block-selected-border-width;
}

.is-vertically-aligned-top {
justify-content: flex-start;
}
Expand All @@ -63,3 +42,7 @@
.flexBase {
flex: 1;
}

.columnMargin {
margin: $block-edge-to-content / 2;
}
8 changes: 3 additions & 5 deletions packages/block-library/src/columns/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ function ColumnsEditContainer( {
isCollapsed={ false }
/>
</BlockControls>
<View>
<View style={ isSelected && styles.innerBlocksSelected }>
{ resizeListener }
<InnerBlocks
renderAppender={ renderAppender }
Expand All @@ -132,12 +132,10 @@ function ColumnsEditContainer( {
: undefined
}
flatListProps={ {
contentContainerStyle: {
...styles.columnsContainer,
maxWidth: width,
},
contentContainerStyle: styles.columnsContainer,
horizontal: true,
scrollEnabled: false,
style: styles.innerBlocks,
} }
allowedBlocks={ ALLOWED_BLOCKS }
customBlockProps={ {
Expand Down
36 changes: 11 additions & 25 deletions packages/block-library/src/columns/editor.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,17 @@
.columnsPlaceholder {
padding: 12px;
margin-bottom: 12px;
background-color: $white;
border: $border-width dashed $gray;
border-radius: 4px;
}

.columnsPlaceholderDark {
background-color: $black;
border: $border-width dashed $gray-70;
}

.marginVerticalDense {
margin-top: $block-selected-child-margin;
margin-bottom: $block-selected-child-margin;
}

.marginHorizontalNone {
margin-left: 0;
margin-right: 0;
}

.columnsContainer {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
justify-content: space-between;
align-items: stretch;
max-width: $content-width;
overflow: hidden;
overflow: visible;
width: 100%;
}

.innerBlocks {
overflow: visible;
}

.innerBlocksSelected {
margin-bottom: $block-edge-to-content;
}