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 16 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
8 changes: 0 additions & 8 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,15 +86,7 @@ $block-selected-margin: 3px;
$block-selected-border-width: 1px;
$block-selected-padding: 0;
$block-selected-child-margin: 5px;
$block-selected-child-border-width: 1px;
$block-selected-child-padding: 0;
$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
$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


/**
Expand Down
134 changes: 32 additions & 102 deletions packages/block-editor/src/components/block-list/block.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,106 +80,6 @@ class BlockListBlock extends Component {
);
}

applySelectedBlockStyle() {
const { hasChildren, getStylesFromColorScheme } = this.props;

const fullSolidBorderStyle = {
// define style for full border
...styles.fullSolidBordered,
...getStylesFromColorScheme(
styles.solidBorderColor,
styles.solidBorderColorDark
),
};

if ( hasChildren ) {
// if block has children apply style for selected parent
return { ...styles.selectedParent, ...fullSolidBorderStyle };
}

/* selected block is one of below:
1. does not have children
2. is not on root list level
3. is an emty group block on root or nested level */
return { ...styles.selectedLeaf, ...fullSolidBorderStyle };
}

applyUnSelectedBlockStyle() {
const {
hasChildren,
isParentSelected,
isAncestorSelected,
hasParent,
getStylesFromColorScheme,
isLastBlock,
} = this.props;

// if block does not have parent apply neutral or full
// margins depending if block has children or not
if ( ! hasParent ) {
return hasChildren ? styles.neutral : styles.full;
}

if ( isParentSelected ) {
// parent of a block is selected
const dashedBorderStyle = {
// define style for dashed border
...styles.dashedBordered,
...getStylesFromColorScheme(
styles.dashedBorderColor,
styles.dashedBorderColorDark
),
};

// return apply childOfSelected or childOfSelectedLeaf
// margins depending if block has children or not
return {
...( hasChildren
? styles.childOfSelected
: styles.childOfSelectedLeaf ),
...dashedBorderStyle,
...( ( ! isLastBlock || this.props.name === 'core/column' ) &&
styles.marginVerticalChild ),
};
}

if ( isAncestorSelected ) {
// ancestor of a block is selected
return {
...styles.descendantOfSelectedLeaf,
...( hasChildren && {
...styles.marginHorizontalNone,
...styles.marginVerticalNone,
} ),
...( ! isLastBlock && styles.marginVerticalDescendant ),
};
}

// if none of above condition are met return apply neutral or full
// margins depending if block has children or not
return hasChildren ? styles.neutral : styles.full;
}

applyBlockStyle() {
const { isSelected, isDimmed, name } = this.props;

return [
isSelected
? this.applySelectedBlockStyle()
: this.applyUnSelectedBlockStyle(),
isDimmed && styles.dimmed,
name === 'core/column' && { flex: 1 },
];
}

applyToolbarStyle() {
const { hasChildren, isUnregisteredBlock } = this.props;

if ( ! hasChildren || isUnregisteredBlock ) {
return styles.neutralToolbar;
}
}

render() {
const {
attributes,
Expand All @@ -191,12 +91,17 @@ class BlockListBlock extends Component {
order,
title,
parentId,
isDimmed,
isTouchable,
customOnDelete,
horizontalDirection,
hasParent,
isParentSelected,
onSelect,
showFloatingToolbar,
getStylesFromColorScheme,
marginVertical,
marginHorizontal,
} = this.props;

const accessibilityLabel = getAccessibleBlockLabel(
Expand Down Expand Up @@ -233,8 +138,33 @@ class BlockListBlock extends Component {
<View
pointerEvents={ isTouchable ? 'auto' : 'box-only' }
accessibilityLabel={ accessibilityLabel }
style={ this.applyBlockStyle() }
style={ [
{ marginVertical, marginHorizontal, flex: 1 },
isDimmed && styles.dimmed,
] }
>
{ isSelected && (
<View
style={ [
styles.solidBorder,
getStylesFromColorScheme(
styles.solidBorderColor,
styles.solidBorderColorDark
),
] }
/>
) }
{ isParentSelected && (
<View
style={ [
styles.dashedBorder,
getStylesFromColorScheme(
styles.dashedBorderColor,
styles.dashedBorderColorDark
),
] }
/>
) }
{ isValid ? (
this.getBlockForType()
) : (
Expand All @@ -243,7 +173,7 @@ class BlockListBlock extends Component {
icon={ icon }
/>
) }
<View style={ this.applyToolbarStyle() }>
<View style={ styles.neutralToolbar }>
{ isSelected && (
<BlockMobileToolbar
clientId={ clientId }
Expand Down
101 changes: 24 additions & 77 deletions packages/block-editor/src/components/block-list/block.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,6 @@
flex: 1 1 auto;
}

.fullSolidBordered {
border-width: $block-selected-border-width;
border-radius: 4px;
border-style: solid;
}

.dashedBordered {
border-width: $block-selected-child-border-width;
border-radius: 2px;
border-style: dashed;
}

.solidBorderColor {
border-color: $blue-wordpress;
}
Expand All @@ -34,76 +22,13 @@
opacity: 0.2;
}

.horizontalSpaceNone {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}

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

.marginVerticalDescendant {
margin-bottom: $block-selected-vertical-margin-descendant;
}

.marginVerticalChild {
margin-bottom: $block-selected-vertical-margin-child;
}

.marginVerticalNone {
margin-top: 0;
margin-bottom: 0;
}

.blockTitle {
background-color: $gray;
padding-left: 8px;
padding-top: 4px;
padding-bottom: 4px;
}

.neutral {
margin: 0;
border: 0;
padding: 0;
}

.full {
margin: $block-edge-to-content;
border: 0;
padding: 0;
}

.selectedLeaf {
margin: $block-selected-margin;
padding-left: $block-selected-to-content;
padding-right: $block-selected-to-content;
padding-top: $block-selected-to-content;
}

.selectedParent {
margin: $block-selected-margin;
padding: 0;
}

.childOfSelected {
margin: $block-selected-child-margin;
padding: 0;
}

.childOfSelectedLeaf {
margin: $block-selected-child-margin;
padding: $block-selected-child-to-content;
}

.descendantOfSelectedLeaf {
margin: $block-selected-child-to-content;
}

.aztec_container {
flex: 1;
}
Expand Down Expand Up @@ -134,6 +59,28 @@
}

.neutralToolbar {
margin-left: -$block-edge-to-content;
margin-right: -$block-edge-to-content;
margin-left: - 14;
margin-right: - 14;
}

.solidBorder {
position: absolute;
top: -12;
bottom: 0;
left: -12;
right: -12;
border-width: $block-selected-border-width;
border-radius: 4px;
border-style: solid;
}

.dashedBorder {
position: absolute;
top: -6;
bottom: -6;
left: -6;
right: -6;
border-width: $block-selected-border-width;
border-radius: 2px;
border-style: dashed;
}
jbinda marked this conversation as resolved.
Show resolved Hide resolved
Loading